remove root styles folder

website/src/components/Messages/MessageTableEntry.tsx

@@ -23,8 +23,8 @@ import { LabelMessagePopup } from "src/components/Messages/LabelPopup";
 import { getEmojiIcon, MessageEmojiButton } from "src/components/Messages/MessageEmojiButton";
 import { ReportPopup } from "src/components/Messages/ReportPopup";
 import { post } from "src/lib/api";
+import { colors } from "src/styles/Theme/colors";
 import { Message, MessageEmojis } from "src/types/Conversation";
-import { colors } from "styles/Theme/colors";
 import useSWRMutation from "swr/mutation";
 
 interface MessageTableEntryProps {
@@ -66,7 +66,7 @@ export function MessageTableEntry({ message, enabled, highlight }: MessageTableE
     ),
     [borderColor, inlineAvatar, message.is_assistant]
   );
-  const highlightColor = useColorModeValue(colors.light.highlight, colors.dark.highlight);
+  const highlightColor = useColorModeValue(colors.light.active, colors.dark.active);
 
   const { trigger: sendEmojiChange } = useSWRMutation(`/api/messages/${message.id}/emoji`, post, {
     onSuccess: setEmojis,

website/src/components/SideMenu.tsx

@@ -1,8 +1,7 @@
-import { Box, Button, Text, Tooltip, useColorMode } from "@chakra-ui/react";
+import { Button, Card, Text, Tooltip, useColorMode } from "@chakra-ui/react";
 import { LucideIcon, Sun } from "lucide-react";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { colors } from "styles/Theme/colors";
 
 export interface MenuButtonOption {
   label: string;
@@ -21,11 +20,8 @@ export function SideMenu(props: SideMenuProps) {
 
   return (
     <main className="sticky top-0 sm:h-full">
-      <Box
+      <Card
         width={["100%", "100%", "100px", "280px"]}
-        backgroundColor={colorMode === "light" ? colors.light.div : colors.dark.div}
-        boxShadow="base"
-        borderRadius="xl"
         className="grid grid-cols-4 gap-2 sm:flex sm:flex-col sm:justify-between p-4 h-full"
       >
         <nav className="grid grid-cols-3 col-span-3 sm:flex sm:flex-col gap-2">
@@ -69,7 +65,7 @@ export function SideMenu(props: SideMenuProps) {
             </Button>
           </Tooltip>
         </div>
-      </Box>
+      </Card>
     </main>
   );
 }

website/src/components/SideMenuLayout.tsx

@@ -1,6 +1,6 @@
 import { Box, useColorMode } from "@chakra-ui/react";
 import { MenuButtonOption, SideMenu } from "src/components/SideMenu";
-import { colors } from "styles/Theme/colors";
+import { colors } from "src/styles/Theme/colors";
 
 interface SideMenuLayoutProps {
   menuButtonOptions: MenuButtonOption[];
@@ -11,7 +11,7 @@ export const SideMenuLayout = (props: SideMenuLayoutProps) => {
   const { colorMode } = useColorMode();
 
   return (
-    <Box backgroundColor={colorMode === "light" ? colors.light.bg : colors.dark.bg} className="sm:overflow-hidden">
+    <Box backgroundColor={colorMode === "light" ? "gray.100" : colors.dark.bg} className="sm:overflow-hidden">
       <Box display="flex" flexDirection={["column", "row"]} h="full" gap={["0", "0", "0", "6"]}>
         <Box p={["3", "3", "3", "6"]} pr={["3", "3", "3", "0"]}>
           <SideMenu buttonOptions={props.menuButtonOptions} />