Merge pull request #199 from mikecao/dev

v0.48.0
2024-11-15 17:55:08 +01:00 · 2020-09-21 21:47:01 -07:00 · 2020-09-21 21:47:01 -07:00 · 418a24deb7
commit 418a24deb7
parent 2564941769 127de9c9b8
64 changed files with 862 additions and 453 deletions
--- a/assets/logo.svg
+++ b/assets/logo.svg
@ -1 +1,2 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 428 389.11"><defs><style>.cls-1{fill:#fff;stroke:#000;stroke-miterlimit:10;stroke-width:20px;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_4" data-name="Layer 4"><circle class="cls-1" cx="214.15" cy="181" r="171"/><path d="M413,134.11H15.29a15,15,0,0,0-15,15v15.3C.12,168,0,171.52,0,175.11c0,118.19,95.81,214,214,214,116.4,0,211.1-92.94,213.93-208.67,0-.44.07-.88.07-1.33v-30A15,15,0,0,0,413,134.11Z"/></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 428 389.11">
+    <circle cx="214.15" cy="181" r="171" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="20"/><path d="M413,134.11H15.29a15,15,0,0,0-15,15v15.3C.12,168,0,171.52,0,175.11c0,118.19,95.81,214,214,214,116.4,0,211.1-92.94,213.93-208.67,0-.44.07-.88.07-1.33v-30A15,15,0,0,0,413,134.11Z"/></svg>
--- a/assets/moon.svg
+++ b/assets/moon.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1399.98 1400"><path d="M562.44,837.55C335.89,611,288.08,273.54,418.71,0A734.31,734.31,0,0,0,215.54,143.73c-287.39,287.39-287.39,753.33,0,1040.72s753.33,287.4,1040.74,0A733.8,733.8,0,0,0,1400,981.29C1126.45,1111.92,789,1064.09,562.44,837.55Z"/></svg>
--- a/assets/sun.svg
+++ b/assets/sun.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 1400"><path d="M367.43,422.13a54.44,54.44,0,0,1-38.66-16L205,282.35A54.69,54.69,0,0,1,282.37,205L406.11,328.79a54.68,54.68,0,0,1-38.68,93.34Z"/><path d="M1156.3,1211a54.51,54.51,0,0,1-38.67-16L993.89,1071.21a54.68,54.68,0,1,1,77.34-77.33L1195,1117.65A54.7,54.7,0,0,1,1156.3,1211Z"/><path d="M243.7,1211A54.7,54.7,0,0,1,205,1117.65L328.74,993.89a54.69,54.69,0,0,1,77.36,77.32L282.37,1195A54.51,54.51,0,0,1,243.7,1211Z"/><path d="M1032.57,422.13a54.68,54.68,0,0,1-38.68-93.34L1117.61,205A54.69,54.69,0,0,1,1195,282.35L1071.23,406.11A54.44,54.44,0,0,1,1032.57,422.13Z"/><path d="M229.69,754.69h-175a54.69,54.69,0,0,1,0-109.38h175a54.69,54.69,0,0,1,0,109.38Z"/><path d="M1345.31,754.69h-175a54.69,54.69,0,0,1,0-109.38h175a54.69,54.69,0,0,1,0,109.38Z"/><path d="M700,1400a54.68,54.68,0,0,1-54.69-54.69v-175a54.69,54.69,0,0,1,109.38,0v175A54.68,54.68,0,0,1,700,1400Z"/><path d="M700,284.38a54.7,54.7,0,0,1-54.69-54.69v-175a54.69,54.69,0,0,1,109.38,0v175A54.7,54.7,0,0,1,700,284.38Z"/><circle cx="700" cy="700" r="306.25"/></svg>
--- 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 {
--- 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 {
--- 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;
 }
--- 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);
+  }
+}
--- 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({
        <Icon icon={<Chevron />} className={styles.icon} size="small" />
      </div>
      {showMenu && (
-        <Menu className={menuClassName} options={options} onSelect={handleSelect} float="bottom" />
+        <Menu
+          className={menuClassName}
+          options={options}
+          selectedOption={selectedOption}
+          onSelect={handleSelect}
+          float="bottom"
+        />
      )}
    </div>
  );
--- a/components/common/Dropdown.module.css
+++ b/components/common/Dropdown.module.css
@ -20,5 +20,5 @@
 }

 .icon {
-  padding-left: 10px;
+  padding-left: 20px;
 }
--- a/components/common/LanguageButton.js
+++ b/components/common/LanguageButton.js
@ -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 (
-    <>
-      <Head>
-        {locale === 'zh-CN' && (
-          <link
-            href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap"
-            rel="stylesheet"
-          />
-        )}
-        {locale === 'ja-JP' && (
-          <link
-            href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap"
-            rel="stylesheet"
-          />
-        )}
-      </Head>
-      <div ref={ref} className={styles.container}>
-        <Button icon={<Globe />} onClick={toggleMenu} size="small">
-          <div>{selectedLocale}</div>
-        </Button>
-        {showMenu && (
-          <Menu
-            className={styles.menu}
-            options={menuOptions}
-            onSelect={handleSelect}
-            float={menuPosition}
-            align={menuAlign}
-          />
-        )}
-      </div>
-    </>
-  );
-}
--- a/components/common/LanguageButton.module.css
+++ b/components/common/LanguageButton.module.css
@ -1,9 +0,0 @@
-.container {
-  display: flex;
-  position: relative;
-  cursor: pointer;
-}
-
-.menu {
-  z-index: 100;
-}
--- 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;
 }
--- a/components/common/Menu.js
+++ b/components/common/Menu.js
@ -33,7 +33,8 @@ export default function Menu({
            <div
              key={value}
              className={classNames(styles.option, optionClassName, customClassName, {
-                [selectedClassName]: selectedOption === value,
+                [selectedClassName]: selectedOption === option,
+                [styles.selected]: selectedOption === option,
                [styles.divider]: divider,
              })}
              onClick={e => onSelect(value, e)}
--- 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;
+}
--- a/components/common/MenuButton.js
+++ 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 (
+    <div className={styles.container} ref={ref}>
+      <Button
+        icon={icon}
+        className={classNames(styles.button, { [styles.open]: showMenu })}
+        onClick={toggleMenu}
+        variant="light"
+      >
+        <div className={styles.text}>{renderValue ? renderValue(selectedOption) : value}</div>
+      </Button>
+      {showMenu && (
+        <Menu
+          className={styles.menu}
+          options={options}
+          selectedOption={selectedOption}
+          onSelect={handleSelect}
+          float={menuPosition}
+          align={menuAlign}
+        />
+      )}
+    </div>
+  );
+}
--- a/components/common/MenuButton.module.css
+++ 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);
+}
--- 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 {
--- 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;
 }
--- 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;
--- a/components/common/UserButton.module.css
+++ b/components/common/UserButton.module.css
@ -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;
-}
--- 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;
+
+    if (!country) {
+      return colors.fillColor;
+    }
+
+    return tinycolor(colors.baseColor)[theme === 'light' ? 'lighten' : 'darken'](
+      40 * (1.0 - country.z / 100),
+    );
  }

