Got rid of scss files, fixet time format

app/pages/_app.js

@@ -1,13 +1,22 @@
+import { createTheme, ThemeProvider } from '@mui/material/styles'
 import 'reset-css'
 import '../styles/global.scss'
 import Layout from '../components/layout'
 
-function MyApp ({ Component, pageProps }) {
+function App ({ Component, pageProps }) {
+  const lightTheme = createTheme({
+    palette: {
+      mode: 'light'
+    }
+  })
+
   return (
-    <Layout>
-      <Component {...pageProps} />
-    </Layout>
+    <ThemeProvider theme={lightTheme}>
+      <Layout>
+        <Component {...pageProps} />
+      </Layout>
+    </ThemeProvider>
   )
 }
 
-export default MyApp
+export default App

app/pages/home/Hero.js

@@ -1,13 +1,23 @@
 import { Component } from 'react'
 import Image from 'next/image'
-import styles from './Hero.module.scss'
+import { Box } from '@mui/material'
 import logo from './assets/warframe_logo.png'
 
 export default class Hero extends Component {
   render () {
     return (
-      <div className={styles.hero}>
-        <div className={styles.logo}>
+      <Box
+        sx={{
+          py: 12,
+          textAlign: 'center'
+        }}
+      >
+        <Box
+          sx={{
+            width: 400,
+            m: 'auto'
+          }}
+        >
           <Image
             src={logo}
             alt='logo'
@@ -15,12 +25,17 @@ export default class Hero extends Component {
             width={500}
             height={300}
           />
-        </div>
-        <div className={styles.text}>
+        </Box>
+        <Box
+          sx={{
+            width: 400,
+            m: 'auto'
+          }}
+        >
           <h1>Market Gaps</h1>
           <p>Find a profitable difference between the price of the set and the price of the sum of it's parts.</p>
-        </div>
-      </div>
+        </Box>
+      </Box>
     )
   }
 }

app/pages/home/Hero.module.scss

@@ -1,23 +0,0 @@
-.hero {
-  width: 100%;
-  padding: 128px 0;
-  position: relative;
-  background: white;
-  text-align: center;
-  overflow: hidden;
-
-  .text, .logo {
-    width: 400px;
-    margin: auto;
-  }
-
-  .logo {
-    img {
-      object-fit: contain;
-    }
-  }
-
-  .text {
-    
-  }
-}

app/pages/home/Table.js

@@ -32,7 +32,7 @@ export default class Table extends Component {
               </Link>
               <Typography variant='caption' display='block'>
                 <Moment
-                  format='DD.MM hh:mm'
+                  format='DD.MM HH:mm'
                 >
                   {cellValues.row.updatedAt}
                 </Moment>