diff --git a/services/web/frontend/js/features/settings/components/emails/downshift-input.tsx b/services/web/frontend/js/features/settings/components/emails/downshift-input.tsx index 247a89757d..ab032fe3a2 100644 --- a/services/web/frontend/js/features/settings/components/emails/downshift-input.tsx +++ b/services/web/frontend/js/features/settings/components/emails/downshift-input.tsx @@ -81,7 +81,7 @@ function Downshift({ ) } - const TickIcon = function () { + const tickIcon = function () { return isCiam ? : 'check' } @@ -116,7 +116,7 @@ function Downshift({ active: selectedItem === item, 'dropdown-item-highlighted': highlightedIndex === index, })} - trailingIcon={selectedItem === item ? : undefined} + trailingIcon={selectedItem === item ? tickIcon() : undefined} > {highlightMatchedCharacters(item, inputValue)} diff --git a/services/web/frontend/js/shared/components/select.tsx b/services/web/frontend/js/shared/components/select.tsx index e501ae82fb..34774811fe 100644 --- a/services/web/frontend/js/shared/components/select.tsx +++ b/services/web/frontend/js/shared/components/select.tsx @@ -152,7 +152,7 @@ export const Select = ({ value = defaultText } - const TickIcon = function () { + const tickIcon = function () { return isCiam ? : 'check' } @@ -183,9 +183,7 @@ export const Select = ({ })} active={selectedItem === item} trailingIcon={ - selectedIcon && selectedItem === item ? ( - - ) : undefined + selectedIcon && selectedItem === item ? tickIcon() : undefined } description={itemToSubtitle ? itemToSubtitle(item) : undefined} {...itemProps} diff --git a/services/web/frontend/stylesheets/ciam/ciam-layout.scss b/services/web/frontend/stylesheets/ciam/ciam-layout.scss index b0f88ba992..69109243eb 100644 --- a/services/web/frontend/stylesheets/ciam/ciam-layout.scss +++ b/services/web/frontend/stylesheets/ciam/ciam-layout.scss @@ -225,6 +225,10 @@ .dropdown-item { border-radius: var(--ds-border-radius-200); + + :has(.dropdown-item-trailing-icon) { + padding-right: calc(var(--ds-font-size-350) + var(--ds-spacing-200)); + } } // Allow dropdowns to be wider than the form container where necessary