chore: change position of buttons and change notes styling (#13)

TN1ck · Aug 25, 2024 · 20cb3e6 · 20cb3e6
1 parent 44c022d
commit 20cb3e6
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 10 deletions.
diff --git a/docs/screenshot-app-2024-08-25.png b/docs/screenshot-app-2024-08-25.png
diff --git a/src/components/pages/Game/GameControls/GameControlActions.tsx b/src/components/pages/Game/GameControls/GameControlActions.tsx
@@ -57,26 +57,31 @@ class SudokuMenuControls extends React.Component<PropsFromRedux> {
     return (
       <div className="mt-4 grid w-full grid-cols-4 gap-2">
         <ControlContainer>
-          <Button
-            onClick={() => (this.props.notesMode ? this.props.deactivateNotesMode() : this.props.activateNotesMode())}
-            className={clsx("w-full", {
-              "bg-teal-700 text-white": !this.props.notesMode,
-              "bg-sky-700 text-white": this.props.notesMode,
-            })}
-          >{`${this.props.notesMode ? "Notes ON" : "Notes OFF"}`}</Button>
+          <ConnectedUndoButton />
         </ControlContainer>
         <ControlContainer>
           <Button className="w-full" onClick={() => this.props.clearCell(this.props.activeCell!)}>
             {"Erase"}
           </Button>
         </ControlContainer>
         <ControlContainer>
-          <Button className="w-full" onClick={() => this.props.getHint(this.props.activeCell!)}>
-            {"Hint"}
+          <Button
+            onClick={() => (this.props.notesMode ? this.props.deactivateNotesMode() : this.props.activateNotesMode())}
+            className={clsx("w-full relative")}
+          >
+            <div
+              className={clsx("absolute -bottom-4 left-1/2 -translate-x-1/2 rounded-full px-2 text-sm md:text-base", {
+                "bg-teal-700 text-white": !this.props.notesMode,
+                "bg-sky-700 text-white": this.props.notesMode,
+              })}
+            >{`${this.props.notesMode ? "ON" : "OFF"}`}</div>
+            <div>{"Notes"}</div>
           </Button>
         </ControlContainer>
         <ControlContainer>
-          <ConnectedUndoButton />
+          <Button className="w-full" onClick={() => this.props.getHint(this.props.activeCell!)}>
+            {"Hint"}
+          </Button>
         </ControlContainer>
       </div>
     );