binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: resolved theme updation workflow in store-wrapper and workspace preferences (#4931)

Browse source
This commit is contained in:
guru_sainath 2024-06-25 15:56:27 +05:30 • committed by GitHub
parent c5cd823aaa
commit 245962d5a5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 40 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

11
web/core/components/core/theme/custom-theme-selector.tsx
View file

@ -1,7 +1,6 @@
"use client";
import { observer } from "mobx-react";
import { useTheme } from "next-themes";
import { Controller, useForm } from "react-hook-form";
// types
import { IUserTheme } from "@plane/types";
@ -25,8 +24,12 @@ const inputRules = {
},
};
export const CustomThemeSelector: React.FC = observer(() => {
const { setTheme } = useTheme();
type TCustomThemeSelector = {
applyThemeChange: (theme: Partial<IUserTheme>) => void;
};
export const CustomThemeSelector: React.FC<TCustomThemeSelector> = observer((props) => {
const { applyThemeChange } = props;
// hooks
const { data: userProfile, updateUserTheme } = useUserProfile();
@ -59,7 +62,7 @@ export const CustomThemeSelector: React.FC = observer(() => {
palette: `${formData.background},${formData.text},${formData.primary},${formData.sidebarBackground},${formData.sidebarText}`,
theme: "custom",
};
setTheme("custom");
applyThemeChange(payload);
const updateCurrentUserThemePromise = updateUserTheme(payload);
setPromiseToast(updateCurrentUserThemePromise, {

26
web/core/lib/wrappers/store-wrapper.tsx
View file

@ -14,7 +14,7 @@ type TStoreWrapper = {
const StoreWrapper: FC<TStoreWrapper> = observer((props) => {
const { children } = props;
// theme
const { resolvedTheme, setTheme } = useTheme();
const { setTheme } = useTheme();
// router
const params = useParams();
// store hooks
@ -38,19 +38,21 @@ const StoreWrapper: FC<TStoreWrapper> = observer((props) => {
* Setting up the theme of the user by fetching it from local storage
*/
useEffect(() => {
setTheme(userProfile?.theme?.theme || resolvedTheme || "system");
if (!userProfile?.theme?.theme) return;
if (userProfile?.theme?.theme === "custom" && userProfile?.theme?.palette) {
applyTheme(
userProfile?.theme?.palette !== ",,,,"
? userProfile?.theme?.palette
: "#0d101b,#c5c5c5,#3f76ff,#0d101b,#c5c5c5",
false,
dom
);
} else unsetCustomCssVariables();
}, [userProfile, userProfile?.theme, userProfile?.theme?.palette, setTheme, dom, resolvedTheme]);
const currentTheme = userProfile?.theme?.theme || "system";
const currentThemePalette = userProfile?.theme?.palette;
if (currentTheme) {
setTheme(currentTheme);
if (currentTheme === "custom" && currentThemePalette && dom) {
applyTheme(
currentThemePalette !== ",,,," ? currentThemePalette : "#0d101b,#c5c5c5,#3f76ff,#0d101b,#c5c5c5",
false,
dom
);
} else unsetCustomCssVariables();
}
}, [userProfile?.theme?.theme, userProfile?.theme?.palette, setTheme, dom]);
useEffect(() => {
if (dom) return;