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} />

website/src/pages/messages/[id]/index.tsx

@@ -1,4 +1,4 @@
-import { Box, Text, useColorModeValue } from "@chakra-ui/react";
+import { Box, Card, Text, useColorModeValue } from "@chakra-ui/react";
 import Head from "next/head";
 import { useTranslation } from "next-i18next";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
@@ -36,9 +36,9 @@ const MessageDetail = ({ id }: { id: string }) => {
                 <Text fontWeight="bold" fontSize="xl" pb="2">
                   {t("parent")}
                 </Text>
-                <Box bg={backgroundColor} padding="4" borderRadius="xl" boxShadow="base" width="fit-content">
+                <Card bg={backgroundColor} padding="4" width="fit-content">
                   <MessageTableEntry enabled message={parent} />
-                </Box>
+                </Card>
               </Box>
             </>
           )}

website/src/styles/Theme/colors.ts

@@ -2,10 +2,12 @@ export const colors = {
   light: {
     bg: "rgb(250,250,250)",
     text: "black",
+    active: "blue.400",
   },
   dark: {
     bg: "gray.900",
     text: "white",
+    active: "blue.500",
   },
   "dark-blue-btn": {
     200: "rgb(29,78,216)",

website/styles/Home.module.css

@@ -1,41 +0,0 @@
-.App {
-    text-align: center;
-}
-
-.App-logo {
-    height: 40vmin;
-    pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-    .App-logo {
-        animation: App-logo-spin infinite 20s linear;
-    }
-}
-
-.AppHeader {
-    background: linear-gradient(217deg, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0) 70.71%),
-        linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%),
-        linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%);
-    background: black;
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    font-size: calc(10px + 2vmin);
-    color: white;
-}
-
-.AppLink {
-    color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-    from {
-        transform: rotate(0deg);
-    }
-    to {
-        transform: rotate(360deg);
-    }
-}

website/styles/Theme/Components/Container.tsx

@@ -1,25 +0,0 @@
-import {
-  color,
-  defineStyle,
-  defineStyleConfig,
-  // transition,
-} from "@chakra-ui/styled-system";
-import { colors } from "../colors";
-
-const baseStyle = defineStyle(({ colorMode }) => ({
-  minWidth: "100%",
-  bg: colorMode === "light" ? colors.light.bg : colors.dark.bg,
-  // transition: "background-color 300ms cubic-bezier(0.4, 0, 1, 1)",
-  color: colorMode === "light" ? colors.light.text : colors.dark.text,
-}));
-
-const variants = {
-  "no-padding": {
-    padding: 0,
-  },
-};
-
-export const containerTheme = defineStyleConfig({
-  baseStyle,
-  variants,
-});

website/styles/Theme/colors.tsx

@@ -1,18 +0,0 @@
-export const colors = {
-  light: {
-    bg: "gray.100",
-    btn: "gray.50",
-    div: "white",
-    text: "black",
-    highlight: "blue.400",
-    active: "blue.400",
-  },
-  dark: {
-    bg: "gray.900",
-    btn: "gray.600",
-    div: "gray.700",
-    text: "gray.200",
-    highlight: "blue.500",
-    active: "blue.500",
-  },
-};

website/styles/Theme/index.tsx

@@ -1,64 +0,0 @@
-import { type ThemeConfig, extendTheme, usePrefersReducedMotion } from "@chakra-ui/react";
-import { containerTheme } from "./Components/Container";
-import { StyleFunctionProps, Styles } from "@chakra-ui/theme-tools";
-
-const config: ThemeConfig = {
-  initialColorMode: "system",
-  useSystemColorMode: false,
-  disableTransitionOnChange: true,
-};
-
-const components = {
-  Container: containerTheme,
-  Box: (props: StyleFunctionProps) => ({
-    backgroundColor: props.colorMode === "light" ? "white" : "gray.800",
-  }),
-  Button: {
-    baseStyle: {
-      fontWeight: "normal",
-    },
-    sizes: {
-      lg: {
-        fontSize: "md",
-        paddingY: "7",
-      },
-    },
-    variants: {
-      solid: (props: StyleFunctionProps) => ({
-        bg: props.colorMode === "light" ? "gray.100" : "gray.600",
-        _hover: {
-          bg: props.colorMode === "light" ? "gray.200" : "#3D4A60",
-        },
-        _active: {
-          bg: props.colorMode === "light" ? "gray.300" : "#374254",
-        },
-        borderRadius: "lg",
-      }),
-      // gradient: (props: StyleFunctionProps) => ({
-      //   bg: `linear-gradient(${white}, ${bgColor}) padding-box,
-      //   linear-gradient(135deg, ${lgFrom}, ${lgTo}) border-box`,
-      // }),
-    },
-  },
-};
-
-const breakpoints = {
-  sm: "640px",
-  md: "768px",
-  lg: "1024px",
-  xl: "1280px",
-  "2xl": "1536px",
-};
-
-const styles = {
-  global: (props) => ({
-    main: {
-      fontFamily: "Inter",
-    },
-    header: {
-      fontFamily: "Inter",
-    },
-  }),
-};
-
-export const theme = extendTheme({ config, styles, components, breakpoints });