🔥 Refactors minimal search to share code of parent search

src/components/Settings/SearchBar.vue

@@ -1,5 +1,5 @@
 <template>
-  <form @submit.prevent="searchSubmitted">
+  <form @submit.prevent="searchSubmitted" :class="minimalSearch ? 'minimal' : 'normal'">
     <label for="filter-tiles">{{ $t('search.search-label') }}</label>
     <div class="search-wrap">
       <input
@@ -38,6 +38,7 @@ export default {
   inject: ['config'],
   props: {
     active: Boolean,
+    minimalSearch: Boolean, // If true, then keep it simple
   },
   data() {
     return {
@@ -148,13 +149,7 @@ export default {
 
 @import '@/styles/media-queries.scss';
 
-  section {
-    display: flex;
-    align-items: center;
-    align-items: stretch;
-    background: linear-gradient(0deg, var(--background) 0%, var(--background-darker) 100%);
-  }
-  form {
+  form.normal {
     display: flex;
     align-items: center;
     border-radius: 0 0 var(--curve-factor-navbar) 0;
@@ -216,13 +211,13 @@ export default {
   }
 
   @include tablet {
-    form {
+    form.normal {
       display: block;
       text-align: center;
     }
   }
   @include phone {
-    form {
+    form.nomral {
       flex: 1;
       border-radius: 0;
       text-align: center;
@@ -230,4 +225,57 @@ export default {
       display: block;
     }
   }
+
+  form.minimal {
+    display: flex;
+    align-items: center;
+    label { display: none; }
+    .search-wrap {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 100%;
+      p.web-search-note {
+        margin: 0;
+        color: var(--minimal-view-search-color);
+        opacity: var(--dimming-factor);
+      }
+    }
+    input {
+      display: inline-block;
+      width: 80%;
+      max-width: 400px;
+      font-size: 1.2rem;
+      padding: 0.5rem 1rem;
+      margin: 1rem auto;
+      outline: none;
+      border: 1px solid var(--outline-color);
+      border-radius: var(--curve-factor);
+      background: var(--minimal-view-search-background);
+      color: var(--minimal-view-search-color);
+      &:focus {
+        border-color: var(--minimal-view-search-color);
+        opacity: var(--dimming-factor);
+      }
+    }
+    .clear-search {
+      color: var(--minimal-view-search-color);
+      padding: 0.15rem 0.5rem 0.2rem 0.5rem;
+      font-style: normal;
+      font-size: 1rem;
+      opacity: var(--dimming-factor);
+      border-radius: 50px;
+      cursor: pointer;
+      right: 0.5rem;
+      top: 1rem;
+      border: 1px solid var(--minimal-view-search-color);
+      font-size: 1rem;
+      margin: 0.5rem;
+      &:hover {
+        opacity: 1;
+        color: var(--minimal-view-search-background);
+        background: var(--minimal-view-search-color);
+      }
+    }
+  }
 </style>