Clean up menus based on latest design

Mostly removing separators, improving shadows, tweaking font.

First pass at these updates:

https://www.figma.com/file/ILgs6aXrPfukXOMf5Yibra/Omnivore---Deliverables?node-id=3386%3A82865

packages/web/components/elements/Button.tsx

@@ -181,14 +181,20 @@ export const Button = styled('button', {
       },
       themeSwitch: {
         p: '0px',
-        m: '4px',
+        m: '0px',
         ml: '0px',
-        width: '24px',
-        height: '24px',
+        width: '68px',
+        height: '52px',
         fontSize: '14px',
-        borderRadius: '4px',
-        border: '1px solid rgb(243, 243, 243)',
-        '&:hover': { transform: 'scale(1.2)' }
+        border: 'unset',
+        borderRadius: '6px',
+        '&:hover': {
+          transform: 'scale(1.1)',
+          border: '2px solid #F9D354',
+        },
+        '&[data-state="selected"]': {
+          border: '2px solid #F9D354',
+        }
       },
     },
   },

packages/web/components/elements/DropdownElements.tsx

@@ -13,8 +13,10 @@ import { CSS } from '@stitches/react';
 import { styled } from './../tokens/stitches.config'
 
 const itemStyles = {
-  fontSize: 13,
-  padding: '$2',
+  fontSize: '16px',
+  fontWeight: 'semibold',
+  py: '12px',
+  px: '24px',
   borderRadius: 3,
   cursor: 'default',
   color: '$grayText',
@@ -46,11 +48,11 @@ const StyledTriggerItem = styled(TriggerItem, {
 })
 
 export const DropdownContent = styled(Content, {
-  minWidth: 130,
+  width: 195,
   backgroundColor: '$grayBg',
-  borderRadius: '0.5em',
-  padding: 5,
-  outline: '1px solid $grayBorder',
+  borderRadius: '6px',
+  outline: '1px solid #323232',
+  border: '1px solid $grayBorder',
   boxShadow: '$cardBoxShadow',
 })
 
@@ -101,7 +103,6 @@ export function DropdownOption(props: DropdownOptionProps): JSX.Element {
       <StyledItem onSelect={props.onSelect}>
         {props.title ?? props.children}
       </StyledItem>
-      {props.hideSeparator ? null : <DropdownSeparator />}
     </>
   )
 }

packages/web/components/elements/StyledText.tsx

@@ -131,12 +131,14 @@ const textVariants = {
       fontSize: '14px',
     },
     menuTitle: {
-      fontSize: 13,
       pt: '0px',
       m: '0px',
-      borderRadius: 3,
       cursor: 'default',
-      color: '$grayText'
+      color: '$grayText',
+      fontSize: 16,
+      fontFamily: 'inter',
+      fontWeight: '500',
+      lineHeight: 'unset',
     },
     error: {
       color: '$error',

packages/web/components/patterns/DropdownMenu.tsx

@@ -8,6 +8,7 @@ import {
 import { StyledText } from '../elements/StyledText'
 import { Button } from '../elements/Button'
 import { currentThemeName } from '../../lib/themeUpdater'
+import { Check } from 'phosphor-react'
 
 export type HeaderDropdownAction =
   | 'apply-darker-theme'
@@ -39,32 +40,37 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
 
   return (
     <Dropdown triggerElement={props.triggerElement}>
-      <VStack css={{ p: '$2' }}>
+      <VStack css={{ py: '12px', px: '24px' }}>
         <StyledText style="menuTitle">Theme</StyledText>
-        <HStack css={{ mt: '6px', mb: '6px', width: '100%', gap: '8px' }}>
+        <HStack css={{ py: '8px', width: '100%', gap: '8px' }}>
           <Button
             style="themeSwitch"
-            css={{ background: '#FFFFFF', width: '50%' }}
+            css={{ background: '#FFFFFF' }}
+            data-state={isDark ? 'unselected' : 'selected' }
             onClick={() => {
               props.actionHandler('apply-lighter-theme')
               setCurrentTheme(currentThemeName())
             }}
           >
-            {isDark ? '' : '✓'}
+            {!isDark && (
+              <Check color='#F9D354' size={32} />
+            )}
           </Button>
           <Button
             style="themeSwitch"
-            css={{ background: '#3D3D3D', width: '50%' }}
+            css={{ background: '#3D3D3D' }}
+            data-state={isDark ? 'selected' : 'unselected' }
             onClick={() => {
               props.actionHandler('apply-dark-theme')
               setCurrentTheme(currentThemeName())
             }}
           >
-            {isDark ? '✓' : ''}
+            {isDark && (
+              <Check color='#F9D354' size={32} />
+            )}
           </Button>
         </HStack>
       </VStack>
-      <DropdownSeparator />
       <DropdownOption
         onSelect={() => props.actionHandler('navigate-to-install')}
         title="Install"
@@ -77,10 +83,6 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
         onSelect={() => props.actionHandler('navigate-to-labels')}
         title="Labels"
       />
-      <DropdownOption
-        onSelect={() => props.actionHandler('navigate-to-api')}
-        title="API Keys"
-      />
       {/* <DropdownOption
         onSelect={() => props.actionHandler('navigate-to-subscriptions')}
         title="Subscriptions"
@@ -92,7 +94,6 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
       <DropdownOption
         onSelect={() => props.actionHandler('logout')}
         title="Logout"
-        hideSeparator
       />
     </Dropdown>
   )

packages/web/components/tokens/stitches.config.ts

@@ -102,7 +102,7 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
       borderStyles: {},
       shadows: {
         panelShadow: '0px 4px 18px rgba(120, 123, 134, 0.12)',
-        cardBoxShadow: '0px 0px 4px 0px rgba(0, 0, 0, 0.1)',
+        cardBoxShadow: '0px 16px 25px 16px rgba(32, 31, 29, 0.1)',
       },
       zIndices: {},
       transitions: {},
@@ -172,7 +172,6 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
 
 const darkThemeSpec = {
   colors: {
-    // Grayscale (top ones have been updated from new designs)
     grayBase: '#252525',
     grayBg: '#3B3938',
     grayBgActive: '#4f4d4c',
@@ -213,7 +212,7 @@ const darkThemeSpec = {
   },
   shadows: {
     cardBoxShadow:
-      '0px 0px 9px -2px rgba(255, 255, 255, 0.09), 0px 7px 12px rgba(255, 255, 255, 0.07)',
+      '0px 0px 9px -2px rgba(5, 5, 5, 0.16), 0px 7px 12px rgba(0, 0, 0, 0.13)',
   },
 }