VOTE-594: fix broken nvrf styling (#958)

assets/styles/component/alert.scss

@@ -1,46 +1,43 @@
 @use 'uswds-core' as *;
 @use '../mixins' as *;
 
-.usa-alert {
-  padding: 0;
-  margin-top: 0;
-  border-left: 0.5rem solid #00bde3;
-}
+.sitewide-alert, .page-alert {
+  .usa-alert {
+    padding: 0;
+    margin-top: 0;
+    border-left: 0.5rem solid #00bde3;
+  }
 
-[dir="rtl"] .usa-alert {
-  border-right: 0.5rem solid #00bde3;
-  border-left: 0;
-}
+  [dir="rtl"] .usa-alert {
+    border-right: 0.5rem solid #00bde3;
+    border-left: 0;
+  }
 
-.usa-alert--info:before {
-  display: none;
-}
+  .usa-alert--info:before {
+    display: none;
+  }
 
-.usa-alert--info {
-  background-image: unset;
-  background-color: #e7f6f8;
-  border: 0;
-}
+  .usa-alert--info {
+    background-image: unset;
+    background-color: #e7f6f8;
+    border: 0;
+  }
 
-[dir="rtl"] .usa-alert--info {
-  .grid-container {
-    background-position: calc(100% - 1rem) 1rem;
+  [dir="rtl"] .usa-alert--info {
+    .grid-container {
+      background-position: calc(100% - 1rem) 1rem;
 
-    @include at-media('tablet') {
-      background-position: calc(100% - 1rem) 0.3rem;
+      @include at-media('tablet') {
+        background-position: calc(100% - 1rem) 0.3rem;
+      }
     }
   }
-}
-
-.usa-alert--info .usa-alert__body {
-  padding-left: 2.5rem;
 
-  &:before {
-    left: -0.5rem;
-  }
-}
+  .usa-alert--info .usa-alert__body {
+    padding-left: 2.5rem;
 
-.usa-alert__text:only-child {
-  margin-bottom: 0.5rem;
-  padding: 0.75rem 0 0.25rem;
+    &:before {
+      left: -0.5rem;
+    }
+  } 
 }

assets/styles/component/buttons.scss

@@ -12,6 +12,14 @@
     margin-top: 1rem;
     margin-bottom: 3rem;
   }
+
+  &.usa-button--outline,
+  &.usa-button--outline:hover,
+  &.usa-button--outline:focus {
+    background-color: transparent;
+    color: $color-blue-dark;
+    box-shadow: inset 0 0 0 2px $color-blue-dark;
+  }
 }
 
 .usa-button:hover,

assets/styles/nvrf.scss

@@ -14,10 +14,6 @@
     color: #b50909;
   }
 
-  .back-button {
-    background-color: transparent;
-  }
-
   .divider-grey {
     display: inline-block;
     height: 1px;
@@ -29,23 +25,6 @@
     color: unset;
   }
 
-  .link-button-outline {
-    background-color: rgba(0,0,0,0);
-    box-shadow: inset 0 0 0 2px #11385B;
-    color: #11385B;
-    text-decoration: none;
-  }
-
-  .link-button-outline:hover {
-    color: white !important;
-    background-color: #11385B;
-  }
-
-  .link-button-filled {
-    color: white !important;
-    text-decoration: none;
-  }
-
   /* Form */
   @media only screen and (min-width: 640px) {
     .bottom {

layouts/partials/alert-notification.html

@@ -1,8 +1,10 @@
-<div class="usa-alert usa-alert--warning">
-  <div class="usa-alert__body">
-    <h4 class="usa-alert__heading">This page is currently being updated.</h4>
-    <p class="usa-alert__text">
-      <a href="/">Please refer to the English translation page</a> for the most updated voting information.
-    </p>
+<div class="page-alert">
+  <div class="usa-alert usa-alert--warning">
+    <div class="usa-alert__body">
+      <h4 class="usa-alert__heading">This page is currently being updated.</h4>
+      <p class="usa-alert__text">
+        <a href="/">Please refer to the English translation page</a> for the most updated voting information.
+      </p>
+    </div>
   </div>
-</div>
+</div>

layouts/partials/header.html

@@ -62,14 +62,16 @@
   </section>
 
   {{ if .Site.Params.sitewide_alert }}
-  <div class="usa-alert usa-alert--info">
-    <div class="grid-container">
-      <div class="usa-alert__body">
-        <p class="usa-alert__text">
-          {{ replace $translation.register.alert_state__alert_after_election "%link%" (partial "links/state-alert-link.html" .)|safeHTML }}
-        </p>
+  <div class="sitewide-alert">
+    <div class="usa-alert usa-alert--info">
+      <div class="grid-container">
+        <div class="usa-alert__body">
+          <p class="usa-alert__text">
+            {{ replace $translation.register.alert_state__alert_after_election "%link%" (partial "links/state-alert-link.html" .)|safeHTML }}
+          </p>
+        </div>
       </div>
-    </div>
+    </div>   
   </div>
   {{ end }}