From 979ec4b576c7e134ac0dde1f05542fca820628cc Mon Sep 17 00:00:00 2001 From: Edouard DUPIN Date: Thu, 23 Jan 2025 18:09:57 +0100 Subject: [PATCH] [FEAT] local theme integration --- front/src/App.tsx | 196 +++++++++--------- front/src/components/AudioPlayer.tsx | 6 +- front/src/components/EmptyEnd.tsx | 2 +- front/src/components/Layout/PageLayout.tsx | 5 +- .../Layout/PageLayoutInfoCenter.tsx | 6 +- front/src/components/TopBar/TopBar.tsx | 14 +- front/src/components/album/DisplayAlbum.tsx | 4 +- front/src/components/form/FormCovers.tsx | 2 +- front/src/components/form/FormGroup.tsx | 2 +- front/src/components/gender/DisplayGender.tsx | 4 +- front/src/components/select/SelectList.tsx | 10 +- .../src/components/select/SelectMultiple.tsx | 8 +- front/src/components/select/SelectSingle.tsx | 6 +- front/src/components/track/DisplayTrack.tsx | 4 +- .../src/components/track/DisplayTrackFull.tsx | 4 +- .../components/track/DisplayTrackSkeleton.tsx | 4 +- front/src/errors/ErrorBoundary.tsx | 2 +- front/src/main.tsx | 11 +- front/src/scene/album/AlbumDetailPage.tsx | 2 +- front/src/scene/album/AlbumsPage.tsx | 2 +- .../scene/artist/ArtistAlbumDetailPage.tsx | 2 +- front/src/scene/artist/ArtistDetailPage.tsx | 2 +- front/src/scene/artist/ArtistsPage.tsx | 6 +- front/src/scene/gender/GenderDetailPage.tsx | 2 +- front/src/scene/gender/GendersPage.tsx | 2 +- front/src/scene/home/AddPage.tsx | 12 +- front/src/scene/home/HomePage.tsx | 31 ++- front/src/scene/onAir/OnAirPage.tsx | 2 +- front/src/scene/sso/SSOPage.tsx | 4 +- front/src/scene/track/TrackSelectionPage.tsx | 4 +- .../track/TracksStartLetterDetailPage.tsx | 4 +- front/src/theme/ThemeContext.tsx | 105 +++++++++- front/src/theme/colors.ts | 23 +- front/src/ui/Button.tsx | 19 +- front/src/ui/Div.tsx | 24 ++- front/src/ui/Flex.tsx | 26 ++- front/src/ui/HStack.tsx | 2 +- front/src/ui/Image.tsx | 10 +- front/src/ui/Table/root.tsx | 4 +- front/src/ui/VStack.tsx | 2 +- 40 files changed, 355 insertions(+), 225 deletions(-) diff --git a/front/src/App.tsx b/front/src/App.tsx index 425d8e3..f8d5265 100644 --- a/front/src/App.tsx +++ b/front/src/App.tsx @@ -1,106 +1,112 @@ import { App as SpaApp } from '@/scene/App'; -import { FullPage } from './ui'; +import { Div, FullPage } from './ui'; +import { useDisclosure } from './utils/disclosure'; +import { useState } from 'react'; +import { environment } from './environment'; +import { hashLocalData } from './utils/sso'; +import { USERS } from './service/session'; -// const AppEnvHint = () => { -// const dialog = useDisclosure(); -// const [selectUserTest, setSelectUserTest] = useState('NO_USER'); -// //const setUser = useRightsStore((store) => store.setUser); -// const buildEnv = -// process.env.NODE_ENV === 'development' -// ? 'Development' -// : import.meta.env.VITE_DEV_ENV_NAME; -// const envName: Array = []; -// !!buildEnv && envName.push(buildEnv); -// if (!envName.length) { -// return null; -// } -// const handleChange = (selectedOption) => { -// console.log(`SELECT: [${selectedOption.target.value}]`); -// setSelectUserTest(selectedOption.target.value); -// }; -// const onClose = () => { -// dialog.onClose(); -// if (selectUserTest == 'NO_USER') { -// window.location.href = `/${environment.applName}/sso/${hashLocalData()}/false/__LOGOUT__`; -// } else { -// window.location.href = `/${environment.applName}/sso/${hashLocalData()}/true/${USERS[selectUserTest]}`; -// } -// }; +const AppEnvHint = () => { + const dialog = useDisclosure(); + const [selectUserTest, setSelectUserTest] = useState('NO_USER'); + //const setUser = useRightsStore((store) => store.setUser); + const buildEnv = + process.env.NODE_ENV === 'development' + ? 'Development' + : import.meta.env.VITE_DEV_ENV_NAME; + const envName: Array = []; + !!buildEnv && envName.push(buildEnv); + if (!envName.length) { + return null; + } + const handleChange = (selectedOption) => { + console.log(`SELECT: [${selectedOption.target.value}]`); + setSelectUserTest(selectedOption.target.value); + }; + const onClose = () => { + dialog.onClose(); + if (selectUserTest == 'NO_USER') { + window.location.href = `/${environment.applName}/sso/${hashLocalData()}/false/__LOGOUT__`; + } else { + window.location.href = `/${environment.applName}/sso/${hashLocalData()}/true/${USERS[selectUserTest]}`; + } + }; -// return ( -// <> -//
-//
-// {envName.join(' : ')} -//
-//
-// -// -// -// -// -// -// -// -// Outils développeurs -// -// -// User -// -// -// -// -// -// {USERS_COLLECTION.items.map((value) => ( -// -// {value.label} -// -// ))} -// -// -// -// -// -// -// -// -// -// -// -// -// ); -// }; + return ( + <> +
+
+ {envName.join(' : ')} +
+
+ {/* + + + + + + + + Outils développeurs + + + User + + + + + + {USERS_COLLECTION.items.map((value) => ( + + {value.label} + + ))} + + + + + + + + + + + */} + + ); +}; const App = () => { return ( - {/* */} + {/* */} diff --git a/front/src/components/AudioPlayer.tsx b/front/src/components/AudioPlayer.tsx index 217b8ca..38e4f47 100644 --- a/front/src/components/AudioPlayer.tsx +++ b/front/src/components/AudioPlayer.tsx @@ -80,7 +80,7 @@ export const AudioPlayer = ({ }: AudioPlayerProps) => { const backColor = useColorThemeValue('back.100', 'back.800'); const configButton = { borderRadius: 'full', - backgroundColor: '#00000000', + background: '#00000000', _hover: { boxShadow: 'outline-over', bgColor: 'brand.500', @@ -216,7 +216,7 @@ export const AudioPlayer = ({ }: AudioPlayerProps) => { zIndex: 1000, borderWidth: "1px", borderColor: "brand.900", - backgroundColor: backColor, + background: backColor, borderRadius: "10px 10px 0 0", }} direction="column" @@ -248,7 +248,7 @@ export const AudioPlayer = ({ }: AudioPlayerProps) => { {dataAlbum && dataAlbum?.name} {dataGender && ` / ${dataGender.name}`} - + <>TODO ... {/* { return ( & { topBar?: ReactNode; @@ -30,9 +30,10 @@ export const PageLayout = ({ children }: LayoutProps) => { right: 0, minWidth: "300px", zIndex: -1, + background: "back.800", }} > - {/* */} + { left: 0, right: 0, height: TOP_BAR_HEIGHT, - backgroundColor: backColor, + background: backColor, padding: "0 2 0 2", - boxShadow: `0px 2px 4px ${colors.back[900]}`, + boxShadow: `0px 2px 4px ${basicColor.back[900]}`, zIndex: 200, }} > @@ -176,7 +176,7 @@ export const TopBar = ({ title, children }: TopBarProps) => { as="button" onClick={drawerDisclose.onClose} boxShadow={'0px 2px 4px ' + colors.back[900]} - backgroundColor={backColor} + background={backColor} color={useColorModeValue('brand.900', 'brand.50')} textTransform="uppercase" > @@ -192,7 +192,7 @@ export const TopBar = ({ title, children }: TopBarProps) => { background="#00000000" borderRadius="0px" onClick={onSelectHome} - width="full" + width="100%" > @@ -204,7 +204,7 @@ export const TopBar = ({ title, children }: TopBarProps) => { background="#00000000" borderRadius="0px" onClick={onSelectOnAir} - width="full" + width="100%" > @@ -216,7 +216,7 @@ export const TopBar = ({ title, children }: TopBarProps) => { background="#00000000" borderRadius="0px" onClick={onSelectAdd} - width="full" + width="100%" > diff --git a/front/src/components/album/DisplayAlbum.tsx b/front/src/components/album/DisplayAlbum.tsx index 28b9001..bedf4a3 100644 --- a/front/src/components/album/DisplayAlbum.tsx +++ b/front/src/components/album/DisplayAlbum.tsx @@ -15,13 +15,13 @@ export const DisplayAlbum = ({ dataAlbum }: DisplayAlbumProps) => { const { countTracksOfAnAlbum } = useCountTracksWithAlbumId(dataAlbum?.id); if (!dataAlbum) { return ( - + Fail to retrieve Album Data. ); } return ( - form.restoreValue({ [variableName]: true })} {...rest} > <> - {/* + {/* {urls.map((data, index) => ( diff --git a/front/src/components/form/FormGroup.tsx b/front/src/components/form/FormGroup.tsx index fe8bd6d..4bd8654 100644 --- a/front/src/components/form/FormGroup.tsx +++ b/front/src/components/form/FormGroup.tsx @@ -32,7 +32,7 @@ export const FormGroup = ({ padding="0 4px" direction="column" > - + {!!label && ( {label}{' '} diff --git a/front/src/components/gender/DisplayGender.tsx b/front/src/components/gender/DisplayGender.tsx index cc92f52..3c82c2e 100644 --- a/front/src/components/gender/DisplayGender.tsx +++ b/front/src/components/gender/DisplayGender.tsx @@ -13,13 +13,13 @@ export const DisplayGender = ({ dataGender }: DisplayGenderProps) => { const { countTracksOnAGender } = useCountTracksOfAGender(dataGender?.id); if (!dataGender) { return ( - + Fail to retrieve Gender Data. ); } return ( - + onSelectValue(data)} //ref={data.isSelected ? scrollToRef : undefined} @@ -110,7 +110,7 @@ export const SelectList = ({ margin: "1px 0", borderRadius: "0px", //autoFocus:false, - //_hover={ backgroundColor: 'gray.400' } + //_hover={ background: 'gray.400' } }} onClick={() => onCreate(search)} > diff --git a/front/src/components/select/SelectMultiple.tsx b/front/src/components/select/SelectMultiple.tsx index a3bee9c..b4f0a46 100644 --- a/front/src/components/select/SelectMultiple.tsx +++ b/front/src/components/select/SelectMultiple.tsx @@ -99,9 +99,9 @@ export const SelectMultiple = ({ }; return ( - + {selectedOptions && ( - + {selectedOptions.map((data) => ( {/* {data[keyValue] ?? `id=${data[keyKey]}`} selectValue(data)} /> @@ -123,7 +123,7 @@ export const SelectMultiple = ({ onChangeInput(e.target.value)} diff --git a/front/src/components/select/SelectSingle.tsx b/front/src/components/select/SelectSingle.tsx index dd04b19..4d03d7d 100644 --- a/front/src/components/select/SelectSingle.tsx +++ b/front/src/components/select/SelectSingle.tsx @@ -101,13 +101,13 @@ export const SelectSingle = ({ }; return ( - + onChangeInput(e.target.value)} diff --git a/front/src/components/track/DisplayTrack.tsx b/front/src/components/track/DisplayTrack.tsx index 2fc8fc1..3299bb3 100644 --- a/front/src/components/track/DisplayTrack.tsx +++ b/front/src/components/track/DisplayTrack.tsx @@ -18,7 +18,7 @@ export const DisplayTrack = ({ }: DisplayTrackProps) => { const { trackActive } = useActivePlaylistService(); return ( - + { return ( - + {/* { /> */} { const { open, onToggle } = useDisclosure(); return ( - + An unexpected error has occurred. Message: {error.message} {/* diff --git a/front/src/main.tsx b/front/src/main.tsx index eefbcea..3fea3d9 100644 --- a/front/src/main.tsx +++ b/front/src/main.tsx @@ -1,15 +1,16 @@ import ReactDOM from 'react-dom/client'; import App from '@/App'; import { ThemeProvider } from './theme/ThemeContext'; +import { StrictMode } from 'react'; // Render the app const rootElement = document.getElementById('root'); if (rootElement && !rootElement.innerHTML) { const root = ReactDOM.createRoot(rootElement); root.render( - // - - - - // + + + + + ); } diff --git a/front/src/scene/album/AlbumDetailPage.tsx b/front/src/scene/album/AlbumDetailPage.tsx index cbff60e..b7cc80e 100644 --- a/front/src/scene/album/AlbumDetailPage.tsx +++ b/front/src/scene/album/AlbumDetailPage.tsx @@ -110,7 +110,7 @@ export const AlbumDetailPage = () => { //height="60px" border: "1px", borderColor: "brand.900", - backgroundColor: useColorThemeValue('#FFFFFF88', '#00000088'), + background: useColorThemeValue('#FFFFFF88', '#00000088'), padding: "5px", // _hover: { // boxShadow: 'outline-over', diff --git a/front/src/scene/album/AlbumsPage.tsx b/front/src/scene/album/AlbumsPage.tsx index 7ec0099..56e4d60 100644 --- a/front/src/scene/album/AlbumsPage.tsx +++ b/front/src/scene/album/AlbumsPage.tsx @@ -45,7 +45,7 @@ export const AlbumsPage = () => { height: BASE_WRAP_HEIGHT, border: "1px", borderColor: "brand.900", - backgroundColor: useColorThemeValue('#FFFFFF88', '#00000088'), + background: useColorThemeValue('#FFFFFF88', '#00000088'), padding: "5px", // _hover={ // boxShadow: 'outline-over', diff --git a/front/src/scene/artist/ArtistAlbumDetailPage.tsx b/front/src/scene/artist/ArtistAlbumDetailPage.tsx index e383a65..d422d6d 100644 --- a/front/src/scene/artist/ArtistAlbumDetailPage.tsx +++ b/front/src/scene/artist/ArtistAlbumDetailPage.tsx @@ -137,7 +137,7 @@ export const ArtistAlbumDetailPage = () => { height: "60px", border: "1px", borderColor: "brand.900", - backgroundColor: useColorThemeValue('#FFFFFF88', '#00000088'), + background: useColorThemeValue('#FFFFFF88', '#00000088'), padding: "5px", // _hover: { // boxShadow: 'outline-over', diff --git a/front/src/scene/artist/ArtistDetailPage.tsx b/front/src/scene/artist/ArtistDetailPage.tsx index e82fe92..db25571 100644 --- a/front/src/scene/artist/ArtistDetailPage.tsx +++ b/front/src/scene/artist/ArtistDetailPage.tsx @@ -98,7 +98,7 @@ export const ArtistDetailPage = () => { height: BASE_WRAP_HEIGHT, border: "1px", borderColor: "brand.900", - backgroundColor: useColorThemeValue('#FFFFFF88', '#00000088'), + background: useColorThemeValue('#FFFFFF88', '#00000088'), padding: "5px", // _hover={ // boxShadow: 'outline-over', diff --git a/front/src/scene/artist/ArtistsPage.tsx b/front/src/scene/artist/ArtistsPage.tsx index fffc662..9dae3ab 100644 --- a/front/src/scene/artist/ArtistsPage.tsx +++ b/front/src/scene/artist/ArtistsPage.tsx @@ -71,7 +71,7 @@ export const ArtistsPage = () => { alignContent: "flex-start", border: "1px", borderColor: "brand.900", - backgroundColor: useColorThemeValue('#FFFFFF88', '#00000088'), + background: useColorThemeValue('#FFFFFF88', '#00000088'), padding: "5px", // _hover:{ // boxShadow: 'outline-over', @@ -80,11 +80,11 @@ export const ArtistsPage = () => { }} onClick={() => onSelectItem(data)} > - + { //height="60px", border: "1px", borderColor: "brand.900", - backgroundColor: useColorThemeValue('#FFFFFF88', '#00000088'), + background: useColorThemeValue('#FFFFFF88', '#00000088'), padding: "5px", // _hover: { // boxShadow: 'outline-over', diff --git a/front/src/scene/gender/GendersPage.tsx b/front/src/scene/gender/GendersPage.tsx index 91b4905..e9ae3e4 100644 --- a/front/src/scene/gender/GendersPage.tsx +++ b/front/src/scene/gender/GendersPage.tsx @@ -47,7 +47,7 @@ export const GendersPage = () => { height: "120px", border: "1px", borderColor: "brand.900", - //backgroundColor:{useColorModeValue('#FFFFFF88', '#00000088')}, + //background:{useColorModeValue('#FFFFFF88', '#00000088')}, padding: "5px", // _hover: { // boxShadow: 'outline-over', diff --git a/front/src/scene/home/AddPage.tsx b/front/src/scene/home/AddPage.tsx index 799348b..327d430 100644 --- a/front/src/scene/home/AddPage.tsx +++ b/front/src/scene/home/AddPage.tsx @@ -421,7 +421,7 @@ export const AddPage = () => { padding: "10px", }} > - + format: @@ -479,7 +479,7 @@ export const AddPage = () => { track ID - Title + Title actions @@ -493,7 +493,7 @@ export const AddPage = () => { placeholder="e?" value={data.trackId} onChange={(e) => onTrackId(data, e.target.value)} - backgroundColor={ + background={ data.trackIdDetected === true ? 'darkred' : undefined @@ -506,14 +506,14 @@ export const AddPage = () => { placeholder="Name of the Media" value={data.title} onChange={(e) => onTitle(data, e.target.value)} - backgroundColor={ + background={ data.title === '' ? 'darkred' : undefined } /> */} {data.nameDetected === true && ( <>
- + ^^^This title already exist !!! @@ -558,7 +558,7 @@ export const AddPage = () => { track ID - Title + Title actions diff --git a/front/src/scene/home/HomePage.tsx b/front/src/scene/home/HomePage.tsx index 77080fb..cdedc26 100644 --- a/front/src/scene/home/HomePage.tsx +++ b/front/src/scene/home/HomePage.tsx @@ -58,30 +58,43 @@ export const HomePage = () => { <> - + {homeList.map((data) => ( onSelectItem(data)} > - -
{data.icon}
-
+ +
{data.icon}
+
{ //height:"60px", border: "1px", borderColor: "brand.900", - backgroundColor: useColorThemeValue('#FFFFFF88', '#00000088'), + background: useColorThemeValue('#FFFFFF88', '#00000088'), padding: "5px", // _hover: { // boxShadow: 'outline-over', diff --git a/front/src/scene/sso/SSOPage.tsx b/front/src/scene/sso/SSOPage.tsx index 9de475b..616815e 100644 --- a/front/src/scene/sso/SSOPage.tsx +++ b/front/src/scene/sso/SSOPage.tsx @@ -50,8 +50,8 @@ export const SSOPage = () => { LOGIN (after SSO) - - + + {token === '__CANCEL__' && ( diff --git a/front/src/scene/track/TrackSelectionPage.tsx b/front/src/scene/track/TrackSelectionPage.tsx index 20e63fe..277af91 100644 --- a/front/src/scene/track/TrackSelectionPage.tsx +++ b/front/src/scene/track/TrackSelectionPage.tsx @@ -50,7 +50,7 @@ export const TrackSelectionPage = () => { height="75px" border="1px" borderColor="brand.900" - backgroundColor={useColorThemeValue('#FFFFFF88', '#00000088')} + background={useColorThemeValue('#FFFFFF88', '#00000088')} key={data} padding="5px" as="button" @@ -60,7 +60,7 @@ export const TrackSelectionPage = () => { }} onClick={() => onSelectItem(data)} > - + { //height:"60px", border: "1px", borderColor: "brand.900", - backgroundColor: useColorThemeValue('#FFFFFF88', '#00000088'), + background: useColorThemeValue('#FFFFFF88', '#00000088'), padding: "5px", // _hover: { // boxShadow: 'outline-over', @@ -83,7 +83,7 @@ export const TracksStartLetterDetailPage = () => { //height:"60px", border: "1px", borderColor: "brand.900", - backgroundColor: useColorThemeValue('#FFFFFF88', '#00000088'), + background: useColorThemeValue('#FFFFFF88', '#00000088'), padding: "5px", // _hover: { diff --git a/front/src/theme/ThemeContext.tsx b/front/src/theme/ThemeContext.tsx index 7e7109c..6e45429 100644 --- a/front/src/theme/ThemeContext.tsx +++ b/front/src/theme/ThemeContext.tsx @@ -2,21 +2,41 @@ import { createContext, useContext, useState, useEffect, CSSProperties, ReactNode, useCallback } from "react"; import { basicColor } from "./colors"; -type themeContextProps = { +export type ApplyThemeProperty = { + componentType?: String; + // define the format of the shape + shape?: String; + // Define the color model used + palette?: String; +} + +export type ThemeContextProps = { theme: string; themeList: string[]; setTheme: (string) => void; toggleTheme: () => void; convertStyle: (style: CSSProperties) => CSSProperties, + applyTheme: (style: CSSProperties, theme: ApplyThemeProperty) => CSSProperties, } -const ThemeContext = createContext({ +const ThemeContext = createContext({ theme: "error", themeList: ["error"], - setTheme: (_: string) => { }, - toggleTheme: () => { }, - convertStyle: (style: CSSProperties): CSSProperties => { return style; }, + setTheme: (_: string) => { + console.error("Request setTheme without context"); + }, + toggleTheme: () => { + console.error("Request toggleTheme without context"); + }, + convertStyle: (style: CSSProperties): CSSProperties => { + console.error("Request convertStyle without context"); + return style; + }, + applyTheme: (style: CSSProperties, _theme: ApplyThemeProperty) => { + console.error("Request applyTheme without context"); + return style; + }, }); const themes = { @@ -36,11 +56,40 @@ const themes = { background: "#181818", text: "#ffffff", }, + }, + base: { + Button: { + border: '1px solid red', + }, + Flex: { + + }, + }, + shape: { + outline: { + border: '1px solid transparent', + }, + }, + palette: { + primary: { + borderColor: "green" + }, + secondary: { + + }, + danger: { + + }, + success: { + + } + } }; + export function ThemeProvider({ children, themeList = ["light", "dark"] }: { children: ReactNode, themeList?: string[] }) { - const [theme, setTheme] = useState(themeList[0]); + const [theme, setTheme] = useState(themeList[1]); const [basicsColor, setBasicsColor] = useState<{ [key: string]: string }>({}); // update the global CSS wen theme is updated: @@ -66,7 +115,6 @@ export function ThemeProvider({ children, themeList = ["light", "dark"] }: { chi }, [theme, setBasicsColor]); const toggleTheme = useCallback(() => { - console.log(`plop: ${theme}`); setTheme((previous) => { if (themeList.length <= 1) { return previous; @@ -85,24 +133,62 @@ export function ThemeProvider({ children, themeList = ["light", "dark"] }: { chi if (typeof value !== "string") { return; } + // console.log(`request convert value: ${value}`); if (basicsColor[value]) { + // console.log(`convert value: ${value} in ${basicsColor[value]}`); style[key] = basicsColor[value]; } }, [basicsColor]); + const convertStyle = useCallback((style: CSSProperties): CSSProperties => { - console.log(`plop: ${theme}`); + //console.log(`plop: ${theme}`); if (!style) { return style; } const out = { ...style } convertElementStyle(out, "background"); + convertElementStyle(out, "backgroundColor"); convertElementStyle(out, "borderColor"); convertElementStyle(out, "color"); return out; }, [convertElementStyle]); + const applyTheme = useCallback((style: CSSProperties, selectedTheme?: ApplyThemeProperty): CSSProperties => { + let out = style; + console.log(`apply style ... ${JSON.stringify(selectedTheme, null, 2)}`); + // Apply the basic theme of the component: + if (selectedTheme?.componentType) { + console.log(`detect component type theme ... ${selectedTheme?.componentType}`); + const base = themes?.base[selectedTheme.componentType]; + console.log(` base = ${JSON.stringify(base, null, 2)}`); + if (base) { + out = { ...base, ...out }; + } + } + // Apply the variant selected: + if (selectedTheme?.shape) { + const shape = themes?.shape[selectedTheme.shape]; + if (shape) { + out = { ...shape, ...out }; + } + } + // Apply the palette selected: + if (selectedTheme?.palette) { + const palette = themes?.shape[selectedTheme.palette]; + if (palette) { + const palette2 = palette[theme]; + if (palette2) { + out = { ...palette2, ...out }; + } + } + + } + + return convertStyle(out); + }, [convertStyle]); + return ( - + {children} ); @@ -111,5 +197,6 @@ export const useTheme = () => useContext(ThemeContext); export function useColorThemeValue(firstTheme: T, secondTheme: T) { const { theme, themeList } = useTheme() + //console.log(`use theme =${theme} ==> ${theme === themeList[0] ? firstTheme : secondTheme}`); return theme === themeList[0] ? firstTheme : secondTheme } diff --git a/front/src/theme/colors.ts b/front/src/theme/colors.ts index e9a8c92..ff41f3e 100644 --- a/front/src/theme/colors.ts +++ b/front/src/theme/colors.ts @@ -12,7 +12,7 @@ const brand = { 900: '#00071e', }; -const back = { +const black = { 50: '#f2f2f2', 100: '#d9d9d9', 200: '#bfbfbf', @@ -112,14 +112,15 @@ const cyan = { } export const basicColor = { - green, red, orange, back, blue, yellow, purple, cyan -} - -export const colors = { - - brand: brand, - back: back, - success: green, - error: red, + brand, + green, + red, + orange, + black, + blue, + yellow, + purple, + cyan, + back: black, warning: orange, -} as const; +} diff --git a/front/src/ui/Button.tsx b/front/src/ui/Button.tsx index 5484ce9..beaa35a 100644 --- a/front/src/ui/Button.tsx +++ b/front/src/ui/Button.tsx @@ -1,24 +1,27 @@ -import { useTheme } from "@/theme/ThemeContext"; +import { ApplyThemeProperty, useTheme } from "@/theme/ThemeContext"; import { ReactNode, CSSProperties } from "react"; export type ButtonProps = { children: ReactNode; onClick?: () => void; style?: CSSProperties; + componentType?: ApplyThemeProperty['componentType']; + shape?: ApplyThemeProperty['shape']; + palette?: ApplyThemeProperty['palette']; }; -export const Button = ({ children, onClick, style }: ButtonProps) => { - const { convertStyle } = useTheme(); - const themedStyle = style ? convertStyle({ +export const Button = ({ children, onClick, style, componentType = "Button", shape, palette }: ButtonProps) => { + const { applyTheme } = useTheme(); + const themedStyle = style ? applyTheme({ padding: '10px 20px', - backgroundColor: '#3182CE', + background: '#3182CE', color: '#FFF', - border: 'none', - borderRadius: '4px', + //border: 'none', + //borderRadius: '4px', cursor: 'pointer', fontSize: '16px', ...style, - }) : undefined; + }, { componentType, shape, palette }) : undefined; return (