button color changes

src/Home.tsx

@@ -139,7 +139,7 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
   }
 
   const renderNewGameButton = () => {
-    const newGame = <Button text={context.texts.NewGame} color="white" onClick={newGameClick} />
+    const newGame = <Button text={context.texts.NewGame} color="#005f73" onClick={newGameClick} />
     if (userKeyWhoLeave) {
       return newGame
     }
@@ -166,11 +166,12 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
         position: "absolute",
         bottom: "0px",
         left: "0px",
-        padding: "15px 15px 5px 5px",
+        padding: "15px ",
         borderTopRightRadius: "1vw",
         minWidth: "10vw",
         minHeight: "1vw",
-        background: "grey"
+        background: "#2F2504",
+        color : "white",
       }}>
         {connectionStateText()}
       </div>}
@@ -186,7 +187,7 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
       <h1 style={{ margin: "10px 0px" }}>{context.texts.Mancala}</h1>
       <div>
         {renderNewGameButton()}
-        {game && !userKeyWhoLeave && !crashMessage && < Button color="white" text={context.texts.Leave} onClick={leaveGame} />}
+        {game && !userKeyWhoLeave && !crashMessage && < Button color="#005f73" text={context.texts.Leave} onClick={leaveGame} />}
       </div>
 
     </div>

src/components/Button.tsx

@@ -8,6 +8,7 @@ const Button: FunctionComponent<{ text: String,onClick: () => void,  color: stri
             onClick={onClick}
             style={{
                 background: color,
+                color : "white",
                 margin: "5px",
                 padding: "10px",
                 border : "none",