diff --git a/components/raids/RaidCombobox/index.scss b/components/raids/RaidCombobox/index.scss index 87469f76..0ccd0de1 100644 --- a/components/raids/RaidCombobox/index.scss +++ b/components/raids/RaidCombobox/index.scss @@ -72,6 +72,26 @@ padding: $unit; width: 100%; + .Button { + background: none; + padding: ($unit * 0.75) $unit-half $unit-half; + display: none; + + &:hover svg { + fill: var(--text-primary); + } + + &.Visible { + display: block; + } + + svg { + fill: var(--text-tertiary); + width: $unit-2x; + height: $unit-2x; + } + } + .Controls { display: flex; gap: $unit; diff --git a/components/raids/RaidCombobox/index.tsx b/components/raids/RaidCombobox/index.tsx index 54209987..b52c649c 100644 --- a/components/raids/RaidCombobox/index.tsx +++ b/components/raids/RaidCombobox/index.tsx @@ -27,6 +27,7 @@ interface Props { import Button from '~components/common/Button' import ArrowIcon from '~public/icons/Arrow.svg' +import CrossIcon from '~public/icons/Cross.svg' import './index.scss' import classNames from 'classnames' @@ -130,6 +131,10 @@ const RaidCombobox = (props: Props) => { setOpen(!open) } + function clearSearch() { + setSearch('') + } + const linkClass = classNames({ wind: currentRaid && currentRaid.element == 1, fire: currentRaid && currentRaid.element == 2, @@ -261,12 +266,23 @@ const RaidCombobox = (props: Props) => { >
- +
+ +
0, + })} + onClick={clearSearch} + > + +
+
{!search ? (