@@ -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: {