From dc4ca5136a4b6cab74bc1ae06d11af03b4f22254 Mon Sep 17 00:00:00 2001 From: darks Date: Tue, 22 Aug 2023 14:00:43 +0400 Subject: [PATCH] Temporary Font Size Changer (small, medium, large - small by default) --- src/App.tsx | 10 ++ .../Menu/MenuOptions/FontSizeChanger.tsx | 35 ++++++ src/components/SettingsMenu/SettingsMenu.tsx | 6 +- src/main.css | 107 +++++++++++++++++- src/store/config-slice.ts | 10 ++ src/store/migrate.ts | 5 + src/store/store.ts | 7 +- src/types/chat.ts | 6 + src/types/font-size.ts | 1 + 9 files changed, 181 insertions(+), 6 deletions(-) create mode 100644 src/components/Menu/MenuOptions/FontSizeChanger.tsx create mode 100644 src/types/font-size.ts diff --git a/src/App.tsx b/src/App.tsx index 35ae2428c..25b4398fe 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -12,6 +12,7 @@ import ApiPopup from '@components/ApiPopup'; import Toast from '@components/Toast'; import { initaliseModelData, modelOptions, defaultModel } from '@constants/chat'; +import { FontSize } from '@type/font-size'; function App() { @@ -20,6 +21,7 @@ function App() const initialiseNewChat = useInitialiseNewChat(); const setChats = useStore((state) => state.setChats); const setTheme = useStore((state) => state.setTheme); + const setFontSize = useStore((state) => state.setFontSize); const setApiKey = useStore((state) => state.setApiKey); const setCurrentChatIndex = useStore((state) => state.setCurrentChatIndex); @@ -70,6 +72,7 @@ function App() const oldChats = localStorage.getItem('chats'); const apiKey = localStorage.getItem('apiKey'); const theme = localStorage.getItem('theme'); + const fontSize = localStorage.getItem('fontSize'); if (apiKey) { @@ -85,6 +88,13 @@ function App() localStorage.removeItem('theme'); } + if (fontSize) + { + // legacy local storage + setFontSize(fontSize as FontSize); + localStorage.removeItem('fontSize'); + } + if (oldChats) { // legacy local storage diff --git a/src/components/Menu/MenuOptions/FontSizeChanger.tsx b/src/components/Menu/MenuOptions/FontSizeChanger.tsx new file mode 100644 index 000000000..da108c5e5 --- /dev/null +++ b/src/components/Menu/MenuOptions/FontSizeChanger.tsx @@ -0,0 +1,35 @@ +import React, { useEffect } from 'react'; +import { useTranslation } from 'react-i18next'; +import useStore from '@store/store'; +import { FontSize } from '@type/font-size'; + +const FontSizeChanger = () => { + const { t } = useTranslation(); + const fontSize = useStore((state) => state.fontSize); + const setFontSize = useStore((state) => state.setFontSize); + + const changeFontSize = (fontSize: FontSize) => { + setFontSize(fontSize); + }; + + useEffect(() => { + document.documentElement.setAttribute('font-size', fontSize); + }, [fontSize]); + + return fontSize ? ( + + ) : ( + <> + ); +}; + +export default FontSizeChanger; diff --git a/src/components/SettingsMenu/SettingsMenu.tsx b/src/components/SettingsMenu/SettingsMenu.tsx index b4431dbe2..a044392aa 100644 --- a/src/components/SettingsMenu/SettingsMenu.tsx +++ b/src/components/SettingsMenu/SettingsMenu.tsx @@ -6,6 +6,7 @@ import useCloudAuthStore from '@store/cloud-auth-store'; import PopupModal from '@components/PopupModal'; import SettingIcon from '@icon/SettingIcon'; import ThemeSwitcher from '@components/Menu/MenuOptions/ThemeSwitcher'; +import FontSizeChanger from '@components/Menu/MenuOptions/FontSizeChanger'; import LanguageSelector from '@components/LanguageSelector'; import AutoTitleToggle from './AutoTitleToggle'; import AdvancedModeToggle from './AdvencedModeToggle'; @@ -21,11 +22,13 @@ const SettingsMenu = () => { const { t } = useTranslation(); const theme = useStore.getState().theme; + const fontSize = useStore.getState().fontSize; const [isModalOpen, setIsModalOpen] = useState(false); useEffect(() => { + document.documentElement.setAttribute('font-size', fontSize); document.documentElement.className = theme; - }, [theme]); + }, [theme, fontSize]); return ( <> {
+
diff --git a/src/main.css b/src/main.css index d8b28d6b2..c4951a11e 100644 --- a/src/main.css +++ b/src/main.css @@ -143,8 +143,6 @@ border-radius: 0.25rem; border-width: 1px; display: inline-flex; - font-size: 0.875rem; - line-height: 1.25rem; padding: 0.5rem 0.75rem; pointer-events: auto; } @@ -156,10 +154,26 @@ border-color: rgba(0, 0, 0, 0.1); border-width: 1px; color: rgba(64, 65, 79, var(--tw-text-opacity)); + } + + html[font-size="sm"] .btn, + html[font-size="sm"] .btn-neutral { font-size: 0.875rem; line-height: 1.25rem; } + html[font-size="md"] .btn, + html[font-size="md"] .btn-neutral { + font-size: 1.125rem; + line-height: 1.75rem; + } + + html[font-size="lg"] .btn, + html[font-size="lg"] .btn-neutral { + font-size: 1.25rem; + line-height: 1.75rem; + } + .btn-neutral:hover { --tw-bg-opacity: 1; background-color: rgba(236, 236, 241, var(--tw-bg-opacity)); @@ -229,11 +243,27 @@ .markdown ul li:before { content: '•'; - font-size: 0.875rem; - line-height: 1.25rem; margin-left: -1rem; position: absolute; } + + html[font-size="sm"] .markdown ul li:before + { + font-size: 0.875rem; + line-height: 1.25rem; + } + + html[font-size="md"] .markdown ul li:before + { + font-size: 1.125rem; + line-height: 1.75rem; + } + + html[font-size="lg"] .markdown ul li:before + { + font-size: 1.25rem; + line-height: 1.75rem; + } } :not(pre) > code.hljs, @@ -281,3 +311,72 @@ .hljs-title { color: #f22c3d; } + +html[font-size="sm"] .prose +{ + font-size: 0.875rem; +} + +html[font-size="md"] .prose +{ + font-size: 1.125rem; +} + +html[font-size="lg"] .prose +{ + font-size: 1.25rem; +} + +/** Text XS **/ +html[font-size="sm"] .text-xs +{ + font-size: 0.75rem; +} + +html[font-size="md"] .text-xs +{ + font-size: 0.875rem; +} + +html[font-size="lg"] .text-xs +{ + font-size: 1rem; +} + +/** Text SM **/ +html[font-size="sm"] .text-sm +{ + font-size: 0.875rem; + line-height: 1.25rem; +} + +html[font-size="md"] .text-sm +{ + font-size: 1rem; + line-height: 1.75rem; +} + +html[font-size="lg"] .text-sm +{ + font-size: 1.125rem; + line-height: 1.75rem; +} + +/** Text LG **/ +html[font-size="sm"] .text-lg +{ + font-size: 1.125rem; + line-height: 1.75rem; +} + +html[font-size="md"] .text-lg +{ + font-size: 1.25rem; + line-height: 1.75rem; +} + +html[font-size="lg"] .text-lg +{ + font-size: 1.5rem; + line-height: 2rem; +} \ No newline at end of file diff --git a/src/store/config-slice.ts b/src/store/config-slice.ts index 4d4a92bec..9d0110450 100644 --- a/src/store/config-slice.ts +++ b/src/store/config-slice.ts @@ -1,11 +1,13 @@ import { StoreSlice } from './store'; import { Theme } from '@type/theme'; +import { FontSize } from '@type/font-size'; import { ConfigInterface, TotalTokenUsed } from '@type/chat'; import { _defaultChatConfig, _defaultSystemMessage } from '@constants/chat'; export interface ConfigSlice { openConfig: boolean; theme: Theme; + fontSize: FontSize; autoTitle: boolean; hideMenuOptions: boolean; advancedMode: boolean; @@ -19,6 +21,7 @@ export interface ConfigSlice { totalTokenUsed: TotalTokenUsed; setOpenConfig: (openConfig: boolean) => void; setTheme: (theme: Theme) => void; + setFontSize: (fontSize: FontSize) => void; setAutoTitle: (autoTitle: boolean) => void; setAdvancedMode: (advancedMode: boolean) => void; setDefaultChatConfig: (defaultChatConfig: ConfigInterface) => void; @@ -35,6 +38,7 @@ export interface ConfigSlice { export const createConfigSlice: StoreSlice = (set, get) => ({ openConfig: false, theme: 'dark', + fontSize: 'sm', hideMenuOptions: false, hideSideMenu: false, autoTitle: false, @@ -58,6 +62,12 @@ export const createConfigSlice: StoreSlice = (set, get) => ({ theme: theme, })); }, + setFontSize: (fontSize: FontSize) => { + set((prev: ConfigSlice) => ({ + ...prev, + fontSize: fontSize, + })); + }, setAutoTitle: (autoTitle: boolean) => { set((prev: ConfigSlice) => ({ ...prev, diff --git a/src/store/migrate.ts b/src/store/migrate.ts index b96ba6011..11a0c3fcb 100644 --- a/src/store/migrate.ts +++ b/src/store/migrate.ts @@ -11,6 +11,7 @@ import { LocalStorageInterfaceV5ToV6, LocalStorageInterfaceV6ToV7, LocalStorageInterfaceV7oV8, + LocalStorageInterfaceV8oV9 } from '@type/chat'; import { _defaultChatConfig, @@ -104,3 +105,7 @@ export const migrateV7 = (persistedState: LocalStorageInterfaceV7oV8) => { chat.id = uuidv4(); }); }; + +export const migrateV8 = (persistedState: LocalStorageInterfaceV8oV9) => { + persistedState.fontSize = 'sm'; +}; \ No newline at end of file diff --git a/src/store/store.ts b/src/store/store.ts index 69aba7de0..6c148afee 100644 --- a/src/store/store.ts +++ b/src/store/store.ts @@ -15,6 +15,7 @@ import { LocalStorageInterfaceV5ToV6, LocalStorageInterfaceV6ToV7, LocalStorageInterfaceV7oV8, + LocalStorageInterfaceV8oV9, } from '@type/chat'; import { migrateV0, @@ -25,6 +26,7 @@ import { migrateV5, migrateV6, migrateV7, + migrateV8, } from './migrate'; export type StoreState = ChatSlice & @@ -45,6 +47,7 @@ export const createPartializedState = (state: StoreState) => ({ apiKey: state.apiKey, apiEndpoint: state.apiEndpoint, theme: state.theme, + fontSize: state.fontSize, autoTitle: state.autoTitle, advancedMode: state.advancedMode, prompts: state.prompts, @@ -74,7 +77,7 @@ const useStore = create()( { name: 'free-chat-gpt', partialize: (state) => createPartializedState(state), - version: 8, + version: 9, migrate: (persistedState, version) => { switch (version) { case 0: @@ -93,6 +96,8 @@ const useStore = create()( migrateV6(persistedState as LocalStorageInterfaceV6ToV7); case 7: migrateV7(persistedState as LocalStorageInterfaceV7oV8); + case 8: + migrateV8(persistedState as LocalStorageInterfaceV8oV9); break; } return persistedState as StoreState; diff --git a/src/types/chat.ts b/src/types/chat.ts index 182e44fd6..e273a1020 100644 --- a/src/types/chat.ts +++ b/src/types/chat.ts @@ -1,5 +1,6 @@ import { Prompt } from './prompt'; import { Theme } from './theme'; +import { FontSize } from './font-size'; export type Role = 'user' | 'assistant' | 'system'; export const roles: Role[] = ['user', 'assistant', 'system']; @@ -161,3 +162,8 @@ export interface LocalStorageInterfaceV7oV8 foldersExpanded: boolean[]; folders: FolderCollection; } + +export interface LocalStorageInterfaceV8oV9 + extends LocalStorageInterfaceV7oV8 { + fontSize: FontSize; +} diff --git a/src/types/font-size.ts b/src/types/font-size.ts new file mode 100644 index 000000000..5128aa868 --- /dev/null +++ b/src/types/font-size.ts @@ -0,0 +1 @@ +export type FontSize = 'sm' | 'md' | 'lg';