styles moved to scss

3 files changed, 12 insertions, 48 deletions

diff --git a/pages/_app.js b/pages/_app.js
index 5196b22..4625291 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,6 +1,6 @@
 import { SWRConfig } from 'swr'
 import fetchJson from 'lib/fetchJson'
-import '/styles/styles.scss'
+import '/styles/global.scss'
 
 function MyApp({Component, pageProps}) {
   return (
diff --git a/pages/index.js b/pages/index.js
index 9df0acf..52421ea 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,3 +1,4 @@
+import styles from 'styles/Main.module.scss'
 import React, { useState ,useRef } from 'react'
 import useUser from 'lib/useUser'
 import {Layout, App} from 'components'
@@ -21,7 +22,11 @@ const Home = () => {
       <>
         {
           Object.keys(appList).map(appName => (
-            <div key={`${appName}_icon`} onClick={() => open(appName, apps, setApps)}>
+            <div
+              key={`${appName}_icon`}
+              className={styles.icon}
+              onClick={() => open(appName, apps, setApps)}
+            >
               <img src={`./${appName.toLowerCase()}.svg`} alt={`${appName} Icon`} />
               <p>{appName}</p>
             </div>
@@ -41,24 +46,6 @@ const Home = () => {
              </App>
            );
         })}
-        <style jsx>{`
-          div {
-            text-decoration: none;
-            display: inline-block;
-            width: 4em;
-            cursor: pointer;
-          }
-
-          img {
-            width: 4em;
-          }
-
-          p {
-            padding-top: .5em;
-            text-align: center;
-            color: #333;
-          }
-        `}</style>
       </>
     </Layout>
   )
diff --git a/pages/verify.js b/pages/verify.js
index 1d89e22..9d92390 100644
--- a/pages/verify.js
+++ b/pages/verify.js
@@ -1,3 +1,4 @@
+import styles from 'styles/Main.module.scss'
 import {useState, useEffect} from 'react'
 import {useRouter} from 'next/router'
 import useUser from 'lib/useUser'
@@ -52,12 +53,12 @@ const Verify = () => {
             <p>Loading...</p>
           </div>
         ) : (
-          <div className="window window--popup">
+          <div className={`window window--popup ${styles.verify}`}>
             <p>One last step missing</p>
             <p>{`To start using Notes App type the verification code we sent to your email (${user.email}):`}</p>
             <form onSubmit={handleKey}>
               <input type="text" placeholder="Verification key" name="key" />
-              <button className="window__button" type="submit">Send</button>
+              <button className="window__button" type="submit">Verify</button>
             </form>
             {
               sending
@@ -69,39 +70,15 @@ const Verify = () => {
                       <p>Mail was successfully sent again, check your mailbox!</p>
                     ) : (
                       <p>If you didn't get verification email&nbsp;
-                        <span className="verify__sendEmail" onClick={handleSendMail}>send it again</span>.
+                        <span className={styles.email} onClick={handleSendMail}>send it again</span>.
                       </p>
                     )
                 )
             }
-            {errorMsg && <p className="verify__errorMsg">{errorMsg}</p>}
+            {errorMsg && <p className={styles.error}>{errorMsg}</p>}
           </div>
         )
       }
-      <style jsx>{`
-        form {
-          padding .5em 0;
-        }
-
-        input {
-          padding: .75em;
-          border: 1px dashed #333;
-          border-radius: .5em;
-        }
-
-        p {
-          line-height: 1.33;
-          padding: .5em 0;
-        }
-
-        .verify__sendEmail {
-          color: blue;
-          cursor: pointer;
-        }
-        .verify__errorMsg {
-          color: brown;
-        }
-      `}</style>
     </Layout>
   )
 }