From f60876830c4d70a58a96cdb4121ca62b106dc163 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Fri, 8 Jul 2022 15:20:52 -0700 Subject: [PATCH] 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)', }, }