Tweak to work with background color change introduced in uswds/uswds#…

…4199
18F · Aug 17, 2021 · 5d1406e · 5d1406e
1 parent 4de7447
commit 5d1406e
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 7 deletions.
diff --git a/src/web/src/browser/views/components/ValidatorPage.tsx b/src/web/src/browser/views/components/ValidatorPage.tsx
@@ -122,7 +122,10 @@ export const ValidatorPage = () => {
               </div>
               <div className="usa-radio">
                 {schematron.filterOptions.roles.map((filterRole, index) => (
-                  <div key={index}>
+                  <div
+                    key={index}
+                    className={`bg-${colorTokenForRole(filterRole)}-lighter`}
+                  >
                     <input
                       className="usa-radio__input usa-radio__input--tile"
                       id={`role-${filterRole}`}
@@ -135,9 +138,7 @@ export const ValidatorPage = () => {
                       }
                     />
                     <label
-                      className={`usa-radio__label bg-${colorTokenForRole(
-                        filterRole,
-                      )}-lighter`}
+                      className="usa-radio__label"
                       htmlFor={`role-${filterRole}`}
                     >
                       <svg

diff --git a/src/web/src/browser/views/index.scss b/src/web/src/browser/views/index.scss
@@ -43,16 +43,13 @@ $theme-header-max-width: 'widescreen';
 }
 
 .bg-error-lighter {
-  //background-color: color('error-lighter');
   @include checkbox-and-radio-colors('error-lighter');
 }
 
 .bg-warning-lighter {
-  //background-color: color('warning-lighter');
   @include checkbox-and-radio-colors('warning-lighter');
 }
 
 .bg-info-lighter {
-  //background-color: color('info-lighter');
   @include checkbox-and-radio-colors('info-lighter');
 }