diff --git a/src/components/ChallengeView.tsx b/src/components/ChallengeView.tsx index 23f8f1df..78b797dc 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/book/BookView.tsx b/src/components/book/BookView.tsx index a93bc63c..15d53dfb 100644 --- a/src/components/book/BookView.tsx +++ b/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 <> -
+
diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx index af38748d..c4347187 100644 --- a/src/components/header/Header.tsx +++ b/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) => { } -export const Header = ({CenterComponent= <>, SubHeader=<>}: HeaderProps) => { +export const Header = ({CenterComponent= <>, SubHeader=<>, ShouldShowSimpleReadSwitch=true}: HeaderProps) => { const { theme } = useThemeContext() return @@ -32,6 +34,7 @@ export const Header = ({CenterComponent= <>, SubHeader=<>}: HeaderProps) = {CenterComponent}
+ {ShouldShowSimpleReadSwitch && }
diff --git a/src/components/header/SimpleReadSwitch.tsx b/src/components/header/SimpleReadSwitch.tsx new file mode 100644 index 00000000..8dd5fcff --- /dev/null +++ b/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 a} + checkedIcon={A} + onChange={handleToggle} + /> +} diff --git a/src/localStorage.ts b/src/localStorage.ts index a95beed3..627ca071 100644 --- a/src/localStorage.ts +++ b/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) diff --git a/src/theme/ThemeContext.tsx b/src/theme/ThemeContext.tsx index 12a4a083..add3bcdc 100644 --- a/src/theme/ThemeContext.tsx +++ b/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({ darkModeEnabled: false, setDarkModeEnabled: () => { }, + simpleReadModeEnabled: false, + setSimpleReadModeEnabled: () => { }, theme: createTheme({}) }); export const ThemeContextProvider: FC = ({ 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 ( - + {children} ); diff --git a/src/theme/theme.tsx b/src/theme/theme.tsx index e361d3c3..02fb0b58 100644 --- a/src/theme/theme.tsx +++ b/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: {