From ff62338359d35bb4d195e7a6220c6df10ae2a102 Mon Sep 17 00:00:00 2001
From: Paul Armstrong <paul@spaceyak.com>
Date: Wed, 3 Feb 2021 16:00:54 -0800
Subject: [PATCH] feat(web): icons and better menu handling for dark mode

---
 web/src/components/AppBar.jsx | 12 ++++++++----
 web/src/components/Menu.jsx   | 12 ++++++++++--
 web/src/icons/AutoAwesome.jsx | 10 ++++++++++
 web/src/icons/DarkMode.jsx    | 10 ++++++++++
 web/src/icons/LightMode.jsx   | 10 ++++++++++
 5 files changed, 48 insertions(+), 6 deletions(-)
 create mode 100644 web/src/icons/AutoAwesome.jsx
 create mode 100644 web/src/icons/DarkMode.jsx
 create mode 100644 web/src/icons/LightMode.jsx

diff --git a/web/src/components/AppBar.jsx b/web/src/components/AppBar.jsx
index f668a7498..0238e3f95 100644
--- a/web/src/components/AppBar.jsx
+++ b/web/src/components/AppBar.jsx
@@ -1,9 +1,12 @@
 import { h } from 'preact';
 import Button from './Button';
 import LinkedLogo from './LinkedLogo';
-import Menu, { MenuItem } from './Menu';
+import Menu, { MenuItem, MenuSeparator } from './Menu';
 import MenuIcon from '../icons/Menu';
 import MoreIcon from '../icons/More';
+import AutoAwesomeIcon from '../icons/AutoAwesome';
+import LightModeIcon from '../icons/LightMode';
+import DarkModeIcon from '../icons/DarkMode';
 import { useDarkMode, useSidebar } from '../context';
 import { useLayoutEffect, useCallback, useRef, useState } from 'preact/hooks';
 
@@ -87,9 +90,10 @@ export default function AppBar({ title }) {
       </div>
       {showMoreMenu ? (
         <Menu onDismiss={handleDismissMoreMenu} relativeTo={moreRef}>
-          <MenuItem label="Auto" value="media" onSelect={handleSelectDarkMode} />
-          <MenuItem label="Light" value="light" onSelect={handleSelectDarkMode} />
-          <MenuItem label="Dark" value="dark" onSelect={handleSelectDarkMode} />
+          <MenuItem icon={AutoAwesomeIcon} label="Auto dark mode" value="media" onSelect={handleSelectDarkMode} />
+          <MenuSeparator />
+          <MenuItem icon={LightModeIcon} label="Light" value="light" onSelect={handleSelectDarkMode} />
+          <MenuItem icon={DarkModeIcon} label="Dark" value="dark" onSelect={handleSelectDarkMode} />
         </Menu>
       ) : null}
     </div>
diff --git a/web/src/components/Menu.jsx b/web/src/components/Menu.jsx
index d7c678c38..831b6c920 100644
--- a/web/src/components/Menu.jsx
+++ b/web/src/components/Menu.jsx
@@ -31,14 +31,22 @@ export function MenuItem({ focus, icon: Icon, label, onSelect, value }) {
 
   return (
     <div
-      className={`flex space-x-2 p-2 pl-4 pr-4 hover:bg-gray-200 dark:hover:bg-gray-800 dark:hover:text-white cursor-pointer ${
+      className={`flex space-x-2 p-2 px-5 hover:bg-gray-200 dark:hover:bg-gray-800 dark:hover:text-white cursor-pointer ${
         focus ? 'bg-gray-200 dark:bg-gray-800 dark:text-white' : ''
       }`}
       onclick={handleClick}
       role="option"
     >
-      {Icon ? <Icon /> : null}
+      {Icon ? (
+        <div className="w-6 h-6 self-center mr-4 text-gray-500">
+          <Icon />
+        </div>
+      ) : null}
       {label}
     </div>
   );
 }
+
+export function MenuSeparator() {
+  return <div className="border-b border-gray-200 my-2" />;
+}
diff --git a/web/src/icons/AutoAwesome.jsx b/web/src/icons/AutoAwesome.jsx
new file mode 100644
index 000000000..2db782fb5
--- /dev/null
+++ b/web/src/icons/AutoAwesome.jsx
@@ -0,0 +1,10 @@
+import { h } from 'preact';
+
+export default function ArrowDropdown() {
+  return (
+    <svg className="fill-current" viewBox="0 0 24 24">
+      <path d="M0 0h24v24H0z" fill="none" />
+      <path d="M19 9l1.25-2.75L23 5l-2.75-1.25L19 1l-1.25 2.75L15 5l2.75 1.25L19 9zm-7.5.5L9 4 6.5 9.5 1 12l5.5 2.5L9 20l2.5-5.5L17 12l-5.5-2.5zM19 15l-1.25 2.75L15 19l2.75 1.25L19 23l1.25-2.75L23 19l-2.75-1.25L19 15z" />
+    </svg>
+  );
+}
diff --git a/web/src/icons/DarkMode.jsx b/web/src/icons/DarkMode.jsx
new file mode 100644
index 000000000..d85691a3a
--- /dev/null
+++ b/web/src/icons/DarkMode.jsx
@@ -0,0 +1,10 @@
+import { h } from 'preact';
+
+export default function DarkMode() {
+  return (
+    <svg className=" fill-current" viewBox="0 0 24 24">
+      <rect fill="none" height="24" width="24" />
+      <path d="M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36c-0.98,1.37-2.58,2.26-4.4,2.26 c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z" />
+    </svg>
+  );
+}
diff --git a/web/src/icons/LightMode.jsx b/web/src/icons/LightMode.jsx
new file mode 100644
index 000000000..73b07ae44
--- /dev/null
+++ b/web/src/icons/LightMode.jsx
@@ -0,0 +1,10 @@
+import { h } from 'preact';
+
+export default function ArrowDropdown() {
+  return (
+    <svg className="fill-current" viewBox="0 0 24 24">
+      <rect fill="none" height="24" width="24" />
+      <path d="M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0 c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2 c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1 C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06 c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41 l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41 c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36 c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z" />
+    </svg>
+  );
+}