feat(react): improve dark mode

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 (
     <Dialog title="Connect Ethereum Wallet">

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

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

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

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

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 (
     <Base>
       🎩🍞🥑🦍🌈📡

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

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': {

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',
+  backgroundColor: '$accent-1',
-  color: '#fff',
+  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',
 })