robosats/frontend/src/components/App.js

62 lines
1.8 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';
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
dark: window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches,
openLearn: false,
}
}
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
},
},
});
render() {
return (
2022-07-17 20:42:29 +00:00
<Suspense fallback="loading language">
<I18nextProvider i18n={i18n}>
<ThemeProvider theme={this.state.dark ? this.darkTheme : this.lightTheme}>
<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>
<UnsafeAlert className="unsafeAlert"/>
<HomePage/>
</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 />);