User settings for address icons type (#1763)

* color theme settings

* address icon settings

* update tests

* add images to the address icon settings

* update styles

* more fixes

docs/ENVS.md

@@ -202,7 +202,7 @@ Settings for meta tags and OG tags
 
 | Variable | Type | Description | Compulsoriness  | Default value | Example value |
 | --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_VIEWS_ADDRESS_IDENTICON_TYPE | `"github" \| "jazzicon" \| "gradient_avatar" \| "blockie"` | Style of address identicon appearance. Choose between [GitHub](https://github.blog/2013-08-14-identicons/), [Metamask Jazzicon](https://metamask.github.io/jazzicon/), [Gradient Avatar](https://github.com/varld/gradient-avatar) and [Ethereum Blocky](https://mycryptohq.github.io/ethereum-blockies-base64/) | - | `jazzicon` | `gradient_avatar` |
+| NEXT_PUBLIC_VIEWS_ADDRESS_IDENTICON_TYPE | `"github" \| "jazzicon" \| "gradient_avatar" \| "blockie"` | Default style of address identicon appearance. Choose between [GitHub](https://github.blog/2013-08-14-identicons/), [Metamask Jazzicon](https://metamask.github.io/jazzicon/), [Gradient Avatar](https://github.com/varld/gradient-avatar) and [Ethereum Blocky](https://mycryptohq.github.io/ethereum-blockies-base64/) | - | `jazzicon` | `gradient_avatar` |
 | NEXT_PUBLIC_VIEWS_ADDRESS_HIDDEN_VIEWS | `Array<AddressViewId>` | Address views that should not be displayed. See below the list of the possible id values.  | - | - | `'["top_accounts"]'` |
 | NEXT_PUBLIC_VIEWS_CONTRACT_SOLIDITYSCAN_ENABLED | `boolean` | Set to `true` if SolidityScan reports are supported | - | - | `true` |
 

icons/gear_slim.svg

+<svg viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M8.039 17.16h2.432a.608.608 0 0 0 .584-.608v-.827a.84.84 0 0 1 1.429-.608l.608.608a.608.608 0 0 0 .864 0l1.72-1.72a.61.61 0 0 0 0-.864l-.608-.608a.84.84 0 0 1 .608-1.43h.876a.608.608 0 0 0 .608-.607V8.063a.608.608 0 0 0-.608-.608h-.857a.84.84 0 0 1-.608-1.429l.608-.608a.607.607 0 0 0 0-.863l-1.721-1.721a.609.609 0 0 0-.864 0l-.608.608a.84.84 0 0 1-1.429-.608v-.876a.608.608 0 0 0-.608-.608H8.033a.608.608 0 0 0-.608.608v.845a.84.84 0 0 1-1.43.608l-.607-.608a.608.608 0 0 0-.864 0L2.834 4.53a.608.608 0 0 0 0 .864l.608.608a.84.84 0 0 1-.608 1.429h-.876a.608.608 0 0 0-.608.608v2.438a.608.608 0 0 0 .608.608h.845a.839.839 0 0 1 .608 1.43l-.608.607a.609.609 0 0 0 0 .864l1.727 1.69a.608.608 0 0 0 .864 0l.608-.608a.84.84 0 0 1 1.429.608v.876a.608.608 0 0 0 .608.608Zm1.824-1.216H8.647v-.268a2.049 2.049 0 0 0-3.503-1.447l-.188.189-.863-.864.188-.188a2.05 2.05 0 0 0-1.447-3.503h-.268V8.647h.268A2.05 2.05 0 0 0 4.28 5.144l-.188-.188.863-.864.188.189a2.05 2.05 0 0 0 3.503-1.447v-.268h1.216v.268a2.05 2.05 0 0 0 3.503 1.447l.188-.189.864.864-.189.188a2.05 2.05 0 0 0 1.447 3.503h.268v1.216h-.268a2.05 2.05 0 0 0-1.447 3.503l.189.188-.864.864-.188-.189a2.05 2.05 0 0 0-3.503 1.447v.268Zm-2.297-4.161a3.04 3.04 0 1 0 3.378-5.056 3.04 3.04 0 0 0-3.378 5.056Zm.676-4.045a1.824 1.824 0 1 1 2.027 3.034 1.824 1.824 0 0 1-2.027-3.034Z" fill="currentColor"/>
+</svg>

lib/cookies.ts

@@ -10,6 +10,7 @@ export enum NAMES {
   TXS_SORT='txs_sort',
   COLOR_MODE='chakra-ui-color-mode',
   COLOR_MODE_HEX='chakra-ui-color-mode-hex',
+  ADDRESS_IDENTICON_TYPE='address_identicon_type',
   INDEXING_ALERT='indexing_alert',
   ADBLOCK_DETECTED='adblock_detected',
   MIXPANEL_DEBUG='_mixpanel_debug',

nextjs/nextjs-routes.d.ts

@@ -21,12 +21,11 @@ declare module "nextjs-routes" {
     | StaticRoute<"/api/media-type">
     | StaticRoute<"/api/proxy">
     | StaticRoute<"/api-docs">
-    | StaticRoute<"/apps">
     | DynamicRoute<"/apps/[id]", { "id": string }>
+    | StaticRoute<"/apps">
     | StaticRoute<"/auth/auth0">
     | StaticRoute<"/auth/profile">
     | StaticRoute<"/auth/unverified-email">
-    | StaticRoute<"/batches">
     | DynamicRoute<"/batches/[number]", { "number": string }>
     | StaticRoute<"/batches">
     | DynamicRoute<"/blobs/[hash]", { "hash": string }>
@@ -39,8 +38,8 @@ declare module "nextjs-routes" {
     | StaticRoute<"/graphiql">
     | StaticRoute<"/">
     | StaticRoute<"/login">
-    | StaticRoute<"/name-domains">
     | DynamicRoute<"/name-domains/[name]", { "name": string }>
+    | StaticRoute<"/name-domains">
     | DynamicRoute<"/op/[hash]", { "hash": string }>
     | StaticRoute<"/ops">
     | StaticRoute<"/output-roots">

public/icons/name.d.ts

@@ -62,6 +62,7 @@
 	| "flame"
 	| "gas_xl"
 	| "gas"
+	| "gear_slim"
 	| "gear"
 	| "globe-b"
 	| "globe"

ui/shared/entities/address/AddressIdenticon.tsx

@@ -3,6 +3,7 @@ import dynamic from 'next/dynamic';
 import React from 'react';
 
 import config from 'configs/app';
+import * as cookies from 'lib/cookies';
 import IdenticonGithub from 'ui/shared/IdenticonGithub';
 
 interface IconProps {
@@ -12,7 +13,8 @@ interface IconProps {
 
 const Icon = dynamic(
   async() => {
-    switch (config.UI.views.address.identiconType) {
+    const type = cookies.get(cookies.NAMES.ADDRESS_IDENTICON_TYPE) || config.UI.views.address.identiconType;
+    switch (type) {
       case 'github': {
         // eslint-disable-next-line react/display-name
         return (props: IconProps) => <IdenticonGithub size={ props.size } seed={ props.hash }/>;

ui/snippets/topBar/ColorModeSwitchSample.tsx

-import {
-  Box,
-  useColorModeValue,
-  useToken,
-} from '@chakra-ui/react';
-import React from 'react';
-
-import type { ColorThemeColor } from './utils';
-
-interface Props extends ColorThemeColor {
-  onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
-  isActive: boolean;
-}
-
-const ColorModeSwitchSample = ({ hex, sampleBg, onClick, isActive }: Props) => {
-  const bgColor = useColorModeValue('white', 'gray.900');
-  const activeBgColor = useColorModeValue('blue.50', 'blackAlpha.800');
-
-  const activeBorderColor = useToken('colors', useColorModeValue('blackAlpha.800', 'gray.50'));
-  const hoverBorderColor = useToken('colors', 'link_hovered');
-
-  return (
-    <Box
-      bg={ sampleBg }
-      boxSize={ 5 }
-      borderRadius="full"
-      borderWidth="1px"
-      borderColor={ isActive ? activeBgColor : bgColor }
-      position="relative"
-      _before={{
-        position: 'absolute',
-        display: 'block',
-        content: '""',
-        top: '-3px',
-        left: '-3px',
-        width: 'calc(100% + 2px)',
-        height: 'calc(100% + 2px)',
-        borderStyle: 'solid',
-        borderRadius: 'full',
-        borderWidth: '2px',
-        borderColor: isActive ? activeBorderColor : 'transparent',
-      }}
-      _hover={{
-        _before: {
-          borderColor: isActive ? activeBorderColor : hoverBorderColor,
-        },
-      }}
-      data-hex={ hex }
-      onClick={ onClick }
-    />
-  );
-};
-
-export default ColorModeSwitchSample;

ui/snippets/topBar/ColorModeSwitchTheme.tsx

-import {
-  Flex,
-  useColorModeValue,
-  useToken,
-} from '@chakra-ui/react';
-import React from 'react';
-
-import IconSvg from 'ui/shared/IconSvg';
-
-import ColorModeSwitchSample from './ColorModeSwitchSample';
-import type { ColorTheme } from './utils';
-
-interface Props extends ColorTheme {
-  onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
-  activeHex: string | undefined;
-}
-
-const ColorModeSwitchTheme = ({ icon, name, colors, onClick, activeHex }: Props) => {
-  const isActive = colors.some((sample) => sample.hex === activeHex);
-  const activeColor = useColorModeValue('blackAlpha.800', 'gray.50');
-  const activeBgColor = useColorModeValue('blue.50', 'blackAlpha.800');
-  const inactiveColor = useColorModeValue('blue.700', 'gray.400');
-  const hoverBorderColor = useToken('colors', 'link_hovered');
-  const hasOneColor = colors.length === 1;
-
-  return (
-    <Flex
-      alignItems="center"
-      py="10px"
-      px="6px"
-      cursor="pointer"
-      color={ isActive ? activeColor : inactiveColor }
-      bgColor={ isActive ? activeBgColor : undefined }
-      _hover={{
-        color: isActive ? undefined : 'link_hovered',
-        '& [data-hex]': !isActive && hasOneColor ? {
-          _before: {
-            borderColor: hoverBorderColor,
-          },
-        } : undefined,
-      }}
-      onClick={ onClick }
-      data-hex={ colors[0].hex }
-      fontWeight={ 500 }
-      borderRadius="base"
-    >
-      <IconSvg name={ icon } boxSize={ 5 } mr={ 2 }/>
-      <span>{ name }</span>
-      <Flex columnGap={ 2 } ml="auto" alignItems="center">
-        { colors.map((sample) => <ColorModeSwitchSample key={ sample.hex } { ...sample } onClick={ onClick } isActive={ activeHex === sample.hex }/>) }
-      </Flex>
-    </Flex>
-  );
-};
-
-export default ColorModeSwitchTheme;

ui/snippets/topBar/TopBar.pw.tsx

@@ -30,6 +30,6 @@ test('default view +@dark-mode +@mobile', async({ mount, page }) => {
   await component.getByText(/\$1\.39/).click();
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1500, height: 220 } });
 
-  await component.getByLabel('color mode switch').click();
-  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1500, height: 220 } });
+  await component.getByLabel('User settings').click();
+  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1500, height: 400 } });
 });

ui/snippets/topBar/TopBar.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 
 import config from 'configs/app';
 
-import ColorModeSwitch from './ColorModeSwitch';
+import Settings from './settings/Settings';
 import SwapButton from './SwapButton';
 import TopBarStats from './TopBarStats';
 
@@ -28,7 +28,7 @@ const TopBar = () => {
             <Divider mr={ 3 } ml={{ base: 2, sm: 3 }} height={ 4 } orientation="vertical"/>
           </>
         ) }
-        <ColorModeSwitch/>
+        <Settings/>
       </Flex>
     </Flex>
   );

ui/snippets/topBar/settings/Settings.tsx

+import { Box, IconButton, Popover, PopoverBody, PopoverContent, PopoverTrigger, useDisclosure } from '@chakra-ui/react';
+import React from 'react';
+
+import IconSvg from 'ui/shared/IconSvg';
+
+import SettingsColorTheme from './SettingsColorTheme';
+import SettingsIdentIcon from './SettingsIdentIcon';
+
+const Settings = () => {
+  const { isOpen, onToggle, onClose } = useDisclosure();
+
+  return (
+    <Popover placement="bottom-start" trigger="click" isOpen={ isOpen } onClose={ onClose }>
+      <PopoverTrigger>
+        <IconButton
+          variant="simple"
+          colorScheme="blue"
+          aria-label="User settings"
+          icon={ <IconSvg name="gear_slim" boxSize={ 5 }/> }
+          p="1px"
+          boxSize={ 5 }
+          onClick={ onToggle }
+        />
+      </PopoverTrigger>
+      <PopoverContent overflowY="hidden" w="auto" fontSize="sm">
+        <PopoverBody boxShadow="2xl" p={ 4 }>
+          <SettingsColorTheme/>
+          <Box borderColor="divider" borderWidth="1px" my={ 3 }/>
+          <SettingsIdentIcon/>
+        </PopoverBody>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export default React.memo(Settings);

ui/snippets/topBar/ColorModeSwitch.tsx → ui/snippets/topBar/settings/SettingsColorTheme.tsx

-import {
-  IconButton,
-  Popover,
-  PopoverTrigger,
-  PopoverContent,
-  PopoverBody,
-  useColorMode,
-  useDisclosure,
-  Skeleton,
-} from '@chakra-ui/react';
+import { Box, Flex, useColorMode } from '@chakra-ui/react';
 import React from 'react';
 
 import * as cookies from 'lib/cookies';
-import IconSvg from 'ui/shared/IconSvg';
 
-import ColorModeSwitchTheme from './ColorModeSwitchTheme';
+import SettingsSample from './SettingsSample';
 import { COLOR_THEMES } from './utils';
 
-const ColorModeSwitch = () => {
-  const { isOpen, onToggle, onClose } = useDisclosure();
+const SettingsColorTheme = () => {
   const { setColorMode, colorMode } = useColorMode();
 
   const [ activeHex, setActiveHex ] = React.useState<string>();
 
   const setTheme = React.useCallback((hex: string) => {
-    const nextTheme = COLOR_THEMES.find((theme) => theme.colors.some((color) => color.hex === hex));
+    const nextTheme = COLOR_THEMES.find((theme) => theme.hex === hex);
 
     if (!nextTheme) {
       return;
@@ -49,7 +38,8 @@ const ColorModeSwitch = () => {
       return colorMode;
     })();
 
-    const fallbackHex = (COLOR_THEMES.find(theme => theme.colorMode === nextColorMode && theme.colors.length === 1) ?? COLOR_THEMES[0]).colors[0].hex;
+    const colorModeThemes = COLOR_THEMES.filter(theme => theme.colorMode === nextColorMode);
+    const fallbackHex = colorModeThemes[colorModeThemes.length - 1].hex;
     const cookieHex = cookies.get(cookies.NAMES.COLOR_MODE_HEX) ?? fallbackHex;
     setTheme(cookieHex);
     setActiveHex(cookieHex);
@@ -60,7 +50,7 @@ const ColorModeSwitch = () => {
   const handleSelect = React.useCallback((event: React.MouseEvent<HTMLDivElement>) => {
     event.stopPropagation();
 
-    const hex = event.currentTarget.getAttribute('data-hex');
+    const hex = event.currentTarget.getAttribute('data-value');
 
     if (!hex) {
       return;
@@ -70,29 +60,26 @@ const ColorModeSwitch = () => {
     setActiveHex(hex);
   }, [ setTheme ]);
 
-  const activeTheme = COLOR_THEMES.find((theme) => theme.colors.some((color) => color.hex === activeHex));
+  const activeTheme = COLOR_THEMES.find((theme) => theme.hex === activeHex);
 
   return (
-    <Popover placement="bottom-start" isLazy trigger="click" isOpen={ isOpen } onClose={ onClose }>
-      <PopoverTrigger>
-        { activeTheme ? (
-          <IconButton
-            variant="simple"
-            colorScheme="blue"
-            aria-label="color mode switch"
-            icon={ <IconSvg name={ activeTheme.icon } boxSize={ 5 }/> }
-            boxSize={ 5 }
-            onClick={ onToggle }
+    <div>
+      <Box fontWeight={ 600 }>Color theme</Box>
+      <Box color="text_secondary" mt={ 1 } mb={ 2 }>{ activeTheme?.label }</Box>
+      <Flex>
+        { COLOR_THEMES.map((theme) => (
+          <SettingsSample
+            key={ theme.label }
+            label={ theme.label }
+            value={ theme.hex }
+            bg={ theme.sampleBg }
+            isActive={ theme.hex === activeHex }
+            onClick={ handleSelect }
           />
-        ) : <Skeleton boxSize={ 5 } borderRadius="sm"/> }
-      </PopoverTrigger>
-      <PopoverContent overflowY="hidden" w="164px" fontSize="sm">
-        <PopoverBody boxShadow="2xl" p={ 3 }>
-          { COLOR_THEMES.map((theme) => <ColorModeSwitchTheme key={ theme.name } { ...theme } onClick={ handleSelect } activeHex={ activeHex }/>) }
-        </PopoverBody>
-      </PopoverContent>
-    </Popover>
+        )) }
+      </Flex>
+    </div>
   );
 };
 
-export default ColorModeSwitch;
+export default React.memo(SettingsColorTheme);

ui/snippets/topBar/settings/SettingsIdentIcon.tsx

+import { Box, Flex } from '@chakra-ui/react';
+import React from 'react';
+
+import config from 'configs/app';
+import * as cookies from 'lib/cookies';
+
+import SettingsSample from './SettingsSample';
+import { IDENTICONS } from './utils';
+
+const SettingsIdentIcon = () => {
+  const [ activeId, setActiveId ] = React.useState<string>();
+
+  React.useEffect(() => {
+    const initialId = cookies.get(cookies.NAMES.ADDRESS_IDENTICON_TYPE) || config.UI.views.address.identiconType;
+    setActiveId(initialId);
+  }, []);
+
+  const handleSelect = React.useCallback((event: React.MouseEvent<HTMLDivElement>) => {
+    event.stopPropagation();
+
+    const id = event.currentTarget.getAttribute('data-value');
+
+    if (!id) {
+      return;
+    }
+
+    cookies.set(cookies.NAMES.ADDRESS_IDENTICON_TYPE, id);
+    window.location.reload();
+  }, []);
+
+  const activeIdenticon = IDENTICONS.find((identicon) => identicon.id === activeId);
+
+  return (
+    <div>
+      <Box fontWeight={ 600 }>Address identicon</Box>
+      <Box color="text_secondary" mt={ 1 } mb={ 2 }>{ activeIdenticon?.label }</Box>
+      <Flex>
+        { IDENTICONS.map((identicon) => (
+          <SettingsSample
+            key={ identicon.id }
+            label={ identicon.label }
+            value={ identicon.id }
+            bg={ identicon.sampleBg }
+            isActive={ identicon.id === activeId }
+            onClick={ handleSelect }
+          />
+        )) }
+      </Flex>
+    </div>
+  );
+};
+
+export default React.memo(SettingsIdentIcon);

ui/snippets/topBar/settings/SettingsSample.tsx

+import {
+  Box,
+  Tooltip,
+  useColorModeValue,
+  useToken,
+} from '@chakra-ui/react';
+import React from 'react';
+
+interface Props {
+  onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+  isActive: boolean;
+  bg: string;
+  value: string;
+  label: string;
+}
+
+const TOOLTIP_OFFSET: [ number, number ] = [ 0, 10 ];
+
+const SettingsSample = ({ label, value, bg, onClick, isActive }: Props) => {
+  const bgColor = useColorModeValue('white', 'gray.900');
+  const activeBgColor = useColorModeValue('blue.50', 'whiteAlpha.100');
+
+  const activeBorderColor = useToken('colors', useColorModeValue('blackAlpha.800', 'gray.50'));
+  const hoverBorderColor = useToken('colors', 'link_hovered');
+
+  return (
+    <Box p="9px" bgColor={ isActive ? activeBgColor : 'transparent' } borderRadius="base">
+      <Tooltip label={ label } offset={ TOOLTIP_OFFSET }>
+        <Box
+          bg={ bg }
+          boxSize="22px"
+          borderRadius="full"
+          borderWidth="1px"
+          borderColor={ isActive ? activeBgColor : bgColor }
+          position="relative"
+          cursor="pointer"
+          _before={{
+            position: 'absolute',
+            display: 'block',
+            content: '""',
+            top: '-3px',
+            left: '-3px',
+            width: 'calc(100% + 2px)',
+            height: 'calc(100% + 2px)',
+            borderStyle: 'solid',
+            borderRadius: 'full',
+            borderWidth: '2px',
+            borderColor: isActive ? activeBorderColor : 'transparent',
+          }}
+          _hover={{
+            _before: {
+              borderColor: isActive ? activeBorderColor : hoverBorderColor,
+            },
+          }}
+          data-value={ value }
+          onClick={ onClick }
+        />
+      </Tooltip>
+    </Box>
+  );
+};
+
+export default React.memo(SettingsSample);

ui/snippets/topBar/settings/utils.ts

+import type { IdenticonType } from 'types/views/address';
+
+export const COLOR_THEMES = [
+  {
+    label: 'Light',
+    colorMode: 'light',
+    hex: '#FFFFFF',
+    sampleBg: 'linear-gradient(154deg, #EFEFEF 50%, rgba(255, 255, 255, 0.00) 330.86%)',
+  },
+  {
+    label: 'Dim',
+    colorMode: 'dark',
+    hex: '#232B37',
+    sampleBg: 'linear-gradient(152deg, #232B37 50%, rgba(255, 255, 255, 0.00) 290.71%)',
+  },
+  {
+    label: 'Midnight',
+    colorMode: 'dark',
+    hex: '#1B2E48',
+    sampleBg: 'linear-gradient(148deg, #1B3F71 50%, rgba(255, 255, 255, 0.00) 312.35%)',
+  },
+  {
+    label: 'Dark',
+    colorMode: 'dark',
+    hex: '#101112',
+    sampleBg: 'linear-gradient(161deg, #000 9.37%, #383838 92.52%)',
+  },
+];
+
+export type ColorTheme = typeof COLOR_THEMES[number];
+
+export const IDENTICONS: Array<{ label: string; id: IdenticonType; sampleBg: string }> = [
+  {
+    label: 'GitHub',
+    id: 'github',
+    sampleBg: 'url("/static/identicon_logos/github.png") center / contain no-repeat',
+  },
+  {
+    label: 'Metamask jazzicon',
+    id: 'jazzicon',
+    sampleBg: 'url("/static/identicon_logos/jazzicon.png") center / contain no-repeat',
+  },
+  {
+    label: 'Ethereum blockies',
+    id: 'blockie',
+    sampleBg: 'url("/static/identicon_logos/blockies.png") center / contain no-repeat',
+  },
+  {
+    label: 'Gradient avatar',
+    id: 'gradient_avatar',
+    sampleBg: 'url("/static/identicon_logos/gradient_avatar.png") center / contain no-repeat',
+  },
+];

ui/snippets/topBar/utils.ts

-import type { IconName } from 'ui/shared/IconSvg';
-
-export const COLOR_THEMES = [
-  {
-    name: 'Light',
-    colorMode: 'light',
-    icon: 'sun' as IconName,
-    colors: [
-      { hex: '#FFFFFF', sampleBg: 'linear-gradient(154deg, #EFEFEF 50%, rgba(255, 255, 255, 0.00) 330.86%)' },
-    ],
-  },
-  {
-    name: 'Dim',
-    colorMode: 'dark',
-    icon: 'moon-with-star' as IconName,
-    colors: [
-      { hex: '#232B37', sampleBg: 'linear-gradient(152deg, #232B37 50%, rgba(255, 255, 255, 0.00) 290.71%)' },
-      { hex: '#1B2E48', sampleBg: 'linear-gradient(150deg, #1B2E48 50%, rgba(255, 255, 255, 0.00) 312.75%)' },
-    ],
-  },
-  {
-    name: 'Dark',
-    colorMode: 'dark',
-    icon: 'moon' as IconName,
-    colors: [
-      { hex: '#101112', sampleBg: 'linear-gradient(161deg, #000 9.37%, #383838 92.52%)' },
-    ],
-  },
-];
-
-export type ColorTheme = typeof COLOR_THEMES[number];
-
-export type ColorThemeColor = ColorTheme['colors'][number];