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 ( - 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} > {() => ( -
+

{message}

@@ -51,7 +53,7 @@ export default function Login() {
- +
)} 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
{children}
; +} 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 => (