refactor: custom theme selector

This commit is contained in:
Aaryan Khandelwal 2023-06-28 17:00:42 +05:30
parent 6b910247a4
commit aad0b5c10b
2 changed files with 24 additions and 22 deletions

View File

@ -79,26 +79,26 @@ export const CustomThemeSelector: React.FC<Props> = ({ preLoadedData }) => {
const handleFormSubmit = async (formData: any) => { const handleFormSubmit = async (formData: any) => {
const accent = { const accent = {
"accent-50": calculateShade(formData["accent-500"], 50), 50: calculateShade(formData["accent-500"], 50),
"accent-100": calculateShade(formData["accent-500"], 100), 100: calculateShade(formData["accent-500"], 100),
"accent-200": calculateShade(formData["accent-500"], 200), 200: calculateShade(formData["accent-500"], 200),
"accent-300": calculateShade(formData["accent-500"], 300), 300: calculateShade(formData["accent-500"], 300),
"accent-400": calculateShade(formData["accent-500"], 400), 400: calculateShade(formData["accent-500"], 400),
"accent-500": formData["accent-500"], 500: formData["accent-500"],
"accent-600": calculateShade(formData["accent-500"], 600), 600: calculateShade(formData["accent-500"], 600),
"accent-700": calculateShade(formData["accent-500"], 700), 700: calculateShade(formData["accent-500"], 700),
"accent-800": calculateShade(formData["accent-500"], 800), 800: calculateShade(formData["accent-500"], 800),
"accent-900": calculateShade(formData["accent-500"], 900), 900: calculateShade(formData["accent-500"], 900),
}; };
const payload: ICustomTheme = { const payload: ICustomTheme = {
...accent, accent,
bgBase: formData.bgBase, bgBase: formData.bgBase,
bgSurface1: formData.bgSurface1, bgSurface1: formData.bgSurface1,
bgSurface2: formData.bgSurface2, bgSurface2: formData.bgSurface2,
border: formData.border, border: formData.border,
darkPalette: darkPalette, 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}`, 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, sidebar: formData.sidebar,
textBase: formData.textBase, textBase: formData.textBase,
textSecondary: formData.textSecondary, textSecondary: formData.textSecondary,

View File

@ -29,16 +29,18 @@ export interface IUser {
} }
export interface ICustomTheme { export interface ICustomTheme {
"accent-50": string; accent: {
"accent-100": string; 50: string;
"accent-200": string; 100: string;
"accent-300": string; 200: string;
"accent-400": string; 300: string;
"accent-500": string; 400: string;
"accent-600": string; 500: string;
"accent-700": string; 600: string;
"accent-800": string; 700: string;
"accent-900": string; 800: string;
900: string;
};
bgBase: string; bgBase: string;
bgSurface1: string; bgSurface1: string;
bgSurface2: string; bgSurface2: string;