Increase search-bar height

package-lock.json

 {
   "name": "webapp",
-  "version": "2.5.1",
+  "version": "2.5.2",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

src/app/core/components/main/header/header.component.html

@@ -7,7 +7,6 @@
           <div class="hamburger-inner"></div>
         </div>
       </div>
-      <!-- </div> -->
     </div>
     <div class="navbar-header-item logo-data">
       <a [routerLink]="['/', AppRoutes.home.uri]" *ngIf="!isHomePage">

src/app/core/components/main/header/header.component.scss

@@ -14,15 +14,36 @@ header {
 
   @media screen and (min-width: $tablet) {
     margin-right: 4.5rem; // To avoid the header content to be under the feedback button
-  
+
   }
-  @media screen and(max-width:$tablet){
+
+  @media screen and(max-width:$tablet) {
     padding-top: 0.7rem;
     flex-wrap: wrap;
-    .navbar-header-item:nth-of-type(1){order:1};
-    .navbar-header-item:nth-of-type(2){order:2};
-    .navbar-header-item:nth-of-type(3){order:4};
-    .navbar-header-item:nth-of-type(4){order:3};
+
+    .navbar-header-item:nth-of-type(1) {
+      order: 1
+    }
+
+    ;
+
+    .navbar-header-item:nth-of-type(2) {
+      order: 2
+    }
+
+    ;
+
+    .navbar-header-item:nth-of-type(3) {
+      order: 4
+    }
+
+    ;
+
+    .navbar-header-item:nth-of-type(4) {
+      order: 3
+    }
+
+    ;
   }
 }
 
@@ -174,10 +195,11 @@ svg.is-connected {
   flex-grow: 0.7;
   padding: 0;
   margin-right: auto;
-  @media screen and(max-width:$tablet){
-    width:100%;
-    height:35px;
-    margin-top:0.5rem;
+
+  @media screen and(max-width:$tablet) {
+    width: 100%;
+    height: 40px;
+    margin-top: 0.7rem;
   }
 }
 

src/app/core/components/main/side-menu/side-menu.component.scss

@@ -128,24 +128,3 @@
     }
   }
 }
-
-.search-bar-menu {
-  display: none;
-
-  &:hover a {
-    /* stylelint-disable-line */
-    background-color: $background-link-hover-color;
-  }
-
-  @media screen and (max-width: $desktop - 1px) {
-    display: block;
-
-    .search-bar {
-      flex-grow: 1; // Make the searchbar take all the available width
-
-      .input {
-        height: 2em;
-      }
-    }
-  }
-}

src/app/datasets/components/search-bar/search-bar.component.html

@@ -18,9 +18,15 @@
       </div>
     </div>
     <div class="control button-research">
-      <button class="button is-medium" (click)="searchChanged()" i18n-aria-label="@@research.researchButton" aria-label="Research">
+      <button class="button is-medium" (click)="searchChanged()" i18n-aria-label="@@research.researchButton"
+        aria-label="Research">
         <span class="icon">
-          <i class="fas fa-search" *ngIf="!isLoading;else spinner"></i>
+          <svg *ngIf="!isLoading;else spinner" width="17" height="18" viewBox="0 0 17 18" fill="none"
+            xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M16.8031 16.6747L13.0982 12.8219C14.1776 11.4658 14.8194 9.7089 14.8194 7.82877C14.7902 3.5137 11.4938 0 7.4097 0C3.32561 0 0 3.5137 0 7.82877C0 12.1438 3.32561 15.6575 7.4097 15.6575C9.16002 15.6575 10.7937 15.0103 12.048 13.9315L15.7529 17.7842C15.8988 17.9384 16.0738 18 16.278 18C16.453 18 16.6572 17.9384 16.8031 17.7842C17.0656 17.476 17.0656 16.9829 16.8031 16.6747ZM1.4586 7.82877C1.4586 4.34589 4.11326 1.5411 7.4097 1.5411C10.7061 1.5411 13.3608 4.34589 13.3608 7.82877C13.3608 11.3116 10.7061 14.1164 7.4097 14.1164C4.11326 14.1164 1.4586 11.2808 1.4586 7.82877Z"
+              fill="#464A57" />
+          </svg>
           <ng-template #spinner>
             <i class="fas fa-spinner fa-spin has-text-danger"></i>
           </ng-template>

src/app/datasets/components/search-bar/search-bar.component.scss

@@ -50,7 +50,7 @@
   .field {
     height: 100%;
     @media screen and(max-width:$tablet){
-      height:35px;
+      height:40px;
     }
 
     .button,
@@ -58,7 +58,7 @@
     .reset-research-icon {
       height: 100%;
       @media screen and(max-width:$tablet){
-        height:35px;
+        height:40px;
       }
   
     }

src/scss/variables.scss

@@ -61,7 +61,7 @@ $background-link-hover-color: #191c27;
 
 // Header height
 $header-bar-height: 70px;
-$header-bar-height-mobile: 105px;
+$header-bar-height-mobile: 115px;
 
 // Footer
 $footer-height: 75px;