style(light): navbar in light theme

GZTimeWalker · Nov 25, 2024 · d8737ff · d8737ff
1 parent d7d582e
commit d8737ff
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 11 deletions.
diff --git a/src/GZCTF/ClientApp/src/components/AppNavbar.tsx b/src/GZCTF/ClientApp/src/components/AppNavbar.tsx
@@ -118,7 +118,7 @@ export const AppNavbar: FC<AppControlProps> = ({ openColorModal }) => {
     <AppShell.Navbar className={classes.navbar}>
       {/* Logo */}
       <AppShell.Section grow>
-        <LogoBox ignoreTheme size="100%" className={classes.logo} component={Link} to="/" />
+        <LogoBox size="100%" className={classes.logo} component={Link} to="/" />
       </AppShell.Section>
 
       {/* Common Nav */}

diff --git a/src/GZCTF/ClientApp/src/components/admin/ScoreFunc.tsx b/src/GZCTF/ClientApp/src/components/admin/ScoreFunc.tsx
@@ -30,6 +30,8 @@ export const ScoreFunc: FC<ScoreFuncProps> = ({
   const plotData = [...Array(100).keys()].map((x) => [toX(x), func(toX(x))])
   const { colorScheme } = useMantineColorScheme()
   const { t } = useTranslation()
+  const primaryColors = theme.colors[theme.primaryColor]
+  const color = primaryColors[colorScheme === 'dark' ? 8 : 6]
 
   return (
     <ReactEcharts
@@ -57,7 +59,7 @@ export const ScoreFunc: FC<ScoreFuncProps> = ({
             type: 'line',
             showSymbol: false,
             clip: true,
-            color: theme.colors[theme.primaryColor][8],
+            color: color,
             data: plotData,
             markPoint: {
               label: {

diff --git a/src/GZCTF/ClientApp/src/styles/components/AppNavBar.module.css b/src/GZCTF/ClientApp/src/styles/components/AppNavBar.module.css
@@ -5,23 +5,40 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--mantine-color-gray-1);
   cursor: pointer;
 
-  &:hover {
-    background-color: alpha(var(--mantine-color-gray-6), 0.5);
+  @mixin dark {
+    color: var(--mantine-color-gray-0);
+
+    &:hover {
+      background-color: alpha(var(--mantine-color-gray-6), 0.5);
+    }
+
+    &[data-active] {
+      background-color: alpha(var(--mantine-primary-color-7), 0.25);
+      color: var(--mantine-primary-color-4);
+    }
   }
 
-  &[data-active] {
-    background-color: alpha(var(--mantine-primary-color-7), 0.25);
-    color: var(--mantine-primary-color-4);
+  @mixin light {
+    color: var(--mantine-color-gray-7);
+
+    &:hover {
+      background-color: var(--mantine-color-gray-1);
+    }
+
+    &[data-active] {
+      background-color: var(--mantine-primary-color-filled);
+      color: var(--mantine-color-white);
+    }
   }
 }
 
 .navbar {
-  background-color: var(--mantine-color-gray-8);
   padding: var(--mantine-spacing-xs);
   border: none;
+  box-shadow: var(--mantine-shadow-lg);
+  background-color: light-dark(var(--mantine-color-light-0), var(--mantine-color-gray-8));
 
   @media (max-width: $mantine-breakpoint-xs) {
     display: none;
@@ -36,7 +53,7 @@
 
   @mixin dark {
     background-color: darken(var(--mantine-primary-color-8), 0.45);
-    color: var(--mantine-primary-color-4);
+    color: var(--mantine-primary-color-2);
   }
 }
 

diff --git a/src/GZCTF/ClientApp/src/styles/components/ChallengeCard.module.css b/src/GZCTF/ClientApp/src/styles/components/ChallengeCard.module.css
@@ -18,7 +18,7 @@
   z-index: 91;
   animation: spike 2s linear 0s infinite alternate;
 
-  filter: light-dark(brightness(0.8) saturate(0.5), brightness(1.2) saturate(0.8));
+  filter: light-dark(brightness(0.97) saturate(0.7), brightness(1.2) saturate(0.8));
 
   &[data-blood] {
     display: block;