robosats/frontend/src/components/App.js

87 lines
2.7 KiB
JavaScript
Raw Normal View History

2022-07-17 20:42:29 +00:00
import React, { Component , Suspense } from "react";
2022-05-02 19:28:34 +00:00
import ReactDOM from 'react-dom/client';
import HomePage from "./HomePage";
import { CssBaseline, IconButton , Link} from "@mui/material";
2022-03-16 13:23:48 +00:00
import { ThemeProvider, createTheme } from '@mui/material/styles';
2022-03-17 15:56:08 +00:00
import UnsafeAlert from "./UnsafeAlert";
import { LearnDialog } from "./Dialogs";
import { I18nextProvider } from "react-i18next";
import i18n from "./i18n";
//Icons
import DarkModeIcon from '@mui/icons-material/DarkMode';
import LightModeIcon from '@mui/icons-material/LightMode';
import SchoolIcon from '@mui/icons-material/School';
2022-08-19 21:01:20 +00:00
import ZoomOutIcon from '@mui/icons-material/ZoomOut';
2022-08-25 23:45:02 +00:00
import ZoomInIcon from '@mui/icons-material/ZoomIn';
import SettingsIcon from '@mui/icons-material/Settings';
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
dark: window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches,
2022-08-25 23:45:02 +00:00
expandedSettings: false,
openLearn: false,
2022-08-19 21:01:20 +00:00
theme: {typography: { fontSize: 14 }},
}
}
2022-08-19 21:01:20 +00:00
lightTheme = createTheme ({});
2022-03-16 13:23:48 +00:00
darkTheme = createTheme({
palette: {
mode: 'dark',
background: {
default: "#070707"
2022-03-16 13:23:48 +00:00
},
},
});
2022-08-25 23:45:02 +00:00
onSettingsClick = () => {
this.setState({
expandedSettings: ! this.state.expandedSettings
})
}
onZoomClick = (direction) => {
let zoomChange;
direction === "out" ? zoomChange = -1 : zoomChange = 1;
2022-08-19 21:01:20 +00:00
this.setState(({theme}) => ({
theme: {
...theme,
typography: {
2022-08-25 23:45:02 +00:00
fontSize: this.state.theme.typography.fontSize + zoomChange,
2022-08-19 21:01:20 +00:00
},
}
}));
}
render() {
return (
2022-07-17 20:42:29 +00:00
<Suspense fallback="loading language">
<I18nextProvider i18n={i18n}>
2022-08-19 21:01:20 +00:00
<ThemeProvider theme={this.state.dark ? this.darkTheme : createTheme(this.state.theme)}>
<CssBaseline/>
<LearnDialog open={this.state.openLearn} onClose={()=> this.setState({openLearn:false})}/>
<IconButton sx={{position:'fixed',right:'34px'}} onClick={()=> this.setState({openLearn:true})}><SchoolIcon/></IconButton>
<IconButton sx={{position:'fixed',right:'0px'}} onClick={()=>this.setState({dark:!this.state.dark})}>
{this.state.dark ? <LightModeIcon/>:<DarkModeIcon/>}
</IconButton>
2022-08-25 23:45:02 +00:00
<IconButton sx={{position:'fixed',right:'34px'}} onClick={()=> this.setState({openLearn:true})}><SchoolIcon/></IconButton>
<UnsafeAlert className="unsafeAlert"/>
<HomePage {...this.state}/>
</ThemeProvider>
</I18nextProvider>
2022-07-17 20:42:29 +00:00
</Suspense>
);
}
}
2022-05-02 19:28:34 +00:00
const root = ReactDOM.createRoot(
document.getElementById("app")
);
root.render(<App />);