diff --git a/components/src/atoms/buttons/EmptySelectorButton.tsx b/components/src/atoms/buttons/EmptySelectorButton.tsx index 42e8822fc35..019479648f4 100644 --- a/components/src/atoms/buttons/EmptySelectorButton.tsx +++ b/components/src/atoms/buttons/EmptySelectorButton.tsx @@ -1,6 +1,8 @@ import styled from 'styled-components' import { Flex } from '../../primitives' import { + BORDERS, + COLORS, CURSOR_DEFAULT, CURSOR_POINTER, Icon, @@ -11,17 +13,7 @@ import { ALIGN_CENTER, FLEX_MAX_CONTENT, } from '../../index' -import { - black90, - blue30, - blue50, - grey30, - grey40, - white, -} from '../../helix-design-system/colors' -import { borderRadius8 } from '../../helix-design-system/borders' import type { IconName } from '../../index' - interface EmptySelectorButtonProps { onClick: () => void text: string @@ -41,10 +33,9 @@ export function EmptySelectorButton( ` border: none; width: ${FLEX_MAX_CONTENT}; height: ${FLEX_MAX_CONTENT}; - cursor: ${({ disabled }) => (disabled ? CURSOR_DEFAULT : CURSOR_POINTER)}; + cursor: ${CURSOR_POINTER}; + background-color: ${COLORS.blue30}; + border-radius: ${BORDERS.borderRadius8}; + &:focus-visible { - outline: 2px solid ${white}; - box-shadow: 0 0 0 4px ${blue50}; - border-radius: ${borderRadius8}; + outline: 2px solid ${COLORS.white}; + box-shadow: 0 0 0 4px ${COLORS.blue50}; + border-radius: ${BORDERS.borderRadius8}; + } + &:hover { + background-color: ${COLORS.blue35}; + } + &:disabled { + background-color: ${COLORS.grey20}; + cursor: ${CURSOR_DEFAULT}; } `