diff --git a/packages/react/src/components/LocaleModal/__stories__/LocaleModal.stories.js b/packages/react/src/components/LocaleModal/__stories__/LocaleModal.stories.js index b9bae0272a6..a32571079e3 100644 --- a/packages/react/src/components/LocaleModal/__stories__/LocaleModal.stories.js +++ b/packages/react/src/components/LocaleModal/__stories__/LocaleModal.stories.js @@ -28,7 +28,7 @@ export const Default = ({ parameters }) => { const { useMockData } = parameters?.props?.LocaleModal ?? {}; return ( diff --git a/packages/styles/scss/components/locale-modal/_locale-modal.scss b/packages/styles/scss/components/locale-modal/_locale-modal.scss index 47e0453ea9f..a534d5e0ae3 100644 --- a/packages/styles/scss/components/locale-modal/_locale-modal.scss +++ b/packages/styles/scss/components/locale-modal/_locale-modal.scss @@ -110,17 +110,20 @@ align-items: center; .#{$prefix}--locale-modal__label-globe { + width: rem(20px); + height: rem(20px); margin-left: $spacing-02; } + .#{$prefix}--locale-modal__label-arrow { margin-right: $carbon--spacing-03; } - @include carbon--type-style('caption-01'); + @include carbon--type-style('body-short-02'); } .#{$prefix}--modal-header__heading { - @include carbon--type-style(expressive-heading-04, true); + @include carbon--type-style('expressive-heading-04', true); margin-top: $carbon--spacing-04; @@ -246,7 +249,7 @@ position: sticky; top: 0; background-color: $ui-background; - border-bottom: 1px solid $icon-02; + border-bottom: rem(1px) solid $ui-03; .#{$prefix}--search-input { background-color: $field-01; @@ -254,10 +257,10 @@ } .#{$prefix}--locale-modal__search-text { - padding: $carbon--spacing-05; + padding: $carbon--spacing-07 $carbon--spacing-05 $carbon--spacing-05; min-height: $carbon--spacing-09; - @include carbon--type-style(heading-02); + @include carbon--type-style('label-02'); } .#{$prefix}--locale-modal__list {