From 2b396c8210907b28414be84137d0ddba3471bade Mon Sep 17 00:00:00 2001 From: Daniel Ferro Date: Thu, 7 Dec 2023 16:41:23 -0300 Subject: [PATCH] styling styles --- locales/en-us/others.json | 6 ++++- locales/es-ar/others.json | 6 ++++- locales/pt-br/others.json | 6 ++++- src/components/ChallengeView.tsx | 2 +- src/components/PBSwitch.tsx | 14 +++++++++- src/components/book/BookView.tsx | 2 +- src/components/header/DarkModeSwitch.tsx | 29 ++++++++++----------- src/components/header/Header.tsx | 6 ++--- src/components/header/SimpleReadSwitch.tsx | 30 +++++++++------------- src/staticData/books.ts | 4 +-- src/theme/ThemeContext.tsx | 6 ++--- src/theme/theme.tsx | 3 ++- 12 files changed, 64 insertions(+), 50 deletions(-) diff --git a/locales/en-us/others.json b/locales/en-us/others.json index e01b405f..a22bd83b 100644 --- a/locales/en-us/others.json +++ b/locales/en-us/others.json @@ -1,4 +1,8 @@ { "previousChallenge": "Previous challenge", - "nextChallenge": "Next challenge" + "nextChallenge": "Next challenge", + "lightThemeMode": "Light theme mode on", + "darkThemeMode": "Dark theme mode on", + "simpleReadModeOn": "Simple read mode on", + "simpleReadModeOff": "Simple read mode off" } \ No newline at end of file diff --git a/locales/es-ar/others.json b/locales/es-ar/others.json index a79917fe..47c33d85 100644 --- a/locales/es-ar/others.json +++ b/locales/es-ar/others.json @@ -1,4 +1,8 @@ { "previousChallenge": "Desafío anterior", - "nextChallenge": "Desafío siguiente" + "nextChallenge": "Desafío siguiente", + "lightThemeMode": "Activar modo claro", + "darkThemeMode": "Activar modo oscuro", + "simpleReadModeOn": "Activar modo de lectura simple", + "simpleReadModeOff": "Desactivar modo de lectura simple" } \ No newline at end of file diff --git a/locales/pt-br/others.json b/locales/pt-br/others.json index ed1a026a..dc0f8c18 100644 --- a/locales/pt-br/others.json +++ b/locales/pt-br/others.json @@ -1,4 +1,8 @@ { "previousChallenge": "Desafio anterior", - "nextChallenge": "Próximo desafio" + "nextChallenge": "Próximo desafio", + "lightThemeMode": "Ativar tema claro", + "darkThemeMode": "Ativar tema escuro", + "simpleReadModeOn": "Ativar o modo de leitura simple", + "simpleReadModeOff": "Desativar o modo de leitura simples" } \ No newline at end of file diff --git a/src/components/ChallengeView.tsx b/src/components/ChallengeView.tsx index 78b797dc..c699c3a2 100644 --- a/src/components/ChallengeView.tsx +++ b/src/components/ChallengeView.tsx @@ -75,7 +75,7 @@ const ChallengeView = (props: ChallengeViewProps) => { const solutionParam: string = solution ? `?codigo=${solution}` : "" return <> -
+
} diff --git a/src/components/PBSwitch.tsx b/src/components/PBSwitch.tsx index feb39ffc..0b0810e9 100644 --- a/src/components/PBSwitch.tsx +++ b/src/components/PBSwitch.tsx @@ -1,4 +1,16 @@ -import { Switch, styled } from "@mui/material"; +import { Switch, Theme, styled } from "@mui/material"; + +export const pbIconStyle = ( theme: Theme ) => { + return { + backgroundColor: theme.palette.background.default, + borderRadius: 10, + padding: '3px', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + color: theme.palette.primary.main + } +} export const PBSwitch = styled(Switch)(() => ({ alignSelf: 'center', diff --git a/src/components/book/BookView.tsx b/src/components/book/BookView.tsx index 15d53dfb..baf140b6 100644 --- a/src/components/book/BookView.tsx +++ b/src/components/book/BookView.tsx @@ -41,7 +41,7 @@ export const BookView = () => { return <> -
+
diff --git a/src/components/header/DarkModeSwitch.tsx b/src/components/header/DarkModeSwitch.tsx index 7db9fb98..e88ad506 100644 --- a/src/components/header/DarkModeSwitch.tsx +++ b/src/components/header/DarkModeSwitch.tsx @@ -1,25 +1,22 @@ +import { Tooltip } from "@mui/material"; import { DarkMode, LightMode } from "@mui/icons-material"; -import { PBSwitch } from "../PBSwitch"; +import { PBSwitch, pbIconStyle } from "../PBSwitch"; +import { useTranslation } from "react-i18next" import { useThemeContext } from "../../theme/ThemeContext"; export const DarkModeSwitch = () => { - const { darkModeEnabled, setDarkModeEnabled} = useThemeContext() - - const iconSx = { - backgroundColor: 'white', - borderRadius: 10, - padding: '3px', - color: 'gray' - } + const { theme, darkModeEnabled, setDarkModeEnabled} = useThemeContext() + const { t } = useTranslation("others") const handleToggle = () => { setDarkModeEnabled(!darkModeEnabled) } - - return } - checkedIcon={} - onChange={handleToggle} - /> + + return + } + checkedIcon={} + onChange={handleToggle}/> + } diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx index c4347187..e5fa6921 100644 --- a/src/components/header/Header.tsx +++ b/src/components/header/Header.tsx @@ -10,7 +10,7 @@ import { useThemeContext } from "../../theme/ThemeContext"; type HeaderProps = { CenterComponent?: React.ReactNode, SubHeader?: React.ReactNode, - ShouldShowSimpleReadSwitch?: boolean + shouldShowSimpleReadSwitch?: boolean } type HeaderTextProps = { @@ -25,7 +25,7 @@ export const HeaderText = (props: HeaderTextProps) => { } -export const Header = ({CenterComponent= <>, SubHeader=<>, ShouldShowSimpleReadSwitch=true}: HeaderProps) => { +export const Header = ({CenterComponent= <>, SubHeader=<>, shouldShowSimpleReadSwitch=true}: HeaderProps) => { const { theme } = useThemeContext() return @@ -34,7 +34,7 @@ export const Header = ({CenterComponent= <>, SubHeader=<>, ShouldShowSimpl {CenterComponent}
- {ShouldShowSimpleReadSwitch && } + {shouldShowSimpleReadSwitch && }
diff --git a/src/components/header/SimpleReadSwitch.tsx b/src/components/header/SimpleReadSwitch.tsx index 8dd5fcff..2703dbb7 100644 --- a/src/components/header/SimpleReadSwitch.tsx +++ b/src/components/header/SimpleReadSwitch.tsx @@ -1,27 +1,21 @@ -import { Icon } from "@mui/material"; -import { PBSwitch } from "../PBSwitch"; +import { Icon, Tooltip } from "@mui/material"; +import { PBSwitch, pbIconStyle } from "../PBSwitch"; +import { useTranslation } from "react-i18next" import { useThemeContext } from "../../theme/ThemeContext"; export const SimpleReadSwitch = () => { - const { simpleReadModeEnabled, setSimpleReadModeEnabled} = useThemeContext() - - const iconSx = { - backgroundColor: 'white', - borderRadius: 10, - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - color: 'gray' - } + const { theme, simpleReadModeEnabled, setSimpleReadModeEnabled} = useThemeContext() + const { t } = useTranslation("others") const handleToggle = () => { setSimpleReadModeEnabled(!simpleReadModeEnabled) } - return a} - checkedIcon={A} - onChange={handleToggle} - /> + return + a} + checkedIcon={A} + onChange={handleToggle}/> + } diff --git a/src/staticData/books.ts b/src/staticData/books.ts index 22ac57f2..5594bd95 100644 --- a/src/staticData/books.ts +++ b/src/staticData/books.ts @@ -55,11 +55,11 @@ const rawBooksData: RawBookData[] = [ { id: 3, chapterIds: ['Parametrización de soluciones'], - simpleReadMode: true + simpleReadMode: false }, { id: 1000, chapterIds: ['1','2','3','4','5'], - simpleReadMode: true + simpleReadMode: false }, ]; diff --git a/src/theme/ThemeContext.tsx b/src/theme/ThemeContext.tsx index add3bcdc..810903e8 100644 --- a/src/theme/ThemeContext.tsx +++ b/src/theme/ThemeContext.tsx @@ -3,7 +3,6 @@ import { createContext, FC, PropsWithChildren, useContext, useEffect, useMemo, u import { getDesignTokens } from "./theme"; import { LocalStorage } from "../localStorage"; import { Ember } from "../emberCommunication"; -import { deepmerge } from '@mui/utils'; export type ThemeMode = 'light' | 'dark' @@ -28,8 +27,8 @@ export const ThemeContextProvider: FC = ({ children }) => { const [darkModeEnabled, setDarkModeEnabled] = useState(LocalStorage.getIsDarkMode()); const [simpleReadModeEnabled, setSimpleReadModeEnabled] = useState(LocalStorage.getIsSimpleReadMode()); - const theme = useMemo( - () => createTheme( deepmerge(getDesignTokens(darkModeEnabled), {typography: { allVariants: { textTransform: simpleReadModeEnabled ? 'uppercase': 'initial'}}})), + const theme = useMemo( + () => createTheme( getDesignTokens(darkModeEnabled, simpleReadModeEnabled)), [darkModeEnabled, simpleReadModeEnabled] ); @@ -46,7 +45,6 @@ export const ThemeContextProvider: FC = ({ children }) => { ); }; - export const useThemeContext = () => { return useContext(ThemeContext); }; diff --git a/src/theme/theme.tsx b/src/theme/theme.tsx index 02fb0b58..8c8fbbb1 100644 --- a/src/theme/theme.tsx +++ b/src/theme/theme.tsx @@ -77,4 +77,5 @@ const darkTheme: ThemeOptions = { } -export const getDesignTokens = (darkModeEnabled: boolean): ThemeOptions => deepmerge(darkModeEnabled ? darkTheme : lightTheme,commonTheme) +export const getDesignTokens = (darkModeEnabled: boolean, simpleReadModeEnabled: boolean): ThemeOptions => + deepmerge( {typography: { allVariants: { textTransform: simpleReadModeEnabled ? 'uppercase': 'initial'}}}, deepmerge(darkModeEnabled ? darkTheme : lightTheme,commonTheme)) \ No newline at end of file