Fixed cell styling when in pencil mode (#236)

Author: xenobiasoft

src/frontend/Sudoku.React/src/components/CellInput.module.css

@@ -3,9 +3,22 @@
 }
 
 .cell {
+  background-color: #FAEBD7;
   position: relative;
 }
 
+.highlight {
+  background-color: #d8eef8 !important;
+}
+
+.selected {
+  background-color: #b8d8f0 !important;
+}
+
+.invalid {
+  background-color: #ffdddd !important;
+}
+
 .cell input,
 .cell label {
   align-items: center;

src/frontend/Sudoku.React/src/components/CellInput.tsx

@@ -59,7 +59,7 @@ export default function CellInput({
         value={cell.hasValue && cell.value !== null ? cell.value.toString() : ''}
         onClick={handleClick}
         onChange={() => {}}
-        style={cell.possibleValues.length > 0 && !cell.hasValue ? { opacity: 0 } : undefined}
+        style={cell.possibleValues.length > 0 && !cell.hasValue ? { backgroundColor: 'transparent' } : undefined}
       />
     </td>
   );