From a081607be1b30100389ce9e2648b13be3d70502f Mon Sep 17 00:00:00 2001
From: Andreas Taranetz <57600104+holistic-developer@users.noreply.github.com>
Date: Wed, 8 May 2024 17:29:35 +0000
Subject: [PATCH] Fix styles

---
 src/Game.tsx  | 22 +++++++++++-----------
 src/index.css |  3 ++-
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/Game.tsx b/src/Game.tsx
index 698e7ba..dc78808 100644
--- 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
index c4ca920..67ac8bb 100644
--- 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 {