From 0b090f4d30075fb0809ac8ae5807f148877d7b69 Mon Sep 17 00:00:00 2001
From: moustillon <aryan.bhotey@epitech.eu>
Date: Wed, 8 Jul 2026 11:15:08 +0200
Subject: [PATCH] feat: update UI colors to use var(--epi-blue) for consistency
 across components

---
 .../src/components/admin/AdminSidebar.tsx     |  4 +--
 .../src/components/admin/AdminSubjectsTab.tsx |  6 ++--
 frontend/src/components/admin/EditModal.tsx   |  2 +-
 .../src/components/admin/PasswordGate.tsx     |  2 +-
 frontend/src/components/admin/SubjectForm.tsx |  4 +--
 .../src/components/admin/WhitelistTab.tsx     |  2 +-
 frontend/src/components/layout/Layout.tsx     |  6 +++-
 frontend/src/components/layout/Navbar.tsx     |  2 +-
 frontend/src/components/layout/Sidebar.tsx    |  3 +-
 .../src/components/manta/MantaSidebar.tsx     |  4 +--
 frontend/src/components/manta/ProposeTab.tsx  |  4 +--
 frontend/src/index.css                        |  1 +
 frontend/src/pages/ResourcesPage.tsx          | 30 +++++++++----------
 13 files changed, 36 insertions(+), 34 deletions(-)

