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>
-            <Button className={styles.button} icon={<Logo />} size="small">
-              <b>umami</b>
-            </Button>
-          </a>
-        </Link>
+        <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>
+        <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,29 +15,27 @@ 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}>
-            {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 />
-              </>
-            ) : (
+        <div className="col-12 col-md-9">
+          {user ? (
+            <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>
               <LanguageButton menuAlign="right" />
-            )}
-          </div>
+              <UserButton />
+            </div>
+          ) : (
+            <LanguageButton menuAlign="right" />
+          )}
         </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,
     },
   ];