From 745b216219f5c50636ab946820cc34bf6492e53f Mon Sep 17 00:00:00 2001 From: Boris Proshin Date: Wed, 19 Jul 2023 18:57:51 +0300 Subject: [PATCH 1/4] Add theme color to the settings --- src/components/App.tsx | 5 ++++- src/components/Chats.tsx | 2 +- src/components/Layout.tsx | 5 ++++- src/components/Logo.tsx | 14 ++++++++++---- src/components/SettingsModal.tsx | 24 ++++++++++++++++++++++++ src/hooks/usePrimaryColor.ts | 15 +++++++++++++++ 6 files changed, 58 insertions(+), 7 deletions(-) create mode 100644 src/hooks/usePrimaryColor.ts diff --git a/src/components/App.tsx b/src/components/App.tsx index e46d0ab..1186948 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -13,6 +13,7 @@ import { import { ChatRoute } from "../routes/ChatRoute"; import { IndexRoute } from "../routes/IndexRoute"; import { Layout } from "./Layout"; +import { usePrimaryColor } from "../hooks/usePrimaryColor"; const history = createHashHistory(); const location = new ReactLocation({ history }); @@ -26,6 +27,8 @@ export function App() { getInitialValueInEffect: true, }); + const [primaryColor] = usePrimaryColor(); + const toggleColorScheme = (value?: ColorScheme) => setColorScheme(value || (colorScheme === "dark" ? "light" : "dark")); @@ -49,7 +52,7 @@ export function App() { withCSSVariables theme={{ colorScheme, - primaryColor: "teal", + primaryColor, globalStyles: (theme) => ({ body: { backgroundColor: diff --git a/src/components/Chats.tsx b/src/components/Chats.tsx index 5f15bf0..399a6ae 100644 --- a/src/components/Chats.tsx +++ b/src/components/Chats.tsx @@ -42,7 +42,7 @@ export function Chats({ search }: { search: string }) { } - color="teal" + color="primary" chat={chat} label={chat.description} /> diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx index 3c39330..884f486 100644 --- a/src/components/Layout.tsx +++ b/src/components/Layout.tsx @@ -41,6 +41,7 @@ import { LogoText } from "./Logo"; import { Prompts } from "./Prompts"; import { SettingsModal } from "./SettingsModal"; import { config } from "../utils/config"; +import { usePrimaryThemeColor } from "../hooks/usePrimaryColor"; declare global { interface Window { @@ -67,6 +68,8 @@ export function Layout() { theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[2] }`; + const primaryColor = usePrimaryThemeColor(); + useEffect(() => { setOpened(false); }, [router.state.location]); @@ -95,7 +98,7 @@ export function Layout() { diff --git a/src/components/Logo.tsx b/src/components/Logo.tsx index 06469f3..1e7c967 100644 --- a/src/components/Logo.tsx +++ b/src/components/Logo.tsx @@ -1,3 +1,5 @@ +import { usePrimaryThemeColor } from '../hooks/usePrimaryColor' + export function LogoText(props: JSX.IntrinsicElements["svg"]) { return ( - - + + @@ -50,6 +54,8 @@ export function Logo(props: JSX.IntrinsicElements["svg"]) { } export function LogoIcon(props: JSX.IntrinsicElements["svg"]) { + const primaryColor = usePrimaryThemeColor(); + return ( - - + + diff --git a/src/components/SettingsModal.tsx b/src/components/SettingsModal.tsx index 824263c..9606240 100644 --- a/src/components/SettingsModal.tsx +++ b/src/components/SettingsModal.tsx @@ -10,6 +10,11 @@ import { Select, Stack, Text, + useMantineTheme, + Group, + ColorSwatch, + CheckIcon, + rem, } from "@mantine/core"; import { useDisclosure } from "@mantine/hooks"; import { notifications } from "@mantine/notifications"; @@ -18,6 +23,7 @@ import { cloneElement, ReactElement, useEffect, useState } from "react"; import { db } from "../db"; import { config } from "../utils/config"; import { checkOpenAIKey } from "../utils/openai"; +import { usePrimaryColor } from "../hooks/usePrimaryColor"; export function SettingsModal({ children }: { children: ReactElement }) { const [opened, { open, close }] = useDisclosure(false); @@ -29,6 +35,9 @@ export function SettingsModal({ children }: { children: ReactElement }) { const [auth, setAuth] = useState(config.defaultAuth); const [base, setBase] = useState(""); const [version, setVersion] = useState(""); + const [primaryColor, setPrimaryColor] = usePrimaryColor(); + + const theme = useMantineTheme(); const settings = useLiveQuery(async () => { return db.settings.where({ id: "general" }).first(); @@ -335,6 +344,21 @@ export function SettingsModal({ children }: { children: ReactElement }) { + + + + {["red", "pink", "grape", "violet", "indigo", "blue", "cyan", "green", "lime", "yellow", "orange", "teal"].map((color) => ( + setPrimaryColor(color)} + sx={{ color: "#fff", cursor: "pointer" }} + > + {color === primaryColor && } + + ))} + + diff --git a/src/hooks/usePrimaryColor.ts b/src/hooks/usePrimaryColor.ts new file mode 100644 index 0000000..f55a460 --- /dev/null +++ b/src/hooks/usePrimaryColor.ts @@ -0,0 +1,15 @@ +import { useMantineTheme } from '@mantine/core' +import { useLocalStorage } from '@mantine/hooks' + +export function usePrimaryColor() { + return useLocalStorage({ + key: "mantine-primary-color", + defaultValue: "teal", + }) +} + +export function usePrimaryThemeColor() { + const [primaryColor] = usePrimaryColor() + const theme = useMantineTheme() + return theme.colors[primaryColor] +} From bf8c0de7c549fe3afeb6dd042289da30b820441a Mon Sep 17 00:00:00 2001 From: Boris Proshin Date: Wed, 19 Jul 2023 19:01:05 +0300 Subject: [PATCH 2/4] Reorder colors --- src/components/SettingsModal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/SettingsModal.tsx b/src/components/SettingsModal.tsx index 9606240..3bfc15b 100644 --- a/src/components/SettingsModal.tsx +++ b/src/components/SettingsModal.tsx @@ -347,7 +347,7 @@ export function SettingsModal({ children }: { children: ReactElement }) { - {["red", "pink", "grape", "violet", "indigo", "blue", "cyan", "green", "lime", "yellow", "orange", "teal"].map((color) => ( + {["red", "pink", "grape", "violet", "indigo", "blue", "cyan", "teal", "green", "lime", "yellow", "orange"].map((color) => ( Date: Wed, 19 Jul 2023 19:35:09 +0300 Subject: [PATCH 3/4] Add gray color, and fix icon color --- src/components/Chats.tsx | 5 ++++- src/components/SettingsModal.tsx | 2 +- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/Chats.tsx b/src/components/Chats.tsx index 399a6ae..a028e5e 100644 --- a/src/components/Chats.tsx +++ b/src/components/Chats.tsx @@ -8,6 +8,7 @@ import { useChatId } from "../hooks/useChatId"; import { DeleteChatModal } from "./DeleteChatModal"; import { EditChatModal } from "./EditChatModal"; import { MainLink } from "./MainLink"; +import { usePrimaryColor } from "../hooks/usePrimaryColor"; export function Chats({ search }: { search: string }) { const chatId = useChatId(); @@ -23,6 +24,8 @@ export function Chats({ search }: { search: string }) { [chats, search] ); + const [primaryColor] = usePrimaryColor(); + return ( <> {filteredChats.map((chat) => ( @@ -42,7 +45,7 @@ export function Chats({ search }: { search: string }) { } - color="primary" + color={primaryColor} chat={chat} label={chat.description} /> diff --git a/src/components/SettingsModal.tsx b/src/components/SettingsModal.tsx index 3bfc15b..adabbc7 100644 --- a/src/components/SettingsModal.tsx +++ b/src/components/SettingsModal.tsx @@ -347,7 +347,7 @@ export function SettingsModal({ children }: { children: ReactElement }) { - {["red", "pink", "grape", "violet", "indigo", "blue", "cyan", "teal", "green", "lime", "yellow", "orange"].map((color) => ( + {["gray", "red", "pink", "grape", "violet", "indigo", "blue", "cyan", "teal", "green", "lime", "yellow", "orange"].map((color) => ( Date: Mon, 5 Feb 2024 11:37:57 +0300 Subject: [PATCH 4/4] Add dark color --- src/components/SettingsModal.tsx | 38 ++++++++++---------------------- 1 file changed, 12 insertions(+), 26 deletions(-) diff --git a/src/components/SettingsModal.tsx b/src/components/SettingsModal.tsx index adabbc7..0c66aae 100644 --- a/src/components/SettingsModal.tsx +++ b/src/components/SettingsModal.tsx @@ -1,29 +1,15 @@ +import { useLiveQuery } from 'dexie-react-hooks' +import { cloneElement, ReactElement, useEffect, useState } from 'react' import { - Alert, - Anchor, - Button, - Flex, - List, - Modal, - PasswordInput, - TextInput, - Select, - Stack, - Text, - useMantineTheme, - Group, - ColorSwatch, - CheckIcon, - rem, -} from "@mantine/core"; -import { useDisclosure } from "@mantine/hooks"; -import { notifications } from "@mantine/notifications"; -import { useLiveQuery } from "dexie-react-hooks"; -import { cloneElement, ReactElement, useEffect, useState } from "react"; -import { db } from "../db"; -import { config } from "../utils/config"; -import { checkOpenAIKey } from "../utils/openai"; -import { usePrimaryColor } from "../hooks/usePrimaryColor"; + Alert, Anchor, Button, CheckIcon, ColorSwatch, Flex, Group, List, Modal, PasswordInput, rem, + Select, Stack, Text, TextInput, useMantineTheme +} from '@mantine/core' +import { useDisclosure } from '@mantine/hooks' +import { notifications } from '@mantine/notifications' +import { db } from '../db' +import { usePrimaryColor } from '../hooks/usePrimaryColor' +import { config } from '../utils/config' +import { checkOpenAIKey } from '../utils/openai' export function SettingsModal({ children }: { children: ReactElement }) { const [opened, { open, close }] = useDisclosure(false); @@ -347,7 +333,7 @@ export function SettingsModal({ children }: { children: ReactElement }) { - {["gray", "red", "pink", "grape", "violet", "indigo", "blue", "cyan", "teal", "green", "lime", "yellow", "orange"].map((color) => ( + {["dark", "gray", "red", "pink", "grape", "violet", "indigo", "blue", "cyan", "teal", "green", "lime", "yellow", "orange"].map((color) => (