Update header components. Update theme button.

assets/toggle-off.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M384 96c42.738 0 82.917 16.643 113.137 46.863S544 213.262 544 256s-16.643 82.917-46.863 113.137S426.738 416 384 416H192c-42.738 0-82.917-16.643-113.137-46.863S32 298.738 32 256s16.643-82.917 46.863-113.137S149.262 96 192 96h192m0-32H192C85.961 64 0 149.961 0 256s85.961 192 192 192h192c106.039 0 192-85.961 192-192S490.039 64 384 64zm-192 96c52.935 0 96 43.065 96 96s-43.065 96-96 96-96-43.065-96-96 43.065-96 96-96m0-32c-70.692 0-128 57.307-128 128s57.308 128 128 128 128-57.307 128-128-57.308-128-128-128z"/></svg>

assets/toggle-on.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M384 96c88.426 0 160 71.561 160 160 0 88.426-71.561 160-160 160H192c-88.426 0-160-71.561-160-160 0-88.425 71.561-160 160-160h192m0-32H192C85.961 64 0 149.961 0 256s85.961 192 192 192h192c106.039 0 192-85.961 192-192S490.039 64 384 64zm0 304c61.856 0 112-50.144 112-112s-50.144-112-112-112-112 50.144-112 112c0 28.404 10.574 54.339 27.999 74.082C320.522 353.335 350.548 368 384 368z"/></svg>

components/common/Button.module.css

@@ -57,7 +57,7 @@
 }
 
 .light {
-  background: var(--gray50);
+  background: transparent;
 }
 
 .light:hover {

components/common/UserButton.js

@@ -4,6 +4,7 @@ import { useSelector } from 'react-redux';
 import { useRouter } from 'next/router';
 import Menu from './Menu';
 import Icon from './Icon';
+import Button from './Button';
 import useDocumentClick from 'hooks/useDocumentClick';
 import User from 'assets/user.svg';
 import Chevron from 'assets/chevron-down.svg';
@@ -49,10 +50,15 @@ export default function UserButton() {
 
   return (
     <div ref={ref} className={styles.container}>
-      <div className={styles.button} onClick={() => setShowMenu(state => !state)}>
-        <Icon icon={<User />} size="large" />
+      <Button
+        icon={<User />}
+        className={styles.button}
+        onClick={() => setShowMenu(state => !state)}
+        size="large"
+        variant="light"
+      >
         <Icon icon={<Chevron />} size="small" />
-      </div>
+      </Button>
       {showMenu && (
         <Menu
           className={styles.menu}

components/layout/Header.js

@@ -16,32 +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" />
-                <ThemeButton />
-                <UserButton />
-              </>
-            ) : (
-              <>
-                <LanguageButton menuAlign="right" />
-                <ThemeButton />
-              </>
-            )}
+        <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}>
+            <LanguageButton menuAlign="right" />
+            <ThemeButton />
+            {user && <UserButton />}
           </div>
         </div>
       </div>

components/layout/Header.module.css

@@ -13,18 +13,37 @@
 
 .nav {
   display: flex;
-  justify-content: flex-end;
+  justify-content: center;
   align-items: center;
   font-size: var(--font-size-normal);
   font-weight: 600;
 }
 
 .nav > * {
-  margin-left: 40px;
+  margin-left: 30px;
 }
 
-@media only screen and (max-width: 768px) {
+.nav > *:first-child {
+  margin: 0;
+}
+
+.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;
+  }
 }

components/settings/LanguageButton.js

@@ -46,8 +46,8 @@ export default function LanguageButton({ menuPosition = 'bottom', menuAlign = 'l
         )}
       </Head>
       <div ref={ref} className={styles.container}>
-        <Button icon={<Globe />} onClick={toggleMenu} size="small">
-          <div>{selectedLocale}</div>
+        <Button icon={<Globe />} onClick={toggleMenu} variant="light">
+          <div className={styles.text}>{selectedLocale}</div>
         </Button>
         {showMenu && (
           <Menu

components/settings/LanguageButton.module.css

@@ -7,3 +7,7 @@
 .menu {
   z-index: 100;
 }
+
+.text {
+  font-size: var(--font-size-small);
+}

components/settings/ThemeButton.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import Button from 'components/common/Button';
 import useTheme from 'hooks/useTheme';
+import ToggleOn from 'assets/toggle-on.svg';
+import ToggleOff from 'assets/toggle-off.svg';
 
 export default function ThemeButton() {
   const [theme, setTheme] = useTheme();
@@ -9,5 +11,12 @@ export default function ThemeButton() {
     setTheme(theme === 'light' ? 'dark' : 'light');
   }
 
-  return <Button onClick={handleClick}>{theme}</Button>;
+  return (
+    <Button
+      icon={theme === 'light' ? <ToggleOff /> : <ToggleOn />}
+      size="large"
+      variant="light"
+      onClick={handleClick}
+    />
+  );
 }

components/settings/ThemeButton.module.css

@@ -0,0 +1,43 @@
+.icon {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  line-height: 16px;
+}
+
+.sun {
+  height: 16px;
+  width: 16px;
+  border-radius: 100%;
+  background: var(--gray900);
+  z-index: 1;
+}
+
+.moon {
+  height: 16px;
+  width: 16px;
+  border-radius: 100%;
+  background: var(--gray900);
+}
+
+.moon:before {
+  content: '';
+  position: absolute;
+  height: 13px;
+  width: 13px;
+  left: -2px;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  border-radius: 100%;
+  background: var(--gray50);
+}
+
+.light .moon {
+  display: none;
+}
+
+.dark .sun {
+  display: none;
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "umami",
-  "version": "0.43.0",
+  "version": "0.44.0",
   "description": "A simple, fast, website analytics alternative to Google Analytics. ",
   "author": "Mike Cao <mike@mikecao.com>",
   "license": "MIT",