fix: dark mode colors (#301)

* update shadows

* update shadows, use dark-mode extension colors

* fix dropdown bg

* fix dropdown-button bg

* fix sizing issue for `<GetIcon />`

* refactor `IconButton`

* fix list background

Author: snqb

src/components/dropdown-button/styles.ts

@@ -4,6 +4,7 @@ export default {
     cursor: 'pointer',
     marginTop: '-2px',
     width: 'fit-content',
+    background: 'white',
   },
   dropdown: (height: number | undefined, alignLeft: boolean) => ({
     position: 'absolute',

src/components/dropdown/index.tsx

@@ -55,7 +55,7 @@ const Dropdown: FC<DropdownProps> = ({
               disabled={disabled}
             >
               <Flex width="100%">
-                <Flex flexGrow={1}>
+                <Flex flexGrow={1} color="black">
                   {icon && (
                     <GetIcon
                       color={disabled ? 'gray' : 'black'}

src/components/icon-button/icon-button.stories.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
 import { action } from '@storybook/addon-actions';
-import { Story, Meta } from '@storybook/react/types-6-0';
+import { Meta, Story } from '@storybook/react/types-6-0';
+import React from 'react';
 
 import IconButton, { IconButtonProps } from '.';
 import { IconName } from '../icon/list';
@@ -15,7 +15,7 @@ const Template: Story<IconButtonProps> = (props) => <IconButton {...props} />;
 export const IconButtons = Template.bind({});
 
 IconButtons.args = {
-  icon: IconName.eye,
+  icon: IconName.more,
   intent: 'primary',
   tooltip: 'Tooltip',
   onClick: action('onClick'),
@@ -56,12 +56,13 @@ IconButtons.argTypes = {
     },
   },
   icon: {
-    control: {
-      disable: true,
-    },
-    type: {
-      required: true,
-      summary: 'Use an icon from IconName. E.g. IconName.glass',
+    control: { type: 'select' },
+    options: ['more', 'card', 'birth', 'lock'],
+    mapping: {
+      download: IconName.more,
+      card: IconName.card,
+      birth: IconName.birth,
+      lock: IconName.lock,
     },
   },
 };

src/components/icon-button/icon-button.styles.ts

@@ -1,34 +1,8 @@
-import { SxStyleProp } from 'rebass';
-
-export default (disabled: boolean): SxStyleProp => ({
+export const wrapper = {
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
 
   height: '32px',
   width: '32px',
-  position: 'relative',
-
-  borderWidth: '1px',
-  borderStyle: 'solid',
-  borderRadius: 0,
-
-  boxSizing: 'border-box',
-
-  outline: 'none',
-  cursor: 'pointer',
-
-  transition: ({ transitions }) => transitions.button,
-
-  ':disabled': {
-    cursor: 'default',
-    pointerEvents: 'none',
-  },
-
-  '> svg': {
-    width: '16px',
-    height: '16px',
-    position: 'absolute',
-    path: { fill: disabled ? 'gray' : 'black' },
-  },
-});
+};

src/components/icon-button/index.tsx

@@ -1,15 +1,18 @@
 import React, { FC } from 'react';
-import { Button as RebassButton, ButtonProps } from 'rebass';
 import { Link } from 'react-router-dom';
+import { ButtonProps } from 'rebass';
 
 // Components
 import Tooltip, { TooltipProps } from '../tooltip';
 
-import { getIcon, IconName } from '../icon/list';
-import styles from './icon-button.styles';
+import { Button } from '../button';
+import GetIcon from '../icon/GetIcon';
+import { IconName } from '../icon/list';
+
+import * as S from './icon-button.styles';
 
 export interface IconButtonProps extends Omit<ButtonProps, 'css'> {
-  intent?: 'primary' | 'ghost' | 'ghost-white';
+  intent?: 'primary' | 'ghost' | 'ghost-white'; // TODO remove this intent, not used
   tooltip?: string;
   icon: IconName;
   disabled?: boolean;
@@ -19,8 +22,8 @@ export interface IconButtonProps extends Omit<ButtonProps, 'css'> {
 }
 
 const IconButton: FC<IconButtonProps> = ({
+  intent: _, // TODO remove this
   tooltip,
-  intent = 'primary',
   icon,
   disabled = false,
   tooltipProps,
@@ -34,26 +37,26 @@ const IconButton: FC<IconButtonProps> = ({
   if (tooltip) {
     component = (
       <Tooltip {...tooltipProps} disabled={disabled} mainText={tooltip}>
-        <RebassButton
-          sx={{ ...styles(disabled), ...sx }}
-          variant={`icon-${intent}`}
+        <Button
+          sx={{ ...S.wrapper, ...sx }}
+          variant="secondary"
           disabled={disabled}
           {...props}
         >
-          {getIcon(icon, 'black')}
-        </RebassButton>
+          <GetIcon disabled={disabled} icon={icon} size="sm" />
+        </Button>
       </Tooltip>
     );
   } else {
     component = (
-      <RebassButton
-        sx={styles(disabled)}
-        variant={`icon-${intent}`}
+      <Button
+        sx={{ ...S.wrapper, ...sx }}
+        variant="secondary"
         disabled={disabled}
         {...props}
       >
-        {getIcon(icon, 'black')}
-      </RebassButton>
+        <GetIcon disabled={disabled} icon={icon} size="sm" />
+      </Button>
     );
   }
 

src/components/icon/GetIcon.tsx

@@ -25,6 +25,8 @@ const GetIcon: FC<GetIconProps> = ({
     <Flex
       {...props}
       sx={{
+        minWidth: iconSize,
+        height: 'auto',
         svg: {
           width: iconSize,
           height: iconSize,

src/components/list/container/index.tsx

@@ -17,6 +17,7 @@ const List = forwardRef<HTMLUListElement, ListProps>(
       {...props}
       tx="variants.list"
       variant="container"
+      color="black"
     >
       {children}
     </Box>

src/components/list/item/list-item.styles.ts

@@ -3,8 +3,8 @@ export const withoutBorder = { borderBottomColor: 'transparent' };
 export default (isActive: boolean, disablde?: boolean) => ({
   height: '35px',
 
-  bg: isActive ? 'grayShade3' : 'initial',
-  color: disablde ? 'gray' : 'initial',
+  bg: isActive ? 'grayShade3' : 'inherit',
+  color: disablde ? 'gray' : 'inherit',
 
   display: 'flex',
   alignItems: 'center',

src/theme/theme.ts

@@ -175,12 +175,12 @@ const defaultTheme: ITheme = {
 };
 
 const darkThemeColors: ITheme['colors'] = {
-  white: '#303030',
+  white: '#181a1b',
 
   gray: '#A6A6A6',
   grayShade1: '#707070',
   grayShade2: '#4D4D4D',
-  grayShade3: '#222222',
+  grayShade3: '#1e2021',
 
   black: '#F0F0F0',
 
@@ -205,16 +205,16 @@ const darkThemeColors: ITheme['colors'] = {
 };
 
 const darkThemeShadows: ITheme['shadows'] = {
-  primary: '0px 5px 15px rgba(61, 245, 187, 0.2)',
-  secondary: '0px 5px 15px rgba(230, 230, 230, 0.2)',
-  explorer: '0px -1px 1px #A7A7A7',
-  alert: '0px 5px 15px rgba(255, 102, 102, 0.25)',
-  disabled: '0px 4px 15px rgba(255, 255, 255, 0.25)',
-  cardInsetShadow: 'inset 0px -20px 30px -25px rgba(255, 255, 255, 0.15)',
-  navigation: '1px 0px 0px #4D4D4D, 2px 0px 0px white',
-  list: '0px 4px 15px rgba(255, 255, 255, 0.25)',
-  popup: '0px 4px 4px rgba(255, 255, 255, 0.25)',
-  notification: '0px 0px 15px rgba(255, 255, 255, 0.25)',
+  primary: '0 0 1px 2px rgba(160, 160, 160, 0.1)',
+  secondary: '0 0 1px 2px rgba(160, 160, 160, 0.1)',
+  explorer: '0 0 1px 2px rgba(160, 160, 160, 0.1)',
+  alert: '0 0 1px 2px rgba(160, 160, 160, 0.1)',
+  disabled: '0 0 1px 2px rgba(160, 160, 160, 0.1)',
+  cardInsetShadow: '0 0 1px 2px rgba(160, 160, 160, 0.1)',
+  navigation: '0 0 1px 2px rgba(160, 160, 160, 0.1)',
+  list: '0 0 1px 2px rgba(160, 160, 160, 0.1)',
+  popup: '0 0 1px 2px rgba(160, 160, 160, 0.1)',
+  notification: '0 0 1px 2px rgba(160, 160, 160, 0.1)',
 };
 
 export const useTheme = () => useEmotionTheme<ITheme>();