-  function getStrokeColor(code) {
-    return code === 'AQ' ? '#ffffff' : strokeColor;
-  }
-
-  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 (
-    <div className={classNames(styles.container, className)}>
-      <ComposableMap data-tip="" projection="geoMercator">
+    <div
+      className={classNames(styles.container, className)}
+      data-tip=""
+      data-for="world-map-tooltip"
+    >
+      <ComposableMap projection="geoMercator">
        <ZoomableGroup zoom={0.8} minZoom={0.7} center={[0, 40]}>
          <Geographies geography={geoUrl}>
            {({ 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({
          </Geographies>
        </ZoomableGroup>
      </ComposableMap>
-      <ReactTooltip>{tooltip}</ReactTooltip>
+      <ReactTooltip id="world-map-tooltip">{tooltip}</ReactTooltip>
    </div>
  );
 }
--- a/components/common/WorldMap.module.css
+++ b/components/common/WorldMap.module.css
@ -1,5 +1,4 @@
 .container {
  overflow: hidden;
  position: relative;
-  background: #fff;
 }
--- 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;
--- 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 <div className={classNames(styles.buttons, className)}>{children}</div>;
+export default function ButtonLayout({ className, children, align = 'center' }) {
+  return (
+    <div
+      className={classNames(styles.buttons, className, {
+        [styles.left]: align === 'left',
+        [styles.center]: align === 'center',
+        [styles.right]: align === 'right',
+      })}
+    >
+      {children}
+    </div>
+  );
 }
--- 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;
+}
--- 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;
--- 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 (
    <header className="container">
      <div className={classNames(styles.header, 'row align-items-center')}>
-        <div className="col-12 col-md-3">
+        <div className="col-12 col-md-12 col-lg-3">
          <div className={styles.title}>
            <Icon icon={<Logo />} size="large" className={styles.logo} />
            <Link href={user ? '/' : 'https://umami.is'}>umami</Link>
          </div>
        </div>
-        <div className="col-12 col-md-9">
-          <div className={styles.nav}>
-            {user ? (
-              <>
-                <Link href="/dashboard">
-                  <FormattedMessage id="label.dashboard" defaultMessage="Dashboard" />
-                </Link>
-                <Link href="/settings">
-                  <FormattedMessage id="label.settings" defaultMessage="Settings" />
-                </Link>
-                <LanguageButton menuAlign="right" />
-                <UserButton />
-              </>
-            ) : (
-              <LanguageButton menuAlign="right" />
-            )}
+        <div className="col-12 col-md-12 col-lg-6">
+          {user && (
+            <div className={styles.nav}>
+              <Link href="/dashboard">
+                <FormattedMessage id="label.dashboard" defaultMessage="Dashboard" />
+              </Link>
+              <Link href="/settings">
+                <FormattedMessage id="label.settings" defaultMessage="Settings" />
+              </Link>
+            </div>
+          )}
+        </div>
+        <div className="col-12 col-md-12 col-lg-3">
+          <div className={styles.buttons}>
+            <ThemeButton />
+            <LanguageButton menuAlign="right" />
+            {user && <UserButton />}
          </div>
        </div>
      </div>
--- 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;
+  }
 }
--- a/components/layout/Layout.js
+++ b/components/layout/Layout.js
@ -16,8 +16,8 @@ export default function Layout({ title, children, header = true, footer = true }
      </Head>
      {header && <Header />}
      <main className="container">{children}</main>
-      <div id="__modals" />
      {footer && <Footer />}
+      <div id="__modals" />
    </>
  );
 }
--- a/components/layout/Layout.module.css
+++ b/components/layout/Layout.module.css
@ -0,0 +1,6 @@
+.layout {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
--- a/components/layout/Page.module.css
+++ b/components/layout/Page.module.css
@ -1,6 +1,7 @@
 .page {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
  padding: 0 30px;
  background: var(--gray50);
-  height: 100%;
-  overflow: hidden;
 }
--- a/components/layout/PageHeader.js
+++ b/components/layout/PageHeader.js
@ -1,6 +1,7 @@
 import React from 'react';
+import classNames from 'classnames';
 import styles from './PageHeader.module.css';

-export default function PageHeader({ children }) {
-  return <div className={styles.header}>{children}</div>;
+export default function PageHeader({ children, className }) {
+  return <div className={classNames(styles.header, className)}>{children}</div>;
 }
--- a/components/metrics/BarChart.js
+++ b/components/metrics/BarChart.js
@ -6,6 +6,8 @@ import { formatLongNumber } from 'lib/format';
 import { dateFormat } from 'lib/lang';
 import useLocale from 'hooks/useLocale';
 import styles from './BarChart.module.css';
+import useTheme from 'hooks/useTheme';
+import { THEME_COLORS } from 'lib/constants';

 export default function BarChart({
  chartId,
@ -16,15 +18,23 @@ export default function BarChart({
  animationDuration = 300,
  className,
  stacked = false,
+  loading = false,
  onCreate = () => {},
  onUpdate = () => {},
 }) {
  const canvas = useRef();
  const chart = useRef();
-  const [tooltip, setTooltip] = useState({});
+  const [tooltip, setTooltip] = useState(null);
  const [locale] = useLocale();
+  const [theme] = useTheme();
+  const colors = {
+    text: THEME_COLORS[theme].gray700,
+    line: THEME_COLORS[theme].gray200,
+    zeroLine: THEME_COLORS[theme].gray500,
+  };

  function renderXLabel(label, index, values) {
+    if (loading) return '';
    const d = new Date(values[index].value);
    const w = canvas.current.width;

@ -59,18 +69,19 @@ export default function BarChart({
  function renderTooltip(model) {
    const { opacity, title, body, labelColors } = model;

-    if (!opacity) {
+    if (!opacity || !title) {
      setTooltip(null);
-    } else {
-      const [label, value] = body[0].lines[0].split(':');
-
-      setTooltip({
-        title: dateFormat(new Date(+title[0]), getTooltipFormat(unit), locale),
-        value,
-        label,
-        labelColor: labelColors[0].backgroundColor,
-      });
+      return;
    }
+
+    const [label, value] = body[0].lines[0].split(':');
+
+    setTooltip({
+      title: dateFormat(new Date(+title[0]), getTooltipFormat(unit), locale),
+      value,
+      label,
+      labelColor: labelColors[0].backgroundColor,
+    });
  }

  function getTooltipFormat(unit) {
@ -97,6 +108,11 @@ export default function BarChart({
      responsive: true,
      responsiveAnimationDuration: 0,
      maintainAspectRatio: false,
+      legend: {
+        labels: {
+          fontColor: colors.text,
+        },
+      },
      scales: {
        xAxes: [
          {
@ -110,6 +126,7 @@ export default function BarChart({
              callback: renderXLabel,
              minRotation: 0,
              maxRotation: 0,
+              fontColor: colors.text,
            },
            gridLines: {
              display: false,
@ -123,6 +140,11 @@ export default function BarChart({
            ticks: {
              callback: renderYLabel,
              beginAtZero: true,
+              fontColor: colors.text,
+            },
+            gridLines: {
+              color: colors.line,
+              zeroLineColor: colors.zeroLine,
            },
            stacked,
          },
@ -144,8 +166,13 @@ export default function BarChart({
  function updateChart() {
    const { options } = chart.current;

+    options.legend.labels.fontColor = colors.text;
    options.scales.xAxes[0].time.unit = unit;
    options.scales.xAxes[0].ticks.callback = renderXLabel;
+    options.scales.xAxes[0].ticks.fontColor = colors.text;
+    options.scales.yAxes[0].ticks.fontColor = colors.text;
+    options.scales.yAxes[0].gridLines.color = colors.line;
+    options.scales.yAxes[0].gridLines.zeroLineColor = colors.zeroLine;
    options.animation.duration = animationDuration;
    options.tooltips.custom = renderTooltip;

@ -161,7 +188,7 @@ export default function BarChart({
        updateChart();
      }
    }
-  }, [datasets, unit, animationDuration, locale]);
+  }, [datasets, unit, animationDuration, locale, theme]);

  return (
    <>
--- a/components/metrics/BarChart.module.css
+++ b/components/metrics/BarChart.module.css
@ -3,6 +3,7 @@
 }

 .tooltip {
+  color: var(--msgColor);
  pointer-events: none;
  z-index: 1;
 }
@ -12,7 +13,6 @@
  flex-direction: column;
  justify-content: center;
  align-items: center;
-  color: var(--gray50);
  text-align: center;
 }

--- a/components/metrics/EventsChart.js
+++ b/components/metrics/EventsChart.js
@ -5,17 +5,7 @@ import { getDateArray, getDateLength } from 'lib/date';
 import useFetch from 'hooks/useFetch';
 import useDateRange from 'hooks/useDateRange';
 import useTimezone from 'hooks/useTimezone';
-
-const COLORS = [
-  '#2680eb',
-  '#9256d9',
-  '#44b556',
-  '#e68619',
-  '#e34850',
-  '#1b959a',
-  '#d83790',
-  '#85d044',
-];
+import { EVENT_COLORS } from 'lib/constants';

 export default function EventsChart({ websiteId, token }) {
  const [dateRange] = useDateRange(websiteId);
@ -51,13 +41,13 @@ export default function EventsChart({ websiteId, token }) {
    });

    return Object.keys(map).map((key, index) => {
-      const color = tinycolor(COLORS[index]);
+      const color = tinycolor(EVENT_COLORS[index]);
      return {
        label: key,
        data: map[key],
        lineTension: 0,
-        backgroundColor: color.setAlpha(0.4).toRgbString(),
-        borderColor: color.setAlpha(0.5).toRgbString(),
+        backgroundColor: color.setAlpha(0.6).toRgbString(),
+        borderColor: color.setAlpha(0.7).toRgbString(),
        borderWidth: 1,
      };
    });
--- a/components/metrics/MetricCard.module.css
+++ b/components/metrics/MetricCard.module.css
@ -3,7 +3,6 @@
  flex-direction: column;
  justify-content: center;
  min-width: 140px;
-  padding-right: 20px;
 }

 .value {
--- a/components/metrics/MetricsBar.module.css
+++ b/components/metrics/MetricsBar.module.css
@ -3,11 +3,15 @@
  cursor: pointer;
 }

+.bar > div + div {
+  padding-left: 20px;
+}
+
@media only screen and (max-width: 992px) {
  .bar {
    justify-content: space-between;
  }
-  .bar > div:last-child {
+  .bar > div:nth-child(n + 3) {
    display: none;
  }
 }
--- a/components/metrics/MetricsTable.js
+++ b/components/metrics/MetricsTable.js
@ -24,7 +24,6 @@ export default function MetricsTable({
  dataFilter,
  filterOptions,
  limit,
-  headerComponent,
  renderLabel,
  onDataLoad = () => {},
  onExpand = () => {},
@ -85,7 +84,6 @@ export default function MetricsTable({
        <>
          <div className={styles.header}>
            <div className={styles.title}>{title}</div>
-            {headerComponent}
            <div className={styles.metric} onClick={handleSetFormat}>
              {metric}
            </div>
--- a/components/metrics/MetricsTable.module.css
+++ b/components/metrics/MetricsTable.module.css
@ -2,7 +2,6 @@
  position: relative;
  min-height: 460px;
  font-size: var(--font-size-small);
-  padding: 20px 0;
  display: flex;
  flex-direction: column;
 }
@ -74,7 +73,7 @@
  position: relative;
  width: 50px;
  color: #6e6e6e;
-  border-left: 1px solid var(--gray600);
+  border-left: 1px solid var(--gray500);
  padding-left: 10px;
  z-index: 1;
 }
--- a/components/metrics/PagesTable.js
+++ b/components/metrics/PagesTable.js
@ -4,6 +4,7 @@ import ButtonGroup from 'components/common/ButtonGroup';
 import { urlFilter } from 'lib/filters';
 import { FILTER_COMBINED, FILTER_RAW } from 'lib/constants';
 import MetricsTable from './MetricsTable';
+import ButtonLayout from '../layout/ButtonLayout';

 export default function PagesTable({ websiteId, token, websiteDomain, limit, onExpand }) {
  const [filter, setFilter] = useState(FILTER_COMBINED);
@ -17,24 +18,28 @@ export default function PagesTable({ websiteId, token, websiteDomain, limit, onE
  ];

  return (
-    <MetricsTable
-      title={<FormattedMessage id="metrics.pages" defaultMessage="Pages" />}
-      type="url"
-      metric={<FormattedMessage id="metrics.views" defaultMessage="Views" />}
-      headerComponent={
-        limit ? null : <FilterButtons buttons={buttons} selected={filter} onClick={setFilter} />
-      }
-      websiteId={websiteId}
-      token={token}
-      limit={limit}
-      dataFilter={urlFilter}
-      filterOptions={{ domain: websiteDomain, raw: filter === FILTER_RAW }}
-      renderLabel={({ x }) => decodeURI(x)}
-      onExpand={onExpand}
-    />
+    <>
+      {!limit && <FilterButtons buttons={buttons} selected={filter} onClick={setFilter} />}
+      <MetricsTable
+        title={<FormattedMessage id="metrics.pages" defaultMessage="Pages" />}
+        type="url"
+        metric={<FormattedMessage id="metrics.views" defaultMessage="Views" />}
+        websiteId={websiteId}
+        token={token}
+        limit={limit}
+        dataFilter={urlFilter}
+        filterOptions={{ domain: websiteDomain, raw: filter === FILTER_RAW }}
+        renderLabel={({ x }) => decodeURI(x)}
+        onExpand={onExpand}
+      />
+    </>
  );
 }

 const FilterButtons = ({ buttons, selected, onClick }) => {
-  return <ButtonGroup size="xsmall" items={buttons} selectedItem={selected} onClick={onClick} />;
+  return (
+    <ButtonLayout>
+      <ButtonGroup size="xsmall" items={buttons} selectedItem={selected} onClick={onClick} />
+    </ButtonLayout>
+  );
 };
--- a/components/metrics/PageviewsChart.js
+++ b/components/metrics/PageviewsChart.js
@ -1,10 +1,25 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
+import tinycolor from 'tinycolor2';
 import CheckVisible from 'components/helpers/CheckVisible';
 import BarChart from './BarChart';
+import useTheme from 'hooks/useTheme';
+import { THEME_COLORS } from 'lib/constants';

-export default function PageviewsChart({ websiteId, data, unit, records, className }) {
+export default function PageviewsChart({ websiteId, data, unit, records, className, loading }) {
  const intl = useIntl();
+  const [theme] = useTheme();
+  const primaryColor = tinycolor(THEME_COLORS[theme].primary);
+  const colors = {
+    views: {
+      background: primaryColor.setAlpha(0.4).toRgbString(),
+      border: primaryColor.setAlpha(0.5).toRgbString(),
+    },
+    visitors: {
+      background: primaryColor.setAlpha(0.6).toRgbString(),
+      border: primaryColor.setAlpha(0.7).toRgbString(),
+    },
+  };

  const handleUpdate = chart => {
    const {
@ -43,8 +58,8 @@ export default function PageviewsChart({ websiteId, data, unit, records, classNa
              }),
              data: data.uniques,
              lineTension: 0,
-              backgroundColor: 'rgb(38, 128, 235, 0.4)',
-              borderColor: 'rgb(13, 102, 208, 0.4)',
+              backgroundColor: colors.visitors.background,
+              borderColor: colors.visitors.border,
              borderWidth: 1,
            },
            {
@ -54,8 +69,8 @@ export default function PageviewsChart({ websiteId, data, unit, records, classNa
              }),
              data: data.pageviews,
              lineTension: 0,
-              backgroundColor: 'rgb(38, 128, 235, 0.2)',
-              borderColor: 'rgb(13, 102, 208, 0.2)',
+              backgroundColor: colors.views.background,
+              borderColor: colors.views.border,
              borderWidth: 1,
            },
          ]}
@ -63,6 +78,7 @@ export default function PageviewsChart({ websiteId, data, unit, records, classNa
          records={records}
          animationDuration={visible ? 300 : 0}
          onUpdate={handleUpdate}
+          loading={loading}
        />
      )}
    </CheckVisible>
--- a/components/metrics/ReferrersTable.js
+++ b/components/metrics/ReferrersTable.js
@ -4,6 +4,7 @@ import MetricsTable from './MetricsTable';
 import { refFilter } from 'lib/filters';
 import ButtonGroup from 'components/common/ButtonGroup';
 import { FILTER_DOMAIN_ONLY, FILTER_COMBINED, FILTER_RAW } from 'lib/constants';
+import ButtonLayout from '../layout/ButtonLayout';

 export default function ReferrersTable({
  websiteId,
@ -37,29 +38,33 @@ export default function ReferrersTable({
  };

  return (
-    <MetricsTable
-      title={<FormattedMessage id="metrics.referrers" defaultMessage="Referrers" />}
-      type="referrer"
-      metric={<FormattedMessage id="metrics.views" defaultMessage="Views" />}
-      headerComponent={
-        limit ? null : <FilterButtons buttons={buttons} selected={filter} onClick={setFilter} />
-      }
-      websiteId={websiteId}
-      websiteDomain={websiteDomain}
-      token={token}
-      limit={limit}
-      dataFilter={refFilter}
-      filterOptions={{
-        domain: websiteDomain,
-        domainOnly: filter === FILTER_DOMAIN_ONLY,
-        raw: filter === FILTER_RAW,
-      }}
-      onExpand={onExpand}
-      renderLabel={renderLink}
-    />
+    <>
+      {!limit && <FilterButtons buttons={buttons} selected={filter} onClick={setFilter} />}
+      <MetricsTable
+        title={<FormattedMessage id="metrics.referrers" defaultMessage="Referrers" />}
+        type="referrer"
+        metric={<FormattedMessage id="metrics.views" defaultMessage="Views" />}
+        websiteId={websiteId}
+        websiteDomain={websiteDomain}
+        token={token}
+        limit={limit}
+        dataFilter={refFilter}
+        filterOptions={{
+          domain: websiteDomain,
+          domainOnly: filter === FILTER_DOMAIN_ONLY,
+          raw: filter === FILTER_RAW,
+        }}
+        onExpand={onExpand}
+        renderLabel={renderLink}
+      />
+    </>
  );
 }

 const FilterButtons = ({ buttons, selected, onClick }) => {
-  return <ButtonGroup size="xsmall" items={buttons} selectedItem={selected} onClick={onClick} />;
+  return (
+    <ButtonLayout>
+      <ButtonGroup size="xsmall" items={buttons} selectedItem={selected} onClick={onClick} />
+    </ButtonLayout>
+  );
 };
--- a/components/metrics/WebsiteChart.js
+++ b/components/metrics/WebsiteChart.js
@ -23,7 +23,7 @@ export default function WebsiteChart({
  const { startDate, endDate, unit, value, modified } = dateRange;
  const [timezone] = useTimezone();

-  const { data } = useFetch(
+  const { data, loading } = useFetch(
    `/api/website/${websiteId}/pageviews`,
    {
      start_at: +startDate,
@ -74,6 +74,7 @@ export default function WebsiteChart({
            data={{ pageviews, uniques }}
            unit={unit}
            records={getDateLength(startDate, endDate, unit)}
+            loading={loading}
          />
        </div>
      </div>
--- a/components/metrics/WebsiteHeader.js
+++ b/components/metrics/WebsiteHeader.js
@ -14,7 +14,7 @@ export default function WebsiteHeader({ websiteId, token, title, showLink = fals
    <PageHeader>
      <div className={styles.title}>{title}</div>
      <ActiveUsers className={styles.active} websiteId={websiteId} token={token} />
-      <ButtonLayout>
+      <ButtonLayout align="right">
        <RefreshButton websiteId={websiteId} />
        {showLink && (
          <Link
--- a/components/settings/AccountSettings.js
+++ b/components/settings/AccountSettings.js
@ -40,7 +40,7 @@ export default function AccountSettings() {

  const Buttons = row =>
    row.username !== 'admin' ? (
-      <ButtonLayout>
+      <ButtonLayout align="right">
        <Button icon={<Pen />} size="small" onClick={() => setEditAccount(row)}>
          <div>
            <FormattedMessage id="button.edit" defaultMessage="Edit" />
--- a/components/settings/LanguageButton.js
+++ b/components/settings/LanguageButton.js
@ -0,0 +1,40 @@
+import React from 'react';
+import Head from 'next/head';
+import { menuOptions } from 'lib/lang';
+import useLocale from 'hooks/useLocale';
+import MenuButton from 'components/common/MenuButton';
+import Globe from 'assets/globe.svg';
+
+export default function LanguageButton() {
+  const [locale, setLocale] = useLocale();
+
+  function handleSelect(value) {
+    setLocale(value);
+  }
+
+  return (
+    <>
+      <Head>
+        {locale === 'zh-CN' && (
+          <link
+            href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap"
+            rel="stylesheet"
+          />
+        )}
+        {locale === 'ja-JP' && (
+          <link
+            href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap"
+            rel="stylesheet"
+          />
+        )}
+      </Head>
+      <MenuButton
+        icon={<Globe />}
+        options={menuOptions}
+        value={locale}
+        renderValue={option => option?.display}
+        onSelect={handleSelect}
+      />
+    </>
+  );
+}
--- a/components/settings/ThemeButton.js
+++ b/components/settings/ThemeButton.js
@ -0,0 +1,44 @@
+import React from 'react';
+import { useTransition, animated } from 'react-spring';
+import Button from 'components/common/Button';
+import useTheme from 'hooks/useTheme';
+import Sun from 'assets/sun.svg';
+import Moon from 'assets/moon.svg';
+import styles from './ThemeButton.module.css';
+import Icon from '../common/Icon';
+
+export default function ThemeButton() {
+  const [theme, setTheme] = useTheme();
+
+  const transitions = useTransition(theme, theme => theme, {
+    from: {
+      opacity: 0,
+      transform: `translateY(${theme === 'light' ? '20px' : '-20px'}) scale(0.5)`,
+    },
+    enter: { opacity: 1, transform: 'translateY(0px) scale(1)' },
+    leave: {
+      opacity: 0,
+      transform: `translateY(${theme === 'light' ? '-20px' : '20px'}) scale(0.5)`,
+    },
+  });
+
+  function handleClick() {
+    setTheme(theme === 'light' ? 'dark' : 'light');
+  }
+
+  return (
+    <Button className={styles.button} variant="light" onClick={handleClick}>
+      {transitions.map(({ item, key, props }) =>
+        item === 'light' ? (
+          <animated.div key={key} style={props}>
+            <Icon icon={<Sun />} />
+          </animated.div>
+        ) : (
+          <animated.div key={key} style={props}>
+            <Icon icon={<Moon />} />
+          </animated.div>
+        ),
+      )}
+    </Button>
+  );
+}
--- a/components/settings/ThemeButton.module.css
+++ b/components/settings/ThemeButton.module.css
@ -0,0 +1,7 @@
+.button {
+  width: 50px;
+}
+
+.button svg {
+  position: absolute;
+}
--- a/components/settings/TimezoneSetting.js
+++ b/components/settings/TimezoneSetting.js
@ -1,8 +1,8 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { listTimeZones } from 'timezone-support';
-import DropDown from '../common/DropDown';
-import Button from '../common/Button';
+import DropDown from 'components/common/DropDown';
+import Button from 'components/common/Button';
 import useTimezone from 'hooks/useTimezone';
 import { getTimezone } from 'lib/date';
 import styles from './TimezoneSetting.module.css';
--- a/components/settings/UserButton.js
+++ b/components/settings/UserButton.js
@ -1,18 +1,15 @@
-import React, { useState, useRef } from 'react';
+import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useSelector } from 'react-redux';
 import { useRouter } from 'next/router';
-import Menu from './Menu';
-import Icon from './Icon';
-import useDocumentClick from 'hooks/useDocumentClick';
+import MenuButton from 'components/common/MenuButton';
+import Icon from 'components/common/Icon';
 import User from 'assets/user.svg';
 import Chevron from 'assets/chevron-down.svg';
 import styles from './UserButton.module.css';

 export default function UserButton() {
-  const [showMenu, setShowMenu] = useState(false);
  const user = useSelector(state => state.user);
-  const ref = useRef();
  const router = useRouter();

  const menuOptions = [
@ -32,8 +29,6 @@ export default function UserButton() {
  ];

  function handleSelect(value) {
-    setShowMenu(false);
-
    if (value === 'logout') {
      router.push('/logout');
    } else if (value === 'profile') {
@ -41,27 +36,12 @@ export default function UserButton() {
    }
  }

-  useDocumentClick(e => {
-    if (!ref.current.contains(e.target)) {
-      setShowMenu(false);
-    }
-  });
-
  return (
-    <div ref={ref} className={styles.container}>
-      <div className={styles.button} onClick={() => setShowMenu(state => !state)}>
-        <Icon icon={<User />} size="large" />
-        <Icon icon={<Chevron />} size="small" />
-      </div>
-      {showMenu && (
-        <Menu
-          className={styles.menu}
-          options={menuOptions}
-          onSelect={handleSelect}
-          float="bottom"
-          align="right"
-        />
-      )}
-    </div>
+    <MenuButton
+      icon={<Icon icon={<User />} size="large" />}
+      value={<Icon icon={<Chevron />} size="small" />}
+      options={menuOptions}
+      onSelect={handleSelect}
+    />
  );
 }
--- a/components/settings/UserButton.module.css
+++ b/components/settings/UserButton.module.css
@ -0,0 +1,7 @@
+.username {
+  border-bottom: 1px solid var(--gray500);
+}
+
+.username:hover {
+  background: var(--gray50);
+}
--- a/components/settings/WebsiteSettings.js
+++ b/components/settings/WebsiteSettings.js
@ -32,7 +32,7 @@ export default function WebsiteSettings() {
  const { data } = useFetch(`/api/websites`, {}, { update: [saved] });

  const Buttons = row => (
-    <ButtonLayout>
+    <ButtonLayout align="right">
      {row.share_id && (
        <Button
          icon={<LinkIcon />}
--- a/hooks/useFetch.js
+++ b/hooks/useFetch.js
@ -7,6 +7,7 @@ export default function useFetch(url, params = {}, options = {}) {
  const dispatch = useDispatch();
  const [data, setData] = useState();
  const [error, setError] = useState();
+  const [loading, setLoadiing] = useState(false);
  const keys = Object.keys(params)
    .sort()
    .map(key => params[key]);
@ -14,6 +15,7 @@ export default function useFetch(url, params = {}, options = {}) {

  async function loadData() {
    try {
+      setLoadiing(true);
      setError(null);
      const time = performance.now();
      const data = await get(url, params);
@ -25,6 +27,8 @@ export default function useFetch(url, params = {}, options = {}) {
    } catch (e) {
      console.error(e);
      setError(e);
+    } finally {
+      setLoadiing(false);
    }
  }

@ -42,5 +46,5 @@ export default function useFetch(url, params = {}, options = {}) {
    }
  }, [url, ...keys, ...update]);

-  return { data, error, loadData };
+  return { data, error, loading, loadData };
 }
--- a/hooks/useLocale.js
+++ b/hooks/useLocale.js
@ -1,5 +1,5 @@
 import { useDispatch, useSelector } from 'react-redux';
-import { updateApp } from 'redux/actions/app';
+import { setLocale } from 'redux/actions/app';
 import { setItem } from 'lib/web';
 import { LOCALE_CONFIG } from 'lib/constants';

@ -7,10 +7,10 @@ export default function useLocale() {
  const locale = useSelector(state => state.app.locale);
  const dispatch = useDispatch();

-  function setLocale(value) {
+  function saveLocale(value) {
    setItem(LOCALE_CONFIG, value);
-    dispatch(updateApp({ locale: value }));
+    dispatch(setLocale(value));
  }

-  return [locale, setLocale];
+  return [locale, saveLocale];
 }
--- a/hooks/useTheme.js
+++ b/hooks/useTheme.js
@ -0,0 +1,21 @@
+import { useDispatch, useSelector } from 'react-redux';
+import { setTheme } from 'redux/actions/app';
+import { getItem, setItem } from 'lib/web';
+import { THEME_CONFIG } from 'lib/constants';
+import { useEffect } from 'react';
+
+export default function useLocale() {
+  const theme = useSelector(state => state.app.theme || getItem(THEME_CONFIG) || 'light');
+  const dispatch = useDispatch();
+
+  function saveTheme(value) {
+    setItem(THEME_CONFIG, value);
+    dispatch(setTheme(value));
+  }
+
+  useEffect(() => {
+    document.body.setAttribute('data-theme', theme);
+  }, [theme]);
+
+  return [theme, saveTheme];
+}
--- a/lang/el-GR.json
+++ b/lang/el-GR.json
@ -0,0 +1,95 @@
+{
+  "button.add-account": "Προσθήκη λογαριασμού",
+  "button.add-website": "Προσθήκη ιστότοπου",
+  "button.back": "Πίσω",
+  "button.cancel": "Ακύρωση",
+  "button.change-password": "Αλλαγή κωδικού",
+  "button.copy-to-clipboard": "Αντιγραφή στο πρόχειρο",
+  "button.date-range": "Εύρος ημερομηνιών",
+  "button.delete": "Διαγραφή",
+  "button.edit": "Επεξεργασία",
+  "button.login": "Είσοδος",
+  "button.more": "Περισσότερα",
+  "button.refresh": "Ανανέωση",
+  "button.reset": "Επαναφορά",
+  "button.save": "Αποθήκευση",
+  "button.single-day": "Ημερήσια",
+  "button.view-details": "Λεπτομέρειες",
+  "label.accounts": "Λογαριασμοί",
+  "label.administrator": "Διαχειριστής",
+  "label.confirm-password": "Επιβεβαίωση κωδικού",
+  "label.current-password": "Τωρινός κωδικός πρόσβασης",
+  "label.custom-range": "Προσαρμοσμένο εύρος",
+  "label.dashboard": "Πίνακας",
+  "label.default-date-range": "Προεπιλεγμένο εύρος ημερομηνιών",
+  "label.domain": "Τομέας",
+  "label.enable-share-url": "Ενεργοποίηση κοινής χρήσης URL",
+  "label.invalid": "Μη έγκυρο",
+  "label.invalid-domain": "Μη έγκυρος τομέας",
+  "label.last-days": "Τελευταίες {x} ημέρες",
+  "label.last-hours": "Τελευταίες {x} ώρες",
+  "label.logged-in-as": "Συνδεθήκατε ως {username}",
+  "label.logout": "Αποσύνδεση",
+  "label.name": "Όνομα",
+  "label.new-password": "Νέος κωδικός",
+  "label.password": "Κωδικός",
+  "label.passwords-dont-match": "Οι κωδικοί πρόσβασης δεν ταιριάζουν",
+  "label.profile": "Προφίλ",
+  "label.required": "Απαιτείται",
+  "label.settings": "Ρυθμίσεις",
+  "label.this-month": "Αυτο το μήνα",
+  "label.this-week": "Αυτή την εβδομάδα",
+  "label.this-year": "Αυτή την χρονιά",
+  "label.timezone": "Ζώνη ώρας",
+  "label.today": "Σήμερα",
+  "label.unknown": "Άγνωστο",
+  "label.username": "Όνομα χρήστη",
+  "label.websites": "Ιστότοποι",
+  "message.active-users": "{x} ενεργοί {x, plural, one {επισκέπτης} other {επισκέπτες}}",
+  "message.confirm-delete": "Είστε βέβαιοι ότι θέλετε να διαγράψετε το {target};",
+  "message.copied": "Αντιγράφηκε!",
+  "message.delete-warning": "Όλα τα σχετικά δεδομένα θα διαγραφούν επίσης.",
+  "message.failure": "Κάτι πήγε στραβά.",
+  "message.get-share-url": "Λήψη URL κοινής χρήσης",
+  "message.get-tracking-code": "Λήψη κώδικα παρακολούθησης",
+  "message.go-to-settings": "Μεταβείτε στις ρυθμίσεις",
+  "message.incorrect-username-password": "Εσφαλμένο όνομα χρήστη / κωδικός πρόσβασης.",
+  "message.no-data-available": "Δεν υπάρχουν διαθέσιμα δεδομένα.",
+  "message.no-websites-configured": "Δεν έχετε ρυθμίσει κανένα ιστότοπο.",
+  "message.page-not-found": "Η σελίδα δεν βρέθηκε.",
+  "message.powered-by": "Με την υποστήριξη του {name}",
+  "message.save-success": "Αποθηκεύτηκε επιτυχώς.",
+  "message.share-url": "Αυτό είναι το κοινόχρηστο URL για το {target}.",
+  "message.track-stats": "Για να παρακολουθείτε στατιστικά στοιχεία για {target}, τοποθετήστε τον ακόλουθο κώδικα στην ενότητα {head} του ιστότοπού σας.",
+  "message.type-delete": "Πληκτρολογήστε {delete} στο παρακάτω πλαίσιο για επιβεβαίωση.",
+  "metrics.actions": "Ενέργειες",
+  "metrics.average-visit-time": "Μέσος χρόνος επίσκεψης",
+  "metrics.bounce-rate": "Ποσοστό αναπήδησης",
+  "metrics.browsers": "Προγράμματα περιήγησης",
+  "metrics.countries": "Χώρες",
+  "metrics.device.desktop": "Σταθερός υπολογιστής",
+  "metrics.device.laptop": "Λάπτοπ",
+  "metrics.device.mobile": "Κινητό",
+  "metrics.device.tablet": "Τάμπλετ",
+  "metrics.devices": "Συσκευές",
+  "metrics.events": "Γεγονότα",
+  "metrics.filter.combined": "Σε συνδυασμό",
+  "metrics.filter.domain-only": "Μόνο τομέας",
+  "metrics.filter.raw": "Ακατέργαστο",
+  "metrics.operating-systems": "Λειτουργικά συστήματα",
+  "metrics.page-views": "Προβολές σελίδας",
+  "metrics.pages": "Σελίδες",
+  "metrics.referrers": "Παραπομπές",
+  "metrics.unique-visitors": "Μοναδικοί επισκέπτες",
+  "metrics.views": "Προβολές",
+  "metrics.visitors": "Επισκέπτες",
+  "title.add-account": "Προσθήκη λογαριασμού",
+  "title.add-website": "Προσθήκη ιστότοπου",
+  "title.change-password": "Αλλαγή κωδικού",
+  "title.delete-account": "Διαγραφή λογαριασμού",
+  "title.delete-website": "Διαγραφή ιστότοπου",
+  "title.edit-account": "Επεξεργασία λογαριασμού",
+  "title.edit-website": "Επεξεργασία ιστότοπου",
+  "title.share-url": "Κοινοποίηση διεύθυνσης URL",
+  "title.tracking-code": "Κωδικός παρακολούθησης"
+}
--- a/lang/sv-SE.json
+++ b/lang/sv-SE.json
@ -20,7 +20,7 @@
  "label.confirm-password": "Bekräfta lösenord",
  "label.current-password": "Nuvarande lösenord",
  "label.custom-range": "Anpassat urval",
-  "label.dashboard": "Dashboard",
+  "label.dashboard": "Instrumentpanel",
  "label.default-date-range": "Standard datum-urval",
  "label.domain": "Domän",
  "label.enable-share-url": "Aktivera delnings-URL",
@ -40,12 +40,12 @@
  "label.this-month": "Denna månad",
  "label.this-week": "Denna vecka",
  "label.this-year": "Detta år",
-  "label.timezone": "Tidzon",
+  "label.timezone": "Tidszon",
  "label.today": "Idag",
  "label.unknown": "Okänd",
  "label.username": "Användarnamn",
  "label.websites": "Webbsajt",
-  "message.active-users": "{x} just nu {x, plural, one {besökare} other {besökare}}",
+  "message.active-users": "{x} {x, plural, one {besökare} other {besökare}} just nu",
  "message.confirm-delete": "Är du säker på att du vill radera {target}?",
  "message.copied": "Kopierad!",
  "message.delete-warning": "All tillhörande data kommer också raderas.",
--- a/lib/constants.js
+++ b/lib/constants.js
@ -2,6 +2,49 @@ export const AUTH_COOKIE_NAME = 'umami.auth';
 export const LOCALE_CONFIG = 'umami.locale';
 export const TIMEZONE_CONFIG = 'umami.timezone';
 export const DATE_RANGE_CONFIG = 'umami.date-range';
+export const THEME_CONFIG = 'umami.theme';
+
+export const THEME_COLORS = {
+  light: {
+    primary: '#2680eb',
+    gray50: '#ffffff',
+    gray75: '#fafafa',
+    gray100: '#f5f5f5',
+    gray200: '#eaeaea',
+    gray300: '#e1e1e1',
+    gray400: '#cacaca',
+    gray500: '#b3b3b3',
+    gray600: '#8e8e8e',
+    gray700: '#6e6e6e',
+    gray800: '#4b4b4b',
+    gray900: '#2c2c2c',
+  },
+  dark: {
+    primary: '#2680eb',
+    gray50: '#252525',
+    gray75: '#2f2f2f',
+    gray100: '#323232',
+    gray200: '#3e3e3e',
+    gray300: '#4a4a4a',
+    gray400: '#5a5a5a',
+    gray500: '#6e6e6e',
+    gray600: '#909090',
+    gray700: '#b9b9b9',
+    gray800: '#e3e3e3',
+    gray900: '#ffffff',
+  },
+};
+
+export const EVENT_COLORS = [
+  '#2680eb',
+  '#9256d9',
+  '#44b556',
+  '#e68619',
+  '#e34850',
+  '#1b959a',
+  '#d83790',
+  '#85d044',
+];

 export const DEFAULT_DATE_RANGE = '24hour';

--- a/lib/lang.js
+++ b/lib/lang.js
@ -1,5 +1,5 @@
 import { format } from 'date-fns';
-import { enUS, nl, zhCN, tr, ru, de, ja, es, fr, da, sv } from 'date-fns/locale';
+import { enUS, nl, zhCN, tr, ru, de, ja, es, fr, da, sv, el } from 'date-fns/locale';
 import enMessages from 'lang-compiled/en-US.json';
 import nlMessages from 'lang-compiled/nl-NL.json';
 import zhCNMessages from 'lang-compiled/zh-CN.json';
@ -12,6 +12,7 @@ import frMessages from 'lang-compiled/fr-FR.json';
 import mnMNMessages from 'lang-compiled/mn-MN.json';
 import daMessages from 'lang-compiled/da-DK.json';
 import svMessages from 'lang-compiled/sv-SE.json';
+import grMessages from 'lang-compiled/el-GR.json';

 export const messages = {
  'en-US': enMessages,
@ -26,6 +27,7 @@ export const messages = {
  'mn-MN': mnMNMessages,
  'da-DK': daMessages,
  'sv-SE': svMessages,
+  'el-GR': grMessages,
 };

 export const dateLocales = {
@ -41,21 +43,23 @@ export const dateLocales = {
  'es-MX': es,
  'fr-FR': fr,
  'mn-MN': enUS,
+  'el-GR': el,
 };

 export const menuOptions = [
-  { label: 'English', value: 'en-US', display: 'EN' },
-  { label: '中文', value: 'zh-CN', display: 'CN' },
-  { label: 'Dansk', value: 'da-DK', display: 'DA' },
-  { label: 'Deutsch', value: 'de-DE', display: 'DE' },
-  { label: 'Español', value: 'es-MX', display: 'ES' },
-  { label: 'Français', value: 'fr-FR', display: 'FR' },
-  { label: '日本語', value: 'ja-JP', display: 'JA' },
-  { label: 'Монгол', value: 'mn-MN', display: 'MN' },
-  { label: 'Nederlands', value: 'nl-NL', display: 'NL' },
-  { label: 'Русский', value: 'ru-RU', display: 'RU' },
-  { label: 'Svenska', value: 'sv-SE', display: 'SV' },
-  { label: 'Turkish', value: 'tr-TR', display: 'TR' },
+  { label: 'English', value: 'en-US', display: 'en' },
+  { label: '中文', value: 'zh-CN', display: 'cn' },
+  { label: 'Dansk', value: 'da-DK', display: 'da' },
+  { label: 'Deutsch', value: 'de-DE', display: 'de' },
+  { label: 'Español', value: 'es-MX', display: 'es' },
+  { label: 'Français', value: 'fr-FR', display: 'fr' },
+  { label: 'Ελληνικά', value: 'el-GR', display: 'el' },
+  { label: '日本語', value: 'ja-JP', display: 'ja' },
+  { label: 'Монгол', value: 'mn-MN', display: 'mn' },
+  { label: 'Nederlands', value: 'nl-NL', display: 'nl' },
+  { label: 'Русский', value: 'ru-RU', display: 'ru' },
+  { label: 'Svenska', value: 'sv-SE', display: 'sv' },
+  { label: 'Turkish', value: 'tr-TR', display: 'tr' },
 ];

 export function dateFormat(date, str, locale) {
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "umami",
-  "version": "0.42.0",
+  "version": "0.48.0",
  "description": "A simple, fast, website analytics alternative to Google Analytics. ",
  "author": "Mike Cao <mike@mikecao.com>",
  "license": "MIT",
@ -49,7 +49,7 @@
    }
  },
  "dependencies": {
-    "@prisma/client": "2.7.0",
+    "@prisma/client": "2.7.1",
    "@reduxjs/toolkit": "^1.4.0",
    "bcrypt": "^5.0.0",
    "chalk": "^4.1.0",
@ -70,10 +70,9 @@
    "maxmind": "^4.1.4",
    "moment-timezone": "^0.5.31",
    "next": "^9.5.3",
-    "promise-polyfill": "^8.1.3",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
-    "react-intl": "^5.8.1",
+    "react-intl": "^5.8.2",
    "react-redux": "^7.2.1",
    "react-simple-maps": "^2.1.2",
    "react-spring": "^8.0.27",
@ -85,12 +84,11 @@
    "thenby": "^1.3.4",
    "timezone-support": "^2.0.2",
    "tinycolor2": "^1.4.1",
-    "unfetch": "^4.1.0",
    "uuid": "^8.3.0"
  },
  "devDependencies": {
-    "@formatjs/cli": "^2.11.2",
-    "@prisma/cli": "2.7.0",
+    "@formatjs/cli": "^2.11.3",
+    "@prisma/cli": "2.7.1",
    "@rollup/plugin-buble": "^0.21.3",
    "@rollup/plugin-node-resolve": "^9.0.0",
    "@rollup/plugin-replace": "^2.3.3",
@ -105,14 +103,14 @@
    "eslint-plugin-react-hooks": "^4.1.2",
    "extract-react-intl-messages": "^4.1.1",
    "husky": "^4.3.0",
-    "lint-staged": "^10.3.0",
+    "lint-staged": "^10.4.0",
    "npm-run-all": "^4.1.5",
    "postcss-flexbugs-fixes": "^4.2.1",
    "postcss-import": "^12.0.1",
    "postcss-preset-env": "^6.7.0",
    "prettier": "^2.1.2",
    "prettier-eslint": "^11.0.0",
-    "rollup": "^2.26.11",
+    "rollup": "^2.28.1",
    "rollup-plugin-hashbang": "^2.2.2",
    "rollup-plugin-terser": "^7.0.2",
    "stylelint": "^13.7.1",
--- a/redux/actions/app.js
+++ b/redux/actions/app.js
@ -1,18 +1,25 @@
 import { createSlice } from '@reduxjs/toolkit';
 import { getItem } from 'lib/web';
-import { LOCALE_CONFIG } from 'lib/constants';
+import { LOCALE_CONFIG, THEME_CONFIG } from 'lib/constants';

 const app = createSlice({
  name: 'app',
-  initialState: { locale: getItem(LOCALE_CONFIG) || 'en-US' },
+  initialState: {
+    locale: getItem(LOCALE_CONFIG) || 'en-US',
+    theme: getItem(THEME_CONFIG) || 'light',
+  },
  reducers: {
-    updateApp(state, action) {
-      state = action.payload;
+    setLocale(state, action) {
+      state.locale = action.payload;
+      return state;
+    },
+    setTheme(state, action) {
+      state.theme = action.payload;
      return state;
    },
  },
 });

-export const { updateApp } = app.actions;
+export const { setLocale, setTheme } = app.actions;

 export default app.reducer;
--- a/styles/index.css
+++ b/styles/index.css
@ -1,14 +1,17 @@
 html,
 body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
-  font-size: var(--font-size-normal);
  font-weight: 400;
  line-height: 1.8;
  padding: 0;
  margin: 0;
-  width: 100%;
-  height: 100%;
  box-sizing: border-box;
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+
+  font-size: var(--font-size-normal);
  color: var(--gray900);
  background: var(--gray75);
 }
@ -51,6 +54,8 @@ a:visited {
 input[type='text'],
 input[type='password'],
 textarea {
+  color: var(--gray900);
+  background: var(--gray50);
  padding: 4px 8px;
  font-size: var(--font-size-normal);
  line-height: 1.8;
@ -85,6 +90,12 @@ dd {

 main {
  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+svg {
+  shape-rendering: geometricPrecision;
 }

 #__next {
@ -92,6 +103,7 @@ main {
  flex-direction: column;
  width: 100%;
  height: 100%;
+  flex: 1;
 }

 #__modals {
--- a/styles/variables.css
+++ b/styles/variables.css
@ -36,4 +36,33 @@
  --green500: #268e6c;
  --green600: #12805c;
  --green700: #107154;
+
+  --msgColor: #ffffff;
+}
+
+[data-theme='dark'] {
+  /*
+  --gray50: #080808;
+  --gray75: #1a1a1a;
+  --gray100: #1e1e1e;
+  --gray200: #2c2c2c;
+  --gray300: #393939;
+  --gray400: #494949;
+  --gray500: #5c5c5c;
+  --gray600: #7c7c7c;
+  --gray700: #6e6e6e;
+  --gray800: #a2a2a2;
+  --gray900: #efefef;
+  */
+  --gray50: #252525;
+  --gray75: #2f2f2f;
+  --gray100: #323232;
+  --gray200: #3e3e3e;
+  --gray300: #4a4a4a;
+  --gray400: #5a5a5a;
+  --gray500: #6e6e6e;
+  --gray600: #909090;
+  --gray700: #b9b9b9;
+  --gray800: #e3e3e3;
+  --gray900: #ffffff;
 }
--- a/yarn.lock
+++ b/yarn.lock
@ -1064,12 +1064,12 @@
    minimatch "^3.0.4"
    strip-json-comments "^3.1.1"

-"@formatjs/cli@^2.11.2":
-  version "2.11.2"
-  resolved "https://registry.yarnpkg.com/@formatjs/cli/-/cli-2.11.2.tgz#ba3bfb84a98f2b9629a3fb03008c72564fbf7c79"
-  integrity sha512-Jf5wEgfFjrumv2OhHxddYFN6+nyjDrta4sbHwaONqgG/gP721tlvQ3UaB0lgg9Mp5xSkRcCRWYT/QeFoRgUSYQ==
+"@formatjs/cli@^2.11.3":
+  version "2.11.3"
+  resolved "https://registry.yarnpkg.com/@formatjs/cli/-/cli-2.11.3.tgz#b06a740520aa0d5345adb2330d13447b4292840c"
+  integrity sha512-7aV3B/16GkHX5Stna9GoKU2o6/At0zxW7PYATRZujf6gbSsIUMHpUZWnMNk0qaJtXeU+3HLsSquRflCaQruoJw==
  dependencies:
-    "@formatjs/ts-transformer" "^2.10.0"
+    "@formatjs/ts-transformer" "^2.10.1"
    "@types/json-stable-stringify" "^1.0.32"
    "@types/lodash" "^4.14.150"
    "@types/loud-rejection" "^2.0.0"
@ -1078,64 +1078,64 @@
    commander "^6.1.0"
    fast-glob "^3.2.4"
    fs-extra "^9.0.0"
-    intl-messageformat-parser "^6.0.6"
+    intl-messageformat-parser "^6.0.7"
    json-stable-stringify "^1.0.1"
    lodash "^4.17.15"
    loud-rejection "^2.2.0"
    typescript "^4.0"

-"@formatjs/ecma402-abstract@^1.2.1":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@formatjs/ecma402-abstract/-/ecma402-abstract-1.2.1.tgz#ad966998d7f0e96fca4bdc5de0ca28d02f371279"
-  integrity sha512-LvbwgHxprafjceDfOC7yMl4sP5al71rAWahXk3qug5bV020aCq64WjqAo+zNnkIJk8hqK2pFKnNdDsT58HZJQw==
+"@formatjs/ecma402-abstract@^1.2.2":
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/@formatjs/ecma402-abstract/-/ecma402-abstract-1.2.2.tgz#4810bdbd696d3805c535fd0620b7c8f45ab3164f"
+  integrity sha512-mLCoAPGlXCVskb/ojBO6iurGqwo6sZvAl8pRC4N25bz4LPWExAM9LsOo057zN3Br1JxUM3RZHG4YGnVt+nSRYQ==

-"@formatjs/intl-displaynames@^3.3.7":
-  version "3.3.7"
-  resolved "https://registry.yarnpkg.com/@formatjs/intl-displaynames/-/intl-displaynames-3.3.7.tgz#7d8cc73d0a67a7c51b182233121eaa2c85f9f751"
-  integrity sha512-sMdV3QaFy2RMOZ6YaRYInDzThEEIiD8vZjue20/CYvxgNKw3ZIZROvpEaKHvHr197Si3RFaxhAGUWk/lI7NAeA==
+"@formatjs/intl-displaynames@^3.3.8":
+  version "3.3.8"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl-displaynames/-/intl-displaynames-3.3.8.tgz#37a3698e135e00908c4314c1085a90d4b9381f61"
+  integrity sha512-HLoiQFCkwjq1ix7xmLC9DAp0sSXBmD2JuzfHiGKrWU8RIbNcHVzbIL4NgkuXkxvnkADXsK67OtfpuQs8kMZ0qw==
  dependencies:
-    "@formatjs/ecma402-abstract" "^1.2.1"
+    "@formatjs/ecma402-abstract" "^1.2.2"

-"@formatjs/intl-listformat@^4.2.6":
-  version "4.2.6"
-  resolved "https://registry.yarnpkg.com/@formatjs/intl-listformat/-/intl-listformat-4.2.6.tgz#31638a6cb3e33047d81161b139c1d68fb377d3c2"
-  integrity sha512-4JGDYVwZyEMGpwhUKXIcSXjRVuSrz5ox1rQCQVzj0CzgEoojrQoaUkcuW+Vj89JlpCtRS8NS46d3CWLUSDC+2g==
+"@formatjs/intl-listformat@^4.2.7":
+  version "4.2.7"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl-listformat/-/intl-listformat-4.2.7.tgz#bcccfee92c69e661d4da51567540aa39fef9ceae"
+  integrity sha512-7sYy7pBGzClvSZI98FhVeNt6N/ELdvrj8pvLOfcR0+FQyhv0ixanog7bRo9kT8ECin9+RwEpTmX7jGCh8Bcgjw==
  dependencies:
-    "@formatjs/ecma402-abstract" "^1.2.1"
+    "@formatjs/ecma402-abstract" "^1.2.2"

 "@formatjs/intl-numberformat@^5.5.2":
-  version "5.6.1"
-  resolved "https://registry.yarnpkg.com/@formatjs/intl-numberformat/-/intl-numberformat-5.6.1.tgz#eaa16b68be6a8c7dddbb2495a9271046c51293c5"
-  integrity sha512-ENtX07hT/GJD/GZIvk1jf/nYHg8Hq3twZ4fOGAZIVhwd6ZqlAm6dgqqRxpNXw3ul8UCwx9tOeptF1gT42HwjKA==
+  version "5.6.2"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl-numberformat/-/intl-numberformat-5.6.2.tgz#2e96c0bf944f3b70fa30d3c21c2b76f57a101899"
+  integrity sha512-+0dXoe8D/7Ci+8/NI4VF0JxDz4GaK5bCNYMEBOYFM+VFAGGWrwyOuEycR+b1so3MNqePou4cb7lLVr+vQfAOcg==
  dependencies:
-    "@formatjs/ecma402-abstract" "^1.2.1"
+    "@formatjs/ecma402-abstract" "^1.2.2"

-"@formatjs/intl-relativetimeformat@^7.2.6":
-  version "7.2.6"
-  resolved "https://registry.yarnpkg.com/@formatjs/intl-relativetimeformat/-/intl-relativetimeformat-7.2.6.tgz#7452e0feaa433f341b306e308166058e8126e934"
-  integrity sha512-SHwrzk9HuAUwl3/qfupU3ZnW4ZgVOpI2+3gwGmvoPOmAlKFlo7liSCszA5hcRpsnhjS66BqUzfx6BWOwzYvmKQ==
+"@formatjs/intl-relativetimeformat@^7.2.7":
+  version "7.2.7"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl-relativetimeformat/-/intl-relativetimeformat-7.2.7.tgz#dce72ebafb1ca0bf14673fab3b1aad145e1abac6"
+  integrity sha512-R6rxX4PfPQ/EuDRALLSIEDCDW/FAmmu6xpRXIPdZ33bEP7SXEksJB039Bw//I0VIm2fBeIlxe9oqvRGfuqpwVg==
  dependencies:
-    "@formatjs/ecma402-abstract" "^1.2.1"
+    "@formatjs/ecma402-abstract" "^1.2.2"

-"@formatjs/intl@^1.3.1":
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/@formatjs/intl/-/intl-1.3.1.tgz#8604b1bcef60572a2ecd22db91c0599760ceebf6"
-  integrity sha512-W1m8vLAQHjrox3ZrJRD6ArMp2AOvUCBeeID7NNhcezZ2fWXtzIKi8k9jeptkO54HZbueLcpshWb2gbUSR5Xy0Q==
+"@formatjs/intl@^1.3.2":
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl/-/intl-1.3.2.tgz#95240177ef9a66614ae28193d346c1d65036cefd"
+  integrity sha512-Z5z9BwUU9M/a46VUhKfKYnEAE+5/2NkISAstwxgtMJmh/tDHYkPF1A4F4bD+YVNusvLXeot1NDH9bQ072XaMsQ==
  dependencies:
-    "@formatjs/ecma402-abstract" "^1.2.1"
-    "@formatjs/intl-displaynames" "^3.3.7"
-    "@formatjs/intl-listformat" "^4.2.6"
-    "@formatjs/intl-relativetimeformat" "^7.2.6"
+    "@formatjs/ecma402-abstract" "^1.2.2"
+    "@formatjs/intl-displaynames" "^3.3.8"
+    "@formatjs/intl-listformat" "^4.2.7"
+    "@formatjs/intl-relativetimeformat" "^7.2.7"
    fast-memoize "^2.5.2"
-    intl-messageformat "^9.3.7"
-    intl-messageformat-parser "^6.0.6"
+    intl-messageformat "^9.3.8"
+    intl-messageformat-parser "^6.0.7"

-"@formatjs/ts-transformer@^2.10.0", "@formatjs/ts-transformer@^2.6.0":
-  version "2.10.0"
-  resolved "https://registry.yarnpkg.com/@formatjs/ts-transformer/-/ts-transformer-2.10.0.tgz#06f292b6cbcea661e2cecf7b8945ac59f21b7c93"
-  integrity sha512-ff+gIzsbd5WEm6mLn1x0A1gD4oJomst8pF7NEjrI0Egn+82v8PEEZeYrsGjUzRt3jyOaRguQUYJGHiw+5d84dQ==
+"@formatjs/ts-transformer@^2.10.1", "@formatjs/ts-transformer@^2.6.0":
+  version "2.10.1"
+  resolved "https://registry.yarnpkg.com/@formatjs/ts-transformer/-/ts-transformer-2.10.1.tgz#883d77c37a6752e3491be3ffdd705beb85cfd6f8"
+  integrity sha512-d5zpKWnk52bgA7Xf3KteiJ4r5RnDnIGUoUXD32yFiJVZRpPyUeEcuuyBS/1mxb7UDRpFB2gDqimYlqhjeURozA==
  dependencies:
-    intl-messageformat-parser "^6.0.6"
+    intl-messageformat-parser "^6.0.7"
    typescript "^4.0"

 "@next/react-dev-overlay@9.5.3":
@ -1185,15 +1185,15 @@
  resolved "https://registry.yarnpkg.com/@panva/asn1.js/-/asn1.js-1.0.0.tgz#dd55ae7b8129e02049f009408b97c61ccf9032f6"
  integrity sha512-UdkG3mLEqXgnlKsWanWcgb6dOjUzJ+XC5f+aWw30qrtjxeNUSfKX1cd5FBzOaXQumoe9nIqeZUvrRJS03HCCtw==

-"@prisma/cli@2.7.0":
-  version "2.7.0"
-  resolved "https://registry.yarnpkg.com/@prisma/cli/-/cli-2.7.0.tgz#af9fd31f24babc9828cc9ab6d8b8735729b320e7"
-  integrity sha512-OCiTV6Xs9GHUk4iJGQeJizyUyrm7pnKCjoeulN+OXAdbfkLwNlRC+/H/8aOwcXx+Nej/QgXoix9CGcs+OYrdnA==
+"@prisma/cli@2.7.1":
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/@prisma/cli/-/cli-2.7.1.tgz#98f2cb434bb931341e6c6292c7bab601e5f842f8"
+  integrity sha512-0uA+gWkNQ35DveVHDPltiTCTr4wcXtEhnPs463IEM+Xn8dTv9x0gtZiYHSuQM3t7uwlOxj1rurBsqSbiljynfQ==

-"@prisma/client@2.7.0":
-  version "2.7.0"
-  resolved "https://registry.yarnpkg.com/@prisma/client/-/client-2.7.0.tgz#fc7d4a3f7c5c8d865de74476a01cef606c02ba5e"
-  integrity sha512-9QkicjHSJwRa05eYdm4J4T3UXdF9SfRboQ8eCvrExOkvl1bhEEeACv0D4dGdmbxr2O/xAwUAW5T9XdJnzOQmGw==
+"@prisma/client@2.7.1":
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/@prisma/client/-/client-2.7.1.tgz#0a37ddff7fe80ae3a86dfa620c1141c8607be6c2"
+  integrity sha512-IEWDCuvIaQTira8/jAyf+uY+AuPPUFDIXMSN4zEA/gvoJv2woq7RmkaubS+NQVgDbbyOR6F3UcXLiFTYQDzZkQ==
  dependencies:
    pkg-up "^3.1.0"

@ -1474,9 +1474,9 @@
  integrity sha1-aaI6OtKcrwCX8G7aWbNh7i8GOfY=

 "@types/node@*", "@types/node@14":
-  version "14.10.2"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.10.2.tgz#9b47a2c8e4dabd4db73b57e750b24af689600514"
-  integrity sha512-IzMhbDYCpv26pC2wboJ4MMOa9GKtjplXfcAqrMeNJpUUwpM/2ATt2w1JPUXwS6spu856TvKZL2AOmeU2rAxskw==
+  version "14.11.2"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.11.2.tgz#2de1ed6670439387da1c9f549a2ade2b0a799256"
+  integrity sha512-jiE3QIxJ8JLNcb1Ps6rDbysDhN4xa8DJJvuC9prr6w+1tIh+QAbYyNF3tyiZNLDBIuBCf4KEcV2UvQm/V60xfA==

 "@types/normalize-package-data@^2.4.0":
  version "2.4.0"
@ -2265,13 +2265,13 @@ browserslist@4.13.0:
    node-releases "^1.1.58"

 browserslist@^4.12.0, browserslist@^4.6.4, browserslist@^4.8.5:
-  version "4.14.2"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.14.2.tgz#1b3cec458a1ba87588cc5e9be62f19b6d48813ce"
-  integrity sha512-HI4lPveGKUR0x2StIz+2FXfDk9SfVMrxn6PLh1JeGUwcuoDkdKZebWiyLRJ68iIPDpMI4JLVDf7S7XzslgWOhw==
+  version "4.14.3"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.14.3.tgz#381f9e7f13794b2eb17e1761b4f118e8ae665a53"
+  integrity sha512-GcZPC5+YqyPO4SFnz48/B0YaCwS47Q9iPChRGi6t7HhflKBcINzFrJvRfC+jp30sRMKxF+d4EHGs27Z0XP1NaQ==
  dependencies:
-    caniuse-lite "^1.0.30001125"
-    electron-to-chromium "^1.3.564"
-    escalade "^3.0.2"
+    caniuse-lite "^1.0.30001131"
+    electron-to-chromium "^1.3.570"
+    escalade "^3.1.0"
    node-releases "^1.1.61"

 buble@^0.20.0:
@ -2413,10 +2413,10 @@ camelcase@^6.0.0:
  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.0.0.tgz#5259f7c30e35e278f1bdc2a4d91230b37cad981e"
  integrity sha512-8KMDF1Vz2gzOq54ONPJS65IvTUaB1cHJ2DMM7MbPmLZljDH1qpzzLsWdiN9pHh6qvkRVDTi/07+eNGch/oLU4w==

-caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001093, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001113, caniuse-lite@^1.0.30001125:
-  version "1.0.30001131"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001131.tgz#afad8a28fc2b7a0d3ae9407e71085a0ead905d54"
-  integrity sha512-4QYi6Mal4MMfQMSqGIRPGbKIbZygeN83QsWq1ixpUwvtfgAZot5BrCKzGygvZaV+CnELdTwD0S4cqUNozq7/Cw==
+caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001093, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001113, caniuse-lite@^1.0.30001131:
+  version "1.0.30001133"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001133.tgz#ec564c5495311299eb05245e252d589a84acd95e"
+  integrity sha512-s3XAUFaC/ntDb1O3lcw9K8MPeOW7KO3z9+GzAoBxfz1B0VdacXPMKgFUtG4KIsgmnbexmi013s9miVu4h+qMHw==

 ccount@^1.0.0:
  version "1.0.5"
@ -3188,11 +3188,11 @@ date-fns@^2.16.1:
  integrity sha512-sAJVKx/FqrLYHAQeN7VpJrPhagZc9R4ImZIWYRFZaaohR3KzmuK88touwsSwSVT8Qcbd4zoDsnGfX4GFB4imyQ==

 debug@4, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-4.1.1.tgz#3b72260255109c6b589cee050f1d516139664791"
-  integrity sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.2.0.tgz#7f150f93920e94c58f5574c2fd01a3110effe7f1"
+  integrity sha512-IX2ncY78vDTjZMFUdmsvIRFY2Cf4FnD0wRs+nQwJU8Lu99/tPFdb0VybiiMTPe3I6rQmwsqQqRBvxU+bZ/I8sg==
  dependencies:
-    ms "^2.1.1"
+    ms "2.1.2"

 debug@^2.2.0, debug@^2.3.3:
  version "2.6.9"
@ -3468,10 +3468,10 @@ duplexify@^3.4.2, duplexify@^3.6.0:
    readable-stream "^2.0.0"
    stream-shift "^1.0.0"

-electron-to-chromium@^1.3.488, electron-to-chromium@^1.3.564:
-  version "1.3.568"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.568.tgz#0fa28cd3e5cbd9e8c66f72309eef0646f65a5b66"
-  integrity sha512-j9MlEwgTHVW/lq93Hw8yhzA886oLjDm3Hz7eDkWP2v4fzLVuqOWhpNluziSnmR/tBqgoYldagbLknrdg+B7Tlw==
+electron-to-chromium@^1.3.488, electron-to-chromium@^1.3.570:
+  version "1.3.570"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.570.tgz#3f5141cc39b4e3892a276b4889980dabf1d29c7f"
+  integrity sha512-Y6OCoVQgFQBP5py6A/06+yWxUZHDlNr/gNDGatjH8AZqXl8X0tE4LfjLJsXGz/JmWJz8a6K7bR1k+QzZ+k//fg==

 elliptic@^6.5.3:
  version "6.5.3"
@ -3623,7 +3623,7 @@ es6-symbol@^3.1.1, es6-symbol@~3.1.3:
    d "^1.0.1"
    ext "^1.1.2"

-escalade@^3.0.1, escalade@^3.0.2:
+escalade@^3.0.1, escalade@^3.1.0:
  version "3.1.0"
  resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.0.tgz#e8e2d7c7a8b76f6ee64c2181d6b8151441602d4e"
  integrity sha512-mAk+hPSO8fLDkhV7V0dXazH5pDc6MrjBTPyD3VeKzxnVFjH1MIxbCdqGZB9O8+EwWakZs3ZCbDS4IpRt79V1ig==
@ -4714,20 +4714,20 @@ intl-messageformat-parser@^5.3.7:
  dependencies:
    "@formatjs/intl-numberformat" "^5.5.2"

-intl-messageformat-parser@^6.0.6:
-  version "6.0.6"
-  resolved "https://registry.yarnpkg.com/intl-messageformat-parser/-/intl-messageformat-parser-6.0.6.tgz#c06c79c534612808e1f3c39288a3c009fb1ff7cd"
-  integrity sha512-XPAgYvCTSwgr92zzy5sfaglUu4uKjIWXHNTenEQRTo5t3o2TGxuPYPruxZqnvSLgnlAegiT/hBemmPcnFPNjAg==
+intl-messageformat-parser@^6.0.7:
+  version "6.0.7"
+  resolved "https://registry.yarnpkg.com/intl-messageformat-parser/-/intl-messageformat-parser-6.0.7.tgz#de57a03466e1441b7cbfd99a02ace108745ef133"
+  integrity sha512-3T/S9OPqBR2PibpfX/Go+sjaQrHf7p37/eOikvR+M4uaxdJT+Yi3u+ayKURA8fvOmmfkimDSYIRrkoRoHIezfA==
  dependencies:
-    "@formatjs/ecma402-abstract" "^1.2.1"
+    "@formatjs/ecma402-abstract" "^1.2.2"

-intl-messageformat@^9.3.7:
-  version "9.3.7"
-  resolved "https://registry.yarnpkg.com/intl-messageformat/-/intl-messageformat-9.3.7.tgz#d40e61dc20ded8952fef00d97237880ff380550a"
-  integrity sha512-DUc+BJ6QN/IyT05gyKTuSJuauuYheV/5IhP+KEwmLhaJzONu0U/nnL5P6L5Ck9DXAx8iy7HM0CwFUctD7CmqZw==
+intl-messageformat@^9.3.8:
+  version "9.3.8"
+  resolved "https://registry.yarnpkg.com/intl-messageformat/-/intl-messageformat-9.3.8.tgz#561f31800cc3ced5dada6c991a0dd0233931850f"
+  integrity sha512-XuFoC6kvsgL1qtzro9ubOaJ2zVgeJWb5X0mTYvG7p1OinbOZYPscP8eYyVJf9g++tDy/fwx9TfeaFlunmhC+Vw==
  dependencies:
    fast-memoize "^2.5.2"
-    intl-messageformat-parser "^6.0.6"
+    intl-messageformat-parser "^6.0.7"

 invariant@^2.2.2, invariant@^2.2.4:
  version "2.2.4"
@ -4798,9 +4798,9 @@ is-buffer@^2.0.0:
  integrity sha512-Kq1rokWXOPXWuaMAqZiJW4XxsmD9zGx9q4aePabbn3qCRGedtH7Cm+zV8WETitMfu1wdh+Rvd6w5egwSngUX2A==

 is-callable@^1.1.4, is-callable@^1.2.0:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.1.tgz#4d1e21a4f437509d25ce55f8184350771421c96d"
-  integrity sha512-wliAfSzx6V+6WfMOmus1xy0XvSgf/dlStkvTfq7F0g4bOIW0PSUbnyse3NhDwdyYS1ozfUtAAySqTws3z9Eqgg==
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.2.tgz#c7c6715cd22d4ddb48d3e19970223aceabb080d9"
+  integrity sha512-dnMqspv5nU3LoewK2N/y7KLtxtakvTuaCsU9FU50/QDmdbHNy/4/JuRtMHqRU22o3q+W89YQndQEeCVwK+3qrA==

 is-data-descriptor@^0.1.4:
  version "0.1.4"
@ -5236,10 +5236,10 @@ lines-and-columns@^1.1.6:
  resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
  integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=

-lint-staged@^10.3.0:
-  version "10.3.0"
-  resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-10.3.0.tgz#388c3d440590c45c339e7163f669ea69ae90b1e0"
-  integrity sha512-an3VgjHqmJk0TORB/sdQl0CTkRg4E5ybYCXTTCSJ5h9jFwZbcgKIx5oVma5e7wp/uKt17s1QYFmYqT9MGVosGw==
+lint-staged@^10.4.0:
+  version "10.4.0"
+  resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-10.4.0.tgz#d18628f737328e0bbbf87d183f4020930e9a984e"
+  integrity sha512-uaiX4U5yERUSiIEQc329vhCTDDwUcSvKdRLsNomkYLRzijk3v8V9GWm2Nz0RMVB87VcuzLvtgy6OsjoH++QHIg==
  dependencies:
    chalk "^4.1.0"
    cli-truncate "^2.1.0"
@ -5839,7 +5839,7 @@ ms@2.0.0:
  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
  integrity sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=

-ms@^2.1.1:
+ms@2.1.2, ms@^2.1.1:
  version "2.1.2"
  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
  integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
@ -5978,9 +5978,9 @@ nice-try@^1.0.4:
  integrity sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==

 node-addon-api@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/node-addon-api/-/node-addon-api-3.0.0.tgz#812446a1001a54f71663bed188314bba07e09247"
-  integrity sha512-sSHCgWfJ+Lui/u+0msF3oyCgvdkhxDbkCS6Q8uiJquzOimkJBvX6hl5aSSA7DR1XbMpdM8r7phjcF63sF4rkKg==
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/node-addon-api/-/node-addon-api-3.0.2.tgz#04bc7b83fd845ba785bb6eae25bc857e1ef75681"
+  integrity sha512-+D4s2HCnxPd5PjjI0STKwncjXTUKKqm74MDMz9OPXavjsGmjkvwgLtA5yoxJUdmpj52+2u+RrXgPipahKczMKg==

 node-fetch@2.6.0:
  version "2.6.0"
@ -6938,13 +6938,14 @@ postcss-selector-parser@^5.0.0-rc.3, postcss-selector-parser@^5.0.0-rc.4:
    uniq "^1.0.1"

 postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2:
-  version "6.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz#934cf799d016c83411859e09dcecade01286ec5c"
-  integrity sha512-36P2QR59jDTOAiIkqEprfJDsoNrvwFei3eCqKd1Y0tUsBimsq39BLp7RD+JWny3WgB1zGhJX8XVePwm9k4wdBg==
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.3.tgz#766d77728728817cc140fa1ac6da5e77f9fada98"
+  integrity sha512-0ClFaY4X1ra21LRqbW6y3rUbWcxnSVkDFG57R7Nxus9J9myPFlv+jYDMohzpkBx0RrjjiqjtycpchQ+PLGmZ9w==
  dependencies:
    cssesc "^3.0.0"
    indexes-of "^1.0.1"
    uniq "^1.0.1"
+    util-deprecate "^1.0.2"

 postcss-syntax@^0.36.2:
  version "0.36.2"
@ -6979,7 +6980,7 @@ postcss@7.0.21:
    source-map "^0.6.1"
    supports-color "^6.1.0"

-postcss@7.0.32, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.17, postcss@^7.0.2, postcss@^7.0.21, postcss@^7.0.26, postcss@^7.0.27, postcss@^7.0.32, postcss@^7.0.5, postcss@^7.0.6:
+postcss@7.0.32:
  version "7.0.32"
  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.32.tgz#4310d6ee347053da3433db2be492883d62cec59d"
  integrity sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==
@ -6988,6 +6989,15 @@ postcss@7.0.32, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.17, postcss@^7.0.2
    source-map "^0.6.1"
    supports-color "^6.1.0"

+postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.17, postcss@^7.0.2, postcss@^7.0.21, postcss@^7.0.26, postcss@^7.0.27, postcss@^7.0.32, postcss@^7.0.5, postcss@^7.0.6:
+  version "7.0.34"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.34.tgz#f2baf57c36010df7de4009940f21532c16d65c20"
+  integrity sha512-H/7V2VeNScX9KE83GDrDZNiGT1m2H+UTnlinIzhjlLX9hfMUn1mHNnGeX81a1c8JSBdBvqk7c2ZOG6ZPn5itGw==
+  dependencies:
+    chalk "^2.4.2"
+    source-map "^0.6.1"
+    supports-color "^6.1.0"
+
 prelude-ls@^1.2.1:
  version "1.2.1"
  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
@ -7056,11 +7066,6 @@ promise-inflight@^1.0.1:
  resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
  integrity sha1-mEcocL8igTL8vdhoEputEsPAKeM=

-promise-polyfill@^8.1.3:
-  version "8.1.3"
-  resolved "https://registry.yarnpkg.com/promise-polyfill/-/promise-polyfill-8.1.3.tgz#8c99b3cf53f3a91c68226ffde7bde81d7f904116"
-  integrity sha512-MG5r82wBzh7pSKDRa9y+vllNHz3e3d4CNj1PQE4BQYxLme0gKYYBm9YENq+UkEikyZ0XbiGWxYlVw3Rl9O/U8g==
-
 prop-types@15.7.2, prop-types@^15.5.8, prop-types@^15.6.2, prop-types@^15.7.2:
  version "15.7.2"
  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
@ -7187,21 +7192,21 @@ react-fast-compare@^2.0.1:
  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
  integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==

-react-intl@^5.8.1:
-  version "5.8.1"
-  resolved "https://registry.yarnpkg.com/react-intl/-/react-intl-5.8.1.tgz#2974499d438bcde58437100b0c19043ca0ffcc3b"
-  integrity sha512-NGwtadXCoPUYHqQFNYR0Rbwv08QkCLECeBPUUFndhJIudvgmVqNrX3x6A3LMEYY76vLOovmoy+xiTAx7yWGkBg==
+react-intl@^5.8.2:
+  version "5.8.2"
+  resolved "https://registry.yarnpkg.com/react-intl/-/react-intl-5.8.2.tgz#6be0f31a6438bf12989f7c8f7f4b5610f36e862f"
+  integrity sha512-WiZqh4xTSmc+HlCzJ1b0imIPr7OFx0g7kl6RGAazb7WCtUNhsdX5jBmwk5CplwVPXiBCdytuKmyfX4XTrrvA9A==
  dependencies:
-    "@formatjs/ecma402-abstract" "^1.2.1"
-    "@formatjs/intl" "^1.3.1"
-    "@formatjs/intl-displaynames" "^3.3.7"
-    "@formatjs/intl-listformat" "^4.2.6"
-    "@formatjs/intl-relativetimeformat" "^7.2.6"
+    "@formatjs/ecma402-abstract" "^1.2.2"
+    "@formatjs/intl" "^1.3.2"
+    "@formatjs/intl-displaynames" "^3.3.8"
+    "@formatjs/intl-listformat" "^4.2.7"
+    "@formatjs/intl-relativetimeformat" "^7.2.7"
    "@types/hoist-non-react-statics" "^3.3.1"
    fast-memoize "^2.5.2"
    hoist-non-react-statics "^3.3.2"
-    intl-messageformat "^9.3.7"
-    intl-messageformat-parser "^6.0.6"
+    intl-messageformat "^9.3.8"
+    intl-messageformat-parser "^6.0.7"
    shallow-equal "^1.2.1"

 react-is@16.13.1, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.9.0:
@ -7438,9 +7443,9 @@ regexpu-core@4.5.4:
    unicode-match-property-value-ecmascript "^1.1.0"

 regexpu-core@^4.7.0:
-  version "4.7.0"
-  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.7.0.tgz#fcbf458c50431b0bb7b45d6967b8192d91f3d938"
-  integrity sha512-TQ4KXRnIn6tz6tjnrXEkD/sshygKH/j5KzK86X8MkeHyZ8qst/LZ89j3X4/8HEIfHANTFIP/AbXakeRhWIl5YQ==
+  version "4.7.1"
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.7.1.tgz#2dea5a9a07233298fbf0db91fa9abc4c6e0f8ad6"
+  integrity sha512-ywH2VUraA44DZQuRKzARmw6S66mr48pQVva4LBeRhcOltJ6hExvWly5ZjFLYo67xbIxb6W1q4bAGtgfEl20zfQ==
  dependencies:
    regenerate "^1.4.0"
    regenerate-unicode-properties "^8.2.0"
@ -7664,10 +7669,10 @@ rollup-plugin-terser@^7.0.2:
    serialize-javascript "^4.0.0"
    terser "^5.0.0"

-rollup@^2.26.11:
-  version "2.26.11"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.26.11.tgz#4fc31de9c7b83d50916fc8395f8c3d24730cdaae"
-  integrity sha512-xyfxxhsE6hW57xhfL1I+ixH8l2bdoIMaAecdQiWF3N7IgJEMu99JG+daBiSZQjnBpzFxa0/xZm+3pbCdAQehHw==
+rollup@^2.28.1:
+  version "2.28.1"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.28.1.tgz#ceedca3cdb013c2fa8f22f958a29c203368159ea"
+  integrity sha512-DOtVoqOZt3+FjPJWLU8hDIvBjUylc9s6IZvy76XklxzcLvAQLtVAG/bbhsMhcWnYxC0TKKcf1QQ/tg29zeID0Q==
  optionalDependencies:
    fsevents "~2.1.2"

@ -8051,9 +8056,9 @@ spdx-expression-parse@^3.0.0:
    spdx-license-ids "^3.0.0"

 spdx-license-ids@^3.0.0:
-  version "3.0.5"
-  resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.5.tgz#3694b5804567a458d3c8045842a6358632f62654"
-  integrity sha512-J+FWzZoynJEXGphVIS+XEh3kFSjZX/1i9gFBaWQcB+/tmpe2qUsSBABpcxqxnAxFdiUFEgAX1bjYGQvIZmoz9Q==
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.6.tgz#c80757383c28abf7296744998cbc106ae8b854ce"
+  integrity sha512-+orQK83kyMva3WyPf59k1+Y525csj5JejicWut55zeTWANuN17qSiSLUXWtzHeNWORSvT7GLDJ/E/XiIWoXBTw==

 specificity@^0.4.1:
  version "0.4.1"
@ -8575,9 +8580,9 @@ terser@4.8.0, terser@^4.1.2:
    source-map-support "~0.5.12"

 terser@^5.0.0:
-  version "5.3.1"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-5.3.1.tgz#f50fe20ab48b15234fe9bdd86b10148ad5fca787"
-  integrity sha512-yD80f4hdwCWTH5mojzxe1q8bN1oJbsK/vfJGLcPZM/fl+/jItIVNKhFIHqqR71OipFWMLgj3Kc+GIp6CeIqfnA==
+  version "5.3.2"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-5.3.2.tgz#f4bea90eb92945b2a028ceef79181b9bb586e7af"
+  integrity sha512-H67sydwBz5jCUA32ZRL319ULu+Su1cAoZnnc+lXnenGRYWyLE3Scgkt8mNoAsMx0h5kdo758zdoS0LG9rYZXDQ==
  dependencies:
    commander "^2.20.0"
    source-map "~0.6.1"
@ -8812,14 +8817,9 @@ typescript@^3.9.3:
  integrity sha512-BLbiRkiBzAwsjut4x/dsibSTB6yWpwT5qWmC2OfuCg3GgVQCSgMs4vEctYPhsaGtd0AeuuHMkjZ2h2WG8MSzRw==

 typescript@^4.0:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.0.2.tgz#7ea7c88777c723c681e33bf7988be5d008d05ac2"
-  integrity sha512-e4ERvRV2wb+rRZ/IQeb3jm2VxBsirQLpQhdxplZ2MEzGvDkkMmPglecnNDfSUBivMjP93vRbngYYDQqQ/78bcQ==
-
-unfetch@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/unfetch/-/unfetch-4.1.0.tgz#6ec2dd0de887e58a4dee83a050ded80ffc4137db"
-  integrity sha512-crP/n3eAPUJxZXM9T80/yv0YhkTEx2K1D3h7D1AJM6fzsWZrxdyRuLN0JH/dkZh1LNH8LxCnBzoPFCPbb2iGpg==
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.0.3.tgz#153bbd468ef07725c1df9c77e8b453f8d36abba5"
+  integrity sha512-tEu6DGxGgRJPb/mVPIZ48e69xCn2yRmCgYmDugAVwmJ6o+0u1RI18eO7E7WBTLYLaEVVOhwQmcdhQHweux/WPg==

 unherit@^1.0.4:
  version "1.1.3"
@ -8991,7 +8991,7 @@ use@^3.1.0:
  resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"
  integrity sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==

-util-deprecate@^1.0.1, util-deprecate@~1.0.1:
+util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
  integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
				`@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1399.98 1400"><path d="M562.44,837.55C335.89,611,288.08,273.54,418.71,0A734.31,734.31,0,0,0,215.54,143.73c-287.39,287.39-287.39,753.33,0,1040.72s753.33,287.4,1040.74,0A733.8,733.8,0,0,0,1400,981.29C1126.45,1111.92,789,1064.09,562.44,837.55Z"/></svg>`
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 1400"><path d="M367.43,422.13a54.44,54.44,0,0,1-38.66-16L205,282.35A54.69,54.69,0,0,1,282.37,205L406.11,328.79a54.68,54.68,0,0,1-38.68,93.34Z"/><path d="M1156.3,1211a54.51,54.51,0,0,1-38.67-16L993.89,1071.21a54.68,54.68,0,1,1,77.34-77.33L1195,1117.65A54.7,54.7,0,0,1,1156.3,1211Z"/><path d="M243.7,1211A54.7,54.7,0,0,1,205,1117.65L328.74,993.89a54.69,54.69,0,0,1,77.36,77.32L282.37,1195A54.51,54.51,0,0,1,243.7,1211Z"/><path d="M1032.57,422.13a54.68,54.68,0,0,1-38.68-93.34L1117.61,205A54.69,54.69,0,0,1,1195,282.35L1071.23,406.11A54.44,54.44,0,0,1,1032.57,422.13Z"/><path d="M229.69,754.69h-175a54.69,54.69,0,0,1,0-109.38h175a54.69,54.69,0,0,1,0,109.38Z"/><path d="M1345.31,754.69h-175a54.69,54.69,0,0,1,0-109.38h175a54.69,54.69,0,0,1,0,109.38Z"/><path d="M700,1400a54.68,54.68,0,0,1-54.69-54.69v-175a54.69,54.69,0,0,1,109.38,0v175A54.68,54.68,0,0,1,700,1400Z"/><path d="M700,284.38a54.7,54.7,0,0,1-54.69-54.69v-175a54.69,54.69,0,0,1,109.38,0v175A54.7,54.7,0,0,1,700,284.38Z"/><circle cx="700" cy="700" r="306.25"/></svg>