update styling for indicator values

- refactor disadvantaged blue dot to utils.scss

client/src/components/DisadvantageDot/DisadvantageDot.module.scss

@@ -1,4 +1,5 @@
 @use '../../styles/design-system.scss' as *;
+@import "../utils.scss";
 
 .disadvantagedDotSmall {
     @include u-circle('105');
@@ -12,7 +13,7 @@
     @include u-circle(4);
     margin: 2.3rem 1.5rem 2rem 0;
     // opacity: .6;
-    border: 3px solid #1A4480;
+    border: 3px solid $disadvantagedDotColor;
     
     //Maintain aspect ratio as screen width decreases
     flex: 1 0 2rem;

client/src/components/Indicator/Indicator.module.scss

@@ -1,6 +1,11 @@
 @use '../../styles/design-system.scss' as *;
 @import "../utils.scss";
 
+@mixin indicatorPadding {
+  @include u-padding-left(1);
+  @include u-padding-right(1);
+}
+
 @mixin indicator {
   display: flex;
   flex-direction: column;
@@ -46,8 +51,14 @@
         align-self: end;
 
         .indicatorValue {
-          margin-left: 2.2rem;
-        } 
+          @include indicatorPadding();
+        }
+        
+        .disIndicatorValue {
+          @include indicatorPadding();
+          color: white;
+          background-color: $disadvantagedDotColor;
+        }
 
         .indicatorArrow {
           margin-bottom: -.375rem;
@@ -82,30 +93,3 @@
 .indicatorBoxMain {
   @include indicator;
 }
-
-.disadvantagedIndicator {
-  @include indicator;
-  @include u-bg('blue-warm-10');
-
-  // A darker bg color:
-  // background-color: #D2DAE3;
-
-  // Add a border
-  // border: 1px solid #1A4480;
-
-  margin: 0 -20px 1px -20px;
-  @include u-padding-left(2.5);
-  @include u-padding-right(2.5);
-
-
-  // Overwrite indicator mixin with bolder fonts for disadv. indicator 
-  .indicatorRow {
-    .indicatorName {
-      @include u-text('bold'); 
-      
-      .indicatorDesc {
-        @include u-text('normal'); 
-      }
-    }
-  }
-}

client/src/components/Indicator/Indicator.module.scss.d.ts

@@ -7,6 +7,7 @@ declare namespace IndicatorNamespace {
       indicatorValueCol:string;
       indicatorValueRow:string;
       indicatorValue:string;
+      disIndicatorValue:string;
       indicatorSuperscript:string;
       indicatorArrow:string;
       unavailable:string;

client/src/components/Indicator/Indicator.tsx

@@ -212,7 +212,7 @@ const Indicator = ({indicator}:IIndicator) => {
 
   return (
     <li
-      className={indicator.isDisadvagtaged ? styles.disadvantagedIndicator : styles.indicatorBoxMain}
+      className={styles.indicatorBoxMain}
       data-cy={'indicatorBox'}
       data-testid='indicator-box'>
       <div className={styles.indicatorRow}>
@@ -230,7 +230,9 @@ const Indicator = ({indicator}:IIndicator) => {
           <div className={styles.indicatorValueRow}>
 
             {/* Indicator value */}
-            <div className={styles.indicatorValue}>
+            <div className={indicator.isDisadvagtaged ?
+              styles.disIndicatorValue : styles.indicatorValue}
+            >
               <IndicatorValue
                 type={indicator.type}
                 displayStat={displayStat}

client/src/components/utils.scss

@@ -6,10 +6,10 @@
 */
 
 //Styles associated with the side panel
-$sidePanelBorderColor: #f2f2f2;
+$sidePanelBorderColor: #F2F2F2;
 $sidePanelBorder: 2px solid $sidePanelBorderColor;
 $mobileBreakpoint: 400px; // Todo replace with USWDS breakpoint
-
+$disadvantagedDotColor: #1A4480;
 $additionalCardsBGColor: #FAFAFA;
 $sidePanelLabelFontColor: #171716;
 
@@ -21,6 +21,6 @@ $sidePanelLabelFontColor: #171716;
   
 
 //Styles with Dataset container
-$datasetContainerColor: #eef6fb;
-$headingFontColor: #122e51;
-$j40AlertWarningColor: #faf3d1;
+$datasetContainerColor: #EEF6FB;
+$headingFontColor: #122E51;
+$j40AlertWarningColor: #FAF3D1;