From 58ea2b77a1253e23a236da60e2333804c2c13ca3 Mon Sep 17 00:00:00 2001
From: Hunter Miller <hunter@tlon.io>
Date: Thu, 16 Sep 2021 17:05:29 -0500
Subject: [PATCH] nav: better close behavior and small tweaks

---
 pkg/grid/src/nav/Leap.tsx              |  4 ++--
 pkg/grid/src/nav/Nav.tsx               |  2 ++
 pkg/grid/src/nav/NotificationsLink.tsx | 26 +++++++++++++++++++----
 pkg/grid/src/nav/SystemMenu.tsx        | 29 +++++++++++++++++++-------
 pkg/grid/src/nav/search/Home.tsx       |  4 ++--
 pkg/grid/src/styles/components.css     |  2 +-
 6 files changed, 50 insertions(+), 17 deletions(-)

diff --git a/pkg/grid/src/nav/Leap.tsx b/pkg/grid/src/nav/Leap.tsx
index 25c4882a1..1bccbaa65 100644
--- a/pkg/grid/src/nav/Leap.tsx
+++ b/pkg/grid/src/nav/Leap.tsx
@@ -236,7 +236,7 @@ export const Leap = React.forwardRef(
             type="text"
             ref={inputRef}
             placeholder={selection ? '' : 'Search Landscape'}
-            className="flex-1 w-full h-full px-2 h4 rounded-full bg-transparent outline-none"
+            className="flex-1 w-full h-full px-2 h4 text-base rounded-full bg-transparent outline-none"
             value={rawInput}
             onClick={toggleSearch}
             onFocus={onFocus}
@@ -247,7 +247,7 @@ export const Leap = React.forwardRef(
             aria-activedescendant={selectedMatch?.display || selectedMatch?.value}
           />
         </form>
-        {navOpen && (
+        {menu === 'search' && (
           <Link
             to="/"
             className="absolute top-1/2 right-2 flex-none circle-button w-8 h-8 text-gray-400 bg-gray-50 default-ring -translate-y-1/2"
diff --git a/pkg/grid/src/nav/Nav.tsx b/pkg/grid/src/nav/Nav.tsx
index e50bfac40..75ede6fb1 100644
--- a/pkg/grid/src/nav/Nav.tsx
+++ b/pkg/grid/src/nav/Nav.tsx
@@ -114,11 +114,13 @@ export const Nav: FunctionComponent<NavProps> = ({ menu }) => {
       >
         <SystemMenu
           open={!!systemMenuOpen}
+          subMenuOpen={menu === 'system-preferences' || menu === 'help-and-support'}
           shouldDim={isOpen && menu !== 'system-preferences' && menu !== 'help-and-support'}
           className={classNames('relative z-50 flex-none', eitherOpen ? 'bg-white' : 'bg-gray-50')}
         />
         <NotificationsLink
           navOpen={isOpen}
+          notificationsOpen={menu === 'notifications'}
           shouldDim={(isOpen && menu !== 'notifications') || !!systemMenuOpen}
         />
         <Leap
diff --git a/pkg/grid/src/nav/NotificationsLink.tsx b/pkg/grid/src/nav/NotificationsLink.tsx
index 4d0cd1d12..7efd0c64d 100644
--- a/pkg/grid/src/nav/NotificationsLink.tsx
+++ b/pkg/grid/src/nav/NotificationsLink.tsx
@@ -2,15 +2,21 @@ import classNames from 'classnames';
 import React from 'react';
 import { Link, LinkProps } from 'react-router-dom';
 import { Bullet } from '../components/icons/Bullet';
+import { Cross } from '../components/icons/Cross';
 import { Notification } from '../state/hark-types';
 import { useNotifications } from '../state/notifications';
 
-type NotificationsState = 'empty' | 'unread' | 'attention-needed';
+type NotificationsState = 'empty' | 'unread' | 'attention-needed' | 'open';
 
 function getNotificationsState(
+  notificationsOpen: boolean,
   notifications: Notification[],
   systemNotifications: Notification[]
 ): NotificationsState {
+  if (notificationsOpen) {
+    return 'open';
+  }
+
   if (systemNotifications.length > 0) {
     return 'attention-needed';
   }
@@ -25,20 +31,26 @@ function getNotificationsState(
 
 type NotificationsLinkProps = Omit<LinkProps<HTMLAnchorElement>, 'to'> & {
   navOpen: boolean;
+  notificationsOpen: boolean;
   shouldDim: boolean;
 };
 
-export const NotificationsLink = ({ navOpen, shouldDim }: NotificationsLinkProps) => {
+export const NotificationsLink = ({
+  navOpen,
+  notificationsOpen,
+  shouldDim
+}: NotificationsLinkProps) => {
   const { notifications, systemNotifications } = useNotifications();
-  const state = getNotificationsState(notifications, systemNotifications);
+  const state = getNotificationsState(notificationsOpen, notifications, systemNotifications);
 
   return (
     <Link
-      to="/leap/notifications"
+      to={state === 'open' ? '/' : '/leap/notifications'}
       className={classNames(
         'relative z-50 flex-none circle-button h4 default-ring',
         navOpen && 'text-opacity-60',
         shouldDim && 'opacity-60',
+        state === 'open' && 'text-gray-400 bg-white',
         state === 'empty' && !navOpen && 'text-gray-400 bg-gray-50',
         state === 'empty' && navOpen && 'text-gray-400 bg-white',
         state === 'unread' && 'bg-blue-400 text-white',
@@ -52,6 +64,12 @@ export const NotificationsLink = ({ navOpen, shouldDim }: NotificationsLinkProps
           ! <span className="sr-only">Attention needed</span>
         </span>
       )}
+      {state === 'open' && (
+        <>
+          <Cross className="w-3 h-3 fill-current" />
+          <span className="sr-only">Close</span>
+        </>
+      )}
     </Link>
   );
 };
diff --git a/pkg/grid/src/nav/SystemMenu.tsx b/pkg/grid/src/nav/SystemMenu.tsx
index 8397f7755..990ed915a 100644
--- a/pkg/grid/src/nav/SystemMenu.tsx
+++ b/pkg/grid/src/nav/SystemMenu.tsx
@@ -8,9 +8,11 @@ import { Adjust } from '../components/icons/Adjust';
 import { useVat } from '../state/kiln';
 import { disableDefault, handleDropdownLink } from '../state/util';
 import { useMedia } from '../logic/useMedia';
+import { Cross } from '../components/icons/Cross';
 
 type SystemMenuProps = HTMLAttributes<HTMLButtonElement> & {
   open: boolean;
+  subMenuOpen: boolean;
   shouldDim: boolean;
 };
 
@@ -19,7 +21,7 @@ function getHash(vat: Vat): string {
   return parts[parts.length - 1];
 }
 
-export const SystemMenu = ({ className, open, shouldDim }: SystemMenuProps) => {
+export const SystemMenu = ({ className, open, subMenuOpen, shouldDim }: SystemMenuProps) => {
   const { push } = useHistory();
   const [copied, setCopied] = useState(false);
   const garden = useVat('garden');
@@ -53,19 +55,30 @@ export const SystemMenu = ({ className, open, shouldDim }: SystemMenuProps) => {
           open={open}
           onOpenChange={(isOpen) => setTimeout(() => !isOpen && push('/'), 15)}
         >
-          <DropdownMenu.Trigger
-            as={Link}
-            to="/system-menu"
+          <Link
+            to={open || subMenuOpen ? '/' : '/system-menu'}
             className={classNames(
-              'appearance-none circle-button default-ring',
+              'relative appearance-none circle-button default-ring',
               open && 'text-gray-300',
               shouldDim && 'opacity-60',
               className
             )}
           >
-            <Adjust className="w-6 h-6 fill-current text-gray" />
-            <span className="sr-only">System Menu</span>
-          </DropdownMenu.Trigger>
+            {!open && !subMenuOpen && (
+              <>
+                <Adjust className="w-6 h-6 fill-current text-gray" />
+                <span className="sr-only">System Menu</span>
+              </>
+            )}
+            {(open || subMenuOpen) && (
+              <>
+                <Cross className="w-3 h-3 fill-current" />
+                <span className="sr-only">Close</span>
+              </>
+            )}
+            {/* trigger here just for anchoring the dropdown */}
+            <DropdownMenu.Trigger className="sr-only top-0 left-0 sm:top-auto sm:left-auto sm:bottom-0" />
+          </Link>
           <Route path="/system-menu">
             <DropdownMenu.Content
               onCloseAutoFocus={disableDefault}
diff --git a/pkg/grid/src/nav/search/Home.tsx b/pkg/grid/src/nav/search/Home.tsx
index 70ef3b22a..47df164ea 100644
--- a/pkg/grid/src/nav/search/Home.tsx
+++ b/pkg/grid/src/nav/search/Home.tsx
@@ -97,7 +97,7 @@ export const Home = () => {
         Recent Apps
       </h2>
       {recentApps.length === 0 && (
-        <div className="min-h-[150px] p-6 rounded-xl bg-gray-100">
+        <div className="min-h-[150px] p-6 rounded-xl bg-gray-50">
           <p className="mb-4">Apps you use will be listed here, in the order you used them.</p>
           <p className="mb-6">You can click/tap/keyboard on a listed app to open it.</p>
           {groups && (
@@ -122,7 +122,7 @@ export const Home = () => {
         Recent Developers
       </h2>
       {recentDevs.length === 0 && (
-        <div className="min-h-[150px] p-6 rounded-xl bg-gray-100">
+        <div className="min-h-[150px] p-6 rounded-xl bg-gray-50">
           <p className="mb-4">Urbit app developers you search for will be listed here.</p>
           {zod && (
             <>
diff --git a/pkg/grid/src/styles/components.css b/pkg/grid/src/styles/components.css
index 53335b024..ff8690e1e 100644
--- a/pkg/grid/src/styles/components.css
+++ b/pkg/grid/src/styles/components.css
@@ -27,7 +27,7 @@
 }
 
 .input {
-  @apply px-4 py-2 w-full bg-white rounded-xl;
+  @apply px-4 py-2 w-full text-base sm:text-sm bg-white rounded-xl;
 }
 
 .notification {