Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-19 01:40:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

🎨 style: Enhance UI/UX for Font Size, Mentions, and Prompts (#3575)

Browse source 
* style: fix prompts icon shrinking in command popover

* fix: scroll into view behavior for mentions

* fix: always apply default font size if not found

* refactor: Update useMessageScrolling threshold and debounceRate
This commit is contained in:
Danny Avila 2024-08-08 10:02:30 -04:00 • committed by GitHub
parent 2bb0842650
commit b3821c1404
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 36 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

9
client/src/hooks/ThemeContext.tsx
View file

@ -1,8 +1,9 @@
//ThemeContext.js
// source: https://plainenglish.io/blog/light-and-dark-mode-in-react-web-application-with-tailwind-css-89674496b942
import { useSetRecoilState } from 'recoil';
import React, { createContext, useState, useEffect } from 'react';
import { getInitialTheme, applyFontSize } from '~/utils';
import store from '~/store';
type ProviderValue = {
theme: string;
@ -27,6 +28,7 @@ export const ThemeContext = createContext<ProviderValue>(defaultContextValue);
export const ThemeProvider = ({ initialTheme, children }) => {
const [theme, setTheme] = useState(getInitialTheme);
const setFontSize = useSetRecoilState(store.fontSize);
const rawSetTheme = (rawTheme: string) => {
const root = window.document.documentElement;
@ -54,9 +56,14 @@ export const ThemeProvider = ({ initialTheme, children }) => {
useEffect(() => {
const fontSize = localStorage.getItem('fontSize');
if (fontSize == null) {
setFontSize('text-base');
applyFontSize('text-base');
localStorage.setItem('fontSize', 'text-base');
return;
}
applyFontSize(JSON.parse(fontSize));
// Reason: This effect should only run once, and `setFontSize` is a stable function
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
if (initialTheme) {