diff --git a/assets/logo.svg b/assets/logo.svg index eca6048b8a..c80f1668ce 100644 --- a/assets/logo.svg +++ b/assets/logo.svg @@ -1 +1,2 @@ - \ No newline at end of file + + \ No newline at end of file diff --git a/assets/moon.svg b/assets/moon.svg new file mode 100644 index 0000000000..6c8955aed1 --- /dev/null +++ b/assets/moon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/sun.svg b/assets/sun.svg new file mode 100644 index 0000000000..ebc20eb27d --- /dev/null +++ b/assets/sun.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/components/WebsiteDetails.module.css b/components/WebsiteDetails.module.css index 4f117ba1fb..ca80dca07b 100644 --- a/components/WebsiteDetails.module.css +++ b/components/WebsiteDetails.module.css @@ -12,6 +12,7 @@ .content { min-height: 600px; + padding: 20px 0; } .backButton { @@ -30,7 +31,7 @@ .row > [class*='col-'] { border-left: 1px solid var(--gray300); - padding: 0 20px; + padding: 20px; } .row > [class*='col-']:first-child { diff --git a/components/common/Button.module.css b/components/common/Button.module.css index faae656bb7..324bbb226f 100644 --- a/components/common/Button.module.css +++ b/components/common/Button.module.css @@ -3,6 +3,7 @@ justify-content: center; align-items: center; font-size: var(--font-size-normal); + color: var(--gray900); background: var(--gray100); padding: 8px 16px; border-radius: 4px; @@ -18,7 +19,7 @@ } .button:active { - color: initial; + color: var(--gray900); } .large { @@ -56,11 +57,11 @@ } .light { - background: var(--gray50); + background: transparent; } .light:hover { - background: var(--gray75); + background: inherit; } .button:disabled { diff --git a/components/common/ButtonGroup.module.css b/components/common/ButtonGroup.module.css index d18a8e9c06..bc60f8d363 100644 --- a/components/common/ButtonGroup.module.css +++ b/components/common/ButtonGroup.module.css @@ -7,6 +7,7 @@ .group .button { border-radius: 0; + color: var(--gray800); background: var(--gray50); border-left: 1px solid var(--gray500); padding: 4px 8px; @@ -24,6 +25,7 @@ margin: 0; } -.selected { +.group .button.selected { + color: var(--gray900); font-weight: 600; } diff --git a/components/common/Calendar.module.css b/components/common/Calendar.module.css index eb07431b08..9751cf25b8 100644 --- a/components/common/Calendar.module.css +++ b/components/common/Calendar.module.css @@ -17,7 +17,7 @@ text-align: center; vertical-align: center; height: 40px; - min-width: 40px; + width: 40px; border-radius: 5px; border: 1px solid transparent; } @@ -103,3 +103,9 @@ .icon { margin-left: 10px; } + +@media only screen and (max-width: 992px) { + .calendar table { + max-width: calc(100vw - 30px); + } +} diff --git a/components/common/DropDown.js b/components/common/DropDown.js index df559ef99f..b6b2357b62 100644 --- a/components/common/DropDown.js +++ b/components/common/DropDown.js @@ -15,6 +15,7 @@ export default function DropDown({ }) { const [showMenu, setShowMenu] = useState(false); const ref = useRef(); + const selectedOption = options.find(e => e.value === value); function handleShowMenu() { setShowMenu(state => !state); @@ -40,7 +41,13 @@ export default function DropDown({ } className={styles.icon} size="small" /> {showMenu && ( - + )} ); diff --git a/components/common/Dropdown.module.css b/components/common/Dropdown.module.css index 250e6c293d..4b94f58ff0 100644 --- a/components/common/Dropdown.module.css +++ b/components/common/Dropdown.module.css @@ -20,5 +20,5 @@ } .icon { - padding-left: 10px; + padding-left: 20px; } diff --git a/components/common/LanguageButton.js b/components/common/LanguageButton.js deleted file mode 100644 index fae9041570..0000000000 --- a/components/common/LanguageButton.js +++ /dev/null @@ -1,64 +0,0 @@ -import React, { useState, useRef } from 'react'; -import Head from 'next/head'; -import Menu from './Menu'; -import Button from './Button'; -import { menuOptions } from 'lib/lang'; -import useLocale from 'hooks/useLocale'; -import useDocumentClick from 'hooks/useDocumentClick'; -import Globe from 'assets/globe.svg'; -import styles from './LanguageButton.module.css'; - -export default function LanguageButton({ menuPosition = 'bottom', menuAlign = 'left' }) { - const [showMenu, setShowMenu] = useState(false); - const [locale, setLocale] = useLocale(); - const ref = useRef(); - const selectedLocale = menuOptions.find(e => e.value === locale)?.display; - - function handleSelect(value) { - setLocale(value); - setShowMenu(false); - } - - function toggleMenu() { - setShowMenu(state => !state); - } - - useDocumentClick(e => { - if (!ref.current.contains(e.target)) { - setShowMenu(false); - } - }); - - return ( - <> - - {locale === 'zh-CN' && ( - - )} - {locale === 'ja-JP' && ( - - )} - -
- - {showMenu && ( - - )} -
- - ); -} diff --git a/components/common/LanguageButton.module.css b/components/common/LanguageButton.module.css deleted file mode 100644 index 55464c4d85..0000000000 --- a/components/common/LanguageButton.module.css +++ /dev/null @@ -1,9 +0,0 @@ -.container { - display: flex; - position: relative; - cursor: pointer; -} - -.menu { - z-index: 100; -} diff --git a/components/common/Link.module.css b/components/common/Link.module.css index d6dc0536fa..24d8f84cdf 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: #2c2c2c; + color: var(--gray900); text-decoration: none; } @@ -12,7 +12,7 @@ a.link:before { bottom: -2px; width: 0; height: 2px; - background: #2680eb; + background: var(--primary400); opacity: 0.5; transition: width 100ms; } diff --git a/components/common/Menu.js b/components/common/Menu.js index 283ee1fb3c..6421ba550d 100644 --- a/components/common/Menu.js +++ b/components/common/Menu.js @@ -33,7 +33,8 @@ export default function Menu({
onSelect(value, e)} diff --git a/components/common/Menu.module.css b/components/common/Menu.module.css index 9bcd642f0d..369e37c8b0 100644 --- a/components/common/Menu.module.css +++ b/components/common/Menu.module.css @@ -8,14 +8,14 @@ .option { font-size: var(--font-size-small); font-weight: normal; - background: #fff; + background: var(--gray50); padding: 4px 16px; cursor: pointer; white-space: nowrap; } .option:hover { - background: #f5f5f5; + background: var(--gray100); } .float { @@ -44,3 +44,7 @@ .divider { border-top: 1px solid var(--gray300); } + +.selected { + font-weight: 600; +} diff --git a/components/common/MenuButton.js b/components/common/MenuButton.js new file mode 100644 index 0000000000..623065704b --- /dev/null +++ b/components/common/MenuButton.js @@ -0,0 +1,58 @@ +import React, { useState, useRef } from 'react'; +import classNames from 'classnames'; +import Menu from 'components/common/Menu'; +import Button from 'components/common/Button'; +import useDocumentClick from 'hooks/useDocumentClick'; +import styles from './MenuButton.module.css'; + +export default function MenuButton({ + icon, + value, + options, + menuPosition = 'bottom', + menuAlign = 'right', + onSelect, + renderValue, +}) { + const [showMenu, setShowMenu] = useState(false); + const ref = useRef(); + const selectedOption = options.find(e => e.value === value); + + function handleSelect(value) { + onSelect(value); + setShowMenu(false); + } + + function toggleMenu() { + setShowMenu(state => !state); + } + + useDocumentClick(e => { + if (!ref.current.contains(e.target)) { + setShowMenu(false); + } + }); + + return ( +
+ + {showMenu && ( + + )} +
+ ); +} diff --git a/components/common/MenuButton.module.css b/components/common/MenuButton.module.css new file mode 100644 index 0000000000..edf8dfc9f3 --- /dev/null +++ b/components/common/MenuButton.module.css @@ -0,0 +1,24 @@ +.container { + display: flex; + position: relative; + cursor: pointer; +} + +.button { + border: 1px solid transparent; + border-radius: 4px; +} + +.menu { + z-index: 100; +} + +.text { + font-size: var(--font-size-small); +} + +.open, +.open:hover { + background: var(--gray50); + border: 1px solid var(--gray500); +} diff --git a/components/common/Modal.module.css b/components/common/Modal.module.css index 3702e77408..bf2491c71a 100644 --- a/components/common/Modal.module.css +++ b/components/common/Modal.module.css @@ -16,8 +16,8 @@ right: 0; bottom: 0; margin: auto; - background: var(--gray900); - opacity: 0.1; + background: #000; + opacity: 0.5; } .content { diff --git a/components/common/NavMenu.module.css b/components/common/NavMenu.module.css index c5d6c9db90..7be7397376 100644 --- a/components/common/NavMenu.module.css +++ b/components/common/NavMenu.module.css @@ -1,4 +1,5 @@ .menu { + color: var(--gray800); border: 1px solid var(--gray500); border-radius: 4px; overflow: hidden; @@ -16,5 +17,6 @@ } .selected { + color: var(--gray900); font-weight: 600; } diff --git a/components/common/Toast.module.css b/components/common/Toast.module.css index bfcd26bbaa..a65abfd18d 100644 --- a/components/common/Toast.module.css +++ b/components/common/Toast.module.css @@ -9,7 +9,7 @@ justify-content: space-between; align-items: center; padding: 8px 16px; - color: var(--gray50); + color: var(--msgColor); background: var(--green400); margin: auto; z-index: 2; diff --git a/components/common/UserButton.module.css b/components/common/UserButton.module.css deleted file mode 100644 index d848c8e350..0000000000 --- a/components/common/UserButton.module.css +++ /dev/null @@ -1,22 +0,0 @@ -.container { - display: flex; - position: relative; - cursor: pointer; -} - -.button { - display: flex; - flex-wrap: nowrap; -} - -.username { - border-bottom: 1px solid var(--gray500); -} - -.username:hover { - background: var(--gray50); -} - -.menu { - z-index: 100; -} diff --git a/components/common/WorldMap.js b/components/common/WorldMap.js index f10dd54252..f6eec8d672 100644 --- a/components/common/WorldMap.js +++ b/components/common/WorldMap.js @@ -1,44 +1,57 @@ -import React, { useState } from 'react'; +import React, { useState, useMemo } from 'react'; import ReactTooltip from 'react-tooltip'; +import { ComposableMap, Geographies, Geography, ZoomableGroup } from 'react-simple-maps'; import classNames from 'classnames'; import tinycolor from 'tinycolor2'; -import { ComposableMap, Geographies, Geography, ZoomableGroup } from 'react-simple-maps'; +import useTheme from 'hooks/useTheme'; +import { THEME_COLORS } from 'lib/constants'; import styles from './WorldMap.module.css'; const geoUrl = '/world-110m.json'; -export default function WorldMap({ - data, - className, - baseColor = '#e9f3fd', - fillColor = '#f5f5f5', - strokeColor = '#2680eb', - hoverColor = '#2680eb', -}) { +export default function WorldMap({ data, className }) { const [tooltip, setTooltip] = useState(); + const [theme] = useTheme(); + const colors = useMemo( + () => ({ + baseColor: THEME_COLORS[theme].primary, + fillColor: THEME_COLORS[theme].gray100, + strokeColor: THEME_COLORS[theme].primary, + hoverColor: THEME_COLORS[theme].primary, + }), + [theme], + ); function getFillColor(code) { - if (code === 'AQ') return '#ffffff'; + if (code === 'AQ') return; const country = data?.find(({ x }) => x === code); - return country ? tinycolor(baseColor).darken(country.z) : fillColor; - } - function getStrokeColor(code) { - return code === 'AQ' ? '#ffffff' : strokeColor; + if (!country) { + return colors.fillColor; + } + + return tinycolor(colors.baseColor)[theme === 'light' ? 'lighten' : 'darken']( + 40 * (1.0 - country.z / 100), + ); } - function getHoverColor(code) { - return code === 'AQ' ? '#ffffff' : hoverColor; + function getOpacity(code) { + return code === 'AQ' ? 0 : 1; } function handleHover({ ISO_A2: code, NAME: name }) { + if (code === 'AQ') return; const country = data?.find(({ x }) => x === code); setTooltip(`${name}: ${country?.y || 0} visitors`); } return ( -
- +
+ {({ geographies }) => { @@ -50,10 +63,11 @@ export default function WorldMap({ key={geo.rsmKey} geography={geo} fill={getFillColor(code)} - stroke={getStrokeColor(code)} + stroke={colors.strokeColor} + opacity={getOpacity(code)} style={{ default: { outline: 'none' }, - hover: { outline: 'none', fill: getHoverColor(code) }, + hover: { outline: 'none', fill: colors.hoverColor }, pressed: { outline: 'none' }, }} onMouseOver={() => handleHover(geo.properties)} @@ -65,7 +79,7 @@ export default function WorldMap({ - {tooltip} + {tooltip}
); } diff --git a/components/common/WorldMap.module.css b/components/common/WorldMap.module.css index bf84d69705..c25280382b 100644 --- a/components/common/WorldMap.module.css +++ b/components/common/WorldMap.module.css @@ -1,5 +1,4 @@ .container { overflow: hidden; position: relative; - background: #fff; } diff --git a/components/forms/DatePickerForm.js b/components/forms/DatePickerForm.js index f8b6416ebd..673cd7bd8f 100644 --- a/components/forms/DatePickerForm.js +++ b/components/forms/DatePickerForm.js @@ -6,7 +6,7 @@ import Button from 'components/common/Button'; import { FormButtons } from 'components/layout/FormLayout'; import { getDateRangeValues } from 'lib/date'; import styles from './DatePickerForm.module.css'; -import ButtonGroup from '../common/ButtonGroup'; +import ButtonGroup from 'components/common/ButtonGroup'; const FILTER_DAY = 0; const FILTER_RANGE = 1; diff --git a/components/layout/ButtonLayout.js b/components/layout/ButtonLayout.js index 7a9ae8cbcd..40be399f70 100644 --- a/components/layout/ButtonLayout.js +++ b/components/layout/ButtonLayout.js @@ -2,6 +2,16 @@ import React from 'react'; import classNames from 'classnames'; import styles from './ButtonLayout.module.css'; -export default function ButtonLayout({ className, children }) { - return
{children}
; +export default function ButtonLayout({ className, children, align = 'center' }) { + return ( +
+ {children} +
+ ); } diff --git a/components/layout/ButtonLayout.module.css b/components/layout/ButtonLayout.module.css index f153ba5474..ef7707e415 100644 --- a/components/layout/ButtonLayout.module.css +++ b/components/layout/ButtonLayout.module.css @@ -6,3 +6,15 @@ .buttons button + * { margin-left: 10px; } + +.center { + justify-content: center; +} + +.left { + justify-content: flex-start; +} + +.right { + justify-content: flex-end; +} diff --git a/components/layout/FormLayout.module.css b/components/layout/FormLayout.module.css index 0b82ee7c86..90e1b8c279 100644 --- a/components/layout/FormLayout.module.css +++ b/components/layout/FormLayout.module.css @@ -39,7 +39,7 @@ } .msg { - color: var(--gray50); + color: var(--msgColor); background: var(--red400); font-size: var(--font-size-small); padding: 4px 8px; diff --git a/components/layout/Header.js b/components/layout/Header.js index f275bda3b9..639db7ea80 100644 --- a/components/layout/Header.js +++ b/components/layout/Header.js @@ -3,11 +3,12 @@ import { FormattedMessage } from 'react-intl'; import { useSelector } from 'react-redux'; import classNames from 'classnames'; import Link from 'components/common/Link'; -import UserButton from '../common/UserButton'; -import Icon from '../common/Icon'; +import Icon from 'components/common/Icon'; +import LanguageButton from 'components/settings/LanguageButton'; +import ThemeButton from 'components/settings/ThemeButton'; +import UserButton from 'components/settings/UserButton'; import Logo from 'assets/logo.svg'; import styles from './Header.module.css'; -import LanguageButton from '../common/LanguageButton'; export default function Header() { const user = useSelector(state => state.user); @@ -15,28 +16,29 @@ export default function Header() { return (
-
+
} size="large" className={styles.logo} /> umami
-
-
- {user ? ( - <> - - - - - - - - - - ) : ( - - )} +
+ {user && ( +
+ + + + + + +
+ )} +
+
+
+ + + {user && }
diff --git a/components/layout/Header.module.css b/components/layout/Header.module.css index 6853eedab0..63d68ab972 100644 --- a/components/layout/Header.module.css +++ b/components/layout/Header.module.css @@ -13,18 +13,33 @@ .nav { display: flex; - justify-content: flex-end; + justify-content: center; align-items: center; font-size: var(--font-size-normal); font-weight: 600; } -.nav > * { +.nav a + a { margin-left: 40px; } -@media only screen and (max-width: 768px) { +.buttons { + display: flex; + justify-content: flex-end; +} + +@media only screen and (max-width: 992px) { .title { text-align: center; } + + .nav { + font-size: var(--font-size-large); + justify-content: center; + padding: 20px 0; + } + + .buttons { + justify-content: center; + } } diff --git a/components/layout/Layout.js b/components/layout/Layout.js index 021745cc9c..b16a071709 100644 --- a/components/layout/Layout.js +++ b/components/layout/Layout.js @@ -16,8 +16,8 @@ export default function Layout({ title, children, header = true, footer = true } {header &&
}
{children}
-
{footer &&