styling styles

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"
 }

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"
 }

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"
 }

src/components/ChallengeView.tsx

@@ -75,7 +75,7 @@ const ChallengeView = (props: ChallengeViewProps) => {
     const solutionParam: string = solution ? `?codigo=${solution}` : ""
 
     return <>
-        <Header CenterComponent={ChallengeBreadcrumb(path)} ShouldShowSimpleReadSwitch={!path.book.simpleReadMode} />
+        <Header CenterComponent={ChallengeBreadcrumb(path)} shouldShowSimpleReadSwitch={!path.book.simpleReadMode} />
         <EmberView path={`desafio/${props.challengeId}${solutionParam}`} />
     </>
 }

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',

src/components/book/BookView.tsx

@@ -41,7 +41,7 @@ export const BookView = () => {
 
 
     return <>
-        <Header CenterComponent={Breadcrumb(book)} ShouldShowSimpleReadSwitch={!book.simpleReadMode} />
+        <Header CenterComponent={Breadcrumb(book)} shouldShowSimpleReadSwitch={!book.simpleReadMode} />
         <Stack alignItems="center" style={{backgroundImage: "url(imagenes/book-background.svg)"}}>
             <PBCard style={{maxWidth: 'var(--creator-max-width)', padding: theme.spacing(2)}}>
                 <Stack>

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 <PBSwitch
-        checked={darkModeEnabled}
-        icon={<LightMode sx={iconSx} />}
-        checkedIcon={<DarkMode sx={iconSx} />}
-        onChange={handleToggle}
-    />
+
+    return <Tooltip title={darkModeEnabled ? t(`lightThemeMode`) : t(`darkThemeMode`) }>
+        <PBSwitch
+            checked={darkModeEnabled}
+            icon={<LightMode sx={pbIconStyle(theme)}/>}
+            checkedIcon={<DarkMode sx={pbIconStyle(theme)}/>}
+            onChange={handleToggle}/>
+        </Tooltip>
 }

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) => {
 	</Typography>
 }
 
-export const Header = ({CenterComponent= <></>, SubHeader=<></>, ShouldShowSimpleReadSwitch=true}: HeaderProps) => {
+export const Header = ({CenterComponent= <></>, SubHeader=<></>, shouldShowSimpleReadSwitch=true}: HeaderProps) => {
     const { theme } = useThemeContext()
 
     return <AppBar position="sticky" sx={{ bgcolor: theme.palette.background.default }} elevation={0}>
@@ -34,7 +34,7 @@ export const Header = ({CenterComponent= <></>, SubHeader=<></>, ShouldShowSimpl
                 {CenterComponent}
                 <div>
                     <ChangeLanguageButton/>
-                    {ShouldShowSimpleReadSwitch && <SimpleReadSwitch/>}
+                    {shouldShowSimpleReadSwitch && <SimpleReadSwitch/>}
                     <DarkModeSwitch/>
                     <SessionButton/>
                 </div>

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 <PBSwitch
-        checked={simpleReadModeEnabled}
-        icon={<Icon sx={iconSx}>a</Icon>}
-        checkedIcon={<Icon sx={iconSx}>A</Icon>}
-        onChange={handleToggle}
-    />
+    return <Tooltip title={simpleReadModeEnabled ? t(`simpleReadModeOff`) : t(`simpleReadModeOn`)}>
+        <PBSwitch
+            checked={simpleReadModeEnabled}
+            icon={<Icon sx={pbIconStyle(theme)}>a</Icon>}
+            checkedIcon={<Icon sx={pbIconStyle(theme)}>A</Icon>}
+            onChange={handleToggle}/>
+        </Tooltip>
 }

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
   },  
 ];

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<PropsWithChildren> = ({ 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<PropsWithChildren> = ({ children }) => {
     );
 };
 
-
 export const useThemeContext = () => {
     return useContext(ThemeContext);
   };

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))