Fixed cell styling when in pencil mode#236
Conversation
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://gray-bush-02024e71e-236.westus2.7.azurestaticapps.net |
There was a problem hiding this comment.
Pull request overview
Fixes Sudoku cell styling regressions when a cell shows “pencil” (possible) values, ensuring the cell retains its background and state styling instead of appearing unstyled/white.
Changes:
- Adjusted the cell input’s conditional inline styling when
possibleValuesare present. - Added default
<td>background styling for cells, plus state backgrounds for highlight/selected/invalid.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
src/frontend/Sudoku.React/src/components/CellInput.tsx |
Updates conditional styling of the input when pencil values are displayed. |
src/frontend/Sudoku.React/src/components/CellInput.module.css |
Adds default and state background colors at the cell (td) level to preserve styling in pencil mode. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| .highlight { | ||
| background-color: #d8eef8 !important; | ||
| } | ||
|
|
||
| .selected { | ||
| background-color: #b8d8f0 !important; | ||
| } | ||
|
|
||
| .invalid { | ||
| background-color: #ffdddd !important; | ||
| } |
There was a problem hiding this comment.
The new .highlight, .selected, and .invalid rules set background-color with !important, but they already come after .cell in the same CSS module and should win via normal cascade. Dropping !important here will make future overrides easier (and avoids needing even higher-specificity rules later).
| .cell { | ||
| background-color: #FAEBD7; | ||
| position: relative; | ||
| } |
There was a problem hiding this comment.
#FAEBD7 is now duplicated as the background for both .cell and .cell input, .cell label. To reduce the risk of these drifting out of sync, consider defining a single source (e.g., a CSS variable on .cell and using background-color: inherit for the input/label default state).
| onClick={handleClick} | ||
| onChange={() => {}} | ||
| style={cell.possibleValues.length > 0 && !cell.hasValue ? { opacity: 0 } : undefined} | ||
| style={cell.possibleValues.length > 0 && !cell.hasValue ? { backgroundColor: 'transparent' } : undefined} |
There was a problem hiding this comment.
The inline backgroundColor: 'transparent' here will be overridden in the common “editing” case because the cell is usually also .selected (and .selected input sets background-color: ... !important in the CSS module). If the goal is to keep the input transparent while pencil values are shown/edited, consider toggling a dedicated CSS class (e.g., pencilActive) and applying background-color: transparent !important for pencilActive input, or remove the !important background rules and rely on the <td> background instead.
| onClick={handleClick} | ||
| onChange={() => {}} | ||
| style={cell.possibleValues.length > 0 && !cell.hasValue ? { opacity: 0 } : undefined} | ||
| style={cell.possibleValues.length > 0 && !cell.hasValue ? { backgroundColor: 'transparent' } : undefined} |
There was a problem hiding this comment.
This change introduces new UI behavior (special background handling when pencil values are present) but there’s no test coverage guarding against regression. Consider adding a CellInput test that renders a cell with possibleValues and asserts the input has the expected style/class in that state (and potentially when isSelected is true).
Description
When entering possible values in a cell (pencil mode), the cell lost all styling and turned white with no cell border. Added styling to the cell background in pencil mode.
Type of Change
Changes Made
Testing
Screenshots (if applicable)
Checklist