add style inline for the button component and theme colors

front/src/components/Button.tsx

@@ -7,6 +7,28 @@ interface ButtonProps {
 
 export default function Button({ onClick, children }: ButtonProps) {
     return (
-        <button onClick={onClick} className="ni-button" role="button">{children}</button>
+        <button style={{
+            backgroundColor: 'var(--color-lightblue)',
+            borderRadius: '8px',
+            borderWidth: '0',
+            color: 'var(--color-darkblue)',
+            cursor: 'pointer',
+            display: 'inline-block',
+            fontFamily: '"Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif',
+            fontSize: '14px',
+            fontWeight: '500',
+            lineHeight: '20px',
+            listStyle: 'none',
+            margin: '0',
+            padding: '10px 12px',
+            textAlign: 'center',
+            transition: 'all 200ms',
+            verticalAlign: 'baseline',
+            whiteSpace: 'nowrap',
+            userSelect: 'none',
+            WebkitUserSelect: 'none',
+            touchAction: 'manipulation',
+        }} onClick={onClick} className="ni-button" role="button">{children}</button>
     )
 }
+

front/src/index.css

@@ -0,0 +1,7 @@
+/* Define theme colors */
+:root {
+  --color-verydarkblue: #00204a;
+  --color-darkblue: #005792;
+  --color-lightblue: #00bbf0;
+  --color-yellow: #fdb44b;
+}

front/src/main.tsx

@@ -2,7 +2,7 @@ import { BrowserRouter, Route, Routes } from "react-router";
 import { createRoot } from 'react-dom/client'
 import MainPage from "./pages/MainPage.tsx";
 import GamePage from "./pages/GamePage.tsx";
-
+import './index.css'
 
 createRoot(document.getElementById('root')!).render(
   <BrowserRouter>