Fix styles

holistic-developer · May 8, 2024 · a081607 · a081607
1 parent 760e044
commit a081607
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 12 deletions.
diff --git a/src/Game.tsx b/src/Game.tsx
@@ -31,20 +31,20 @@ export const Game: React.FC = () => {
           <section>
             {rounds} Beispiele
             <span style={{ display: 'flex', gap: '1vw', justifyContent: 'center' }}>
-              <button onClick={() => setRounds((prev) => prev + 1)}>➕</button>
-              <button onClick={() => setRounds((prev) => prev - 1)} disabled={rounds <= 2}>➖</button>
+              <button onClick={() => setRounds((prev) => prev + 1)}>+</button>
+              <button onClick={() => setRounds((prev) => prev - 1)} disabled={rounds <= 2}>-</button>
             </span>
           </section>
           <section className="game-modes">
-            <button onClick={startGame(GameMode.ADDITION_10)}>➕ bis 10</button>
-            <button onClick={startGame(GameMode.ADDITION_20)}>➕ bis 20</button>
-            <button onClick={startGame(GameMode.ADDITION_100)}>➕ bis 100</button>
-            <button onClick={startGame(GameMode.SUBTRACTION_10)}>➖ bis 10</button>
-            <button onClick={startGame(GameMode.SUBTRACTION_20)}>➖ bis 20</button>
-            <button onClick={startGame(GameMode.SUBTRACTION_100)}>➖ bis 100</button>
-            <button onClick={startGame(GameMode.ADDITION_SUBTRACTION_10)}>➕&nbsp;/&nbsp;➖&nbsp;bis&nbsp;10</button>
-            <button onClick={startGame(GameMode.ADDITION_SUBTRACTION_20)}>➕&nbsp;/&nbsp;➖&nbsp;bis&nbsp;20</button>
-            <button onClick={startGame(GameMode.ADDITION_SUBTRACTION_100)}>➕&nbsp;/&nbsp;➖&nbsp;bis&nbsp;100</button>
+            <button onClick={startGame(GameMode.ADDITION_10)}>+ bis 10</button>
+            <button onClick={startGame(GameMode.ADDITION_20)}>+ bis 20</button>
+            <button onClick={startGame(GameMode.ADDITION_100)}>+ bis 100</button>
+            <button onClick={startGame(GameMode.SUBTRACTION_10)}>- bis 10</button>
+            <button onClick={startGame(GameMode.SUBTRACTION_20)}>- bis 20</button>
+            <button onClick={startGame(GameMode.SUBTRACTION_100)}>- bis 100</button>
+            <button onClick={startGame(GameMode.ADDITION_SUBTRACTION_10)}>+&nbsp;/&nbsp;- bis&nbsp;10</button>
+            <button onClick={startGame(GameMode.ADDITION_SUBTRACTION_20)}>+&nbsp;/&nbsp;- bis&nbsp;20</button>
+            <button onClick={startGame(GameMode.ADDITION_SUBTRACTION_100)}>+&nbsp;/&nbsp;- bis&nbsp;100</button>
             <button style={{gridColumn: "span 3"}} onClick={startGame(GameMode.MULTIPLICATION_100)}>1×1 bis 100</button>
           </section>
         </>

diff --git a/src/index.css b/src/index.css
@@ -38,7 +38,8 @@ section {
 .game-modes {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
-    gap: 4vmin;
+    row-gap: 7vmin;
+    column-gap: 3vmin;
 }
 
 .game-modes>button {