github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: custom theme selector

Browse Source
This commit is contained in:
Aaryan Khandelwal 2023-06-28 16:51:45 +05:30
parent 7983be5eff
commit 6b910247a4
1 changed files with 25 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
apps/app/components/core/custom-theme-selector.tsx
View File

@ -79,41 +79,34 @@ export const CustomThemeSelector: React.FC<Props> = ({ preLoadedData }) => {
const handleFormSubmit = async (formData: any) => {
const accent = {
50: calculateShade(formData["accent-500"], 50),
100: calculateShade(formData["accent-500"], 100),
200: calculateShade(formData["accent-500"], 200),
300: calculateShade(formData["accent-500"], 300),
400: calculateShade(formData["accent-500"], 400),
500: formData["accent-500"],
600: calculateShade(formData["accent-500"], 600),
700: calculateShade(formData["accent-500"], 700),
800: calculateShade(formData["accent-500"], 800),
900: calculateShade(formData["accent-500"], 900),
"accent-50": calculateShade(formData["accent-500"], 50),
"accent-100": calculateShade(formData["accent-500"], 100),
"accent-200": calculateShade(formData["accent-500"], 200),
"accent-300": calculateShade(formData["accent-500"], 300),
"accent-400": calculateShade(formData["accent-500"], 400),
"accent-500": formData["accent-500"],
"accent-600": calculateShade(formData["accent-500"], 600),
"accent-700": calculateShade(formData["accent-500"], 700),
"accent-800": calculateShade(formData["accent-500"], 800),
"accent-900": calculateShade(formData["accent-500"], 900),
};
const payload: ICustomTheme = {
...accent,
bgBase: formData.bgBase,
bgSurface1: formData.bgSurface1,
bgSurface2: formData.bgSurface2,
border: formData.border,
darkPalette: darkPalette,
palette: `${formData.bgBase},${formData.bgSurface1},${formData.bgSurface2},${formData.border},${formData.sidebar},${accent["accent-50"]},${accent["accent-100"]},${accent["accent-200"]},${accent["accent-300"]},${accent["accent-400"]},${accent["accent-500"]},${accent["accent-600"]},${accent["accent-700"]},${accent["accent-800"]},${accent["accent-900"]},${formData.textBase},${formData.textSecondary}`,
sidebar: formData.sidebar,
textBase: formData.textBase,
textSecondary: formData.textSecondary,
};
await userService
.updateUser({
theme: {
"accent-50": accent[50],
"accent-100": accent[100],
"accent-200": accent[200],
"accent-300": accent[300],
"accent-400": accent[400],
"accent-500": accent[500],
"accent-600": accent[600],
"accent-700": accent[700],
"accent-800": accent[800],
"accent-900": accent[900],
bgBase: formData.bgBase,
bgSurface1: formData.bgSurface1,
bgSurface2: formData.bgSurface2,
border: formData.border,
darkPalette: darkPalette,
palette: `${formData.bgBase},${formData.bgSurface1},${formData.bgSurface2},${formData.border},${formData.sidebar},${accent[50]},${accent[100]},${accent[200]},${accent[300]},${accent[400]},${accent[500]},${accent[600]},${accent[700]},${accent[800]},${accent[900]},${formData.textBase},${formData.textSecondary}`,
sidebar: formData.sidebar,
textBase: formData.textBase,
textSecondary: formData.textSecondary,
},
theme: payload,
})
.then((res) => {
mutateUser((prevData) => {
@ -122,7 +115,7 @@ export const CustomThemeSelector: React.FC<Props> = ({ preLoadedData }) => {
return { ...prevData, ...res };
}, false);
applyTheme(formData.palette, darkPalette);
applyTheme(payload.palette, darkPalette);
setTheme("custom");
})
.catch((err) => console.log(err));