adding SRM function

src/components/ChallengeView.tsx

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

src/components/book/BookView.tsx

@@ -11,6 +11,7 @@ import { Chapter } from "../../staticData/chapters";
 import { Group } from "../../staticData/groups";
 import { PBCard } from "../PBCard";
 import { useThemeContext } from "../../theme/ThemeContext";
+import { useEffect } from "react";
 
 const Breadcrumb = (book: Book) => {    
     const {t} = useTranslation("books")
@@ -31,10 +32,16 @@ export const BookView = () => {
     const {id} = useParams()
     const book: Book = getBook(Number(id))
     const {t} = useTranslation("books")
-    const {theme} = useThemeContext()
-
+    const {theme, setSimpleReadModeEnabled} = useThemeContext()
+
+    useEffect(() => {
+        if ( book.simpleReadMode ) 
+          setSimpleReadModeEnabled(true)
+    }, [book, setSimpleReadModeEnabled ])
+
+
     return <>
-        <Header CenterComponent={Breadcrumb(book)}/>
+        <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/Header.tsx

@@ -4,11 +4,13 @@ import styles from './header.module.css';
 import { SessionButton } from "./login/SessionButton";
 import { Link } from "react-router-dom";
 import { DarkModeSwitch } from "./DarkModeSwitch";
+import { SimpleReadSwitch } from "./SimpleReadSwitch";
 import { useThemeContext } from "../../theme/ThemeContext";
 
 type HeaderProps = {
     CenterComponent?: React.ReactNode,
-    SubHeader?: React.ReactNode 
+    SubHeader?: React.ReactNode,
+    ShouldShowSimpleReadSwitch?: boolean
 }
 
 type HeaderTextProps = {
@@ -23,7 +25,7 @@ export const HeaderText = (props: HeaderTextProps) => {
 	</Typography>
 }
 
-export const Header = ({CenterComponent= <></>, SubHeader=<></>}: HeaderProps) => {
+export const Header = ({CenterComponent= <></>, SubHeader=<></>, ShouldShowSimpleReadSwitch=true}: HeaderProps) => {
     const { theme } = useThemeContext()
 
     return <AppBar position="sticky" sx={{ bgcolor: theme.palette.background.default }} elevation={0}>
@@ -32,6 +34,7 @@ export const Header = ({CenterComponent= <></>, SubHeader=<></>}: HeaderProps) =
                 {CenterComponent}
                 <div>
                     <ChangeLanguageButton/>
+                    {ShouldShowSimpleReadSwitch && <SimpleReadSwitch/>}
                     <DarkModeSwitch/>
                     <SessionButton/>
                 </div>

src/components/header/SimpleReadSwitch.tsx

@@ -0,0 +1,27 @@
+import { Icon } from "@mui/material";
+import { PBSwitch } from "../PBSwitch";
+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 handleToggle = () => {
+        setSimpleReadModeEnabled(!simpleReadModeEnabled)
+    }
+
+    return <PBSwitch
+        checked={simpleReadModeEnabled}
+        icon={<Icon sx={iconSx}>a</Icon>}
+        checkedIcon={<Icon sx={iconSx}>A</Icon>}
+        onChange={handleToggle}
+    />
+}

src/localStorage.ts

@@ -10,6 +10,7 @@ export namespace LocalStorage {
     const PB_USER = 'PB_USER'
     const PB_CREATOR_CHALLENGE = 'PB_CREATOR_CHALLENGE'
     const PB_USE_NIGHT_THEME = 'PB_USE_NIGHT_THEME'
+    const PB_USE_SIMPLE_READ = 'PB_USE_SIMPLE_READ'
 
     const remove = (key: string) => { localStorage.removeItem(key) }
 
@@ -18,12 +19,14 @@ export namespace LocalStorage {
     export const getUser = (): User | null => _get(PB_USER)
     export const getCreatorChallenge = (): SerializedChallenge | null => _get(PB_CREATOR_CHALLENGE)
     export const getIsDarkMode = (): boolean => _get(PB_USE_NIGHT_THEME) || false
+    export const getIsSimpleReadMode = (): boolean => _get(PB_USE_SIMPLE_READ) || false
 
     export const saveSelectedLocale = (selectedLocale: LanguageCode) => _save(PB_SELECTED_LOCALE, selectedLocale)
     export const saveImportedChallenge = (importedChallenge: EmberExecutableChallenge) => _save(PB_IMPORTED_CHALLENGE, importedChallenge)
     export const saveUser = (user: User | null) => _save(PB_USER, user)
     export const saveCreatorChallenge = (challenge: SerializedChallenge | null) => _save(PB_CREATOR_CHALLENGE, challenge)
     export const saveDarkMode = (darkMode: boolean) => _save(PB_USE_NIGHT_THEME, darkMode)
+    export const saveSimpleReadMode = (simpleReadMode: boolean) => _save(PB_USE_SIMPLE_READ, simpleReadMode)
 
     const _get = (key: string) => _doSafe(key, (storage: Storage) => {
         const value = storage.getItem(key)

src/theme/ThemeContext.tsx

@@ -3,37 +3,44 @@ 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'
 
 type ThemeContextType = {
     darkModeEnabled: boolean;
     setDarkModeEnabled: (mode: boolean) => void;
+    simpleReadModeEnabled: boolean;
+    setSimpleReadModeEnabled: (mode: boolean) => void;
     theme: Theme
 };
 
 export const ThemeContext = createContext<ThemeContextType>({
     darkModeEnabled: false,
     setDarkModeEnabled: () => { },
+    simpleReadModeEnabled: false,
+    setSimpleReadModeEnabled: () => { },
     theme: createTheme({})
 });
 
 export const ThemeContextProvider: FC<PropsWithChildren> = ({ children }) => {
 
     const [darkModeEnabled, setDarkModeEnabled] = useState(LocalStorage.getIsDarkMode());
+    const [simpleReadModeEnabled, setSimpleReadModeEnabled] = useState(LocalStorage.getIsSimpleReadMode());
 
     const theme = useMemo(
-        () => createTheme(getDesignTokens(darkModeEnabled)),
-        [darkModeEnabled]
+        () => createTheme( deepmerge(getDesignTokens(darkModeEnabled), {typography: { allVariants: { textTransform: simpleReadModeEnabled ? 'uppercase': 'initial'}}})),
+        [darkModeEnabled, simpleReadModeEnabled]
     );
 
     useEffect(() =>{
         LocalStorage.saveDarkMode(darkModeEnabled)
+        LocalStorage.saveSimpleReadMode(simpleReadModeEnabled)
         Ember.refreshIframe()
-    }, [darkModeEnabled])
+    }, [darkModeEnabled, simpleReadModeEnabled])
 
     return (
-        <ThemeContext.Provider value={{ darkModeEnabled, setDarkModeEnabled, theme }}>
+        <ThemeContext.Provider value={{ darkModeEnabled, setDarkModeEnabled, simpleReadModeEnabled, setSimpleReadModeEnabled, theme }}>
             {children}
         </ThemeContext.Provider>
     );

src/theme/theme.tsx

@@ -2,13 +2,13 @@ import { ThemeOptions } from "@mui/material";
 import { deepmerge } from '@mui/utils';
 
 const commonTheme: ThemeOptions = {
-    shape: {
-        borderRadius: 10
-    },
-    typography: {
-        fontFamily: 'Nunito',
+        shape: {
+            borderRadius: 10
+        },
+        typography: {
+            fontFamily: 'Nunito'
+        }
     }
-}
 
 const lightTheme: ThemeOptions = {
     typography: {