change colors for menu in dark mode; fix select focus color

theme/components/Menu.ts

+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

+import { selectAnatomy as parts } from '@chakra-ui/anatomy';
+import {
+  createMultiStyleConfigHelpers,
+} from '@chakra-ui/styled-system';
+
+import Input from './Input';
+
+const { defineMultiStyleConfig, definePartsStyle } =
+  createMultiStyleConfigHelpers(parts.keys);
+
+const variantOutline = definePartsStyle((props) => {
+  return {
+    field: {
+      ...Input.variants?.outline(props).field,
+      _focusVisible: {
+        borderColor: Input.variants?.outline(props).field.borderColor,
+        boxShadow: 'none',
+      },
+    },
+  };
+});
+
+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/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"