diff --git a/.eslintrc.json b/.eslintrc.json index 168665fc..e5f0cc94 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -16,7 +16,8 @@ "rules": { "react/display-name": "off", "react/react-in-jsx-scope": "off", - "react/prop-types": "off" + "react/prop-types": "off", + "import/no-anonymous-default-export": "off" }, "globals": { "React": "writable" diff --git a/components/common/MenuButton.js b/components/common/MenuButton.js index eb8d62fe..efe150f0 100644 --- a/components/common/MenuButton.js +++ b/components/common/MenuButton.js @@ -11,6 +11,7 @@ function MenuButton({ value, options, buttonClassName, + buttonVariant, menuClassName, menuPosition = 'bottom', menuAlign = 'right', @@ -43,7 +44,7 @@ function MenuButton({ icon={icon} className={classNames(styles.button, buttonClassName, { [styles.open]: showMenu })} onClick={toggleMenu} - variant="light" + variant={buttonVariant} > {!hideLabel && (
{renderValue ? renderValue(selectedOption) : value}
diff --git a/components/common/MobileMenu.js b/components/common/MobileMenu.js index 00da4783..1241b1e6 100644 --- a/components/common/MobileMenu.js +++ b/components/common/MobileMenu.js @@ -1,3 +1,4 @@ +import classNames from 'classnames'; import Link from './Link'; import Button from './Button'; import XMark from 'assets/xmark.svg'; @@ -5,9 +6,9 @@ import styles from './MobileMenu.module.css'; export default function MobileMenu({ items = [], onClose }) { return ( -
+
-
{items.map(({ label, value }) => ( diff --git a/components/common/MobileMenu.module.css b/components/common/MobileMenu.module.css index 416376f0..78a440d9 100644 --- a/components/common/MobileMenu.module.css +++ b/components/common/MobileMenu.module.css @@ -32,13 +32,10 @@ margin-top: 60px; } -.button { - margin-right: 15px; -} - .header { display: flex; justify-content: flex-end; align-items: center; height: 100px; + padding: 0 30px; } diff --git a/components/common/UpdateNotice.js b/components/common/UpdateNotice.js index bc6eacc4..a31c2abf 100644 --- a/components/common/UpdateNotice.js +++ b/components/common/UpdateNotice.js @@ -34,7 +34,7 @@ export default function UpdateNotice() { values={{ version: `v${latest}` }} />
- + diff --git a/components/common/UpdateNotice.module.css b/components/common/UpdateNotice.module.css index 52a97c3b..52bac611 100644 --- a/components/common/UpdateNotice.module.css +++ b/components/common/UpdateNotice.module.css @@ -2,12 +2,17 @@ display: flex; justify-content: center; align-items: center; - padding-top: 10px; - font-size: var(--font-size-small); - font-weight: 600; + padding-top: 20px; } .message { + font-size: var(--font-size-small); + font-weight: 600; + flex: 1; text-align: center; margin-right: 20px; } + +.buttons { + flex: 0; +} diff --git a/components/layout/Header.js b/components/layout/Header.js index bf6990ca..1953a13c 100644 --- a/components/layout/Header.js +++ b/components/layout/Header.js @@ -1,3 +1,4 @@ +import { useRouter } from 'next/router'; import { FormattedMessage } from 'react-intl'; import classNames from 'classnames'; import Link from 'components/common/Link'; @@ -14,6 +15,7 @@ import { HOMEPAGE_URL } from 'lib/constants'; export default function Header() { const { user } = useUser(); + const { pathname } = useRouter(); return ( <> @@ -21,7 +23,7 @@ export default function Header() {
} size="large" className={styles.logo} /> - umami + umami
{user && ( diff --git a/components/layout/Header.module.css b/components/layout/Header.module.css index 45df94ca..8882e9de 100644 --- a/components/layout/Header.module.css +++ b/components/layout/Header.module.css @@ -6,6 +6,7 @@ } .title { + flex: 1; font-size: var(--font-size-large); display: flex; align-items: center; @@ -17,7 +18,7 @@ } .links { - flex: 1; + flex: 2; display: flex; justify-content: center; align-items: center; @@ -30,6 +31,7 @@ } .buttons { + flex: 1; display: flex; justify-content: flex-end; align-items: center; @@ -39,6 +41,7 @@ .header .buttons { flex: 1; } + .links { order: 2; margin: 20px 0; @@ -48,7 +51,7 @@ @media only screen and (max-width: 768px) { .header { - padding: 0 15px; + padding: 0 30px; } .buttons, diff --git a/components/layout/Layout.js b/components/layout/Layout.js index 87aa3cfe..2c097e41 100644 --- a/components/layout/Layout.js +++ b/components/layout/Layout.js @@ -14,9 +14,7 @@ export default function Layout({ title, children, header = true, footer = true } {header &&
} -
- {children} -
+
{children}
{footer &&