Merge pull request #529 from blockscout/menu-dark-mode

menu in dark mode

theme/components/Button/Button.ts

@@ -47,7 +47,7 @@ const variantOutline = defineStyle((props) => {
 
   const isGrayTheme = c === 'gray' || c === 'gray-dark';
   const color = isGrayTheme ? mode('blackAlpha.800', 'whiteAlpha.800')(props) : mode(`${ c }.600`, `${ c }.300`)(props);
-  const borderColor = isGrayTheme ? mode('gray.300', 'gray.600')(props) : mode(`${ c }.600`, `${ c }.300`)(props);
+  const borderColor = isGrayTheme ? mode('gray.200', 'gray.600')(props) : mode(`${ c }.600`, `${ c }.300`)(props);
   const activeBg = isGrayTheme ? mode('blue.50', 'gray.600')(props) : mode(`${ c }.50`, 'gray.600')(props);
   const activeColor = (() => {
     if (c === 'gray') {

theme/components/Menu.ts

@@ -0,0 +1,51 @@
+import { menuAnatomy as parts } from '@chakra-ui/anatomy';
+import {
+  createMultiStyleConfigHelpers,
+  cssVar,
+  defineStyle,
+} from '@chakra-ui/styled-system';
+
+const { defineMultiStyleConfig, definePartsStyle } =
+  createMultiStyleConfigHelpers(parts.keys);
+
+const $bg = cssVar('menu-bg');
+const $shadow = cssVar('menu-shadow');
+
+const baseStyleList = defineStyle({
+  [$bg.variable]: '#fff',
+  [$shadow.variable]: 'shadows.2xl',
+  _dark: {
+    [$bg.variable]: 'colors.gray.900',
+    [$shadow.variable]: 'shadows.dark-lg',
+  },
+  borderWidth: '0',
+  bg: $bg.reference,
+  boxShadow: $shadow.reference,
+});
+
+const baseStyleItem = defineStyle({
+  _focus: {
+    [$bg.variable]: 'colors.blue.50',
+    _dark: {
+      [$bg.variable]: 'colors.gray.800',
+    },
+  },
+  _hover: {
+    [$bg.variable]: 'colors.blue.50',
+    _dark: {
+      [$bg.variable]: 'colors.gray.800',
+    },
+  },
+  bg: $bg.reference,
+});
+
+const baseStyle = definePartsStyle({
+  list: baseStyleList,
+  item: baseStyleItem,
+});
+
+const Menu = defineMultiStyleConfig({
+  baseStyle,
+});
+
+export default Menu;

theme/components/Popover.ts

@@ -29,6 +29,7 @@ const baseStyleContent = defineStyle((props) => {
     _dark: {
       [$popperBg.variable]: `colors.gray.900`,
       [$arrowShadowColor.variable]: `colors.whiteAlpha.300`,
+      boxShadow: 'dark-lg',
     },
     width: 'xs',
     border: 'none',

theme/components/Select.ts

@@ -0,0 +1,36 @@
+import { selectAnatomy as parts } from '@chakra-ui/anatomy';
+import {
+  createMultiStyleConfigHelpers,
+} from '@chakra-ui/styled-system';
+import { mode } from '@chakra-ui/theme-tools';
+
+import Input from './Input';
+
+const { defineMultiStyleConfig, definePartsStyle } =
+  createMultiStyleConfigHelpers(parts.keys);
+
+const variantOutline = definePartsStyle((props) => {
+  return {
+    field: {
+      ...Input.variants?.outline(props).field,
+      borderColor: mode('gray.200', 'gray.600')(props),
+      _hover: {
+        borderColor: mode('gray.300', 'gray.500')(props),
+      },
+      _focusVisible: {
+        borderColor: mode('gray.200', 'gray.600')(props),
+        boxShadow: 'none',
+      },
+      cursor: 'pointer',
+    },
+  };
+});
+
+const Select = defineMultiStyleConfig({
+  variants: {
+    ...Input.variants,
+    outline: variantOutline,
+  },
+});
+
+export default Select;

theme/components/index.ts

@@ -8,9 +8,11 @@ import FormLabel from './FormLabel';
 import Heading from './Heading';
 import Input from './Input';
 import Link from './Link';
+import Menu from './Menu';
 import Modal from './Modal';
 import Popover from './Popover';
 import Radio from './Radio';
+import Select from './Select';
 import Skeleton from './Skeleton';
 import Spinner from './Spinner';
 import Switch from './Switch';
@@ -32,9 +34,11 @@ const components = {
   Form,
   FormLabel,
   Link,
+  Menu,
   Modal,
   Popover,
   Radio,
+  Select,
   Skeleton,
   Spinner,
   Switch,

ui/shared/TokenLogo.tsx

@@ -16,6 +16,9 @@ const EmptyElement = ({ className }: { className?: string }) => {
       color={ color }
       borderRadius="base"
       as={ tokenPlaceholderIcon }
+      transitionProperty="background-color,color"
+      transitionDuration="normal"
+      transitionTimingFunction="ease"
     />
   );
 };

ui/shared/address/AddressContractIcon.tsx

@@ -22,6 +22,9 @@ const AddressContractIcon = ({ className }: Props) => {
         alignItems="center"
         justifyContent="center"
         fontWeight="700"
+        transitionProperty="background-color,color"
+        transitionDuration="normal"
+        transitionTimingFunction="ease"
       >
           С
       </Box>

ui/shared/logs/LogTopic.tsx

@@ -70,7 +70,6 @@ const LogTopic = ({ hex, index }: Props) => {
           borderRadius="base"
           value={ selectedDataType }
           onChange={ handleSelectChange }
-          focusBorderColor="none"
           mr={ 3 }
           flexShrink={ 0 }
           w="auto"

ui/snippets/searchBar/SearchBarInput.tsx

@@ -79,8 +79,9 @@ const SearchBarInput = ({ onChange, onSubmit, isHomepage, onFocus, onBlur, onHid
       paddingBottom={{ base: isHomepage ? 0 : 4, lg: 0 }}
       boxShadow={ scrollDirection !== 'down' && isSticky ? 'md' : 'none' }
       transform={{ base: isHomepage ? 'none' : transformMobile, lg: 'none' }}
-      transitionProperty="transform,box-shadow"
-      transitionDuration="slow"
+      transitionProperty="transform,box-shadow,background-color,color,border-color"
+      transitionDuration="normal"
+      transitionTimingFunction="ease"
     >
       <InputGroup size={{ base: isHomepage ? 'md' : 'sm', lg: 'md' }}>
         <InputLeftElement w={{ base: isHomepage ? 6 : 4, lg: 6 }} ml={{ base: isHomepage ? 4 : 3, lg: 4 }} h="100%">