diff --git a/frontend/src/components/admin/AdminSidebar.tsx b/frontend/src/components/admin/AdminSidebar.tsx
index 13a8d62..fbd826b 100644
--- a/frontend/src/components/admin/AdminSidebar.tsx
+++ b/frontend/src/components/admin/AdminSidebar.tsx
@@ -35,9 +35,9 @@ export function AdminSidebar({ activeTab, onNavigate, onLogout }: {
             onClick={() => onNavigate(id)}
             style={{
               display: "flex", alignItems: "center", gap: 10,
-              background: activeTab === id ? "rgba(128,157,253,0.1)" : "none",
+              background: activeTab === id ? "var(--epi-blue)" : "none",
               border: "none",
-              color: activeTab === id ? "var(--epi-accent)" : "var(--epi-muted)",
+              color: activeTab === id ? "#fff" : "var(--epi-muted)",
               fontSize: 13, fontWeight: activeTab === id ? 700 : 500,
               padding: "9px 12px", borderRadius: 8,
               cursor: "pointer", transition: "background 0.15s, color 0.15s",
diff --git a/frontend/src/components/admin/AdminSubjectsTab.tsx b/frontend/src/components/admin/AdminSubjectsTab.tsx
index 21c1c30..af6a87f 100644
--- a/frontend/src/components/admin/AdminSubjectsTab.tsx
+++ b/frontend/src/components/admin/AdminSubjectsTab.tsx
@@ -466,10 +466,10 @@ export function AdminSubjectsTab({ token, onAddSubject }: {
           title="Ajouter"
           style={{
             width: 48, height: 48, borderRadius: "50%",
-            background: "var(--epi-accent)", border: "none",
+            background: "var(--epi-blue)", border: "none",
             color: "#fff", cursor: "pointer",
             display: "flex", alignItems: "center", justifyContent: "center",
-            boxShadow: "0 4px 14px rgba(128,157,253,0.35)",
+            boxShadow: "0 4px 14px rgba(1,58,251,0.4)",
             transition: "transform 0.2s",
             transform: fabOpen ? "rotate(45deg)" : "rotate(0)",
           }}
@@ -528,7 +528,7 @@ export function AdminSubjectsTab({ token, onAddSubject }: {
                     }}>Annuler</button>
                   <button type="submit" disabled={folderLoading || !folderName.trim()}
                     style={{
-                      background: folderName.trim() ? "var(--epi-accent)" : "var(--epi-bg)",
+                      background: folderName.trim() ? "var(--epi-blue)" : "var(--epi-bg)",
                       border: "1px solid var(--epi-border)", color: folderName.trim() ? "#fff" : "var(--epi-ghost)",
                       fontSize: 13, fontWeight: 700, padding: "8px 18px", borderRadius: 8,
                       cursor: folderName.trim() && !folderLoading ? "pointer" : "not-allowed",
diff --git a/frontend/src/components/admin/EditModal.tsx b/frontend/src/components/admin/EditModal.tsx
index 9d5a842..5b53354 100644
--- a/frontend/src/components/admin/EditModal.tsx
+++ b/frontend/src/components/admin/EditModal.tsx
@@ -231,7 +231,7 @@ export function EditModal({ subject, token, folders, onClose, onSaved }: {
                 cursor: "pointer", fontFamily: "inherit",
               }}>Annuler</button>
               <button type="submit" disabled={loading || !name} style={{
-                background: name ? "var(--epi-accent)" : "var(--epi-bg)",
+                background: name ? "var(--epi-blue)" : "var(--epi-bg)",
                 border: "1px solid var(--epi-border)", color: name ? "#fff" : "var(--epi-ghost)",
                 fontSize: 13, fontWeight: 700, padding: "8px 18px", borderRadius: 8,
                 cursor: name && !loading ? "pointer" : "not-allowed", transition: "0.2s", fontFamily: "inherit",
diff --git a/frontend/src/components/admin/PasswordGate.tsx b/frontend/src/components/admin/PasswordGate.tsx
index d71af72..f605147 100644
--- a/frontend/src/components/admin/PasswordGate.tsx
+++ b/frontend/src/components/admin/PasswordGate.tsx
@@ -87,7 +87,7 @@ export function PasswordGate({ onUnlock }: { onUnlock: (token: string) => void }
                   disabled={loading || !password}
                   style={{
                     width: "100%",
-                    background: password ? "var(--epi-accent)" : "var(--epi-bg)",
+                    background: password ? "var(--epi-blue)" : "var(--epi-bg)",
                     border: "1px solid var(--epi-border)",
                     color: password ? "#fff" : "var(--epi-ghost)",
                     fontSize: 14, fontWeight: 700,
diff --git a/frontend/src/components/admin/SubjectForm.tsx b/frontend/src/components/admin/SubjectForm.tsx
index 2afa276..f9d9289 100644
--- a/frontend/src/components/admin/SubjectForm.tsx
+++ b/frontend/src/components/admin/SubjectForm.tsx
@@ -97,7 +97,7 @@ export function SubjectForm({ token, defaultFolderId = null }: {
         onClick={reset}
         style={{
           display: "flex", alignItems: "center", gap: 6,
-          background: "var(--epi-accent)", color: "#fff",
+          background: "var(--epi-blue)", color: "#fff",
           border: "none", fontSize: 14, fontWeight: 700,
           padding: "10px 24px", borderRadius: 8,
           cursor: "pointer", fontFamily: "inherit",
@@ -303,7 +303,7 @@ export function SubjectForm({ token, defaultFolderId = null }: {
               type="submit"
               disabled={loading || !name}
               style={{
-                background: name ? "var(--epi-accent)" : "var(--epi-bg)",
+                background: name ? "var(--epi-blue)" : "var(--epi-bg)",
                 border: "1px solid var(--epi-border)",
                 color: name ? "#fff" : "var(--epi-ghost)",
                 fontSize: 14, fontWeight: 700,
diff --git a/frontend/src/components/admin/WhitelistTab.tsx b/frontend/src/components/admin/WhitelistTab.tsx
index ab69075..42bb066 100644
--- a/frontend/src/components/admin/WhitelistTab.tsx
+++ b/frontend/src/components/admin/WhitelistTab.tsx
@@ -71,7 +71,7 @@ export function WhitelistTab({ token }: { token: string }) {
             ))}
             <button onClick={add} disabled={loading || !email.trim()} style={{
               marginLeft: "auto", padding: "6px 16px", borderRadius: 8, fontSize: 12,
-              fontWeight: 600, cursor: "pointer", background: "var(--epi-accent)",
+              fontWeight: 600, cursor: "pointer", background: "var(--epi-blue)",
               color: "#fff", border: "none", opacity: loading || !email.trim() ? 0.5 : 1,
             }}>
               <Group gap={6}><IconPlus size={12} />{loading ? "Ajout…" : "Ajouter"}</Group>
diff --git a/frontend/src/components/layout/Layout.tsx b/frontend/src/components/layout/Layout.tsx
index 9cc88f9..b183df0 100644
--- a/frontend/src/components/layout/Layout.tsx
+++ b/frontend/src/components/layout/Layout.tsx
@@ -21,7 +21,11 @@ export function Layout({ children, currentPage, onNavigate }: LayoutProps) {
         <Navbar />
       </AppShell.Header>
 
-      <AppShell.Navbar style={{ border: "none", background: "var(--epi-bg)" }}>
+      <AppShell.Navbar style={{
+        border: "none",
+        borderRight: "1px solid var(--epi-border)",
+        background: "var(--epi-panel)",
+      }}>
         <Sidebar currentPage={currentPage} onNavigate={onNavigate} />
       </AppShell.Navbar>
 
diff --git a/frontend/src/components/layout/Navbar.tsx b/frontend/src/components/layout/Navbar.tsx
index f327217..6d8d897 100644
--- a/frontend/src/components/layout/Navbar.tsx
+++ b/frontend/src/components/layout/Navbar.tsx
@@ -26,7 +26,7 @@ export function Navbar() {
       style={{
         height: 48,
         borderBottom: "1px solid var(--epi-border)",
-        background: "var(--epi-bg)",
+        background: "var(--epi-panel)",
         flexShrink: 0,
       }}
     >
diff --git a/frontend/src/components/layout/Sidebar.tsx b/frontend/src/components/layout/Sidebar.tsx
index 50381c1..3af0d12 100644
--- a/frontend/src/components/layout/Sidebar.tsx
+++ b/frontend/src/components/layout/Sidebar.tsx
@@ -20,8 +20,6 @@ export function Sidebar({ currentPage, onNavigate }: SidebarProps) {
       style={{
         width: 192,
         flexShrink: 0,
-        borderRight: "1px solid var(--epi-border)",
-        background: "var(--epi-bg)",
         paddingTop: 20,
       }}
     >
@@ -44,6 +42,7 @@ export function Sidebar({ currentPage, onNavigate }: SidebarProps) {
           active={currentPage === page}
           onClick={() => onNavigate(page)}
           color="epitech"
+          style={currentPage === page ? { background: "var(--epi-blue)", color: "#fff" } : undefined}
         />
       ))}
     </Stack>
diff --git a/frontend/src/components/manta/MantaSidebar.tsx b/frontend/src/components/manta/MantaSidebar.tsx
index cb2b51f..86b65b5 100644
--- a/frontend/src/components/manta/MantaSidebar.tsx
+++ b/frontend/src/components/manta/MantaSidebar.tsx
@@ -34,9 +34,9 @@ export function MantaSidebar({ activeTab, onNavigate, onLogout }: {
             onClick={() => onNavigate(id)}
             style={{
               display: "flex", alignItems: "center", gap: 10,
-              background: activeTab === id ? "rgba(128,157,253,0.1)" : "none",
+              background: activeTab === id ? "var(--epi-blue)" : "none",
               border: "none",
-              color: activeTab === id ? "var(--epi-accent)" : "var(--epi-muted)",
+              color: activeTab === id ? "#fff" : "var(--epi-muted)",
               fontSize: 13, fontWeight: activeTab === id ? 700 : 500,
               padding: "9px 12px", borderRadius: 8,
               cursor: "pointer", transition: "background 0.15s, color 0.15s",
diff --git a/frontend/src/components/manta/ProposeTab.tsx b/frontend/src/components/manta/ProposeTab.tsx
index 4bfdb3c..34ce2cf 100644
--- a/frontend/src/components/manta/ProposeTab.tsx
+++ b/frontend/src/components/manta/ProposeTab.tsx
@@ -105,7 +105,7 @@ export function ProposeTab() {
           </Stack>
           <button onClick={reset} style={{
             display: "flex", alignItems: "center", gap: 6,
-            background: "var(--epi-accent)", color: "#fff",
+            background: "var(--epi-blue)", color: "#fff",
             border: "none", fontSize: 14, fontWeight: 700,
             padding: "10px 24px", borderRadius: 8,
             cursor: "pointer", fontFamily: "inherit",
@@ -259,7 +259,7 @@ export function ProposeTab() {
                   type="submit"
                   disabled={loading || !name}
                   style={{
-                    background: name ? "var(--epi-accent)" : "var(--epi-bg)",
+                    background: name ? "var(--epi-blue)" : "var(--epi-bg)",
                     border: "1px solid var(--epi-border)",
                     color: name ? "#fff" : "var(--epi-ghost)",
                     fontSize: 14, fontWeight: 700,
diff --git a/frontend/src/index.css b/frontend/src/index.css
index a9b2aee..5f44253 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -32,6 +32,7 @@ body {
 }
 
 :root {
+  --epi-blue:         #013afb;
   --epi-accent:       #809dfd;
   --epi-accent-dark:  #6b8afc;
   --epi-beginner:     #4ade80;
diff --git a/frontend/src/pages/ResourcesPage.tsx b/frontend/src/pages/ResourcesPage.tsx
index 764ca54..cbba268 100644
--- a/frontend/src/pages/ResourcesPage.tsx
+++ b/frontend/src/pages/ResourcesPage.tsx
@@ -80,34 +80,32 @@ export function ResourcesPage() {
 
       <div style={{
         display: "flex", justifyContent: "space-between", alignItems: "center",
-        background: "var(--epi-surface)",
-        border: "1px solid var(--epi-border)",
-        borderLeft: "3px solid var(--epi-accent)",
+        background: "var(--epi-blue)",
         borderRadius: 10, padding: "20px 24px", gap: 20,
       }}>
         <Stack gap={6}>
-          <Text fw={700} size="lg" ff="heading">{session.title}</Text>
-          <Text size="sm" c="dimmed">{session.description}</Text>
+          <Text fw={700} size="lg" ff="heading" c="#fff">{session.title}</Text>
+          <Text size="sm" style={{ color: "rgba(255,255,255,0.8)" }}>{session.description}</Text>
         </Stack>
         <Stack gap={8} align="flex-end" style={{ flexShrink: 0 }}>
           <Group gap="xs">
-            <IconCalendar size={13} color="var(--epi-accent)" />
-            <Text size="xs" c="dimmed">{session.date}</Text>
+            <IconCalendar size={13} color="#fff" />
+            <Text size="xs" style={{ color: "rgba(255,255,255,0.9)" }}>{session.date}</Text>
           </Group>
           <Group gap="xs">
-            <IconMapPin size={13} color="var(--epi-accent)" />
-            <Text size="xs" c="dimmed">{session.location}</Text>
+            <IconMapPin size={13} color="#fff" />
+            <Text size="xs" style={{ color: "rgba(255,255,255,0.9)" }}>{session.location}</Text>
           </Group>
           <Group gap="md">
             <Group gap={6}>
-              <IconBook size={11} color="var(--epi-ghost)" />
-              <Text size="xs" style={{ color: "var(--epi-ghost)" }}>
+              <IconBook size={11} color="rgba(255,255,255,0.75)" />
+              <Text size="xs" style={{ color: "rgba(255,255,255,0.75)" }}>
                 {subjects.length} sujet{subjects.length > 1 ? "s" : ""}
               </Text>
             </Group>
             <Group gap={6}>
-              <IconFile size={11} color="var(--epi-ghost)" />
-              <Text size="xs" style={{ color: "var(--epi-ghost)" }}>
+              <IconFile size={11} color="rgba(255,255,255,0.75)" />
+              <Text size="xs" style={{ color: "rgba(255,255,255,0.75)" }}>
                 {totalFiles} fichier{totalFiles > 1 ? "s" : ""}
               </Text>
             </Group>
@@ -210,7 +208,7 @@ export function ResourcesPage() {
             const color = f === "Débutant" ? "var(--epi-beginner)"
               : f === "Intermédiaire" ? "var(--epi-intermediate)"
               : f === "Avancé" ? "var(--epi-advanced)"
-              : "var(--epi-accent)";
+              : "var(--epi-blue)";
             return (
               <button
                 key={f}
@@ -218,7 +216,7 @@ export function ResourcesPage() {
                 style={{
                   background: active ? color : "none",
                   border: `1px solid ${active ? color : "var(--epi-border)"}`,
-                  color: active ? "#111" : "var(--epi-muted)",
+                  color: active ? (f === "Tous" ? "#fff" : "#111") : "var(--epi-muted)",
                   fontSize: 12, fontWeight: 600,
                   padding: "5px 12px", borderRadius: 20,
                   cursor: "pointer", transition: "0.2s", fontFamily: "inherit",
@@ -279,7 +277,7 @@ export function ResourcesPage() {
                 key={v}
                 onClick={() => setViewMode(v)}
                 style={{
-                  background: viewMode === v ? "var(--epi-accent)" : "none",
+                  background: viewMode === v ? "var(--epi-blue)" : "none",
                   border: "none",
                   color: viewMode === v ? "#fff" : "var(--epi-ghost)",
                   padding: "6px 12px", cursor: "pointer", fontSize: 13, transition: "0.2s",