update spacing and remove search header text

ds_judgements_public_ui/sass/includes/_basic_search_form.scss

@@ -3,33 +3,40 @@
 
   &__container {
     @include container;
-    text-align: center;
+
     padding: $space-8;
+    text-align: center;
   }
 
   &__container-beta {
     @include container;
-    text-align: center;
+
     padding: $space-8;
+    text-align: center;
+
     @media (max-width: $grid-breakpoint-medium) {
       padding: $space-3;
     }
+
     @media (max-width: $grid-breakpoint-large) {
       padding: $space-3;
     }
+
     @media (max-width: $grid-breakpoint-extra-large) {
       padding: $space-3;
     }
   }
 
   &__header {
-    font-size: $typography-md-text-size;
-    line-height: 2.8rem;
     display: inline-block;
+
+    margin: 0 $space-6;
+
     font-family: $font-roboto;
+    font-size: $typography-md-text-size;
     font-weight: $typography-normal-font-weight;
+    line-height: 2.8rem;
     color: $color-almost-black;
-    margin: 0 $space-6;
 
     &--sr-only {
       @include sr-only;
@@ -40,25 +47,29 @@
     margin-top: $space-2;
 
     a {
-      color: $color-black;
-      text-decoration: none;
-      border: 0;
-      font-size: $typography-md-text-size;
       position: relative;
-      padding: 0 0 $space-2;
-      border-bottom: 0.125rem solid $color-black;
+
       display: inline-block;
-      background: transparent;
+
+      padding: 0 0 $space-2;
+
       font-family: $font-roboto;
+      font-size: $typography-md-text-size;
       font-weight: $typography-bold-font-weight;
+      color: $color-black;
+      text-decoration: none;
+
+      background: transparent;
+      border: 0;
+      border-bottom: 0.125rem solid $color-black;
 
       &:visited {
         color: $color-black;
       }
 
       &:hover {
-        text-decoration: underline;
         color: $color-black;
+        text-decoration: underline;
       }
     }
   }
@@ -67,27 +78,32 @@
     line-height: $typography-sm-line-height;
 
     a {
-      color: $color-dark-blue;
-      text-decoration: none;
-      border: 0;
-      font-size: $typography-md-text-size;
       position: relative;
-      border-bottom: 1px solid $color-dark-blue;
+
       display: inline-block;
-      background: transparent;
+
+      margin-bottom: $space-3;
+
       font-family: $font-roboto;
+      font-size: $typography-md-text-size;
       font-weight: bold;
-      margin-bottom: $space-3;
+      color: $color-dark-blue;
+      text-decoration: none;
+
+      background: transparent;
+      border: 0;
+      border-bottom: 1px solid $color-dark-blue;
 
       &:visited {
         color: $color-dark-blue;
       }
 
       &:hover {
-        text-decoration: underline;
         color: $color-black;
+        text-decoration: underline;
       }
     }
+
     @media (max-width: $grid-breakpoint-medium) {
       margin-top: 0.125rem;
       text-align: center;
@@ -111,17 +127,14 @@
   width: 100%;
   margin: 0 auto;
 
-  @media (max-width: $grid-breakpoint-medium) {
-    flex-direction: column;
-    width: 100%;
-  }
-
   input[type="submit"] {
     @include call-to-action-button;
-    // The 1px is the border offset of the input this is next to
-    padding: calc($space-3 + 1px) $space-12;
+
     margin-top: $space-2;
     margin-bottom: $space-8;
+
+    // The 1px is the border offset of the input this is next to
+    padding: calc($space-3 + 1px) $space-12;
     border: 2px solid transparent;
 
     .structured-search__container & {
@@ -143,17 +156,19 @@
 
   &__search-term-input {
     @include text_field;
+
+    box-sizing: border-box;
     width: 100% !important;
     min-height: $space-12;
-    font-size: $typography-md-text-size;
     margin-bottom: 0;
-    box-sizing: border-box;
+
+    font-size: $typography-md-text-size;
   }
 
   &__help-text {
-    text-align: left;
     margin: $space-2 $space-4 0 $space-4;
     font-size: $typography-sm-text-size;
+    text-align: left;
 
     @media (min-width: $grid-breakpoint-medium) {
       margin: $space-1 0 $space-2 0;
@@ -163,27 +178,35 @@
   &__header-beta {
     display: flex;
     flex-direction: column;
-    text-align: left;
     margin-left: 12.5rem;
+    text-align: left;
+
     @media (max-width: $grid-breakpoint-medium) {
       display: block;
-      text-align: center;
       margin: 0;
+      text-align: center;
     }
+
     @media (max-width: $grid-breakpoint-large) {
       display: block;
-      text-align: center;
       margin: 0;
+      text-align: center;
     }
+
     @media (max-width: $grid-breakpoint-extra-large) {
       display: block;
-      text-align: center;
       margin: 0;
+      text-align: center;
     }
   }
 
   &__main-label {
-    text-align: left;
     margin: $space-1 0 $space-2 0;
+    text-align: left;
+  }
+
+  @media (max-width: $grid-breakpoint-medium) {
+    flex-direction: column;
+    width: 100%;
   }
 }

ds_judgements_public_ui/sass/includes/_header.scss

@@ -13,14 +13,14 @@
 
   &__flex-container-beta {
     display: flex;
-    justify-content: space-between;
     gap: $space-18;
+    justify-content: space-between;
 
     @media only screen and (max-width: $grid-breakpoint-medium) {
       flex-direction: column;
-      text-align: left;
       gap: 0;
       padding-bottom: 0;
+      text-align: left;
     }
   }
 
@@ -29,23 +29,25 @@
     height: 100px;
     margin-top: $space-1;
     margin-bottom: $space-1;
+
     @media only screen and (max-width: $grid-breakpoint-medium) {
       margin-right: 11rem;
     }
   }
 
   &__site-logo a {
-    color: $color-white;
     font-size: $typography-xl-text-size;
+    color: $color-white;
     text-decoration: none;
+
     &:visited {
       color: $color-white;
     }
 
     &:focus {
+      z-index: 999;
       outline: 5px solid $color-white;
       outline-offset: 5px;
-      z-index: 999;
     }
   }
 
@@ -66,20 +68,20 @@
   }
 
   &__logo-block {
+    margin-top: $space-16;
     font-size: $typography-sm-text-size;
     color: $color-white;
     text-align: right;
-    margin-top: $space-16;
 
     a:focus {
       outline-color: $color-white;
       outline-offset: 0;
     }
 
     @media only screen and (max-width: $grid-breakpoint-medium) {
-      text-align: center;
-      padding-bottom: 0;
       margin-top: $space-2;
+      padding-bottom: 0;
+      text-align: center;
     }
   }
 

ds_judgements_public_ui/sass/includes/_variables.scss

@@ -16,7 +16,6 @@ $space-16: 4rem;
 $space-17: 5rem;
 $space-18: 6rem;
 $gutter_unit: 25px;
-
 $grid-breakpoint-small: 576px;
 $grid-breakpoint-medium: 768px;
 $grid-breakpoint-large: 992px;
@@ -28,14 +27,12 @@ $font-open-sans: "Open Sans", sans-serif;
 $font-serif: serif;
 $typography-display-font-family: $font-roboto;
 $typography-body-font-family: $font-open-sans;
-
 $typography-xs-text-size: 0.7rem;
 $typography-sm-text-size: 0.9rem;
 $typography-md-text-size: 1.1rem;
 $typography-lg-text-size: 1.3rem;
 $typography-xl-text-size: 2rem;
 $typography-2xl-text-size: 2.4rem;
-
 $typography-base-line-height: 1.2;
 $typography-xs-line-height: 0.8;
 $typography-sm-line-height: 1;
@@ -44,7 +41,6 @@ $typography-lg-line-height: 1.5;
 $typography-xl-line-height: 1.8;
 $typography-2xl-line-height: 2;
 $typography-3xl-line-height: 2.6;
-
 $typography-normal-font-weight: 400;
 $typography-bold-font-weight: 700;
 
@@ -89,7 +85,6 @@ $fa_circle_xmark_solid_link_hover_blue: "#{$fa_path}circle-xmark-solid-link-hove
 $fa_circle_xmark_light: "#{$fa_path}circle-xmark-light.svg";
 $fa_xmark_solid: "#{$fa_path}xmark-solid.svg";
 $fa_magnifying_glass_solid_white: "#{$fa_path}magnifying-glass-solid-white.svg";
-
 $fa_download: "#{$fa_path}download.svg";
 $arrow-left: "/static/images/arrow-left.svg";
 $arrow-right: "/static/images/arrow-right.svg";