styles moved to scss

3 files changed, 12 insertions, 120 deletions

diff --git a/components/Form.js b/components/Form.js
index fc14a75..f41c958 100644
--- a/components/Form.js
+++ b/components/Form.js
@@ -1,8 +1,9 @@
+import styles from 'styles/Main.module.scss'
 import React from 'react'
 import PropTypes from 'prop-types'
 
 const Form = ({errorMessage, onSubmit, isLogin}) => (
-  <form className='window window--popup' onSubmit={onSubmit}>
+  <form className={`window window--popup ${styles.userForm}`} onSubmit={onSubmit}>
     <div className="window__content--popup">
       {isLogin ? 'Login to access your notes' : 'Register new user'}
     </div>
@@ -12,29 +13,6 @@ const Form = ({errorMessage, onSubmit, isLogin}) => (
     <input className='window__button' type="submit" value={isLogin ? 'Login' : 'Register'} />
 
     {errorMessage && <p className="error">{errorMessage}</p>}
-
-    <style jsx>{`
-      form,
-      label {
-        display: flex;
-        flex-flow: column;
-      }
-      label > span {
-        font-weight: 600;
-      }
-      input[type=email],
-      input[type=password]  {
-        padding: .5em;
-        margin: .5em 0;
-        border: 1px solid #ccc;
-        border-radius: .25px;
-      }
-      .error {
-        text-align: center;
-        color: brown;
-        margin: 1rem 0 0;
-      }
-    `}</style>
   </form>
 )
 
diff --git a/components/Header.js b/components/Header.js
index 4302af9..3d1f471 100644
--- a/components/Header.js
+++ b/components/Header.js
@@ -1,3 +1,4 @@
+import styles from 'styles/Main.module.scss'
 import React, {useState} from 'react'
 import Link from 'next/link'
 import useUser from 'lib/useUser'
@@ -20,9 +21,9 @@ const Header = ({apps, setApps}) => {
   }
 
   return (
-    <header>
+    <header className={styles.header}>
       <nav>
-        <ul className='header__apps'>
+        <ul>
           {
             apps && apps.map(app => (
               <li
@@ -53,12 +54,17 @@ const Header = ({apps, setApps}) => {
           {user?.isLoggedIn && (
             <li>
               <p
-                className='user-menu'
+                className={styles.user}
                 onClick={() => setUserMenu(!userMenu)}
               >{user?.email}</p>
               {
                 userMenu && (
-                  <ul className='user-submenu'>
+                  <ul className={styles.submenu}>
+                    <li>
+                      <span onClick={() => {}}>
+                        Settings
+                      </span>
+                    </li>
                     <li>
                       <a href="/api/logout" onClick={handleLogout}>
                         Logout
@@ -71,60 +77,6 @@ const Header = ({apps, setApps}) => {
           )}
         </ul>
       </nav>
-      <style jsx>{`
-        header {
-          height: 2em;
-          padding: 0.5rem;
-          background-color: rgba(255, 255, 255, 0.4);
-          border-bottom: 1px solid rgba(255, 255, 255, 0.5)
-        }
-
-        nav {
-          display: flex;
-        }
-
-        .header__apps {
-          flex-grow: 1;
-          overflow: auto;
-        }
-
-        li {
-          margin-left: 1em;
-          margin-right: 1em;
-          display: inline-block;
-          cursor: pointer;
-        }
-
-        .header__separator {
-          margin-right: auto;
-        }
-
-        a {
-          color: #333;
-          font-weight: 600;
-          text-decoration: none;
-          align-items: center;
-        }
-
-        .user-menu {
-          font-weight: 600;
-          cursor: pointer;
-          position: relative;
-        }
-
-        .user-submenu {
-          position: absolute;
-          right: 0;
-          top: 2.1em;
-          width: 10em;
-          padding: .5em;
-          background-color: rgba(255, 255, 255, .9);
-          border: 1px solid rgba(255, 255, 255, .5)
-        }
-        .user-submenu a {
-          text-align: right;
-        }
-      `}</style>
     </header>
   )
 }
diff --git a/components/Layout.js b/components/Layout.js
index f77ea0c..8b6cf87 100644
--- a/components/Layout.js
+++ b/components/Layout.js
@@ -18,44 +18,6 @@ const Layout = ({ children, apps, setApps}) => {
       </main>
       <Header apps={apps} setApps={setApps} />
       <Popup popup={popup} />
-      <style jsx global>{`
-        main {
-          position: fixed;
-          top: 2em;
-          left: 0;
-          bottom: 0;
-          right: 0;
-        }
-
-        body {
-          margin: 0;
-          color: #222;
-          height: 100vh;
-          overflow: hidden;
-
-          background: #50a3a2;
-          background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
-          background: -moz-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
-          background: -o-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
-          background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
-
-          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-            'Helvetica Neue', Arial, Noto Sans, sans-serif, 'Apple Color Emoji',
-            'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-        }
-
-        textarea, input {
-          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-            'Helvetica Neue', Arial, Noto Sans, sans-serif, 'Apple Color Emoji',
-            'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-        }
-
-        .container {
-          margin: 1.5rem auto;
-          padding-left: 2rem;
-          padding-right: 2rem;
-        }
-      `}</style>
     </Context.Provider>
   )
 }