Got rid of scss files, fixet time format

2022-03-19 15:41:32 +03:00
parent 76bf04f8de
commit 4f54d08666
11 changed files with 64 additions and 40 deletions
--- a/app/components/Footer.js
+++ b/app/components/Footer.js
@@ -1,9 +1,16 @@
 import { Component } from 'react'
+import { Box } from '@mui/material'

 export default class Footer extends Component {
  render () {
    return (
-      <div>Footer</div>
+      <Box
+        sx={{
+          p: 12
+        }}
+      >
+        Warframe Center is not associated with Digital Extremes
+      </Box>
    )
  }
 }
--- a/app/components/layout.js
+++ b/app/components/layout.js
@@ -1,5 +1,6 @@
 import Head from 'next/head'
 import Footer from './Footer'
+import { YMInitializer } from 'react-yandex-metrika'

 export default function Layout ({ children }) {
  return (
@@ -7,6 +8,7 @@ export default function Layout ({ children }) {
      <Head>
        <title>Warframe Center</title>
        <link rel='icon' href='/favicon.ico' />
+        <YMInitializer accounts={[87671663]} />
      </Head>
      <main>{children}</main>
      <Footer />
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -15,6 +15,7 @@
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "react-moment": "^1.1.1",
+        "react-yandex-metrika": "^2.6.0",
        "reset-css": "^5.0.1",
        "sass": "^1.49.9",
        "shared-stuff": "file:../shared-stuff",
@@ -3939,6 +3940,15 @@
        "react-dom": ">=16.6.0"
      }
    },
+    "node_modules/react-yandex-metrika": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/react-yandex-metrika/-/react-yandex-metrika-2.6.0.tgz",
+      "integrity": "sha512-8K4wExsNZtY3DTxh1G8a+zWH9Pg8fw23MJcoJ4I/562qrHRnh7L5nteq3lnNL58dnNQbuuHIRoGgMjIo+r1GjA==",
+      "peerDependencies": {
+        "prop-types": "*",
+        "react": "*"
+      }
+    },
    "node_modules/readable-stream": {
      "version": "2.3.7",
      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
@@ -7313,6 +7323,12 @@
        "prop-types": "^15.6.2"
      }
    },
+    "react-yandex-metrika": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/react-yandex-metrika/-/react-yandex-metrika-2.6.0.tgz",
+      "integrity": "sha512-8K4wExsNZtY3DTxh1G8a+zWH9Pg8fw23MJcoJ4I/562qrHRnh7L5nteq3lnNL58dnNQbuuHIRoGgMjIo+r1GjA==",
+      "requires": {}
+    },
    "readable-stream": {
      "version": "2.3.7",
      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
--- a/app/package.json
+++ b/app/package.json
@@ -16,6 +16,7 @@
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-moment": "^1.1.1",
+    "react-yandex-metrika": "^2.6.0",
    "reset-css": "^5.0.1",
    "sass": "^1.49.9",
    "shared-stuff": "file:../shared-stuff",
--- a/app/pages/_app.js
+++ b/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 (
+    <ThemeProvider theme={lightTheme}>
      <Layout>
        <Component {...pageProps} />
      </Layout>
+    </ThemeProvider>
  )
 }

-export default MyApp
+export default App
--- a/app/pages/home/Hero.js
+++ b/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>
    )
  }
 }
--- a/app/pages/home/Hero.module.scss
+++ b/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 {
-    
-  }
-}
--- a/app/pages/home/Table.js
+++ b/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>
--- a/app/styles/_colors.scss
+++ b/app/styles/_colors.scss
@@ -1 +0,0 @@
-$clr-text: #1f1f1f;
--- a/app/styles/_variables.scss
+++ b/app/styles/_variables.scss
@@ -1,2 +1 @@
@import './fonts';
-@import './colors';
--- a/app/styles/global.scss
+++ b/app/styles/global.scss
@@ -5,7 +5,6 @@ body {
  padding: 0;
  margin: 0;
  font: $font-r4;
-  color: $clr-text;
 }

 * {