pretty ok theming basics

papermerge · Jul 19, 2024 · b8af142 · b8af142
1 parent aef4db0
commit b8af142
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 50 deletions.
diff --git a/ui2/src/app/App.module.css → ui2/src/app/App.css b/ui2/src/app/App.module.css → ui2/src/app/App.css
@@ -5,11 +5,3 @@
   text-align: center;
   overflow: hidden;
 }
-
-.navbar {
-  padding-top: 1rem;
-}
-
-body {
-  overflow: hidden;
-}
diff --git a/ui2/src/app/App.tsx b/ui2/src/app/App.tsx
@@ -10,7 +10,7 @@ import {
   selectCurrentUserStatus
 } from "@/slices/currentUser"
 
-import "./App.module.css"
+import "./App.css"
 import {selectNavBarWidth} from "@/slices/navBar"
 import Uploader from "@/components/Uploader"
 

diff --git a/ui2/src/components/Breadcrumbs/Breadcrumbs.module.css b/ui2/src/components/Breadcrumbs/Breadcrumbs.module.css
@@ -1,5 +1,6 @@
 .breadcrumbs {
   a {
     padding: 0.5rem 0;
+    color: light-dark(var(--mantine-color-pmg-9), var(--mantine-color-pmg-2));
   }
 }
diff --git a/ui2/src/components/NavBar/NavBar.css b/ui2/src/components/NavBar/NavBar.css
diff --git a/ui2/src/components/NavBar/NavBar.tsx b/ui2/src/components/NavBar/NavBar.tsx
@@ -16,7 +16,7 @@ import {
 import {selectNavBarCollapsed} from "@/slices/navBar"
 
 import type {User} from "@/types.ts"
-import "./NavBar.css"
+import NavBarCss from "./NavBar.module.css"
 
 function NavBarFull() {
   const user = useSelector(selectCurrentUser) as User

diff --git a/ui2/src/index.css b/ui2/src/index.css
@@ -13,15 +13,6 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
 body {
   margin: 0;
   place-items: center;
@@ -53,15 +44,35 @@ button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
 }
 
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
+body {
+  overflow: hidden;
+}
+
+.navbar > a.active {
+  background-color: var(--mantine-color-pmg-9);
+  color: light-dark(var(--mantine-color-pmg-1), var(--mantine-color-pmg-1));
+  padding: 0.75rem;
+}
+
+.navbar a {
+  color: light-dark(var(--mantine-color-pmg-9), var(--mantine-color-pmg-2));
+  padding: 0.75rem;
+  text-decoration: none;
+}
+
+.navbar {
+  margin: 0;
+  padding: 0;
+  padding-top: 1rem;
+  display: flex;
+  flex-direction: column;
+}
+
+a {
+  text-decoration: none;
+  color: var(--mantine-color-pmg-8);
+}
+
+a:hover {
+  color: var(--mantine-color-pmg-6);
 }
diff --git a/ui2/src/themes/blue.ts b/ui2/src/themes/blue.ts
@@ -15,9 +15,5 @@ export const theme = createTheme({
       "#004ecc",
       "#0043b5"
     ]
-  },
-  primaryShade: {
-    light: 0,
-    dark: 6
   }
 })