GA-109 dark and light themes

frontend/src/App.css

@@ -1,5 +1,6 @@
 .App {
   text-align: center;
+  height: 100%;
 }
 
 .App-logo {

frontend/src/App.js

@@ -5,11 +5,12 @@ import 'bootstrap-icons/font/bootstrap-icons.css';
 import MainPage from "./main_page/MainPage";
 
 function App() {
+    const theme = 'light'; ///TODO use a toggle button and update either here or within pages
 
   return (
     <div className="App">
         <Routes>
-            <Route path="/inbox" element={<MainPage/>} />
+            <Route path="/inbox" element={<MainPage theme={theme} />} />
         </Routes>
     </div>
   );

frontend/src/index.css

@@ -11,3 +11,11 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+html,
+body,
+#root {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}

frontend/src/main_page/MainPage.css

@@ -1,62 +1,115 @@
-/* FOR THE TOP MENU PLACEHOLDER */
-.custom-navbar {
+@import "../theme.css";
+
+/* ──── FOR THE TOP MENU PLACEHOLDER ───────────────────────────────── */
+.light-custom-navbar {
+    /* Stronger drop shadow for Material feel: */
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08);
     border-radius: 0;
     align-content: center;
     padding: 20px;
-    background-color: #f1f1f1;
+    background-color: var(--light-bg-mails);
 }
-
-/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
-.row.content {
-    height: 450px
+.dark-custom-navbar {
+    /* Stronger drop shadow for Material feel: */
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08);
+    border-radius: 0;
+    align-content: center;
+    padding: 20px;
+    color: white;
+    background-color: #13315C;
 }
-
 /* Set gray background color and 100% height */
-.custom-side-col .custom-sidenav {
+.light-custom-sidenav {
+    /* Stronger drop shadow for Material feel: */
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08);
     padding-top: 20px;
     margin: 0;
     width: 100%;
     height: 100%;
     align-content: center;
-    background-color: #f1f1f1;
+    background-color: var(--light-bg-mails);
+}
+/* Set gray background color and 100% height */
+.dark-custom-sidenav {
+    /* Stronger drop shadow for Material feel: */
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08);
+    padding-top: 20px;
+    margin: 0;
+    width: 100%;
+    height: 100%;
+    align-content: center;
+    color: white;
+    background-color: #13315C;
+}
+
+/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
+.row.content {
+    height: 450px
+}
+
+
+
+/* ─── LIGHT THEME ───────────────────────────────── */
+.light-main-page {
+    background-color: var(--light-bg-page);
+    height: 100%;
+    margin: 0;
+    padding: 1px;
 }
 
-/* ─── MAIL CONTAINER (glass effect) ───────────────────────────────── */
-.mail-container {
+/* MAIL CONTAINER (glass effect) */
+.light-mail-container {
     /* Override default card radius to be slightly larger: */
     border-radius: 0.75rem; /* 12px */
-
     /* Stronger drop shadow for Material feel: */
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12),
     0 1px 4px rgba(0, 0, 0, 0.08);
-
     /* Ensure the card’s background is pure white: */
-    background-color: #ffffff;
-
-    /* If your parent container is light gray, you can add a thin border:
-       border: 1px solid rgba(0, 0, 0, 0.05);
-    */
-}
+    background-color: var(--light-bg-mails);
 
-.mail-container {
     padding-top: 16px;
     padding-bottom: 16px;
     padding-left: 24px;
     padding-right: 24px;
 }
 
+/* ─── DARK THEME ───────────────────────────────── */
 
+.dark-main-page {
+    background-color: var(--dark-bg-page);
+    height: 100%;
+    margin: 0;
+    padding: 1px;
+}
 
+.dark-main-layout {
+    background-color: var(--dark-bg-unread-mail-row);
+    padding: 2px;
+    border-radius: 0.75rem; /* 12px */
+}
 
+/* MAIL CONTAINER (glass effect) */
+.dark-mail-container {
+    /* Override default card radius to be slightly larger: */
+    border-radius: 0.75rem; /* 12px */
+    /* Stronger drop shadow for Material feel: */
+    box-shadow: 0 4px 12px #252525,
+    0 1px 2px #555555;
+    /* Ensure the card’s background is pure white: */
+    background-color: var(--dark-bg-mails);
 
+    padding-top: 16px;
+    padding-bottom: 16px;
+    padding-left: 24px;
+    padding-right: 24px;
+}
+
+
+/*  ─── SHARED ─────────────────────────────────  */
 /* On small screens, set height to 'auto' for sidenav and grid */
 @media screen and (max-width: 767px) {
-    .sidenav {
-        height: auto;
-        padding: 15px;
-    }
 
     .row.content {
         height: auto;
     }
-}
+}

