import React from 'react'; import './App.css'; import { Container, Box } from '@material-ui/core'; import { createMuiTheme } from '@material-ui/core/styles'; import { ThemeProvider } from '@material-ui/core/styles'; import CssBaseline from '@material-ui/core/CssBaseline'; import OverclockingCard from '../OverclockingCard'; import MonitoringCard from '../MonitoringCard'; import ButtonMappingCard from '../ButtonMappingCard'; import cmLogo from '../../images/cm_logo.png'; const theme = createMuiTheme({ palette: { type: 'dark', background: { default: '#212721' }, primary: { main: '#84329B' } }, typography: { fontFamily: 'noto_sansregular', h5: { fontFamily: 'oswaldregular', textTransform: 'uppercase', } } }); const CMLogo: React.FC = () => { return ( <Box display="flex" justifyContent="center"> <Box width="30%"> <img width="100%" src={cmLogo} alt="Logo" /> </Box> </Box> ); } function App() { return ( <div className="App" style={{ width: '100%', height: '100%' }}> <ThemeProvider theme={theme}> <CssBaseline /> <Container maxWidth="md"> <OverclockingCard /> <MonitoringCard /> <ButtonMappingCard /> <CMLogo /> </Container> </ThemeProvider> </div> ); } export default App;