Use css variables.

rajeshtims · Aug 6, 2020 · a5930f1 · a5930f1
1 parent 5d4ff5c
commit a5930f1
Show file tree

Hide file tree

Showing 29 changed files with 131 additions and 85 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -12,20 +12,20 @@
   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;
 }
 
 .metric {
   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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>
   );
 }