frontend/src/main_page/MainPage.js

@@ -5,14 +5,15 @@ import MailRow from "./mail_row/MailRow";
 import ToolBar from "./toolbar/ToolBar";
 import {useMailToolbarHandlers} from "./toolbar/useMailToolbarHandlers";
 
+
 /// TODO replace the placeholders with the real menus and real data
 // Placeholder for top menu
-const TopMenuPlaceholder = () => (
-    <div className="custom-navbar">Top menu</div>
+const TopMenuPlaceholder = ({theme}) => (
+    <div className={`${theme}-custom-navbar`}>Top menu</div>
 );
 // Placeholder for side menu
-const SideMenuPlaceholder = () => (
-    <div className="custom-sidenav">Side menu</div>
+const SideMenuPlaceholder = ({theme}) => (
+    <div className={`${theme}-custom-sidenav`}>Side menu</div>
 );
 
 const DUMMY_EMAILS = [
@@ -30,19 +31,27 @@ const DUMMY_EMAILS = [
         subject: "Meeting reminder",
         snippet: "Don’t forget the team meeting at 9AM tomorrow.",
         date: "2025/06/03",
-        is_read: false
+        is_read: true
     },
     {
         id: 3,
         sender: "newsletter@site.com",
         subject: "Your daily digest",
         snippet: "Top tech news today: React 21.0 is out...",
         date: "2025/06/02",
-        is_read: true
+        is_read: false
     },
+    {
+        id: 4,
+        sender: "bob@work.org",
+        subject: "blublublu",
+        snippet: "Don’t forget....",
+        date: "2025/06/03",
+        is_read: true
+    }
 ];
 
-const MainPage = () => {
+const MainPage = ({theme}) => {
     const allEmailIds = DUMMY_EMAILS.map((mail) => mail.id);
 
 
@@ -61,23 +70,19 @@ const MainPage = () => {
         });
     };
 
+
     return (
-        <div className="container-fluid p-3">
-            {/* ---- TOP MENU ---- */}
-            <div className="row mb-3">
-                <div className="col-12">
-                    <TopMenuPlaceholder/>
-                </div>
-            </div>
+        <div className={`container-fluid p-3 ${theme}-main-page`}>
+            {/* ---- TODO TOP MENU ---- */}
+            <div className="row mb-3"><div className="col-12"><TopMenuPlaceholder theme={theme}/></div></div>
             {/* ---- MAIN LAYOUT ---- */}
             <div className="row">
-                {/* ---- SIDE MENU ---- */}
-                <div className="col-md-3 mb-3 custom-side-col">
-                    <SideMenuPlaceholder/>
-                </div>
+                {/* ---- TODO SIDE MENU ---- */}
+                <div className="col-md-3 mb-3 custom-side-col"><SideMenuPlaceholder theme={theme}/></div>
                 {/* ---- MAIL LIST CONTAINER ---- */}
                 <div className="col-md-9 mb-3">
-                    <div className="mail-container">
+                    <div className={`${theme}-mail-container`}
+                         style={{backgroundColor: `var(--${theme}-bg-unread-mail-row)`}}>
                         {/* ---- TOOLBAR ---- */}
                         <ToolBar
                             allSelected={allSelected}
@@ -88,10 +93,10 @@ const MainPage = () => {
                             handleMarkAsRead={handlers.handleMarkAsRead}
                             handleMarkSpam={handlers.handleMarkSpam}
                         />
-
                         {/* ---- ACTUAL MAIL ROWS ---- */}
                         {DUMMY_EMAILS.map((email) => (
                             <MailRow
+                                theme={theme}
                                 key={email.id}
                                 id={email.id}
                                 sender={email.sender}

frontend/src/main_page/mail_row/MailRow.css

@@ -1,8 +1,14 @@
-.mail-row {
-    background-color: rgba(255, 255, 255, 0.2); /* slight white tint */
-    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+@import "../../theme.css";
+
+/* ─── LIGHT THEME ───────────────────────────────── */
+.light-mail-row {
+    text-align: left;
+    background-color: var(--light-bg-mail-row);
     cursor: pointer;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+    border-bottom: 1px solid var(--light-strong-border-mail-row);
+    border-top: 1px solid var(--light-strong-border-mail-row);
+    border-left: 1px solid var(--light-strong-border-mail-row);
+    border-right: 1px solid var(--light-strong-border-mail-row);
     padding: 0.75rem 1.5rem;
     transition:
             background-color 0.2s ease,      /* fade background */
@@ -11,35 +17,58 @@
 }
 
 /* Give unread a light-gray background */
-.mail-row.unread {
-    background-color: #efefef;
-}
-
-/* If mail is unread, make subject/body bold (or a slightly different background) */
-.mail-row.unread .subject-col,
-.mail-row.unread .body-col {
+.light-mail-row.unread {
+    background-color: var(--light-bg-unread-mail-row);
     font-weight: 600;
 }
 
 /* If already read, normal text */
-.mail-row.read .subject-col,
-.mail-row.read .body-col {
+.light-mail-row.read {
+    background-color: var(--light-bg-read-mail-row);
     font-weight: 400;
 }
 
 /* On hover, lift the row and slide it in from the left */
-.mail-row:hover {
-    background-color: #f1f3f5;          /* very light gray */
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+.light-mail-row:hover {
+    background-color: var(--light-hover-bg-mail-row);
+    box-shadow: 0 2px 8px var(--light-shadow-bg-mail-row);
     transform: translateX(4px);         /* shift 4px to the right */
     border-left: 4px solid #0d6efd;     /* Bootstrap’s primary blue */
     padding-left: 1.25rem;              /* account for the new left border */
 }
 
-/* Ensure columns of text aligned to the left like in Gmail */
-.mail-row .col,
-.mail-row .col-auto {
+
+/* ─── DARK THEME ───────────────────────────────── */
+.dark-mail-row {
     text-align: left;
+    background-color: var(--dark-bg-read-mail-row);
+    cursor: pointer;
+    border-bottom: 1px solid var(--dark-strong-border-mail-row);
+    border-top: 1px solid var(--dark-strong-border-mail-row);
+    border-right: 1px solid var(--dark-strong-border-mail-row);
+    border-left: 1px solid var(--dark-strong-border-mail-row);
+    padding: 0.75rem 1.5rem;
+    transition:
+            background-color 0.2s ease,      /* fade background */
+            box-shadow 0.2s ease,             /* elevate */
+            transform 0.15s ease;             /* slide slightly */
 }
 
+.dark-mail-row.unread {
+    background-color: var(--dark-bg-unread-mail-row);
+    font-weight: 600;
+}
+
+.dark-mail-row.read {
+    font-weight: 400;
+    background-color: var(--dark-bg-read-mail-row);
+}
 
+/* On hover, lift the row and slide it in from the left */
+.dark-mail-row:hover {
+    background-color: var(--dark-hover-bg-mail-row);
+    box-shadow: 0 2px 8px var(--dark-shadow-bg-mail-row);
+    transform: translateX(4px);         /* shift 4px to the right */
+    border-left: 4px solid #0d6efd;     /* Bootstrap’s primary blue */
+    padding-left: 1.25rem;              /* account for the new left border */
+}