Added version to footer. CSS and locale fixes.

components/common/LanguageButton.js

@@ -32,6 +32,7 @@ export default function LanguageButton({ menuPosition = 'bottom', menuAlign = 'l
       </Button>
       {showMenu && (
         <Menu
+          className={styles.menu}
           options={menuOptions}
           onSelect={handleSelect}
           float={menuPosition}

components/common/LanguageButton.module.css

@@ -3,3 +3,7 @@
   position: relative;
   cursor: pointer;
 }
+
+.menu {
+  z-index: 100;
+}

components/common/UserButton.js

@@ -46,7 +46,7 @@ export default function UserButton() {
 
   return (
     <div ref={ref} className={styles.container}>
-      <div onClick={() => setShowMenu(state => !state)}>
+      <div className={styles.button} onClick={() => setShowMenu(state => !state)}>
         <Icon icon={<User />} size="large" />
         <Icon icon={<Chevron />} size="small" />
       </div>

components/common/UserButton.module.css

@@ -4,6 +4,11 @@
   cursor: pointer;
 }
 
+.button {
+  display: flex;
+  flex-wrap: nowrap;
+}
+
 .username {
   border-bottom: 1px solid var(--gray500);
 }

components/layout/Footer.js

@@ -1,23 +1,22 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
-import Link from 'next/link';
 import classNames from 'classnames';
 import Button from 'components/common/Button';
 import Logo from 'assets/logo.svg';
 import styles from './Footer.module.css';
 
 export default function Footer() {
+  const version = process.env.VERSION;
   return (
     <footer className="container">
       <div className={classNames(styles.footer, 'row justify-content-center')}>
-        <FormattedMessage id="footer.powered-by" defaultMessage="powered by" />
-        <Link href="https://umami.is">
-          <a>
+        <FormattedMessage id="footer.powered-by" defaultMessage="Powered by" />
+        <a href="https://umami.is">
           <Button className={styles.button} icon={<Logo />} size="small">
             <b>umami</b>
           </Button>
         </a>
-        </Link>
+        <div>{`v${version}`}</div>
       </div>
     </footer>
   );

components/layout/Footer.module.css

@@ -11,5 +11,5 @@
 }
 
 .button {
-  margin-left: 10px;
+  margin: 0 5px;
 }

components/layout/Header.js

@@ -15,16 +15,15 @@ export default function Header() {
   return (
     <header className="container">
       <div className={classNames(styles.header, 'row align-items-center')}>
-        <div className="col-12 col-md-6">
+        <div className="col-12 col-md-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-6">
-          <div className={styles.nav}>
+        <div className="col-12 col-md-9">
           {user ? (
-              <>
+            <div className={styles.nav}>
               <Link href="/dashboard">
                 <FormattedMessage id="header.nav.dashboard" defaultMessage="Dashboard" />
               </Link>
@@ -33,13 +32,12 @@ export default function Header() {
               </Link>
               <LanguageButton menuAlign="right" />
               <UserButton />
-              </>
+            </div>
           ) : (
             <LanguageButton menuAlign="right" />
           )}
         </div>
       </div>
-      </div>
     </header>
   );
 }

components/layout/Header.module.css

@@ -12,15 +12,14 @@
 }
 
 .nav {
-  list-style: none;
   display: flex;
   justify-content: flex-end;
   align-items: center;
+  font-size: var(--font-size-normal);
+  font-weight: 600;
 }
 
 .nav > * {
-  font-size: var(--font-size-normal);
-  font-weight: 600;
   margin-left: 40px;
 }
 
@@ -28,9 +27,4 @@
   .title {
     text-align: center;
   }
-
-  .nav {
-    display: flex;
-    justify-content: space-evenly;
-  }
 }

components/settings/WebsiteSettings.js

@@ -67,16 +67,16 @@ export default function WebsiteSettings() {
     {
       key: 'name',
       label: <FormattedMessage id="label.name" defaultMessage="Name" />,
-      className: 'col-6 col-md-4',
+      className: 'col-6 col-xl-4',
     },
     {
       key: 'domain',
       label: <FormattedMessage id="label.domain" defaultMessage="Domain" />,
-      className: 'col-6 col-md-4',
+      className: 'col-6 col-xl-4',
     },
     {
       key: 'action',
-      className: classNames(styles.buttons, 'col-12 col-md-4 pt-2 pt-md-0'),
+      className: classNames(styles.buttons, 'col-12 col-xl-4 pt-2 pt-xl-0'),
       render: Buttons,
     },
   ];

lang/de-DE.json

@@ -39,7 +39,7 @@
     "defaultMessage": "Details anzeigen"
   },
   "footer.powered-by": {
-      "defaultMessage": "powered by"
+    "defaultMessage": "Powered by"
   },
   "header.nav.dashboard": {
     "defaultMessage": "Übersicht"

lang/en.json

@@ -39,7 +39,7 @@
     "defaultMessage": "View details"
   },
   "footer.powered-by": {
-    "defaultMessage": "powered by"
+    "defaultMessage": "Powered by"
   },
   "header.nav.dashboard": {
     "defaultMessage": "Dashboard"

lib/lang.js

@@ -1,11 +1,11 @@
+import { format } from 'date-fns';
+import { enUS, nl, zhCN, tr, ru, de } from 'date-fns/locale';
 import enMessages from 'lang-compiled/en.json';
 import nlMessages from 'lang-compiled/nl-NL.json';
 import zhCNMessages from 'lang-compiled/zh-CN.json';
 import trTRMessages from 'lang-compiled/tr-TR.json';
 import ruRUMessages from 'lang-compiled/ru-RU.json';
 import deDEMessages from 'lang-compiled/de-DE.json';
-import { format } from 'date-fns';
-import { enUS, nl, zhCN , tr, ru, de} from 'date-fns/locale';
 
 export const messages = {
   en: enMessages,
@@ -27,10 +27,10 @@ export const dateLocales = {
 
 export const menuOptions = [
   { label: 'English', value: 'en', display: 'EN' },
-  { label: 'Nederlands', value: 'nl-NL', display: 'NL' },
   { label: '中文 (Chinese Simplified)', value: 'zh-CN', display: '中文' },
-  { label: 'Deutsch' , value:"de-DE", display: 'DE'},
-  { label: 'Русский', value: 'ru-RU', display: 'РУ' },
+  { label: 'Deutsch (German)', value: 'de-DE', display: 'DE' },
+  { label: 'Nederlands (Dutch)', value: 'nl-NL', display: 'NL' },
+  { label: 'Русский (Russian)', value: 'ru-RU', display: 'РУ' },
   { label: 'Turkish', value: 'tr-TR', display: 'TR' },
 ];
 

next.config.js

@@ -1,6 +1,10 @@
 require('dotenv').config();
+const pkg = require('./package.json');
 
 module.exports = {
+  env: {
+    VERSION: pkg.version,
+  },
   webpack(config) {
     config.module.rules.push({
       test: /\.svg$/,

package.json

@@ -33,6 +33,9 @@
     "**/*.css": [
       "stylelint --fix",
       "prettier --write"
+    ],
+    "**/*.json": [
+      "prettier --write"
     ]
   },
   "husky": {