diff --git a/assets/arrow-right.svg b/assets/arrow-right.svg index 6fc93909..efc5d74a 100644 --- a/assets/arrow-right.svg +++ b/assets/arrow-right.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/arrow-up-right-from-square.svg b/assets/arrow-up-right-from-square.svg index 90ad457f..8f6de672 100644 --- a/assets/arrow-up-right-from-square.svg +++ b/assets/arrow-up-right-from-square.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/bars.svg b/assets/bars.svg index fdb2d6e4..ba383fa4 100644 --- a/assets/bars.svg +++ b/assets/bars.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/chart-bar.svg b/assets/chart-bar.svg index d1d72fdc..36820b76 100644 --- a/assets/chart-bar.svg +++ b/assets/chart-bar.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/check.svg b/assets/check.svg index 1a7abdce..65810c19 100644 --- a/assets/check.svg +++ b/assets/check.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/chevron-down.svg b/assets/chevron-down.svg index cb9d8fe1..69add632 100644 --- a/assets/chevron-down.svg +++ b/assets/chevron-down.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/code.svg b/assets/code.svg index cd29765e..0f8e0814 100644 --- a/assets/code.svg +++ b/assets/code.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/external-link.svg b/assets/external-link.svg index ed09306f..e24896b0 100644 --- a/assets/external-link.svg +++ b/assets/external-link.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/gear.svg b/assets/gear.svg index ab97a693..47805d46 100644 --- a/assets/gear.svg +++ b/assets/gear.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/logo.svg b/assets/logo.svg index f0e52261..d2c71326 100644 --- a/assets/logo.svg +++ b/assets/logo.svg @@ -1,2 +1 @@ - - + \ No newline at end of file diff --git a/assets/moon.svg b/assets/moon.svg index 6c8955ae..638286fd 100644 --- a/assets/moon.svg +++ b/assets/moon.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/pen.svg b/assets/pen.svg index 426c520c..b2979420 100644 --- a/assets/pen.svg +++ b/assets/pen.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/sun.svg b/assets/sun.svg index ebc20eb2..3e487291 100644 --- a/assets/sun.svg +++ b/assets/sun.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/times.svg b/assets/times.svg index c528bcdd..261bb277 100644 --- a/assets/times.svg +++ b/assets/times.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/user.svg b/assets/user.svg index c0094666..62df2c42 100644 --- a/assets/user.svg +++ b/assets/user.svg @@ -1 +1 @@ -Asset 1 \ No newline at end of file + \ No newline at end of file diff --git a/assets/xmark.svg b/assets/xmark.svg index 340f479e..83bd5740 100644 --- a/assets/xmark.svg +++ b/assets/xmark.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/components/common/Button.module.css b/components/common/Button.module.css index b911095f..b6edc60e 100644 --- a/components/common/Button.module.css +++ b/components/common/Button.module.css @@ -2,9 +2,9 @@ display: flex; justify-content: center; align-items: center; - font-size: var(--font-size-normal); - color: var(--gray900); - background: var(--gray100); + font-size: var(--font-size-md); + color: var(--base900); + background: var(--base100); padding: 8px 16px; border-radius: 4px; border: 0; @@ -14,11 +14,11 @@ } .button:hover { - background: var(--gray200); + background: var(--base200); } .button:active { - color: var(--gray900); + color: var(--base900); } .label { @@ -29,30 +29,30 @@ } .large { - font-size: var(--font-size-large); + font-size: var(--font-size-lg); } .small { - font-size: var(--font-size-small); + font-size: var(--font-size-sm); } .xsmall { - font-size: var(--font-size-xsmall); + font-size: var(--font-size-xs); } .action, .action:active { - color: var(--gray50); - background: var(--gray900); + color: var(--base50); + background: var(--base900); } .action:hover { - background: var(--gray800); + background: var(--base800); } .danger, .danger:active { - color: var(--gray50); + color: var(--base50); background: var(--red500); } @@ -62,7 +62,7 @@ .light, .light:active { - color: var(--gray900); + color: var(--base900); background: transparent; } @@ -85,18 +85,18 @@ .button:disabled { cursor: default; - color: var(--gray500); - background: var(--gray75); + color: var(--base500); + background: var(--base75); } .button:disabled:active { - color: var(--gray500); + color: var(--base500); } .button:disabled:hover { - background: var(--gray75); + background: var(--base75); } .button.light:disabled { - background: var(--gray50); + background: var(--base50); } diff --git a/components/common/ButtonGroup.module.css b/components/common/ButtonGroup.module.css index bc60f8d3..04d33d22 100644 --- a/components/common/ButtonGroup.module.css +++ b/components/common/ButtonGroup.module.css @@ -2,14 +2,14 @@ display: inline-flex; border-radius: 4px; overflow: hidden; - border: 1px solid var(--gray500); + border: 1px solid var(--base500); } .group .button { border-radius: 0; - color: var(--gray800); - background: var(--gray50); - border-left: 1px solid var(--gray500); + color: var(--base800); + background: var(--base50); + border-left: 1px solid var(--base500); padding: 4px 8px; } @@ -18,7 +18,7 @@ } .group .button:hover { - background: var(--gray100); + background: var(--base100); } .group .button + .button { @@ -26,6 +26,6 @@ } .group .button.selected { - color: var(--gray900); + color: var(--base900); font-weight: 600; } diff --git a/components/common/Calendar.module.css b/components/common/Calendar.module.css index 9751cf25..5e50e79a 100644 --- a/components/common/Calendar.module.css +++ b/components/common/Calendar.module.css @@ -1,7 +1,7 @@ .calendar { display: flex; flex-direction: column; - font-size: var(--font-size-small); + font-size: var(--font-size-sm); flex: 1; min-height: 306px; } @@ -12,7 +12,7 @@ } .calendar td { - color: var(--gray800); + color: var(--base800); cursor: pointer; text-align: center; vertical-align: center; @@ -23,17 +23,17 @@ } .calendar td:hover { - border: 1px solid var(--gray300); - background: var(--gray75); + border: 1px solid var(--base300); + background: var(--base75); } .calendar td.faded { - color: var(--gray500); + color: var(--base500); } .calendar td.selected { font-weight: 600; - border: 1px solid var(--gray600); + border: 1px solid var(--base600); } .calendar td.selected:hover { @@ -41,18 +41,18 @@ } .calendar td.disabled { - color: var(--gray400); - background: var(--gray75); + color: var(--base400); + background: var(--base75); } .calendar td.disabled:hover { cursor: default; - background: var(--gray75); + background: var(--base75); border-color: transparent; } .calendar td.faded.disabled { - background: var(--gray100); + background: var(--base100); } .header { @@ -61,7 +61,7 @@ align-items: center; font-weight: 700; line-height: 40px; - font-size: var(--font-size-normal); + font-size: var(--font-size-md); } .body { diff --git a/components/common/Checkbox.module.css b/components/common/Checkbox.module.css index c9a01eac..edd2b776 100644 --- a/components/common/Checkbox.module.css +++ b/components/common/Checkbox.module.css @@ -11,7 +11,7 @@ align-items: center; width: 20px; height: 20px; - border: 1px solid var(--gray500); + border: 1px solid var(--base500); border-radius: 4px; } diff --git a/components/common/Dot.module.css b/components/common/Dot.module.css index 258d6e87..284aa66d 100644 --- a/components/common/Dot.module.css +++ b/components/common/Dot.module.css @@ -1,5 +1,5 @@ .wrapper { - background: var(--gray50); + background: var(--base50); margin-right: 10px; border-radius: 100%; } diff --git a/components/common/Dropdown.module.css b/components/common/Dropdown.module.css index 9738b007..a1877529 100644 --- a/components/common/Dropdown.module.css +++ b/components/common/Dropdown.module.css @@ -3,7 +3,7 @@ display: flex; justify-content: space-between; align-items: center; - border: 1px solid var(--gray500); + border: 1px solid var(--base500); border-radius: 4px; cursor: pointer; } @@ -12,7 +12,7 @@ flex: 1; display: flex; justify-content: space-between; - font-size: var(--font-size-small); + font-size: var(--font-size-sm); flex-wrap: nowrap; white-space: nowrap; padding: 4px 16px; diff --git a/components/common/ErrorMessage.module.css b/components/common/ErrorMessage.module.css index 88769cf5..dd9295d9 100644 --- a/components/common/ErrorMessage.module.css +++ b/components/common/ErrorMessage.module.css @@ -6,7 +6,7 @@ margin: auto; display: flex; z-index: 1; - background-color: var(--gray50); + background-color: var(--base50); padding: 10px; } diff --git a/components/common/FilterLink.module.css b/components/common/FilterLink.module.css index 45b049da..ce3ffa5f 100644 --- a/components/common/FilterLink.module.css +++ b/components/common/FilterLink.module.css @@ -4,11 +4,11 @@ } .row .inactive { - color: var(--gray500); + color: var(--base500); } .row .active { - color: var(--gray900); + color: var(--base900); font-weight: 600; } diff --git a/components/common/Link.module.css b/components/common/Link.module.css index dd2f92f9..0476bd92 100644 --- a/components/common/Link.module.css +++ b/components/common/Link.module.css @@ -2,7 +2,7 @@ a.link, a.link:active, a.link:visited { position: relative; - color: var(--gray900); + color: var(--base900); text-decoration: none; display: inline-flex; align-items: center; @@ -17,15 +17,15 @@ a.link:hover span { } a.link.large { - font-size: var(--font-size-large); + font-size: var(--font-size-lg); } a.link.small { - font-size: var(--font-size-small); + font-size: var(--font-size-sm); } a.link.xsmall { - font-size: var(--font-size-xsmall); + font-size: var(--font-size-xs); } a.link .icon + * { diff --git a/components/common/Loading.module.css b/components/common/Loading.module.css index a69559e3..e2d53243 100644 --- a/components/common/Loading.module.css +++ b/components/common/Loading.module.css @@ -25,7 +25,7 @@ height: 100%; width: 100%; z-index: 10; - background: var(--gray400); + background: var(--base400); opacity: 0.4; } @@ -33,13 +33,13 @@ width: 10px; height: 10px; border-radius: 100%; - background: var(--gray400); + background: var(--base400); animation: blink 1.4s infinite; animation-fill-mode: both; } .loading.overlay div { - background: var(--gray900); + background: var(--base900); } .loading div + div { diff --git a/components/common/Menu.module.css b/components/common/Menu.module.css index d2ad2cc4..63491d40 100644 --- a/components/common/Menu.module.css +++ b/components/common/Menu.module.css @@ -1,22 +1,22 @@ .menu { - background: var(--gray50); - border: 1px solid var(--gray500); + background: var(--base50); + border: 1px solid var(--base500); border-radius: 4px; overflow: hidden; z-index: 100; } .option { - font-size: var(--font-size-small); + font-size: var(--font-size-sm); font-weight: normal; - background: var(--gray50); + background: var(--base50); padding: 4px 16px; cursor: pointer; white-space: nowrap; } .option:hover { - background: var(--gray100); + background: var(--base100); } .float { @@ -43,7 +43,7 @@ } .divider { - border-top: 1px solid var(--gray300); + border-top: 1px solid var(--base300); } .selected { diff --git a/components/common/MenuButton.module.css b/components/common/MenuButton.module.css index 7e9dd7e1..a59ae562 100644 --- a/components/common/MenuButton.module.css +++ b/components/common/MenuButton.module.css @@ -10,11 +10,11 @@ } .text { - font-size: var(--font-size-small); + font-size: var(--font-size-sm); } .open, .open:hover { - background: var(--gray50); - border: 1px solid var(--gray500); + background: var(--base50); + border: 1px solid var(--base500); } diff --git a/components/common/MobileMenu.module.css b/components/common/MobileMenu.module.css index 78a440d9..d1a6f19b 100644 --- a/components/common/MobileMenu.module.css +++ b/components/common/MobileMenu.module.css @@ -8,7 +8,7 @@ z-index: 100; display: flex; flex-direction: column; - background-color: var(--gray50); + background-color: var(--base50); overflow: auto; } @@ -21,7 +21,7 @@ } .item { - font-size: var(--font-size-large); + font-size: var(--font-size-lg); } .item + .item { diff --git a/components/common/Modal.module.css b/components/common/Modal.module.css index bf2491c7..3bba9273 100644 --- a/components/common/Modal.module.css +++ b/components/common/Modal.module.css @@ -25,12 +25,12 @@ top: 50%; left: 50%; transform: translate(-50%, -50%); - background: var(--gray50); + background: var(--base50); min-width: 400px; min-height: 100px; max-width: 100vw; z-index: 1; - border: 1px solid var(--gray300); + border: 1px solid var(--base300); padding: 30px; border-radius: 4px; } diff --git a/components/common/NavMenu.module.css b/components/common/NavMenu.module.css index 7be73973..e0b01945 100644 --- a/components/common/NavMenu.module.css +++ b/components/common/NavMenu.module.css @@ -1,6 +1,6 @@ .menu { - color: var(--gray800); - border: 1px solid var(--gray500); + color: var(--base800); + border: 1px solid var(--base500); border-radius: 4px; overflow: hidden; z-index: 2; @@ -13,10 +13,10 @@ } .option:hover { - background: var(--gray75); + background: var(--base75); } .selected { - color: var(--gray900); + color: var(--base900); font-weight: 600; } diff --git a/components/common/NoData.module.css b/components/common/NoData.module.css index 518fa488..29e9f8eb 100644 --- a/components/common/NoData.module.css +++ b/components/common/NoData.module.css @@ -1,6 +1,6 @@ .container { - color: var(--gray500); - font-size: var(--font-size-normal); + color: var(--base500); + font-size: var(--font-size-md); position: relative; display: flex; align-items: center; diff --git a/components/common/Table.module.css b/components/common/Table.module.css index f92338f8..ba4facc5 100644 --- a/components/common/Table.module.css +++ b/components/common/Table.module.css @@ -5,16 +5,16 @@ .table label { display: none; - font-size: var(--font-size-xsmall); + font-size: var(--font-size-xs); font-weight: bold; } .header { - border-bottom: 1px solid var(--gray300); + border-bottom: 1px solid var(--base300); } .head { - font-size: var(--font-size-small); + font-size: var(--font-size-sm); font-weight: 600; line-height: 40px; } @@ -26,7 +26,7 @@ } .row { - border-bottom: 1px solid var(--gray300); + border-bottom: 1px solid var(--base300); padding: 10px 0; } diff --git a/components/common/Tag.module.css b/components/common/Tag.module.css index 5e145ea1..95023bbf 100644 --- a/components/common/Tag.module.css +++ b/components/common/Tag.module.css @@ -1,6 +1,6 @@ .tag { padding: 2px 4px; - border: 1px solid var(--gray300); + border: 1px solid var(--base300); border-radius: 4px; margin-right: 10px; } diff --git a/components/common/Toast.module.css b/components/common/Toast.module.css index 58677dcb..18b8b44d 100644 --- a/components/common/Toast.module.css +++ b/components/common/Toast.module.css @@ -17,7 +17,7 @@ } .message { - font-size: var(--font-size-normal); + font-size: var(--font-size-md); } .close { diff --git a/components/common/UpdateNotice.module.css b/components/common/UpdateNotice.module.css index 52bac611..5161ea71 100644 --- a/components/common/UpdateNotice.module.css +++ b/components/common/UpdateNotice.module.css @@ -6,7 +6,7 @@ } .message { - font-size: var(--font-size-small); + font-size: var(--font-size-sm); font-weight: 600; flex: 1; text-align: center; diff --git a/components/declarations.d.ts b/components/declarations.d.ts new file mode 100644 index 00000000..31e44ff3 --- /dev/null +++ b/components/declarations.d.ts @@ -0,0 +1,2 @@ +declare module '*.css'; +declare module '*.svg'; diff --git a/components/forms/DatePickerForm.module.css b/components/forms/DatePickerForm.module.css index 96e2d2ec..92e59bb7 100644 --- a/components/forms/DatePickerForm.module.css +++ b/components/forms/DatePickerForm.module.css @@ -16,7 +16,7 @@ .calendars > div + div { margin-left: 20px; padding-left: 20px; - border-left: 1px solid var(--gray300); + border-left: 1px solid var(--base300); } .filter { diff --git a/components/forms/EventDataForm.module.css b/components/forms/EventDataForm.module.css index 19d76f77..fd0ad290 100644 --- a/components/forms/EventDataForm.module.css +++ b/components/forms/EventDataForm.module.css @@ -3,7 +3,7 @@ } .form { - border-right: 1px solid var(--gray300); + border-right: 1px solid var(--base300); width: 420px; } @@ -12,7 +12,7 @@ } .filters + .filters { - border-top: 1px solid var(--gray300); + border-top: 1px solid var(--base300); min-height: 250px; } diff --git a/components/forms/Form.module.css b/components/forms/Form.module.css new file mode 100644 index 00000000..9185da43 --- /dev/null +++ b/components/forms/Form.module.css @@ -0,0 +1,63 @@ +.form { + display: flex; + flex-direction: column; + gap: 30px; + width: 300px; + margin: 0 auto; +} + +.header { + font-size: 24px; + font-weight: 700; + text-align: center; + margin: 30px auto; +} + +.info { + text-align: center; + padding: 30px 0; +} + +.footer { + display: flex; + flex-direction: column; + gap: 20px; + font-size: 14px; + text-align: center; + margin: 30px auto; +} + +.footer a { + font-weight: 600; +} + +.buttons { + justify-content: center; +} + +.button { + flex: 1; + justify-content: center; +} + +.error { + width: 600px; + margin: 0 auto 30px; + background: var(--base50); + padding: 16px; + color: var(--red400); + border: 1px solid var(--red400); + border-radius: 5px; + text-align: center; +} + +.success { + width: 600px; + margin: 60px auto; + background: var(--base50); + padding: 16px; + color: var(--green400); + border: 1px solid var(--green400); + border-radius: 5px; + text-align: center; +} diff --git a/components/forms/LoginForm.js b/components/forms/LoginForm.js index 6a6560f1..aad3f97d 100644 --- a/components/forms/LoginForm.js +++ b/components/forms/LoginForm.js @@ -1,113 +1,57 @@ -import React, { useState } from 'react'; -import { FormattedMessage } from 'react-intl'; -import { Formik, Form, Field } from 'formik'; -import { setItem } from 'next-basics'; -import { useRouter } from 'next/router'; -import Button from 'components/common/Button'; -import FormLayout, { +import { useMutation } from '@tanstack/react-query'; +import { + Form, + FormInput, FormButtons, - FormError, - FormMessage, - FormRow, -} from 'components/layout/FormLayout'; -import Icon from 'components/common/Icon'; -import useApi from 'hooks/useApi'; -import { AUTH_TOKEN } from 'lib/constants'; + TextField, + PasswordField, + SubmitButton, + Icon, +} from 'react-basics'; +import { useRouter } from 'next/router'; +import { useApi } from 'next-basics'; import { setUser } from 'store/app'; +import { setAuthToken } from 'lib/client'; import Logo from 'assets/logo.svg'; -import styles from './LoginForm.module.css'; - -const validate = ({ username, password }) => { - const errors = {}; - - if (!username) { - errors.username = ; - } - if (!password) { - errors.password = ; - } - - return errors; -}; +import styles from './Form.module.css'; export default function LoginForm() { - const { post } = useApi(); const router = useRouter(); - const [message, setMessage] = useState(); + const { post } = useApi(); + const { mutate, error, isLoading } = useMutation(data => post('/auth/login', data)); - const handleSubmit = async ({ username, password }) => { - const { ok, status, data } = await post('/auth/login', { - username, - password, + const handleSubmit = async data => { + mutate(data, { + onSuccess: async ({ token, user }) => { + setAuthToken(token); + setUser(user); + + await router.push('/websites'); + }, }); - - if (ok) { - const { user, token } = data; - - setItem(AUTH_TOKEN, token); - - setUser(user); - - await router.push('/'); - - return null; - } else { - setMessage( - status === 401 ? ( - - ) : ( - data - ), - ); - } }; return ( - - - {() => ( -
-
- } size="xlarge" className={styles.icon} /> -

umami

-
- - -
- - -
- - - -
- - -
- - - - - {message} -
- )} - - + <> +
+ + + +

umami

+
+
+ + + + + + + + + Log in + + +
+ ); } diff --git a/components/layout/Footer.module.css b/components/layout/Footer.module.css index c484d7f5..b86e9724 100644 --- a/components/layout/Footer.module.css +++ b/components/layout/Footer.module.css @@ -2,7 +2,7 @@ display: flex; justify-content: space-between; align-items: center; - font-size: var(--font-size-small); + font-size: var(--font-size-sm); text-align: center; margin: 30px 0; } diff --git a/components/layout/FormLayout.module.css b/components/layout/FormLayout.module.css index 6d787136..48363f65 100644 --- a/components/layout/FormLayout.module.css +++ b/components/layout/FormLayout.module.css @@ -54,7 +54,7 @@ .msg { color: var(--msgColor); background: var(--red400); - font-size: var(--font-size-small); + font-size: var(--font-size-sm); padding: 4px 8px; border-radius: 4px; white-space: nowrap; @@ -78,8 +78,8 @@ margin: 20px 0; padding: 4px 8px; border-radius: 4px; - color: var(--gray50); - background: var(--gray800); + color: var(--base50); + background: var(--base800); } @media only screen and (max-width: 576px) { diff --git a/components/layout/GridLayout.module.css b/components/layout/GridLayout.module.css index 675fce16..ee7947b6 100644 --- a/components/layout/GridLayout.module.css +++ b/components/layout/GridLayout.module.css @@ -9,12 +9,12 @@ } .row { - border-top: 1px solid var(--gray300); + border-top: 1px solid var(--base300); min-height: 430px; } .row > .col { - border-left: 1px solid var(--gray300); + border-left: 1px solid var(--base300); padding: 20px; } @@ -33,7 +33,7 @@ } .row > .col { - border-top: 1px solid var(--gray300); + border-top: 1px solid var(--base300); border-left: 0; padding: 20px 0; } diff --git a/components/layout/GridRow.js b/components/layout/GridRow.js new file mode 100644 index 00000000..8f840a84 --- /dev/null +++ b/components/layout/GridRow.js @@ -0,0 +1,18 @@ +import { Row, cloneChildren } from 'react-basics'; +import styles from './GridRow.module.css'; +import classNames from 'classnames'; + +export default function GridRow(props) { + const { children, className, ...rowProps } = props; + return ( + + {breakpoint => + cloneChildren(children, () => { + return { + className: classNames(styles.column, styles[breakpoint]), + }; + }) + } + + ); +} diff --git a/components/layout/GridRow.module.css b/components/layout/GridRow.module.css new file mode 100644 index 00000000..dc1e31f8 --- /dev/null +++ b/components/layout/GridRow.module.css @@ -0,0 +1,21 @@ +.column { + padding: 20px; + border-top: 1px solid var(--base200); + border-left: 1px solid var(--base200); +} + +.column:first-child { + padding-left: 0; + border-left: 0; +} + +.column:last-child { + padding-right: 0; +} + +.column.xs, +.column.sm, +.column.md { + border-left: 0; + border-right: 0; +} diff --git a/components/layout/Header.js b/components/layout/Header.js index 13c3954e..a0063cfb 100644 --- a/components/layout/Header.js +++ b/components/layout/Header.js @@ -1,6 +1,6 @@ +import { Row, Column } from 'react-basics'; import { useRouter } from 'next/router'; import { FormattedMessage } from 'react-intl'; -import classNames from 'classnames'; import Link from 'components/common/Link'; import Icon from 'components/common/Icon'; import LanguageButton from 'components/settings/LanguageButton'; @@ -25,31 +25,33 @@ export default function Header() { return ( <> {allowUpdate && } -
-
- } size="large" className={styles.logo} /> - umami -
- - {user && !adminDisabled && ( -
- - - - - - - - - -
- )} -
- - - - {user && !adminDisabled && } -
+
+ + + } size="large" className={styles.logo} /> + umami + + + {user && !adminDisabled && ( +
+ + + + + + + + + +
+ )} + + + + + {user && !adminDisabled && } + +
); diff --git a/components/layout/Header.module.css b/components/layout/Header.module.css index 8882e9de..44bac0c5 100644 --- a/components/layout/Header.module.css +++ b/components/layout/Header.module.css @@ -7,10 +7,10 @@ .title { flex: 1; - font-size: var(--font-size-large); + font-size: var(--font-size-lg); display: flex; align-items: center; - line-height: 1.4; + flex-direction: row; } .logo { @@ -22,7 +22,7 @@ display: flex; justify-content: center; align-items: center; - font-size: var(--font-size-normal); + font-size: var(--font-size-md); font-weight: 600; } @@ -33,6 +33,7 @@ .buttons { flex: 1; display: flex; + flex-direction: row; justify-content: flex-end; align-items: center; } diff --git a/components/layout/Layout.js b/components/layout/Layout.js index 2c097e41..1a8d4887 100644 --- a/components/layout/Layout.js +++ b/components/layout/Layout.js @@ -1,22 +1,32 @@ -import React from 'react'; +import { Container } from 'react-basics'; import Head from 'next/head'; import Header from 'components/layout/Header'; import Footer from 'components/layout/Footer'; import useLocale from 'hooks/useLocale'; +import { useRouter } from 'next/router'; export default function Layout({ title, children, header = true, footer = true }) { const { dir } = useLocale(); + const { basePath } = useRouter(); return ( - <> + - umami{title && ` - ${title}`} + {title ? `${title} | umami` : 'umami'} + + + + + + + + + + - {header &&
}
{children}
{footer &&