From 79a39771aa5e7ed2770c768084e5d4ce34b5caf5 Mon Sep 17 00:00:00 2001 From: notmd Date: Wed, 1 Feb 2023 17:55:29 +0700 Subject: [PATCH] remove root styles folder --- .../components/Messages/MessageTableEntry.tsx | 4 +- website/src/components/SideMenu.tsx | 10 +-- website/src/components/SideMenuLayout.tsx | 4 +- website/src/pages/messages/[id]/index.tsx | 6 +- website/src/styles/Theme/colors.ts | 2 + website/styles/Home.module.css | 41 ------------ website/styles/Theme/Components/Container.tsx | 25 -------- website/styles/Theme/colors.tsx | 18 ------ website/styles/Theme/index.tsx | 64 ------------------- 9 files changed, 12 insertions(+), 162 deletions(-) delete mode 100644 website/styles/Home.module.css delete mode 100644 website/styles/Theme/Components/Container.tsx delete mode 100644 website/styles/Theme/colors.tsx delete mode 100644 website/styles/Theme/index.tsx diff --git a/website/src/components/Messages/MessageTableEntry.tsx b/website/src/components/Messages/MessageTableEntry.tsx index e65885e2..89b0b204 100644 --- a/website/src/components/Messages/MessageTableEntry.tsx +++ b/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, diff --git a/website/src/components/SideMenu.tsx b/website/src/components/SideMenu.tsx index 10e83ce4..25dabf30 100644 --- a/website/src/components/SideMenu.tsx +++ b/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 (
-
); } diff --git a/website/src/components/SideMenuLayout.tsx b/website/src/components/SideMenuLayout.tsx index 97fda2db..2c5a5054 100644 --- a/website/src/components/SideMenuLayout.tsx +++ b/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 ( - + diff --git a/website/src/pages/messages/[id]/index.tsx b/website/src/pages/messages/[id]/index.tsx index 158d28e8..2c58c367 100644 --- a/website/src/pages/messages/[id]/index.tsx +++ b/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 }) => { {t("parent")} - + - + )} diff --git a/website/src/styles/Theme/colors.ts b/website/src/styles/Theme/colors.ts index 9b8c447d..6ce1f161 100644 --- a/website/src/styles/Theme/colors.ts +++ b/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)", diff --git a/website/styles/Home.module.css b/website/styles/Home.module.css deleted file mode 100644 index 1dc2ec1c..00000000 --- a/website/styles/Home.module.css +++ /dev/null @@ -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); - } -} diff --git a/website/styles/Theme/Components/Container.tsx b/website/styles/Theme/Components/Container.tsx deleted file mode 100644 index ec7eeed9..00000000 --- a/website/styles/Theme/Components/Container.tsx +++ /dev/null @@ -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, -}); diff --git a/website/styles/Theme/colors.tsx b/website/styles/Theme/colors.tsx deleted file mode 100644 index 26609185..00000000 --- a/website/styles/Theme/colors.tsx +++ /dev/null @@ -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", - }, -}; diff --git a/website/styles/Theme/index.tsx b/website/styles/Theme/index.tsx deleted file mode 100644 index 7288b7ec..00000000 --- a/website/styles/Theme/index.tsx +++ /dev/null @@ -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 });