Update css

Author: jdevdevdev

.github/workflows/deploy.yml

@@ -73,10 +73,10 @@ jobs:
           path: |
             .next/cache
           # Generate a new cache whenever packages or source files change.
-          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
+          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock', '**/pnpm-lock.yaml') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
           # If source files changed but packages didn't, rebuild from a prior cache.
           restore-keys: |
-            ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
+            ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock', '**/pnpm-lock.yaml') }}-
       - name: Install dependencies
         run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
       - name: Build with Next.js

src/app/waffle/page.module.css

@@ -8,17 +8,17 @@
   margin: 3rem 1rem 1rem;
 }
 
-.waffleInput {
+.waffleInputContainer {
   display: grid;
   justify-content: center;
-  label {
-    display: grid;
-    justify-content: center;
-    padding-bottom: 0.5rem;
-  }
-  input {
-    margin-bottom: 1rem;
-  }
+}
+.waffleInputLabel {
+  display: grid;
+  justify-content: center;
+  padding-bottom: 0.5rem;
+}
+.waffleInput {
+  margin-bottom: 1rem;
 }
 
 .cell {
@@ -38,10 +38,10 @@
 .steps {
   max-width: 20em;
   display: grid;
-  div {
-    display: grid;
-    justify-content: center;
-  }
+}
+.step {
+  display: grid;
+  justify-content: center;
 }
 .steps .selected {
   background-color: #d17724;
@@ -67,8 +67,9 @@
   flex-direction: row;
   gap: 1rem;
   width: 19rem;
-  button {
-    flex: auto;
-    height: 5rem;
-  }
+
 }
+.nextprevbutton {
+  flex: auto;
+  height: 5rem;
+}

src/app/waffle/page.tsx

@@ -157,12 +157,16 @@ export default function Waffle() {
   return (
     <div className={styles.page}>
       <main className={styles.main}>
-        <div className={styles.waffleInput}>
-          <label htmlFor="puzzleInput">
+        <div className={styles.waffleInputContainer}>
+          <label
+            className={styles.waffleInputLabel}
+            htmlFor="puzzleInput"
+          >
             Puzzle
           </label>
           <input
             id="puzzleInput"
+            className={styles.waffleInput}
             value={puzzle}
             onChange={e => {
               setPuzzle(e.target.value);
@@ -179,11 +183,15 @@ export default function Waffle() {
             }}
           >
           </input>
-          <label htmlFor="solutionInput">
+          <label
+            className={styles.waffleInputLabel}
+            htmlFor="solutionInput"
+          >
             Solution
           </label>
           <input
             id="solutionInput"
+            className={styles.waffleInput}
             value={solution}
             onChange={e => {
               setSolution(e.target.value)
@@ -203,6 +211,7 @@ export default function Waffle() {
         <div className={styles.buttonBox}>
           <button
             disabled={cycleIndex <= 0}
+            className={styles.nextprevbutton}
             onClick={() => {
               prev();
             }}
@@ -211,6 +220,7 @@ export default function Waffle() {
           </button>
           <button
             disabled={cycleIndex >= cycleSteps.length - 1}
+            className={styles.nextprevbutton}
             onClick={() => {
               next();
             }}
@@ -225,7 +235,7 @@ export default function Waffle() {
               (item: number[], index: number) =>
                 <div
                   key={`step-${index}`}
-                  className={index === cycleIndex ? styles.selected : ''}
+                  className={`${index === cycleIndex ? styles.selected : ''} ${styles.step}`}
                 >
                   {`${gridCycleMapping[item[0]]} - ${gridCycleMapping[item[1]]}`}
                 </div>