Auto merge of #4359 - Turbo87:search-input, r=locks

Improve search bar styling

This moves the search icon to the submit button, and makes that submit button visible and clickable to the user. It also replaces the search icon PNG with an SVG.

## Before
<img width="993" alt="Bildschirmfoto 2021-12-24 um 11 34 12" src="https://user-images.githubusercontent.com/141300/147345385-ad511911-ab44-4758-a0db-ee9b91818ed9.png">

## After
<img width="994" alt="Bildschirmfoto 2021-12-24 um 11 33 55" src="https://user-images.githubusercontent.com/141300/147345391-908c9eb4-f81f-421b-951a-5d76701ce1b7.png">

Author: bors

app/components/search-form.hbs

@@ -43,8 +43,10 @@
     aria-label="Search"
   >
 
-  {{! Hidden submit button to enable enter-to-submit behavior for form with multiple inputs }}
-  <button type="submit" local-class="submit-button">Submit</button>
+  <button type="submit" local-class="submit-button">
+    <span local-class="submit-label">Submit</span>
+    {{svg-jar "search" local-class="submit-icon"}}
+  </button>
 
   {{on-key 's' (focus '#cargo-desktop-search')}}
   {{on-key 'S' (focus '#cargo-desktop-search')}}

app/components/search-form.module.css

@@ -1,5 +1,23 @@
 .form {
-    display: flex;
+    --border-radius: 15px;
+    --submit-icon-size: 16px;
+    --submit-button-padding-left: 8px;
+    --submit-button-padding-right: 10px;
+    --submit-button-width: calc(var(--submit-button-padding-left) + var(--submit-icon-size) + var(--submit-button-padding-right));
+    --input-padding: 5px;
+    --input-padding-left: 10px;
+    --input-padding-right: calc(var(--submit-button-width) + var(--input-padding));
+
+    position: relative;
+
+    &.size-big {
+        --border-radius: 30px;
+        --input-padding: 8px;
+        --input-padding-left: 16px;
+        --submit-icon-size: 20px;
+        --submit-button-padding-left: 12px;
+        --submit-button-padding-right: 16px;
+    }
 }
 
 .input {
@@ -9,21 +27,13 @@
     border: none;
     color: black;
     width: 100%;
-    padding: 5px 5px 5px 25px;
-    background-color: white;
-    background-image: url('/assets/search.png');
-    background-repeat: no-repeat;
-    background-position: 6px 6px;
-    background-size: 14px 15px;
-    border-radius: 15px;
+    padding: var(--input-padding) var(--input-padding-right) var(--input-padding) var(--input-padding-left);
+    border-radius: var(--border-radius);
     box-shadow: 1px 2px 4px 0 var(--green900);
     transition: box-shadow 150ms;
 
     .size-big & {
         font-size: 125%;
-        padding: 5px 5px 5px 35px;
-        background-position: 10px 7px;
-        background-size: 20px 21px;
     }
 
     &:focus {
@@ -51,8 +61,32 @@
 }
 
 .submit-button {
+    composes: button-reset from '../styles/shared/buttons.module.css';
+
     position: absolute;
-    visibility: hidden;
-    width: 0;
-    height: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    display: inline-grid;
+    place-items: center;
+    padding-left: var(--submit-button-padding-left);
+    padding-right: var(--submit-button-padding-right);
+    color: white;
+    background-color: var(--yellow500);
+    border-top-right-radius: var(--border-radius);
+    border-bottom-right-radius: var(--border-radius);
+    cursor: pointer;
+
+    &:hover {
+        background-color: var(--yellow700);
+    }
+}
+
+.submit-label {
+    composes: sr-only from '../styles/shared/a11y.module.css';
+}
+
+.submit-icon {
+    width: var(--submit-icon-size);
+    height: var(--submit-icon-size);
 }

app/styles/application.module.css

@@ -7,6 +7,7 @@
     --green800: hsl(115, 31%, 31%);
     --green900: hsl(115, 31%, 21%);
     --yellow500: hsl(44, 100%, 60%);
+    --yellow700: hsl(44, 67%, 50%);
 
     --header-bg-color: var(--green800);