diff --git a/src/components/DropdownSelector/DropdownSelector.tsx b/src/components/DropdownSelector/DropdownSelector.tsx index bd474637..8c1b8cf6 100644 --- a/src/components/DropdownSelector/DropdownSelector.tsx +++ b/src/components/DropdownSelector/DropdownSelector.tsx @@ -28,7 +28,8 @@ import { useArrowKeys, useEnterKey, useEscapeKey } from "../../global/hooks"; import SelectorContainer from "../../global/SelectorContainer"; import Box from "../Box/Box"; import { lightV2 } from "../../global/themes"; -import { overridePropsParse } from "../../global/utils"; +import {overridePropsParse, radioVariants} from "../../global/utils"; +import {themeColors, themeShadows} from "../../global/themeColors"; const DropdownBlock = styled.div( ({ theme, sx, useAnchorWidth, forSelectInput }) => ({ @@ -45,12 +46,11 @@ const DropdownBlock = styled.div( minWidth: useAnchorWidth ? 160 : 0, overflowX: "hidden", overflowY: "auto", - borderRadius: forSelectInput ? 16 : 12, + borderRadius: radioVariants.borderRadiusSM, border: forSelectInput ? 0 : `1px solid ${get(theme, "dropdownSelector.border", lightV2.disabledGrey)}`, - boxShadow: - "0px 2px 8px 0px rgba(156, 163, 175, 0.15), 0px 4px 12px 0px rgba(156, 163, 175, 0.25)", + boxShadow: themeShadows["boxShadow-03"], "& ul": { padding: 0, margin: 0, @@ -84,7 +84,7 @@ const DropdownItem = styled.div< color: get(theme, "dropdownSelector.optionTextColor", "#000"), padding: "6px 10px", fontSize: 14, - fontWeight: 600, + fontWeight: 400, lineHeight: "18px", letterSpacing: "0.16px", userSelect: "none", @@ -92,7 +92,7 @@ const DropdownItem = styled.div< justifyContent: "flex-start", gap: 10, whiteSpace: "nowrap", - borderRadius: 6, + borderRadius: radioVariants.borderRadiusSM, display: "grid", gridTemplateColumns: gridColumns, "& svg": { @@ -122,6 +122,13 @@ const DropdownItem = styled.div< color: get(theme, "dropdownSelector.disabledText", "#E6EBEB"), }, }, + "&.danger:not(.disabled)": { + color: get(theme, "dropdownSelector.dangerText", themeColors["Color/Brand/Error/colorPrimaryText"].lightMode), + "&:hover": { + backgroundColor: get(theme, "dropdownSelector.dangerHoverBG", themeColors["Color/Brand/Error/colorPrimaryBgHover"].lightMode), + color: get(theme, "dropdownSelector.dangerHoverText", themeColors["Color/Brand/Error/colorPrimaryTextHover"].lightMode), + }, + }, "&.hovered:not(.disabled)": { backgroundColor: get(theme, "dropdownSelector.hoverBG", "#E6EAEB"), color: get(theme, "dropdownSelector.hoverText", "#000"), @@ -265,7 +272,7 @@ const DropdownSelector: FC = ({ selectedOption === option.value ? "selected" : "" } ${option.disabled ? "disabled" : ""} ${ index === indexHover ? "hovered" : "" - }`} + } ${option.danger ? "danger" : ""}`} onClick={selectOption} onMouseOver={() => { setIndexHover(index); diff --git a/src/components/Select/Select.uikit.stories.tsx b/src/components/Select/Select.uikit.stories.tsx index b4384336..cdfc9641 100644 --- a/src/components/Select/Select.uikit.stories.tsx +++ b/src/components/Select/Select.uikit.stories.tsx @@ -44,6 +44,11 @@ let useOpts: SelectOption[] = [ value: "value4", disabled: true, }, + { + label: "Danger Option", + value: "value5", + danger: true, + } ]; let useIconOpts: SelectOption[] = [ { label: "Option 1", value: "value1", icon: }, diff --git a/src/global/global.types.ts b/src/global/global.types.ts index d93fff83..33beb5e4 100644 --- a/src/global/global.types.ts +++ b/src/global/global.types.ts @@ -224,6 +224,9 @@ export interface DropdownSelectorThemeProps { hoverBG: string; disabledText: string; border?: string; + dangerText: string; + dangerHoverBG: string; + dangerHoverText: string; } export interface ReadBoxThemeProps { @@ -539,6 +542,7 @@ export interface SelectOption { disabled?: boolean; subLabel?: string; description?: string; + danger?: boolean; } export interface IBytesCalc { diff --git a/src/global/themeColors.ts b/src/global/themeColors.ts index 6889095d..727a4e14 100644 --- a/src/global/themeColors.ts +++ b/src/global/themeColors.ts @@ -823,7 +823,7 @@ export const themeShadows = { "boxShadow-02": "0px 1px 2px 0px rgba(0, 0, 0, 0.08), 0px 1px 6px -1px rgba(0, 0, 0, 0.07), 0px 2px 4px 0px rgba(0, 0, 0, 0.07)", "boxShadow-03": - "0 1px 2px 0 rgba(0, 0, 0, 0.8), 0 4px 12px 0 rgba(0, 0, 0, 0.15), 0 2px 4px 0 rgba(0, 0, 0, 0.7)", + "0px 1px 2px 0px rgba(0, 0, 0, 0.08), 0px 4px 12px -1px rgba(0, 0, 0, 0.15), 0px 2px 4px 0px rgba(0, 0, 0, 0.07);", "boxShadow-04": "0px 4px 8px 0px rgba(0, 0, 0, 0.10), 0px 6px 12px 0px rgba(0, 0, 0, 0.10), 0px 6px 16px 0px rgba(0, 0, 0, 0.10)", "focusStyle-Light": "0px 0px 0px 2px rgba(43, 100, 229, 0.30)", diff --git a/src/global/themes.ts b/src/global/themes.ts index 89ad6595..3115f87b 100644 --- a/src/global/themes.ts +++ b/src/global/themes.ts @@ -810,7 +810,7 @@ export const lightTheme: ThemeDefinitionProps = { }, dropdownSelector: { hoverText: themeColors["Color/Neutral/Text/colorTextHeading"].lightMode, - backgroundColor: "transparent", + backgroundColor: themeColors["Color/Neutral/Bg/colorBgContainer"].lightMode, hoverBG: themeColors["Color/Brand/Control/colorBgHover"].lightMode, selectedBGColor: themeColors["Color/Brand/Control/colorBgActive"].lightMode, selectedTextColor: @@ -819,6 +819,9 @@ export const lightTheme: ThemeDefinitionProps = { themeColors["Color/Neutral/Text/colorTextHeading"].lightMode, disabledText: themeColors["Color/Neutral/Text/colorTextDisabled"].lightMode, border: themeColors["Color/Neutral/Border/colorBorderMinimal"].lightMode, + dangerText: themeColors["Color/Brand/Error/colorPrimaryText"].lightMode, + dangerHoverBG: themeColors["Color/Brand/Error/colorPrimaryBgHover"].lightMode, + dangerHoverText: themeColors["Color/Brand/Error/colorPrimaryTextHover"].lightMode, }, readBox: { borderColor: lightV2.borderColor, @@ -1694,6 +1697,9 @@ export const darkTheme: ThemeDefinitionProps = { themeColors["Color/Neutral/Text/colorTextHeading"].darkMode, disabledText: themeColors["Color/Neutral/Text/colorTextDisabled"].darkMode, border: themeColors["Color/Neutral/Border/colorBorderMinimal"].darkMode, + dangerText: themeColors["Color/Brand/Error/colorPrimaryText"].darkMode, + dangerHoverBG: themeColors["Color/Brand/Error/colorPrimaryBgHover"].darkMode, + dangerHoverText: themeColors["Color/Brand/Error/colorPrimaryTextHover"].darkMode, }, readBox: { borderColor: darkColors.headerBorder,