From f60876830c4d70a58a96cdb4121ca62b106dc163 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Fri, 8 Jul 2022 15:20:52 -0700 Subject: [PATCH 1/3] 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 | 18 ++++++++----- .../components/elements/DropdownElements.tsx | 15 +++++------ .../web/components/elements/StyledText.tsx | 8 +++--- .../web/components/patterns/DropdownMenu.tsx | 25 ++++++++++--------- .../web/components/tokens/stitches.config.ts | 5 ++-- 5 files changed, 40 insertions(+), 31 deletions(-) diff --git a/packages/web/components/elements/Button.tsx b/packages/web/components/elements/Button.tsx index d6f24321b..f8e4bc180 100644 --- a/packages/web/components/elements/Button.tsx +++ b/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', + } }, }, }, diff --git a/packages/web/components/elements/DropdownElements.tsx b/packages/web/components/elements/DropdownElements.tsx index 9ed0299c5..51b287e19 100644 --- a/packages/web/components/elements/DropdownElements.tsx +++ b/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 { {props.title ?? props.children} - {props.hideSeparator ? null : } ) } diff --git a/packages/web/components/elements/StyledText.tsx b/packages/web/components/elements/StyledText.tsx index 5c2d72d27..a7674cf39 100644 --- a/packages/web/components/elements/StyledText.tsx +++ b/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', diff --git a/packages/web/components/patterns/DropdownMenu.tsx b/packages/web/components/patterns/DropdownMenu.tsx index 254e5e808..5055924b9 100644 --- a/packages/web/components/patterns/DropdownMenu.tsx +++ b/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 ( - + Theme - + - 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" /> - props.actionHandler('navigate-to-api')} - title="API Keys" - /> {/* props.actionHandler('navigate-to-subscriptions')} title="Subscriptions" @@ -92,7 +94,6 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element { props.actionHandler('logout')} title="Logout" - hideSeparator /> ) diff --git a/packages/web/components/tokens/stitches.config.ts b/packages/web/components/tokens/stitches.config.ts index a435ab952..ded640c53 100644 --- a/packages/web/components/tokens/stitches.config.ts +++ b/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)', }, } From 6dc707cc926114f35bc8b7c99970961b3cd42873 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Fri, 8 Jul 2022 19:27:53 -0700 Subject: [PATCH 2/3] Improve the outlines on dropdown arrows --- .../components/elements/DropdownElements.tsx | 49 ++++++++++++++++++- .../templates/article/ArticleActionsMenu.tsx | 2 +- .../templates/homeFeed/LibrarySearchBar.tsx | 5 -- .../web/components/tokens/stitches.config.ts | 4 +- 4 files changed, 50 insertions(+), 10 deletions(-) diff --git a/packages/web/components/elements/DropdownElements.tsx b/packages/web/components/elements/DropdownElements.tsx index 51b287e19..1d8f1c4ca 100644 --- a/packages/web/components/elements/DropdownElements.tsx +++ b/packages/web/components/elements/DropdownElements.tsx @@ -54,10 +54,55 @@ export const DropdownContent = styled(Content, { 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, { @@ -137,7 +182,7 @@ export function Dropdown(props: DropdownProps & PopperContentProps): JSX.Element > {labelText && {labelText}} {children} - {showArrow && } + ) diff --git a/packages/web/components/templates/article/ArticleActionsMenu.tsx b/packages/web/components/templates/article/ArticleActionsMenu.tsx index 96ffe92b5..1248cb97e 100644 --- a/packages/web/components/templates/article/ArticleActionsMenu.tsx +++ b/packages/web/components/templates/article/ArticleActionsMenu.tsx @@ -42,7 +42,7 @@ type ActionDropdownProps = { const ActionDropdown = (props: ActionDropdownProps): JSX.Element => { return props.onFilterChange('in:archive')} title="Archived" - hideSeparator /> props.onFilterChange('type:file')} title="Files" - hideSeparator /> props.onFilterChange('type:highlights')} title="Highlights" - hideSeparator /> props.onFilterChange(`saved:${recentlySavedStartDate}`)} title="Recently Saved" - hideSeparator /> props.onFilterChange(`sort:read`)} title="Recently Read" - hideSeparator /> ) diff --git a/packages/web/components/tokens/stitches.config.ts b/packages/web/components/tokens/stitches.config.ts index ded640c53..e31f3b3f3 100644 --- a/packages/web/components/tokens/stitches.config.ts +++ b/packages/web/components/tokens/stitches.config.ts @@ -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', @@ -176,7 +176,7 @@ const darkThemeSpec = { grayBg: '#3B3938', grayBgActive: '#4f4d4c', grayTextContrast: '#D8D7D7', - grayBorder: 'rgba(255, 255, 255, 0.06)', + grayBorder: '#323232', graySolid: '#9C9B9A', grayBgSubtle: 'hsl(0 0% 9.8%)', From 56245619cf618f0b87df7419f9c7236b43c12ee5 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Fri, 8 Jul 2022 19:31:43 -0700 Subject: [PATCH 3/3] Remove unused attribute --- packages/web/components/elements/DropdownElements.tsx | 2 -- packages/web/components/elements/ExtensionsInstallHelp.tsx | 1 - .../web/components/templates/article/ArticleActionsMenu.tsx | 1 - 3 files changed, 4 deletions(-) diff --git a/packages/web/components/elements/DropdownElements.tsx b/packages/web/components/elements/DropdownElements.tsx index 1d8f1c4ca..8dcbfff98 100644 --- a/packages/web/components/elements/DropdownElements.tsx +++ b/packages/web/components/elements/DropdownElements.tsx @@ -117,7 +117,6 @@ export type DropdownSide = 'top' | 'right' | 'bottom' | 'left' type DropdownProps = { labelText?: string - showArrow?: boolean triggerElement: React.ReactNode children: React.ReactNode styledArrow?: boolean @@ -158,7 +157,6 @@ export function Dropdown(props: DropdownProps & PopperContentProps): JSX.Element align, triggerElement, labelText, - showArrow = true, disabled = false, side = 'bottom', sideOffset = 0, diff --git a/packages/web/components/elements/ExtensionsInstallHelp.tsx b/packages/web/components/elements/ExtensionsInstallHelp.tsx index d4be60213..cb86225ed 100644 --- a/packages/web/components/elements/ExtensionsInstallHelp.tsx +++ b/packages/web/components/elements/ExtensionsInstallHelp.tsx @@ -204,7 +204,6 @@ export default function ExtensionsInstallHelp({ }} > { return