From f6dd5808948819473a7cd7d54bf360954f6b61d3 Mon Sep 17 00:00:00 2001
From: Patrick Gebhardt <pjgebhardt@icloud.com>
Date: Thu, 25 Jun 2020 15:34:13 +0200
Subject: [PATCH] Improve advanced search visuals

---
 .../search-input/search-input.component.html     | 16 ++++++++++------
 .../search-input/search-input.component.scss     | 15 +++++++++------
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/frontend/src/app/components/search-input/search-input.component.html b/frontend/src/app/components/search-input/search-input.component.html
index 957e1fa..87b8c97 100644
--- a/frontend/src/app/components/search-input/search-input.component.html
+++ b/frontend/src/app/components/search-input/search-input.component.html
@@ -24,7 +24,7 @@
         </mat-step>
         <!--  Multi presets  -->
         <mat-step>
-          <ng-template matStepLabel>Which climate makes you feel comfortable?</ng-template>
+          <ng-template matStepLabel>Which climate do you prefer?</ng-template>
           <div *ngFor="let key of multiPresetsKeys" class="sub-group">
             <span class="label">{{key|translate}}:</span><br>
             <mat-radio-group [ngModel]="multiPresetSelection[key]" [value]="undefined">
@@ -47,7 +47,7 @@
         </mat-step>
         <!--   Tag selection   -->
         <mat-step>
-          <ng-template matStepLabel>What needs to be fulfilled?</ng-template>
+          <ng-template matStepLabel>What are you interested in?</ng-template>
           <app-multi-tag-select [(model)]="selectedTags" [availableTags]="tags"></app-multi-tag-select>
         </mat-step>
 
@@ -89,8 +89,10 @@
       </section>
       <!--   Climate Params   -->
       <section class="group">
-        <span class="title small-bottom-margin">Climate</span>
-        <span class="desc">Choose your sweetspot</span>
+        <div class="horizontal">
+          <span class="title">Climate</span>
+          <span class="desc">| sweetspot selection</span>
+        </div>
         <app-toggle-slider [(model)]="temperatureMeanMax" [label]="'Temperature'" [max]="45"
                            [min]="0"></app-toggle-slider>
         <app-toggle-slider [(model)]="precipitation" [label]="'Precipitation'" [max]="500"
@@ -98,8 +100,10 @@
       </section>
       <!--   Financial   -->
       <section class="group">
-        <span class="title small-bottom-margin">Fincancial</span>
-        <span class="desc">Choose your sweetspot</span>
+        <div class="horizontal">
+          <span class="title">Financial</span>
+          <span class="desc">| sweetspot selection</span>
+        </div>
         <app-toggle-slider [(model)]="accommodation" [label]="'Accommodation'" [max]="60" [min]="0"></app-toggle-slider>
       </section>
     </mat-tab>
diff --git a/frontend/src/app/components/search-input/search-input.component.scss b/frontend/src/app/components/search-input/search-input.component.scss
index 61222d2..1b73ff3 100644
--- a/frontend/src/app/components/search-input/search-input.component.scss
+++ b/frontend/src/app/components/search-input/search-input.component.scss
@@ -32,10 +32,17 @@
   flex-direction: column;
   margin: 1rem 0;
 
-  > .title {
+  .title {
     font-size: 1.2rem;
     font-weight: bold;
-    margin-bottom: 0.5rem;
+  }
+
+  .desc {
+    font-size: smaller;
+    margin-left: 0.25rem;
+    text-align: center;
+    text-transform: uppercase;
+    color: gray;
   }
 
   > .content {
@@ -83,10 +90,6 @@
   }
 }
 
-.desc {
-  font-size: smaller;
-}
-
 .small-bottom-margin {
   margin-bottom: 0.4rem !important;
 }