Merge pull request #938 from omnivore-app/fix/menu-and-modal-design

Clean up menus based on latest design

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',
+        width: '68px',
-        height: '24px',
+        height: '52px',
         fontSize: '14px',
-        borderRadius: '4px',
+        border: 'unset',
-        border: '1px solid rgb(243, 243, 243)',
+        borderRadius: '6px',
-        '&:hover': { transform: 'scale(1.2)' }
+        '&: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,
+  fontSize: '16px',
-  padding: '$2',
+  fontWeight: 'semibold',
+  py: '12px',
+  px: '24px',
   borderRadius: 3,
   cursor: 'default',
   color: '$grayText',
@@ -46,16 +48,61 @@ const StyledTriggerItem = styled(TriggerItem, {
 })
 
 export const DropdownContent = styled(Content, {
-  minWidth: 130,
+  width: 195,
   backgroundColor: '$grayBg',
-  borderRadius: '0.5em',
+  borderRadius: '6px',
-  padding: 5,
+  outline: '1px solid #323232',
-  outline: '1px solid $grayBorder',
+  border: '1px solid $grayBorder',
   boxShadow: '$cardBoxShadow',
+  '--arrow-visibility': '',
+  '&[data-side="top"]': {
+    '--arrow-visibility': 'collapse',
+  },
+  '&[data-side="bottom"]': {
+    '--arrow-top': -13,
+  },
+  '&[data-align="start"]': {
+    '--arrow-before-left': '9px',
+    '--arrow-before-right': 'auto',
+    '--arrow-after-left': '10px',
+    '--arrow-after-right': 'auto',
+  },
+  '&[data-align="center"]': {
+    '--arrow-before-left': 'auto',
+    '--arrow-before-right': '90px',
+    '--arrow-after-left': 'auto',
+    '--arrow-after-right': '91px',
+  },
+  '&[data-align="end"]': {
+    '--arrow-before-left': 'auto',
+    '--arrow-before-right': '9px',
+    '--arrow-after-left': 'auto',
+    '--arrow-after-right': '10px',
+  },
+  '&:before': {
+    top: 'calc(var(--arrow-top) * 1px - 2px)',
+    left: 'var(--arrow-before-left)',
+    right: 'var(--arrow-before-right)',
+    border: '8px solid transparent',
+    borderBottomColor: '$grayBorder',
+  },
+  '&:after': {
+    top: 'calc(var(--arrow-top) * 1px)',
+    left: 'var(--arrow-after-left)',
+    right: 'var(--arrow-after-right)',
+    border: '7px solid transparent',
+    borderBottomColor: '$grayBg',
+  },
+  '&:before, &:after': {
+    visibility: 'var(--arrow-visibility)',
+    position: 'absolute',
+    display: 'inline-block',
+    content: '',
+  },
 })
 
 const StyledArrow = styled(Arrow, {
-  fill: '$grayBg',
+  visibility: 'hidden',
 })
 
 const StyledLabel = styled(Label, {
@@ -70,7 +117,6 @@ export type DropdownSide = 'top' | 'right' | 'bottom' | 'left'
 
 type DropdownProps = {
   labelText?: string
-  showArrow?: boolean
   triggerElement: React.ReactNode
   children: React.ReactNode
   styledArrow?: boolean
@@ -101,7 +147,6 @@ export function DropdownOption(props: DropdownOptionProps): JSX.Element {
       <StyledItem onSelect={props.onSelect}>
         {props.title ?? props.children}
       </StyledItem>
-      {props.hideSeparator ? null : <DropdownSeparator />}
     </>
   )
 }
@@ -112,7 +157,6 @@ export function Dropdown(props: DropdownProps & PopperContentProps): JSX.Element
     align,
     triggerElement,
     labelText,
-    showArrow = true,
     disabled = false,
     side = 'bottom',
     sideOffset = 0,
@@ -136,7 +180,7 @@ export function Dropdown(props: DropdownProps & PopperContentProps): JSX.Element
       >
         {labelText && <StyledLabel>{labelText}</StyledLabel>}
         {children}
-        {showArrow && <StyledArrow offset={20} width={20} height={10} />}
+        <StyledArrow />
       </DropdownContent>
     </Root>
   )

packages/web/components/elements/ExtensionsInstallHelp.tsx

@@ -204,7 +204,6 @@ export default function ExtensionsInstallHelp({
         }}
       >
         <Dropdown
-          showArrow={false}
           triggerElement={
             <HStack
               css={{

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/templates/article/ArticleActionsMenu.tsx

@@ -42,7 +42,6 @@ type ActionDropdownProps = {
 
 const ActionDropdown = (props: ActionDropdownProps): JSX.Element => {
   return <Dropdown
-    showArrow={true}
     css={{ m: '0px', p: '0px', overflow: 'hidden', width: '265px', maxWidth: '265px', '@smDown': { width: '230px' } }}
     side={props.layout == 'side' ? 'right' : 'bottom'}
     sideOffset={props.layout == 'side' ? 8 : 0}

packages/web/components/templates/homeFeed/LibrarySearchBar.tsx

@@ -171,27 +171,22 @@ export function DropdownFilterMenu(
       <DropdownOption
         onSelect={() => props.onFilterChange('in:archive')}
         title="Archived"
-        hideSeparator
       />
       <DropdownOption
         onSelect={() => props.onFilterChange('type:file')}
         title="Files"
-        hideSeparator
       />
       <DropdownOption
         onSelect={() => props.onFilterChange('type:highlights')}
         title="Highlights"
-        hideSeparator
       />
       <DropdownOption
         onSelect={() => props.onFilterChange(`saved:${recentlySavedStartDate}`)}
         title="Recently Saved"
-        hideSeparator
       />
       <DropdownOption
         onSelect={() => props.onFilterChange(`sort:read`)}
         title="Recently Read"
-        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: {},
@@ -111,7 +111,7 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
         grayBase: '#F8F8F8',
         grayBg: '#FFFFFF',
         grayBgActive: '#e6e6e6',
-        grayBorder: 'rgba(0, 0, 0, 0.06)',
+        grayBorder: '#F0F0F0',
         grayTextContrast: '#3A3939',
         graySolid: '#9C9B9A',
 
@@ -172,12 +172,11 @@ 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',
     grayTextContrast: '#D8D7D7',
-    grayBorder: 'rgba(255, 255, 255, 0.06)',
+    grayBorder: '#323232',
     graySolid: '#9C9B9A',
 
     grayBgSubtle: 'hsl(0 0% 9.8%)',
@@ -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)',
   },
 }