added a layout for config and fixed grammer error

BergerAPI · Apr 12, 2021 · 7b60f7d · 7b60f7d · vercel · Apr 12, 2021
1 parent ef86462
commit 7b60f7d
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 20 deletions.
diff --git a/components/layout/Base-Layout.js b/components/layout/Base-Layout.js
@@ -5,7 +5,9 @@ import styles from "../../styles/components/layout/Layout.module.css"
 const BaseLayout = ({ children }) => {
 
     return (
-        <div className={styles.content}>
+        <div className={styles.content} style={{
+            height: "100vh",
+        }}>
             <Head>
                 <title>typo.io</title>
                 <link rel="icon" href="/favicon.ico" />
@@ -14,18 +16,27 @@ const BaseLayout = ({ children }) => {
 
             <Navbar />
 
-            <main className={styles.main}>
-                    {children}
+            <main className={styles.main} style={{
+                position: "absolute",
+                top: "50%",
+                width: "100%",
+                "-ms-transform": "translateY(-50%)",
+                "transform": "translateY(-50%)"
+            }}>
+                {children}
             </main>
 
-            <footer className={styles.footer}>
+            <div className={styles.footer} style={{
+                bottom: 0,
+                position: "fixed",
+            }}>
                 <p>
                     Powered by{' '}
                     <code>niclas@127.0.0.1</code>
                 </p>
-            </footer>
+            </div>
 
-        </div>
+        </div >
     )
 }
 

diff --git a/components/layout/Moving-Layout.js b/components/layout/Moving-Layout.js
@@ -0,0 +1,33 @@
+import Head from 'next/head'
+import { Navbar } from '../Navbar.jsx'
+import styles from "../../styles/components/layout/Layout.module.css"
+
+const MovingLayout = ({ children }) => {
+
+    return (
+        <div className={styles.content}>
+            <Head>
+                <title>typo.io</title>
+                <link rel="icon" href="/favicon.ico" />
+                <meta name="color-scheme" content="dark light" />
+            </Head>
+
+            <Navbar />
+
+            <main className={styles.main}>
+                    {children}
+            </main>
+
+            <div className={styles.footer}>
+                <p>
+                    Powered by{' '}
+                    <code>niclas@127.0.0.1</code>
+                </p>
+            </div>
+
+        </div>
+    )
+}
+
+
+export default MovingLayout
diff --git a/pages/_app.js b/pages/_app.js
@@ -5,10 +5,12 @@ import BaseLayout from "../components/layout/Base-Layout"
  * The main method 😍
  */
 function Typo({ Component, pageProps }) {
+    const Layout = Component.Layout || BaseLayout;
+
     return (
-        <BaseLayout>
+        <Layout>
             <Component {...pageProps} />
-        </BaseLayout>
+        </Layout>
     )
 }
 

diff --git a/pages/config/index.js b/pages/config/index.js
@@ -1,17 +1,20 @@
 import { Checkbox } from "../../components/config/Checkbox.jsx"
 import { Mode } from "../../components/config/Mode.jsx"
+import MovingLayout from "../../components/layout/Moving-Layout.js"
 
 export default function Home() {
   return (
     <>
       <Checkbox title="Error Sound" description="If this is enabled, you will hear a sound, every time you type a error. (Not recommend on Macbook's)" item="error_sounds" />
       <Checkbox title="Click Sound" description="If this is enabled, you will hear a sound, every time you press a key. (Not recommend on Macbook's)" item="click_sounds" />
       <Mode title="Input Mode" description="If you want to type quotes in you selected language, or just randomly placed words." item="input_mode" values={["Words", "Quotes"]} />
-      <Mode title="Unit" description="If you want to see your wpm or you cpm." item="unit" values={["WPM", "CPM"]} />
+      <Mode title="Unit" description="If you want to see your wpm or your cpm." item="unit" values={["WPM", "CPM"]} />
       <Mode title="Mode" description="If you want to play in time, or just write a text." item="mode" values={["Text", "10s", "15s", "30s", "60s"]} />
       <Mode title="Language" description="The Language, in which you want to type in" item="language" values={["English", "German", "France", "Russia"]} />
       <Mode title="Font-Size" description="The size of the font" item="font-size" values={["15px", "20px", "25px", "30px"]} />
       <Mode title="Font" description="The font" item="font-family" values={["'Arial'", "monospace", "'Roboto'", "Source Code Pro"]} />
    </>
   )
 }
+
+Home.Layout = MovingLayout;
diff --git a/styles/components/Navbar.module.css b/styles/components/Navbar.module.css
@@ -10,7 +10,6 @@
     padding: 0;
     margin: 0;
     height: 50px;
-    border-bottom: 1px solid #eaeaea;
 }
 
 .navigation .logo {

diff --git a/styles/components/config/Config.module.css b/styles/components/config/Config.module.css
@@ -12,7 +12,7 @@
   height: auto;
   display: flex;
   align-items: center;
-  margin: 10px;
+  margin: 30px;
   font-family: monospace;
 }
 

diff --git a/styles/components/layout/Layout.module.css b/styles/components/layout/Layout.module.css
@@ -5,21 +5,12 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-
-  position: absolute;
-  top: 50%;
-  width: 100%;
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
 }
 
 .footer {
   width: 100%;
   height: 100px;
-  border-top: 1px solid #eaeaea;
   text-align: center;
-  bottom: 0;
-  position: fixed;
 
   display: flex;
   justify-content: center;