Benature/omnivore
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Clean up menus based on latest design
This commit is contained in:
Jackson Harper
2022-07-09 16:50:39 -07:00
committed by GitHub
parent 4fe81eaf92 56245619cf
commit 0f1c2f0656
8 changed files with 89 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
packages/web/components/elements/Button.tsx
View File

@ -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',
}
},
},
},

66
packages/web/components/elements/DropdownElements.tsx
View File

@ -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,16 +48,61 @@ 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',
'--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>
)

1
packages/web/components/elements/ExtensionsInstallHelp.tsx
View File

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

8
packages/web/components/elements/StyledText.tsx
View File

@ -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',

25
packages/web/components/patterns/DropdownMenu.tsx
View File

@ -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>
)

1
packages/web/components/templates/article/ArticleActionsMenu.tsx
View File

@ -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}

5
packages/web/components/templates/homeFeed/LibrarySearchBar.tsx
View File

@ -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>
)

9
packages/web/components/tokens/stitches.config.ts
View File

@ -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)',
},
}