fix(locale-modal): update expressive theme styles (#7078)

### Related Ticket(s)

#6265

### Description

This PR updates the locale modal styles to match the updated expressive theme spec 

![image](https://user-images.githubusercontent.com/8265238/132409303-d3cbf1e7-8f61-4279-8024-803a1d5353fe.png)

![image](https://user-images.githubusercontent.com/8265238/132409330-2687f25a-d39f-4947-a637-66c993db973c.png)

Confirm that the React and web component locale modals match the expressive component spec

### Changelog

**Changed**

- locale modal styles
- story formatting

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "package: styles": Carbon Expressive -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->

packages/react/src/components/LocaleModal/__stories__/LocaleModal.stories.js

@@ -28,7 +28,7 @@ export const Default = ({ parameters }) => {
   const { useMockData } = parameters?.props?.LocaleModal ?? {};
   return (
     <LocaleModal
-      isOpen={true}
+      isOpen
       localeData={useMockData ? localeData : null}
       localeDisplay={useMockData ? 'United States - English' : null}
     />

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,18 +249,18 @@
     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;
     }
   }
 
   .#{$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 {