[DEV-10065] Map UX improvements (#1819)

* Map territory and annotation box UX improvements * Use bootstrap for padding * Change territory label class
CDCgov · Jan 8, 2025 · 2d3a9a9 · 2d3a9a9
1 parent c4669a3
commit 2d3a9a9
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 9 deletions.
diff --git a/packages/chart/src/components/Annotations/components/AnnotationDropdown.tsx b/packages/chart/src/components/Annotations/components/AnnotationDropdown.tsx
@@ -21,7 +21,7 @@ const AnnotationDropdown = () => {
   }
 
   const handleAccordionClassName = () => {
-    const classNames = ['data-table-heading', 'annotation__dropdown-list']
+    const classNames = ['data-table-heading', 'annotation__dropdown-list', 'p-3']
     if (!expanded) {
       classNames.push('collapsed')
     }

diff --git a/packages/map/src/components/Annotation/AnnotationDropdown.tsx b/packages/map/src/components/Annotation/AnnotationDropdown.tsx
@@ -21,7 +21,7 @@ const AnnotationDropdown = () => {
   }
 
   const handleAccordionClassName = () => {
-    const classNames = ['data-table-heading', 'annotation__dropdown-list']
+    const classNames = ['data-table-heading', 'annotation__dropdown-list', 'p-3']
     if (!expanded) {
       classNames.push('collapsed')
     }

diff --git a/packages/map/src/components/UsaMap/components/TerritoriesSection.tsx b/packages/map/src/components/UsaMap/components/TerritoriesSection.tsx
@@ -36,13 +36,13 @@ const TerritoriesSection: React.FC<TerritoriesSectionProps> = ({ territories, lo
           <div>
             {usTerritories.length > 0 && (
               <>
-                <h5>US Territories:</h5>
+                <h5 className='territories-label'>U.S. Territories</h5>
                 <span className='mt-1 mb-2 d-flex flex-wrap territories'>{usTerritories}</span>
               </>
             )}
             {freelyAssociatedStates.length > 0 && (
               <>
-                <h5>Freely Associated States:</h5>
+                <h5 className='territories-label'>Freely Associated States</h5>
                 <span className='mt-1 mb-2 d-flex flex-wrap territories'>{freelyAssociatedStates}</span>
               </>
             )}

diff --git a/packages/map/src/scss/map.scss b/packages/map/src/scss/map.scss
@@ -102,10 +102,7 @@ $medium: 768px;
 }
 
 .territories-label {
-  color: black;
-  font-size: 1.1em;
-  display: block;
-  margin-top: 15px;
+  font-size: 1em;
 }
 
 // Cities and Territories
@@ -194,7 +191,6 @@ $medium: 768px;
     transform: none;
   }
   .territories {
-    font-size: 1em;
     > span {
       margin-left: 0;
     }