From a5930f17724cd7bdfbdf9890f3318291e8965b8f Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Wed, 5 Aug 2020 19:04:02 -0700
Subject: [PATCH] Use css variables.

---
 components/Button.js                     |  4 ++--
 components/Button.module.css             |  9 +-------
 components/Dropdown.module.css           |  2 +-
 components/Header.module.css             |  4 ++--
 components/Login.js                      |  6 +++--
 components/Login.module.css              |  6 +++++
 components/MetricCard.module.css         |  4 ++--
 components/Page.js                       |  6 +++++
 components/Page.module.css               |  8 +++++++
 components/PageviewsChart.module.css     |  8 +++----
 components/QuickButtons.js               |  2 +-
 components/QuickButtons.module.css       |  5 ++++
 components/RankingsChart.module.css      | 18 ++++++++++-----
 components/Settings.js                   |  5 ++--
 components/StickyHeader.js               |  2 +-
 components/WebsiteChart.js               |  6 ++---
 components/WebsiteChart.module.css       |  6 ++---
 components/WebsiteDetails.js             |  5 ++--
 components/WebsiteDetails.module.css     | 13 ++++-------
 components/WebsiteList.js                |  5 ++--
 components/WebsiteList.module.css        |  9 ++------
 hooks/{useUser.js => useRequireLogin.js} |  6 ++---
 pages/_app.js                            |  1 +
 pages/index.js                           |  4 ++--
 pages/login.js                           |  8 +------
 pages/settings.js                        |  4 ++--
 pages/website/[...id].js                 |  4 ++--
 styles/index.css                         | 27 +++++++++++++---------
 styles/variables.css                     | 29 ++++++++++++++++++++++++
 29 files changed, 131 insertions(+), 85 deletions(-)
 create mode 100644 components/Login.module.css
 create mode 100644 components/Page.js
 create mode 100644 components/Page.module.css
 rename hooks/{useUser.js => useRequireLogin.js} (84%)
 create mode 100644 styles/variables.css

diff --git a/components/Button.js b/components/Button.js
index 0ce0ea03..3fa61800 100644
--- a/components/Button.js
+++ b/components/Button.js
@@ -3,9 +3,9 @@ import classNames from 'classnames';
 import Icon from './Icon';
 import styles from './Button.module.css';
 
