diff options
Diffstat (limited to 'components')
| -rw-r--r-- | components/Form.js | 26 | ||||
| -rw-r--r-- | components/Header.js | 68 | ||||
| -rw-r--r-- | components/Layout.js | 38 |
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> ) } |