From a781ef4f7c1d9f48c35308f98b92364a8a9b2926 Mon Sep 17 00:00:00 2001 From: Pavel Prichodko <14926950+prichodko@users.noreply.github.com> Date: Mon, 18 Apr 2022 15:49:36 +0200 Subject: [PATCH] feat(react): improve dark mode --- .../get-started/connect-wallet-dialog.tsx | 2 -- .../main-sidebar/components/sidebar-item/index.tsx | 4 ++-- .../routes/chat/components/chat-input/index.tsx | 4 ++-- .../chat/components/chat-message/actions.tsx | 2 +- packages/status-react/src/routes/chat/index.tsx | 2 +- .../src/system/emoji-hash/emoji-hash.tsx | 2 -- packages/status-react/src/system/menu/menu.tsx | 14 +++++++------- .../status-react/src/system/text-input/styles.tsx | 4 ++-- .../status-react/src/system/tooltip/styles.tsx | 6 +++--- 9 files changed, 18 insertions(+), 22 deletions(-) diff --git a/packages/status-react/src/components/main-sidebar/components/get-started/connect-wallet-dialog.tsx b/packages/status-react/src/components/main-sidebar/components/get-started/connect-wallet-dialog.tsx index e872e267..c6c4361c 100644 --- a/packages/status-react/src/components/main-sidebar/components/get-started/connect-wallet-dialog.tsx +++ b/packages/status-react/src/components/main-sidebar/components/get-started/connect-wallet-dialog.tsx @@ -7,8 +7,6 @@ import { Dialog, Grid, Text } from '~/src/system' export const ConnectWalletDialog = () => { const [wallet, setWallet] = useState<'coinbase' | undefined>() - console.log(wallet) - // TODO: Add wallet logos return ( diff --git a/packages/status-react/src/components/main-sidebar/components/sidebar-item/index.tsx b/packages/status-react/src/components/main-sidebar/components/sidebar-item/index.tsx index 223dc2cc..40f38df5 100644 --- a/packages/status-react/src/components/main-sidebar/components/sidebar-item/index.tsx +++ b/packages/status-react/src/components/main-sidebar/components/sidebar-item/index.tsx @@ -71,10 +71,10 @@ const Link = styled(NavLink, { right: 8, width: 22, height: 22, - background: '#4360DF', + background: '$primary-1', borderRadius: '$full', fontSize: 12, - color: '#fff', + color: '$accent-11', }, }, }, diff --git a/packages/status-react/src/routes/chat/components/chat-input/index.tsx b/packages/status-react/src/routes/chat/components/chat-input/index.tsx index bfa18811..f7c47b14 100644 --- a/packages/status-react/src/routes/chat/components/chat-input/index.tsx +++ b/packages/status-react/src/routes/chat/components/chat-input/index.tsx @@ -75,7 +75,7 @@ const Wrapper = styled('div', { const Bubble = styled('div', { width: '100%', - background: '#EEF2F5', + background: '$gray-2', borderRadius: '16px 16px 4px 16px;', padding: 2, overflow: 'hidden', @@ -86,7 +86,7 @@ const InputWrapper = styled('div', { height: 40, width: '100%', alignItems: 'center', - background: '#EEF2F5', + background: '$gray-2', padding: '0 0 0 12px', }) diff --git a/packages/status-react/src/routes/chat/components/chat-message/actions.tsx b/packages/status-react/src/routes/chat/components/chat-message/actions.tsx index 898db3c7..76b0b7c6 100644 --- a/packages/status-react/src/routes/chat/components/chat-message/actions.tsx +++ b/packages/status-react/src/routes/chat/components/chat-message/actions.tsx @@ -116,7 +116,7 @@ const Wrapper = styled('div', { right: 16, padding: 2, boxShadow: '0px 4px 12px rgba(0, 34, 51, 0.08)', - background: '#fff', + background: '$background', borderRadius: 8, display: 'none', diff --git a/packages/status-react/src/routes/chat/index.tsx b/packages/status-react/src/routes/chat/index.tsx index 0f32ba8f..f9c3f2d2 100644 --- a/packages/status-react/src/routes/chat/index.tsx +++ b/packages/status-react/src/routes/chat/index.tsx @@ -77,7 +77,7 @@ const Wrapper = styled('div', { height: '100%', display: 'flex', alignItems: 'stretch', - background: '#fff', + background: '$background', maxWidth: '100%', minWidth: 1, }) diff --git a/packages/status-react/src/system/emoji-hash/emoji-hash.tsx b/packages/status-react/src/system/emoji-hash/emoji-hash.tsx index 240e3ca8..5a43dd5e 100644 --- a/packages/status-react/src/system/emoji-hash/emoji-hash.tsx +++ b/packages/status-react/src/system/emoji-hash/emoji-hash.tsx @@ -9,8 +9,6 @@ interface Props { const EmojiHash = (props: Props) => { const { name } = props - console.log(name) - return ( 🎩🍞🥑🦍🌈📡 diff --git a/packages/status-react/src/system/menu/menu.tsx b/packages/status-react/src/system/menu/menu.tsx index e9accdfa..2057cb58 100644 --- a/packages/status-react/src/system/menu/menu.tsx +++ b/packages/status-react/src/system/menu/menu.tsx @@ -9,7 +9,7 @@ import { Icon } from '../icon' const Content = styled('div', { minWidth: 176, padding: '8px 0', - background: theme.colors.white, + background: '$background', borderRadius: theme.radii[8], boxShadow: '0px 2px 4px rgba(0, 34, 51, 0.16), 0px 4px 12px rgba(0, 34, 51, 0.08)', @@ -41,7 +41,7 @@ const ItemBase = styled('div', { height: 34, fontSize: 13, lineHeight: 1, - color: '#000', + color: '$accent-1', display: 'flex', alignItems: 'center', gap: 6, @@ -51,7 +51,7 @@ const ItemBase = styled('div', { whiteSpace: 'nowrap', '&:focus, &[aria-selected="true"], &[aria-expanded="true"]': { - backgroundColor: '#EEF2F5', + backgroundColor: '$gray-2', }, '&[data-disabled]': { @@ -59,15 +59,15 @@ const ItemBase = styled('div', { }, svg: { - color: '#4360DF', + color: '$primary-1', }, variants: { danger: { true: { - color: '#FF2D55', + color: '$danger-1', svg: { - color: '#FF2D55', + color: '$danger-1', }, }, }, @@ -98,7 +98,7 @@ const TriggerItemIcon = styled('div', { const Separator = styled('div', { height: 1, - background: '#F0F2F5', + background: '$gray-5', margin: '5px 0', }) diff --git a/packages/status-react/src/system/text-input/styles.tsx b/packages/status-react/src/system/text-input/styles.tsx index c364cd3a..2b4e9792 100644 --- a/packages/status-react/src/system/text-input/styles.tsx +++ b/packages/status-react/src/system/text-input/styles.tsx @@ -5,7 +5,7 @@ export const Base = styled('input', { lineHeight: 1.2, fontSize: '15px', padding: '10px 16px', - background: '#EEF2F5', + background: '$gray-2', borderRadius: 8, height: 44, width: '100%', @@ -14,7 +14,7 @@ export const Base = styled('input', { justifyContent: 'center', '&::placeholder': { - color: '#939BA1', + color: '$gray-1', }, '&:focus': { diff --git a/packages/status-react/src/system/tooltip/styles.tsx b/packages/status-react/src/system/tooltip/styles.tsx index 9fd1e5c6..64d131ce 100644 --- a/packages/status-react/src/system/tooltip/styles.tsx +++ b/packages/status-react/src/system/tooltip/styles.tsx @@ -28,8 +28,8 @@ export const Content = styled(Primitive.Content, { fontSize: 13, padding: 8, lineHeight: 1, - backgroundColor: '#000', - color: '#fff', + backgroundColor: '$accent-1', + color: '$accent-11', borderRadius: 8, '@media (prefers-reduced-motion: no-preference)': { @@ -59,5 +59,5 @@ export const Content = styled(Primitive.Content, { }) export const Arrow = styled(Primitive.Arrow, { - fill: '#000', + fill: '$accent-1', })