Added support for zh-CN locale.

components/WebsiteDetails.js

@@ -43,13 +43,41 @@ export default function WebsiteDetails({ websiteId }) {
     {
       render: BackButton,
     },
-    { label: 'Pages', value: 'url', component: PagesTable },
-    { label: 'Referrers', value: 'referrer', component: ReferrersTable },
-    { label: 'Browsers', value: 'browser', component: BrowsersTable },
-    { label: 'Operating system', value: 'os', component: OSTable },
-    { label: 'Devices', value: 'device', component: DevicesTable },
-    { label: 'Countries', value: 'country', component: CountriesTable },
-    { label: 'Events', value: 'event', component: EventsTable },
+    {
+      label: <FormattedMessage id="metrics.pages" defaultMessage="Pages" />,
+      value: 'url',
+      component: PagesTable,
+    },
+    {
+      label: <FormattedMessage id="metrics.browsers" defaultMessage="Browsers" />,
+      value: 'referrer',
+      component: ReferrersTable,
+    },
+    {
+      label: <FormattedMessage id="metrics.referrers" defaultMessage="Referrers" />,
+      value: 'browser',
+      component: BrowsersTable,
+    },
+    {
+      label: <FormattedMessage id="metrics.operating-system" defaultMessage="Operating system" />,
+      value: 'os',
+      component: OSTable,
+    },
+    {
+      label: <FormattedMessage id="metrics.devices" defaultMessage="Devices" />,
+      value: 'device',
+      component: DevicesTable,
+    },
+    {
+      label: <FormattedMessage id="metrics.countries" defaultMessage="Countries" />,
+      value: 'country',
+      component: CountriesTable,
+    },
+    {
+      label: <FormattedMessage id="metrics.events" defaultMessage="Events" />,
+      value: 'event',
+      component: EventsTable,
+    },
   ];
 
   const tableProps = {

components/common/LanguageButton.js

@@ -7,17 +7,21 @@ import Menu from './Menu';
 import styles from './LanguageButton.module.css';
 import Button from './Button';
 
+const supportedLanguages = {
+  en: 'EN',
+  'zh-CN': '中文',
+};
+
 const menuOptions = [
   { label: 'English', value: 'en' },
-  { label: '中文 (Chinese)', value: 'zh-CN' },
+  { label: '中文 (Chinese Simplified)', value: 'zh-CN' },
 ];
 
-export default function LanguageButton() {
+export default function LanguageButton({ menuPosition = 'bottom', menuAlign = 'left' }) {
   const dispatch = useDispatch();
   const [showMenu, setShowMenu] = useState(false);
   const locale = useSelector(state => state.app.locale);
   const ref = useRef();
-  const selectedLocale = menuOptions.find(e => e.value === locale)?.label.split(' ')[0];
 
   function handleSelect(value) {
     dispatch(updateApp({ locale: value }));
@@ -34,9 +38,16 @@ export default function LanguageButton() {
   return (
     <div ref={ref} className={styles.container}>
       <Button icon={<Globe />} onClick={() => setShowMenu(true)} size="small">
-        <div>{selectedLocale}</div>
+        <div>{supportedLanguages[locale]}</div>
       </Button>
-      {showMenu && <Menu options={menuOptions} onSelect={handleSelect} float="top" />}
+      {showMenu && (
+        <Menu
+          options={menuOptions}
+          onSelect={handleSelect}
+          float={menuPosition}
+          align={menuAlign}
+        />
+      )}
     </div>
   );
 }

components/layout/Footer.js

@@ -3,26 +3,21 @@ import { FormattedMessage } from 'react-intl';
 import Link from 'next/link';
 import classNames from 'classnames';
 import Button from 'components/common/Button';
-import LanguageButton from 'components/common/LanguageButton';
 import Logo from 'assets/logo.svg';
 import styles from './Footer.module.css';
 
 export default function Footer() {
   return (
     <footer className="container">
-      <div className={classNames(styles.footer, 'row')}>
-        <LanguageButton />
-        <div className={styles.center}>
-          <FormattedMessage id="footer.powered-by" defaultMessage="powered by" />
-          <Link href="https://umami.is">
-            <a>
-              <Button icon={<Logo />} size="small">
-                <b>umami</b>
-              </Button>
-            </a>
-          </Link>
-        </div>
-        <div></div>
+      <div className={classNames(styles.footer, 'row justify-content-center')}>
+        <FormattedMessage id="footer.powered-by" defaultMessage="powered by" />
+        <Link href="https://umami.is">
+          <a>
+            <Button className={styles.button} icon={<Logo />} size="small">
+              <b>umami</b>
+            </Button>
+          </a>
+        </Link>
       </div>
     </footer>
   );

components/layout/Footer.module.css

@@ -6,16 +6,10 @@
   min-height: 100px;
 }
 
-.footer .center button {
-  margin-left: 10px;
-}
-
 .footer a {
   text-decoration: none;
 }
 
-.center {
-  display: flex;
-  justify-content: center;
-  align-items: center;
+.button {
+  margin-left: 10px;
 }

components/layout/Header.js

@@ -7,6 +7,7 @@ import UserButton from '../common/UserButton';
 import Icon from '../common/Icon';
 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);
@@ -20,19 +21,24 @@ export default function Header() {
             <Link href={user ? '/' : 'https://umami.is'}>umami</Link>
           </div>
         </div>
-        {user && (
-          <div className="col-12 col-md-6">
-            <div className={styles.nav}>
-              <Link href="/dashboard">
-                <FormattedMessage id="header.nav.dashboard" defaultMessage="Dashboard" />
-              </Link>
-              <Link href="/settings">
-                <FormattedMessage id="header.nav.settings" defaultMessage="Settings" />
-              </Link>
-              <UserButton />
-            </div>
+        <div className="col-12 col-md-6">
+          <div className={styles.nav}>
+            {user ? (
+              <>
+                <Link href="/dashboard">
+                  <FormattedMessage id="header.nav.dashboard" defaultMessage="Dashboard" />
+                </Link>
+                <Link href="/settings">
+                  <FormattedMessage id="header.nav.settings" defaultMessage="Settings" />
+                </Link>
+                <LanguageButton menuAlign="right" />
+                <UserButton />
+              </>
+            ) : (
+              <LanguageButton menuAlign="right" />
+            )}
           </div>
-        )}
+        </div>
       </div>
     </header>
   );

components/layout/Layout.js

@@ -13,6 +13,10 @@ export default function Layout({ title, children, header = true, footer = true }
           href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap"
           rel="stylesheet"
         />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap"
+          rel="stylesheet"
+        />
       </Head>
       {header && <Header />}
       <main className="container">{children}</main>