From 5c4ac78dee601d89213f2cfd63e4428a50af30ad Mon Sep 17 00:00:00 2001
From: = <teiva.tesson@etu.unicaen.fr>
Date: Thu, 5 Dec 2024 22:25:56 +0100
Subject: [PATCH] add style inline for the button component and theme colors

---
 front/src/components/Button.tsx | 24 +++++++++++++++++++++++-
 front/src/index.css             |  7 +++++++
 front/src/main.tsx              |  2 +-
 3 files changed, 31 insertions(+), 2 deletions(-)
 create mode 100644 front/src/index.css

diff --git a/front/src/components/Button.tsx b/front/src/components/Button.tsx
index fa3fc54..05c98b8 100644
--- a/front/src/components/Button.tsx
+++ b/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>
     )
 }
+
diff --git a/front/src/index.css b/front/src/index.css
new file mode 100644
index 0000000..790438d
--- /dev/null
+++ b/front/src/index.css
@@ -0,0 +1,7 @@
+/* Define theme colors */
+:root {
+  --color-verydarkblue: #00204a;
+  --color-darkblue: #005792;
+  --color-lightblue: #00bbf0;
+  --color-yellow: #fdb44b;
+}
\ No newline at end of file
diff --git a/front/src/main.tsx b/front/src/main.tsx
index ce00332..f2884e0 100644
--- a/front/src/main.tsx
+++ b/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>