-export default function Button({ icon, children, className, onClick }) {
+export default function Button({ icon, type = 'button', children, className, onClick = () => {} }) {
   return (
-    <button type="button" className={classNames(styles.button, className)} onClick={onClick}>
+    <button type={type} className={classNames(styles.button, className)} onClick={onClick}>
       {icon && <Icon icon={icon} />}
       {children}
     </button>
diff --git a/components/Button.module.css b/components/Button.module.css
index 4d907040..79213168 100644
--- a/components/Button.module.css
+++ b/components/Button.module.css
@@ -3,7 +3,7 @@
   justify-content: center;
   align-items: center;
   background: #f5f5f5;
-  padding: 4px 8px;
+  padding: 8px 16px;
   border-radius: 4px;
   border: 0;
   outline: none;
@@ -13,10 +13,3 @@
 .button:hover {
   background: #eaeaea;
 }
-
-.button svg {
-  display: block;
-  width: 16px;
-  height: 16px;
-  margin-right: 8px;
-}
diff --git a/components/Dropdown.module.css b/components/Dropdown.module.css
index 1d85f0d8..28f252c0 100644
--- a/components/Dropdown.module.css
+++ b/components/Dropdown.module.css
@@ -1,6 +1,6 @@
 .dropdown {
   position: relative;
-  font-size: 14px;
+  font-size: var(--font-size-small);
   min-width: 140px;
 }
 
diff --git a/components/Header.module.css b/components/Header.module.css
index c533e1b5..575236fc 100644
--- a/components/Header.module.css
+++ b/components/Header.module.css
@@ -8,7 +8,7 @@
 }
 
 .title {
-  font-size: 30px;
+  font-size: var(--font-size-large);
 }
 
 .nav {
@@ -19,7 +19,7 @@
 }
 
 .nav > * {
-  font-size: 14px;
+  font-size: var(--font-size-normal);
   font-weight: 600;
   margin-left: 40px;
 }
diff --git a/components/Login.js b/components/Login.js
index d3abf6e6..649142b9 100644
--- a/components/Login.js
+++ b/components/Login.js
@@ -2,6 +2,8 @@ import React, { useState } from 'react';
 import { Formik, Form, Field, ErrorMessage } from 'formik';
 import Router from 'next/router';
 import { post } from 'lib/web';
+import Button from './Button';
+import styles from './Login.module.css';
 
 const validate = ({ username, password }) => {
   const errors = {};
@@ -39,7 +41,7 @@ export default function Login() {
       onSubmit={handleSubmit}
     >
       {() => (
-        <Form>
+        <Form className={styles.form}>
           <h3>{message}</h3>
           <div>
             <label htmlFor="username">Username</label>
@@ -51,7 +53,7 @@ export default function Login() {
             <Field name="password" type="password" />
             <ErrorMessage name="password" />
           </div>
-          <button type="submit">Submit</button>
+          <Button type="submit">Submit</Button>
         </Form>
       )}
     </Formik>
diff --git a/components/Login.module.css b/components/Login.module.css
new file mode 100644
index 00000000..113ec401
--- /dev/null
+++ b/components/Login.module.css
@@ -0,0 +1,6 @@
+.form {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
diff --git a/components/MetricCard.module.css b/components/MetricCard.module.css
index bfa692fb..84f88211 100644
--- a/components/MetricCard.module.css
+++ b/components/MetricCard.module.css
@@ -6,12 +6,12 @@
 }
 
 .value {
-  font-size: 36px;
+  font-size: var(--font-size-xlarge);
   line-height: 40px;
   min-height: 40px;
   font-weight: 600;
 }
 
 .label {
-  font-size: 16px;
+  font-size: var(--font-size-normal);
 }
diff --git a/components/Page.js b/components/Page.js
new file mode 100644
index 00000000..31fcadff
--- /dev/null
+++ b/components/Page.js
@@ -0,0 +1,6 @@
+import React from 'react';
+import styles from './Page.module.css';
+
+export default function Page({ children }) {
+  return <div className={styles.container}>{children}</div>;
+}
diff --git a/components/Page.module.css b/components/Page.module.css
new file mode 100644
index 00000000..8cfe426c
--- /dev/null
+++ b/components/Page.module.css
@@ -0,0 +1,8 @@
+.container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 0 30px;
+  background: var(--gray50);
+  height: 100%;
+}
diff --git a/components/PageviewsChart.module.css b/components/PageviewsChart.module.css
index 9b344849..88b785ca 100644
--- a/components/PageviewsChart.module.css
+++ b/components/PageviewsChart.module.css
@@ -12,12 +12,12 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  color: #fff;
+  color: var(--gray50);
   text-align: center;
 }
 
 .title {
-  font-size: 12px;
+  font-size: var(--font-size-xsmall);
   font-weight: 600;
 }
 
@@ -25,7 +25,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  font-size: 14px;
+  font-size: var(--font-size-small);
   font-weight: 600;
 }
 
@@ -34,7 +34,7 @@
   overflow: hidden;
   border-radius: 100%;
   margin-right: 8px;
-  background: #fff;
+  background: var(--gray50);
 }
 
 .color {
diff --git a/components/QuickButtons.js b/components/QuickButtons.js
index 03bee6cc..de5722e6 100644
--- a/components/QuickButtons.js
+++ b/components/QuickButtons.js
@@ -20,7 +20,7 @@ export default function QuickButtons({ value, onChange }) {
       {Object.keys(options).map(key => (
         <Button
           key={key}
-          className={classNames({ [styles.active]: value === key })}
+          className={classNames(styles.button, { [styles.active]: value === key })}
           onClick={() => handleClick(key)}
         >
           {options[key]}
diff --git a/components/QuickButtons.module.css b/components/QuickButtons.module.css
index 947479bb..81c58856 100644
--- a/components/QuickButtons.module.css
+++ b/components/QuickButtons.module.css
@@ -10,6 +10,11 @@
   margin-left: 10px;
 }
 
+.button {
+  font-size: var(--font-size-xsmall);
+  padding: 4px 8px;
+}
+
 .active {
   font-weight: 600;
 }
diff --git a/components/RankingsChart.module.css b/components/RankingsChart.module.css
index f470199c..bb060c04 100644
--- a/components/RankingsChart.module.css
+++ b/components/RankingsChart.module.css
@@ -1,7 +1,7 @@
 .container {
   position: relative;
   min-height: 430px;
-  font-size: 14px;
+  font-size: var(--font-size-small);
   padding: 20px 0;
   display: flex;
   flex-direction: column;
@@ -15,11 +15,11 @@
 .title {
   flex: 1;
   font-weight: 600;
-  font-size: 16px;
+  font-size: var(--font-size-normal);
 }
 
 .heading {
-  font-size: 14px;
+  font-size: var(--font-size-small);
   text-align: center;
   width: 100px;
 }
@@ -61,7 +61,7 @@
   position: relative;
   width: 50px;
   color: #6e6e6e;
-  border-left: 1px solid #8e8e8e;
+  border-left: 1px solid var(--gray600);
   padding-left: 10px;
   z-index: 1;
 }
@@ -72,7 +72,7 @@
   left: 0;
   height: 30px;
   opacity: 0.1;
-  background: #2680eb;
+  background: var(--primary400);
   z-index: -1;
 }
 
@@ -83,9 +83,15 @@
 
 .body:empty:before {
   content: 'No data available';
-  color: #b3b3b3;
+  color: var(--gray500);
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
 }
+
+@media only screen and (max-width: 992px) {
+  .container {
+    min-height: auto;
+  }
+}
diff --git a/components/Settings.js b/components/Settings.js
index 30da4472..6729dfb4 100644
--- a/components/Settings.js
+++ b/components/Settings.js
@@ -1,9 +1,10 @@
 import React from 'react';
+import Page from './Page';
 
 export default function Settings() {
   return (
-    <div>
+    <Page>
       <h2>Settings</h2>
-    </div>
+    </Page>
   );
 }
diff --git a/components/StickyHeader.js b/components/StickyHeader.js
index 7378a857..3db8c381 100644
--- a/components/StickyHeader.js
+++ b/components/StickyHeader.js
@@ -41,7 +41,7 @@ export default function StickyHeader({
       ref={ref}
       data-sticky={sticky}
       className={classNames(className, { [stickyClassName]: sticky })}
-      {...(sticky && { style: stickyStyle })}
+      style={sticky ? { ...stickyStyle, width: ref?.current?.clientWidth } : null}
     >
       {children}
     </div>
diff --git a/components/WebsiteChart.js b/components/WebsiteChart.js
index 696ff2e2..5779258a 100644
--- a/components/WebsiteChart.js
+++ b/components/WebsiteChart.js
@@ -20,7 +20,6 @@ export default function WebsiteChart({
   const [data, setData] = useState();
   const [dateRange, setDateRange] = useState(getDateRange(defaultDateRange));
   const { startDate, endDate, unit, value } = dateRange;
-  const container = useRef();
 
   const [pageviews, uniques] = useMemo(() => {
     if (data) {
@@ -54,11 +53,10 @@ export default function WebsiteChart({
   }, [websiteId, startDate, endDate, unit]);
 
   return (
-    <div ref={container}>
+    <>
       <StickyHeader
         className={classNames(styles.header, 'row')}
         stickyClassName={styles.sticky}
-        stickyStyle={{ width: container?.current?.clientWidth }}
         enabled={stickyHeader}
       >
         <MetricsBar
@@ -87,6 +85,6 @@ export default function WebsiteChart({
           )}
         </CheckVisible>
       </div>
-    </div>
+    </>
   );
 }
diff --git a/components/WebsiteChart.module.css b/components/WebsiteChart.module.css
index 5076bf47..5c941dd7 100644
--- a/components/WebsiteChart.module.css
+++ b/components/WebsiteChart.module.css
@@ -4,7 +4,7 @@
 }
 
 .title {
-  font-size: 24px;
+  font-size: var(--font-size-large);
   line-height: 60px;
   font-weight: 600;
 }
@@ -20,7 +20,7 @@
   position: fixed;
   top: 0;
   margin: auto;
-  background: #fff;
-  border-bottom: 1px solid #e1e1e1;
+  background: var(--gray50);
+  border-bottom: 1px solid var(--gray300);
   z-index: 2;
 }
diff --git a/components/WebsiteDetails.js b/components/WebsiteDetails.js
index 32c20fe2..7e24afaf 100644
--- a/components/WebsiteDetails.js
+++ b/components/WebsiteDetails.js
@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import WebsiteChart from './WebsiteChart';
 import RankingsChart from './RankingsChart';
 import WorldMap from './WorldMap';
+import Page from './Page';
 import { getDateRange } from 'lib/date';
 import { get } from 'lib/web';
 import { browserFilter, urlFilter, refFilter, deviceFilter, countryFilter } from 'lib/filters';
@@ -41,7 +42,7 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
   }
 
   return (
-    <div className={styles.container}>
+    <Page>
       <div className="row">
         <div className={classNames(styles.chart, 'col')}>
           <h2>{data.label}</h2>
@@ -132,6 +133,6 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
           </div>
         </>
       )}
-    </div>
+    </Page>
   );
 }
diff --git a/components/WebsiteDetails.module.css b/components/WebsiteDetails.module.css
index 9e9f570f..7e59d7b9 100644
--- a/components/WebsiteDetails.module.css
+++ b/components/WebsiteDetails.module.css
@@ -1,19 +1,14 @@
-.container {
-  background: #fff;
-  padding: 0 30px;
-}
-
 .chart {
   margin-bottom: 30px;
 }
 
 .row {
-  border-top: 1px solid #e1e1e1;
+  border-top: 1px solid var(--gray300);
   min-height: 430px;
 }
 
 .row > [class*='col-'] {
-  border-left: 1px solid #e1e1e1;
+  border-left: 1px solid var(--gray300);
   padding: 0 20px;
 }
 
@@ -26,13 +21,13 @@
   padding-right: 0;
 }
 
-@media only screen and (max-width: 1000px) {
+@media only screen and (max-width: 992px) {
   .row {
     border: 0;
   }
 
   .row > [class*='col-'] {
-    border-top: 1px solid #e1e1e1;
+    border-top: 1px solid var(--gray300);
     border-left: 0;
     padding: 0;
   }
diff --git a/components/WebsiteList.js b/components/WebsiteList.js
index 14d7eb1e..7680cc01 100644
--- a/components/WebsiteList.js
+++ b/components/WebsiteList.js
@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import Link from './Link';
 import WebsiteChart from './WebsiteChart';
+import Page from './Page';
 import Icon from './Icon';
 import { get } from 'lib/web';
 import Arrow from 'assets/arrow-right.svg';
@@ -18,7 +19,7 @@ export default function WebsiteList() {
   }, []);
 
   return (
-    <div className={styles.container}>
+    <Page>
       {data &&
         data.websites.map(({ website_id, label }) => (
           <div key={website_id} className={styles.website}>
@@ -43,6 +44,6 @@ export default function WebsiteList() {
             <WebsiteChart key={website_id} title={label} websiteId={website_id} />
           </div>
         ))}
-    </div>
+    </Page>
   );
 }
diff --git a/components/WebsiteList.module.css b/components/WebsiteList.module.css
index 3e8d1dd2..2b3f2618 100644
--- a/components/WebsiteList.module.css
+++ b/components/WebsiteList.module.css
@@ -1,11 +1,6 @@
-.container {
-  background: #fff;
-  padding: 0 30px;
-}
-
 .website {
   padding-bottom: 30px;
-  border-bottom: 1px solid #e1e1e1;
+  border-bottom: 1px solid var(--gray300);
   margin-bottom: 30px;
 }
 
@@ -21,7 +16,7 @@
 }
 
 .title {
-  color: #2c2c2c !important;
+  color: var(--gray900) !important;
 }
 
 .details {
diff --git a/hooks/useUser.js b/hooks/useRequireLogin.js
similarity index 84%
rename from hooks/useUser.js
rename to hooks/useRequireLogin.js
index 81b6107e..1d9c037b 100644
--- a/hooks/useUser.js
+++ b/hooks/useRequireLogin.js
@@ -12,11 +12,11 @@ export async function fetchUser() {
   return await res.json();
 }
 
-export default function useUser() {
+export default function useRequireLogin() {
   const dispatch = useDispatch();
   const storeUser = useSelector(state => state.user);
   const [loading, setLoading] = useState(!storeUser);
-  const [user, setUser] = useState(storeUser || null);
+  const [user, setUser] = useState(storeUser);
 
   useEffect(() => {
     if (!loading && user) {
@@ -31,7 +31,7 @@ export default function useUser() {
         return;
       }
 
-      await dispatch(updateUser({ user: user }));
+      await dispatch(updateUser({ user }));
 
       setUser(user);
       setLoading(false);
diff --git a/pages/_app.js b/pages/_app.js
index 44d6ca29..168fcbe8 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Provider } from 'react-redux';
 import { useStore } from 'redux/store';
+import 'styles/variables.css';
 import 'styles/bootstrap-grid.css';
 import 'styles/index.css';
 
diff --git a/pages/index.js b/pages/index.js
index fa22efa3..2c99f2a4 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import Layout from 'components/Layout';
 import WebsiteList from 'components/WebsiteList';
-import useUser from 'hooks/useUser';
+import useRequireLogin from 'hooks/useRequireLogin';
 
 export default function HomePage() {
-  const { loading } = useUser();
+  const { loading } = useRequireLogin();
 
   if (loading) {
     return null;
diff --git a/pages/login.js b/pages/login.js
index 87c6c9af..45ddf433 100644
--- a/pages/login.js
+++ b/pages/login.js
@@ -1,17 +1,11 @@
 import React from 'react';
-import Link from 'next/link';
 import Layout from 'components/Layout';
 import Login from 'components/Login';
 
 export default function LoginPage() {
   return (
-    <Layout title="Login">
+    <Layout title="login">
       <Login />
-      <p>
-        <Link href="/test">
-          <a>Test page 🡒</a>
-        </Link>
-      </p>
     </Layout>
   );
 }
diff --git a/pages/settings.js b/pages/settings.js
index 26e25887..6cf411f1 100644
--- a/pages/settings.js
+++ b/pages/settings.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import Layout from 'components/Layout';
 import Settings from 'components/Settings';
-import useUser from 'hooks/useUser';
+import useRequireLogin from 'hooks/useRequireLogin';
 
 export default function SettingsPage() {
-  const { loading } = useUser();
+  const { loading } = useRequireLogin();
 
   if (loading) {
     return null;
diff --git a/pages/website/[...id].js b/pages/website/[...id].js
index 9be769e6..499f93f0 100644
--- a/pages/website/[...id].js
+++ b/pages/website/[...id].js
@@ -2,10 +2,10 @@ import React from 'react';
 import { useRouter } from 'next/router';
 import Layout from 'components/Layout';
 import WebsiteDetails from 'components/WebsiteDetails';
-import useUser from 'hooks/useUser';
+import useRequireLogin from 'hooks/useRequireLogin';
 
 export default function DetailsPage() {
-  const { loading } = useUser();
+  const { loading } = useRequireLogin();
   const router = useRouter();
   const { id } = router.query;
 
diff --git a/styles/index.css b/styles/index.css
index f02df7a8..c5ac90d5 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -1,7 +1,7 @@
 html,
 body {
   font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
-  font-size: 16px;
+  font-size: var(--font-size-normal);
   font-weight: 400;
   line-height: 1.8;
   padding: 0;
@@ -9,8 +9,8 @@ body {
   width: 100%;
   height: 100%;
   box-sizing: border-box;
-  color: #2c2c2c;
-  background: #fafafa;
+  color: var(--gray900);
+  background: var(--gray75);
 }
 
 *,
@@ -19,6 +19,10 @@ body {
   box-sizing: inherit;
 }
 
+h2 {
+  font-weight: 400;
+}
+
 #__next {
   display: flex;
   flex-direction: column;
@@ -35,12 +39,7 @@ select {
 a,
 a:active,
 a:visited {
-  color: #2680eb;
-}
-
-header a {
-  color: #2c2c2c !important;
-  text-decoration: none;
+  color: var(--primary400);
 }
 
 form label {
@@ -48,13 +47,19 @@ form label {
   min-width: 100px;
 }
 
-form input {
+form input,
+form textarea {
+  padding: 4px 8px;
   margin-right: 10px;
+  margin-bottom: 20px;
+  border: 1px solid var(--gray500);
+  border-radius: 4px;
+  outline: none;
 }
 
 select {
   padding: 4px 8px;
-  border: 1px solid #b3b3b3;
+  border: 1px solid var(--gray500);
   border-radius: 4px;
 }
 
diff --git a/styles/variables.css b/styles/variables.css
new file mode 100644
index 00000000..ed76fd35
--- /dev/null
+++ b/styles/variables.css
@@ -0,0 +1,29 @@
+:root {
+  --gray50: #ffffff;
+  --gray75: #fafafa;
+  --gray100: #f5f5f5;
+  --gray200: #eaeaea;
+  --gray300: #e1e1e1;
+  --gray400: #cacaca;
+  --gray500: #b3b3b3;
+  --gray600: #8e8e8e;
+  --gray6700: #6e6e6e;
+  --gray800: #4b4b4b;
+  --gray900: #2c2c2c;
+
+  --primary400: #2680eb;
+  --primary500: #1473e6;
+  --primary600: #0d66d0;
+  --primary700: #095aba;
+
+  --font-size-xlarge: 36px;
+  --font-size-large: 24px;
+  --font-size-normal: 16px;
+  --font-size-small: 14px;
+  --font-size-xsmall: 12px;
+
+  --grid-size-small: 576px;
+  --grid-size-medium: 768px;
+  --grid-size-large: 992px;
+  --grid-size-xlarge: 1140px;
+}