From 6d7b97331a0e703fa23193033bf0fae08c9dc198 Mon Sep 17 00:00:00 2001
From: robertcrockett <robertwcrockett@hotmail.com>
Date: Sun, 6 Apr 2025 20:55:57 -0400
Subject: [PATCH] Dependency Patch Upgrades

---
 src/components/Cell.jsx | 15 ++-------------
 src/index.css           | 22 ++++++++++++++++++++++
 2 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/src/components/Cell.jsx b/src/components/Cell.jsx
index bead064..5af3fd8 100644
--- a/src/components/Cell.jsx
+++ b/src/components/Cell.jsx
@@ -1,5 +1,6 @@
 import React, { useCallback } from "react";
 import PropTypes from "prop-types";
+import "../styles/Cell.css";
 
 /**
  * Cell Component
@@ -15,12 +16,8 @@ function Cell({ cellStatus, cellValue, onClick }) {
 
   return (
     <button
-      className='cell'
+      className={`cell ${cellStatus(cellValue)}`}
       data-testid='cell'
-      style={{
-        width: "20%",
-        backgroundColor: colors[cellStatus(cellValue)],
-      }}
       onClick={handleClick}
       title={`Cell ${cellValue} is ${cellStatus(cellValue)}`}
     ></button>
@@ -35,11 +32,3 @@ Cell.propTypes = {
 
 // Export the Cell component
 export const MemoizedCell = React.memo(Cell);
-
-// Colors array representing the various states of the Cell
-const colors = {
-  unselected: "white",
-  blue: "lightblue",
-  correct: "lightgreen",
-  incorrect: "lightcoral",
-};
diff --git a/src/index.css b/src/index.css
index 4a1df4d..f1bfef7 100644
--- a/src/index.css
+++ b/src/index.css
@@ -11,3 +11,25 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+
+
+/* Cell component styles */
+.cell {
+  width: 20%;
+}
+
+.cell.unselected {
+  background-color: white;
+}
+
+.cell.blue {
+  background-color: lightblue;
+}
+
+.cell.correct {
+  background-color: lightgreen;
+}
+
+.cell.incorrect {
+  background-color: lightcoral;
+}