myheats

commit 6691aff77eb95420e6b9dd650dd9fdbb10b5a6dc
parent 8f5a3685e2e2e892df1cc3717437d3fab0aa2c32
Author: Andreas Gruhler <andreas.gruhler@adfinis.com>
Date:   Tue,  1 Oct 2024 18:24:11 +0200

feat(theme): use regular css

Vite and css modules don't like each other. It seems to be working in
dev mode, but as soon as you run vite build the css is missing.

Needs another module to make it work which is a bit overkill:
* https://github.com/privatenumber/vite-css-modules

Diffstat:
M
src/frontend/App.jsx
 | 
22
+++++++++++-----------
A
src/frontend/css/blue.css
 | 
11
+++++++++++
D
src/frontend/css/blue.module.css
 | 
11
-----------
A
src/frontend/css/red.css
 | 
11
+++++++++++
D
src/frontend/css/red.module.css
 | 
11
-----------
A
src/frontend/css/yellow.css
 | 
11
+++++++++++
D
src/frontend/css/yellow.module.css
 | 
11
-----------

7 files changed, 44 insertions(+), 44 deletions(-)
diff --git a/src/frontend/App.jsx b/src/frontend/App.jsx
@@ -3,9 +3,9 @@ import { BrowserRouter as Router, Routes, Route, Outlet, Link, NavLink } from 'r
 import { CookiesProvider, useCookies } from 'react-cookie'
 
 import './css/App.css'
-import blue from './css/blue.module.css'
-import red from './css/red.module.css'
-import yellow from './css/yellow.module.css'
+import './css/blue.css'
+import './css/red.css'
+import './css/yellow.css'
 
 const Score = lazy(() => import('./Score'))
 const Heats = lazy(() => import('./Heats'))
@@ -27,11 +27,11 @@ function Layout() {
 
   // load stylesheet based on settings
   const colors = ['red', 'blue', 'yellow'];
-  let styles
+  let theme = ""
 
   if (settings.style && colors.includes(settings.style)) {
-    styles = eval(settings.style)
-    //console.info(`I see ${settings.style}. Try one of "style=${colors}" in ${window.location.origin}/settings`)
+    theme = `${settings.style}`
+    console.info(`I see ${settings.style}. Try one of "style=${colors}" in ${window.location.origin}/settings`)
   }
 
   useEffect(() => {
@@ -54,32 +54,32 @@ function Layout() {
 
   return (
     <Fragment>
-      <nav className={styles?.themed}>
+      <nav className={theme}>
         <ul>
           <li>
             <NavLink
-              className={({ isActive, isPending }) => isPending ? "pending" : isActive ? `active ${styles?.active}` : ""}
+              className={({ isActive, isPending }) => isPending ? "pending" : isActive ? `active ${theme}.active` : ""}
               to="/">
                 Leaderboard
             </NavLink>
           </li>
           {session.auth ? <li>
             <NavLink
-              className={({ isActive, isPending }) => isPending ? "pending" : isActive ? `active ${styles?.active}` : ""}
+              className={({ isActive, isPending }) => isPending ? "pending" : isActive ? `active ${theme}.active}` : ""}
               to="/score">
                 Scoring
             </NavLink>
           </li> : ''}
           {session.auth ? <li>
             <NavLink
-              className={({ isActive, isPending }) => isPending ? "pending" : isActive ? `active ${styles?.active}` : ""}
+              className={({ isActive, isPending }) => isPending ? "pending" : isActive ? `active ${theme}.active}` : ""}
               to="/heats">
                 Heats and Startlists
             </NavLink>
           </li> : ''}
           {session.auth ? <li>
             <NavLink
-              className={({ isActive, isPending }) => isPending ? "pending" : isActive ? `active ${styles?.active}` : ""}
+              className={({ isActive, isPending }) => isPending ? "pending" : isActive ? `active ${theme}.active}` : ""}
               to="/athletes">
                 Athletes
             </NavLink>
diff --git a/src/frontend/css/blue.css b/src/frontend/css/blue.css
@@ -0,0 +1,11 @@
+nav.blue {
+  background: #144780;
+  border-bottom: 1px solid white;
+}
+nav.blue a.active {
+  font-weight: bold;
+  background: #145dae;
+}
+nav.blue a {
+  color: white;
+}
diff --git a/src/frontend/css/blue.module.css b/src/frontend/css/blue.module.css
@@ -1,11 +0,0 @@
-nav.themed {
-  background: #144780;
-  border-bottom: 1px solid white;
-}
-nav.themed a.active {
-  font-weight: bold;
-  background: #145dae;
-}
-nav.themed a {
-  color: white;
-}
diff --git a/src/frontend/css/red.css b/src/frontend/css/red.css
@@ -0,0 +1,11 @@
+nav.red {
+  background: #bb0d15;
+  border-bottom: 1px solid white;
+}
+nav.red a.active {
+  font-weight: bold;
+  background: #cc3037;
+}
+nav.red a {
+  color: white;
+}
diff --git a/src/frontend/css/red.module.css b/src/frontend/css/red.module.css
@@ -1,11 +0,0 @@
-nav.themed {
-  background: #bb0d15;
-  border-bottom: 1px solid white;
-}
-nav.themed a.active {
-  font-weight: bold;
-  background: #cc3037;
-}
-nav.themed a {
-  color: white;
-}
diff --git a/src/frontend/css/yellow.css b/src/frontend/css/yellow.css
@@ -0,0 +1,11 @@
+nav.yellow {
+  background: #fd0;
+  border-bottom: 1px solid #fffceb;
+}
+nav.yellow a.active {
+  font-weight: bold;
+  background: #ffe95a;
+}
+nav.yellow a {
+  color: black;
+}
diff --git a/src/frontend/css/yellow.module.css b/src/frontend/css/yellow.module.css
@@ -1,11 +0,0 @@
-nav.themed {
-  background: #fd0;
-  border-bottom: 1px solid #fffceb;
-}
-nav.themed a.active {
-  font-weight: bold;
-  background: #ffe95a;
-}
-nav.themed a {
-  color: black;
-}