Merge pull request #255 from MITLibraries/use-82

[USE-82] Update search form to match new design style

Author: djanelle-mit

app/assets/stylesheets/partials/_effects.scss

@@ -19,11 +19,13 @@
 @mixin set-focus-outline-dark() {
     *:focus-visible {
         outline: 2px solid $color-focus-dark;
+        outline-offset: 2px;
     }
 }
 
 @mixin set-focus-outline() {
     *:focus-visible {
         outline: 2px solid $color-focus;
+        outline-offset: 2px;
     }
 }

app/assets/stylesheets/partials/_header.scss

@@ -39,11 +39,12 @@
     .wrapper {
         background: url("https://cdn.mitlibrary.net/files/branding/local/vi-shape7-tp.svg") no-repeat -48px -250px;
         padding-top: 32px;
-        padding-bottom: 32px;
+        padding-bottom: 0;
     }
 
     .navigation-bar {
         display: flex;
+        padding-bottom: 32px;
 
         > h1 {
             display: flex;

app/assets/stylesheets/partials/_search.scss

@@ -2,6 +2,61 @@
 // #SEARCH BITS
 // ------------------------
 
+/* New USE UI search styles */
+#search-form {
+  margin: 0;
+  padding-bottom: 24px;
+
+  h3 {
+    font-size: 1.8rem;
+    margin-bottom: 12px;
+  }
+
+  .form-wrapper {
+    display: flex;
+    gap: 8px;
+
+    input, button {
+      padding: 12px 20px;
+      border-radius: 0;
+      font-size: 1.8rem;
+      font-weight: $fw-medium;
+
+      margin: 0;
+
+      &:hover:not(:focus) {
+        outline: 2px solid $color-gray-700;
+        outline-offset: 2px;
+      }
+    }
+
+    input {
+      flex-grow: 1;
+      color: $color-black;
+      border: none;
+    } 
+    
+    button {
+      background-color: $color-red-600;
+      border: none;
+    }
+
+  }
+
+  .form-links {
+    padding-top: 12px;
+
+    a {
+      color: $color-white;
+      text-decoration: none;
+      border-bottom: 1px solid $color-red-500;
+      font-size: 1.4rem;
+    }
+
+  }
+
+}
+
 /* basic search bar */
 .search-form {
   background-color: #989898;

app/views/search/_form.html.erb

@@ -1,13 +1,8 @@
-<form id="search-form" class="form-horizontal search-form" action="<%= results_path %>" method="get" role="search">
-  <div class="form-group">
-    <input id="basic-search-main" type="search"
-           class="field field-text basic-search-input" name="q"
-           title="Keyword anywhere" placeholder="Enter your search"
-           value="<%= params[:q] %>" required>
-
-    <div class="basic-search-submit">
-      <button type="submit" class="btn button-primary">Search</button>
-    </div>
+<form id="search-form" action="<%= results_path %>" method="get" role="search">
+  <h3>What can we help you find?</h3>
+  <div class="form-wrapper">
+    <input id="basic-search-main" type="search" class="field field-text basic-search-input" name="q" title="Keyword anywhere" placeholder="Search for anything" value="<%= params[:q] %>" required>
+    <button type="submit" class="btn button-primary">Search</button>
   </div>
 </form>