fix: add some background color

recally-io · Aug 27, 2024 · 0eb5055 · 0eb5055
1 parent 6e84d3a
commit 0eb5055
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 3 deletions.
diff --git a/web/src/components/header.jsx b/web/src/components/header.jsx
@@ -2,8 +2,10 @@ import { Flex } from "@mantine/core";
 import React from "react";
 import { HeaderMenu } from "./header-menu";
 import { ShowNavbarButton } from "./header-show-navbar-button";
+import useStore from "../libs/store";
 
 export default function Header({ hasNavBar }) {
+  const isDarkMode = useStore((state) => state.isDarkMode);
   return (
     <>
       <Flex
@@ -12,7 +14,8 @@ export default function Header({ hasNavBar }) {
         align="center"
         gap="lg"
         px="sm"
-        m="0"
+        h="100%"
+        bg={isDarkMode ? "dark.8" : "gray.3"}
       >
         <ShowNavbarButton hasNavBar={hasNavBar} />
 

diff --git a/web/src/components/layout.jsx b/web/src/components/layout.jsx
@@ -26,6 +26,7 @@ const theme = createTheme({
       },
     }),
   },
+  // autoContrast: true,
   primaryColor: "primary",
   colors: {
     // Default: For neutral, non-emphasized UI elements
@@ -171,7 +172,7 @@ export default function Layout({ main, nav = null, header = null }) {
             <AppShell.Header>
               {header ? header : <Header hasNavBar={hasNavBar} />}
             </AppShell.Header>
-            <AppShell.Navbar p="md">{nav}</AppShell.Navbar>
+            <AppShell.Navbar>{nav}</AppShell.Navbar>
             <AppShell.Main>{main}</AppShell.Main>
           </AppShell>
         </ModalsProvider>

diff --git a/web/src/components/thread-header.jsx b/web/src/components/thread-header.jsx
@@ -7,6 +7,7 @@ import { ShowNavbarButton } from "./header-show-navbar-button";
 import { ThreadAddButton } from "./thread-add-button";
 
 export default function ThreadHeader() {
+  const isDarkMode = useStore((state) => state.isDarkMode);
   const setThreadIsOpenSettings = useStore(
     (state) => state.setThreadIsOpenSettings,
   );
@@ -18,7 +19,9 @@ export default function ThreadHeader() {
         justify="space-between"
         align="center"
         gap="lg"
-        mx="sm"
+        px="sm"
+        h="100%"
+        bg={isDarkMode ? "dark.8" : "gray.4"}
       >
         <Group gap="2" align="center">
           <ShowNavbarButton hasNavBar={true} />

diff --git a/web/src/components/thread-sidebar.jsx b/web/src/components/thread-sidebar.jsx
@@ -20,6 +20,7 @@ import useStore from "../libs/store";
 import { ThreadAddButton } from "./thread-add-button";
 
 export default function Sidebar() {
+  const isDarkMode = useStore((state) => state.isDarkMode);
   const isLogin = useStore((state) => state.isLogin);
   const assistant = useStore((state) => state.assistant);
   const thread = useStore((state) => state.thread);
@@ -82,7 +83,9 @@ export default function Sidebar() {
         gap="md"
         p="sm"
         h="100%"
+        m="0"
         radius="md"
+        bg={isDarkMode ? "dark.6" : "gray.2"}
       >
         <Stack align="stretch" justify="start" gap="md">
           <Flex justify="center" align="center" gap="md">