Result page style fix#647 (#659)

ita-social-projects · Nov 23, 2021 · 2bf6cc5 · 2bf6cc5
1 parent 3c7e334
commit 2bf6cc5
Show file tree

Hide file tree

Showing 12 changed files with 100 additions and 33 deletions.
diff --git a/src/app/shared/components/filters-list/age-filter/age-filter.component.html b/src/app/shared/components/filters-list/age-filter/age-filter.component.html
@@ -2,15 +2,15 @@
 
 <div class="wrapper" fxLayout='row' fxLayoutAlign='start' fxLayoutGap='1rem'>
   <mat-form-field>
-    <div fxLayout='row' fxLayoutAlign='start' fxLayoutGap='1rem'>
+    <div fxLayout='row' fxLayoutAlign='start center' fxLayoutGap='1rem'>
       <p class="filter-text">Від</p>
       <input matInput class="age-input" type="number" ng-model="number" [formControl]="minAgeFormControl" appDigitOnly
         maxlength="2" [min]="constants.MIN_PRICE" [max]="constants.MAX_PRICE" [directiveFormControl]="minAgeFormControl"
         appMinMax>
     </div>
   </mat-form-field>
   <mat-form-field>
-    <div fxLayout='row' fxLayoutAlign='start' fxLayoutGap='1rem'>
+    <div fxLayout='row' fxLayoutAlign='start center' fxLayoutGap='1rem'>
       <p class="filter-text">До</p>
       <input matInput class="age-input" type="number" ng-model="number" [formControl]="maxAgeFormControl" appDigitOnly
         [directiveFormControl]="maxAgeFormControl" maxlength="2" appMinMax [min]="constants.MIN_PRICE"

diff --git a/src/app/shared/components/filters-list/age-filter/age-filter.component.scss b/src/app/shared/components/filters-list/age-filter/age-filter.component.scss
@@ -1,24 +1,37 @@
-.filter-text{
+.wrapper {
+  margin-top: 16px;
+}
+.filter-text {
+  margin: 0;
   font-family: Innerspace;
   font-weight: 700;
   line-height: 14.6px;
   color: #444444;
 }
 .title{
+  margin-top: 24px;
   margin-bottom: 0;
 }
 .age-input{
   border: 1px solid #E3E3E3;
+  background-color: #FFFFFF;
   box-sizing: border-box;
   border-radius: 21px;
   padding: 0.5rem;
-  max-width: 80px;
+  max-width: 85px;
+  max-height: 34px;
   text-align: center;
 }
+
+:host ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-infix {
+  padding: 0 !important;
+}
+
 ::ng-deep .mat-form-field-underline {
   display: none;
 }
 ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-wrapper{
   padding: 0;
   margin: 0;
 }
+
diff --git a/src/app/shared/components/filters-list/category-check-box/category-check-box.component.html b/src/app/shared/components/filters-list/category-check-box/category-check-box.component.html
@@ -31,4 +31,4 @@
       {{direction.title}}
     </mat-checkbox>
   </li>
-</ng-template>
+</ng-template>
diff --git a/src/app/shared/components/filters-list/category-check-box/category-check-box.component.scss b/src/app/shared/components/filters-list/category-check-box/category-check-box.component.scss
@@ -7,6 +7,7 @@ border: 1px solid #FFFFFF;
 box-sizing: border-box;
 border-radius: 60px;
 margin: 1rem 0;
+box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.08);
 }
 .list-wrapper{
   max-height: 200px;
@@ -15,7 +16,10 @@ margin: 1rem 0;
 }
 .list {
   list-style-type: none;
-  margin-top: 4px;
+  margin-bottom: 16px;
+}
+.list:last-child {
+  margin-bottom: 0;
 }
 
 .filter-text{
@@ -37,4 +41,10 @@ button {
 :host ::ng-deep .mat-stroked-button {
   min-width: inherit;
   padding: 0;
-}
+}
+:host ::ng-deep .mat-checkbox-label {
+  font-family: "Open Sans", sans-serif;
+  font-weight: 400;
+  font-size: 13px;
+  line-height: 17.7px;
+}
diff --git a/src/app/shared/components/filters-list/filters-list.component.scss b/src/app/shared/components/filters-list/filters-list.component.scss
@@ -13,13 +13,15 @@ border-radius: 60px;
   margin-top: 4px;
 }
 .filter-text{
-font-family: Innerspace;
-font-weight: 700;
-line-height: 14.6px;
-color:#444444;
+  margin: 0;
+  margin-bottom: 16px;
+  font-family: Innerspace;
+  font-weight: 700;
+  line-height: 14.6px;
+  color:#444444;
 }
 .check-boxes{
-  margin-top: 1rem;
+  margin-top: 30px;
 }
 
 .resetFilter {

diff --git a/src/app/shared/components/filters-list/price-filter/price-filter.component.html b/src/app/shared/components/filters-list/price-filter/price-filter.component.html
@@ -1,20 +1,17 @@
-<p class="filter-text">Вартість</p>
-<div fxLayout='column' fxLayoutAlign='center space-between' fxLayoutGap='1rem'>
+<p class="filter-text title">Вартість</p>
+<div class="wrapper" fxLayout='column' fxLayoutAlign='center space-between'>
   <mat-checkbox color="primary" [formControl]="isFreeControl"> Безкоштовно</mat-checkbox>
-
-  <p class="filter-text">Діапазон Ціни</p>
-
   <div class="input-wrapper" fxLayout='row' fxLayoutAlign='start' fxLayoutGap='1rem'>
     <mat-form-field>
-      <div fxLayout='row' fxLayoutAlign='start' fxLayoutGap='1rem'>
+      <div fxLayout='row' fxLayoutAlign='start center'>
         <p class="filter-text">Від</p>
         <input matInput class="price-input" type="number" appDigitOnly maxlength="4" [min]="constants.MIN_PRICE"
           [max]="constants.MAX_PRICE" [directiveFormControl]="minPriceControl" [formControl]="minPriceControl"
           appMinMax>
       </div>
     </mat-form-field>
     <mat-form-field>
-      <div class="input-wrapper" fxLayout='row' fxLayoutAlign='start' fxLayoutGap='1rem'>
+      <div fxLayout='row' fxLayoutAlign='start center'>
         <p class="filter-text">До</p>
         <input matInput class="price-input" type="number" appDigitOnly maxlength="4" [min]="constants.MIN_PRICE"
           [max]="constants.MAX_PRICE" [directiveFormControl]="maxPriceControl" [formControl]="maxPriceControl"

diff --git a/src/app/shared/components/filters-list/price-filter/price-filter.component.scss b/src/app/shared/components/filters-list/price-filter/price-filter.component.scss
@@ -1,3 +1,13 @@
+.filter-text {
+  margin: 0;
+  margin-right: 1rem;
+}
+.title {
+  margin-top: 24px;
+}
+.wrapper {
+  margin-top: 13px;
+}
 ::ng-deep .filter{
   &-text{
     font-family: Innerspace;
@@ -6,9 +16,11 @@
     color: #444444;
   }
   &-slider{
-     margin: 0.5rem;
+    margin: 12px 0;
+    margin-left: 0.5rem;
     .ngx-slider{
       margin: 0;
+      max-width: 234px;
       .ngx-slider-bar-wrapper{
         margin: 0;
         height: 0;
@@ -36,12 +48,15 @@
 }
 .price-input{
   border: 1px solid #E3E3E3;
+  background-color: #FFFFFF;
   box-sizing: border-box;
   border-radius: 21px;
   padding: 0.5rem;
-  max-width: 80px;
+  max-width: 85px;
+  max-height: 34px;
 }
 .input-wrapper{
+  margin-top: 13px;
   margin-bottom: 0 !important;
 }
 ::ng-deep .mat-form-field-underline {
@@ -51,3 +66,6 @@
   padding: 0;
   margin: 0;
 }
+:host ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-infix {
+  padding: 0 !important;
+}
diff --git a/src/app/shared/components/filters-list/working-hours/working-hours.component.html b/src/app/shared/components/filters-list/working-hours/working-hours.component.html
@@ -1,21 +1,21 @@
-<p class="filter-text">Дні роботи</p>
-<div fxLayout='column' fxLayoutAlign='center space-between' fxLayoutGap='1rem'>
+<p class="filter-text title">Дні роботи</p>
+<div class="wrapper" fxLayout='column' fxLayoutAlign='center space-between'>
   <div fxLayout='row' fxLayoutAlign='space-between'>
     <div *ngFor="let day of days" class="toggle" fxLayout='row' fxLayoutAlign='center center'
       (click)="onToggleDays(day)" [ngClass]="(day.selected) ? 'toggle-selected' : '' ">
       {{day.value}}</div>
   </div>
-  <p class="filter-text">Години роботи</p>
-  <mat-form-field> 
-    <div class="wrapper" fxLayout='row' fxLayoutAlign='start' fxLayoutGap='1rem'>
+  <p class="filter-text title">Години роботи</p>
+  <mat-form-field>
+    <div class="wrapper" fxLayout='row' fxLayoutAlign='start center' fxLayoutGap='1rem'>
       <p class="filter-text">Від</p>
       <input class="time-input" type="text" matInput [ngxMatTimepicker]="timepickerStart" format="24"
         [formControl]="startTimeFormControl" [max]="maxTime">
       <mat-icon class="clear-time-start clear-time" (click)="clearStart()">clear</mat-icon>
       <p class="filter-text">До</p>
       <input class="time-input" type="text" matInput [ngxMatTimepicker]="timepickerEnd" format="24"
         [formControl]="endTimeFormControl" [min]="minTime">
-      <mat-icon class="clear-time-end clear-time" (click)="clearEnd()">clear</mat-icon>      
+      <mat-icon class="clear-time-end clear-time" (click)="clearEnd()">clear</mat-icon>
     </div>
     <ngx-mat-timepicker #timepickerStart [cancelBtnTmpl]="btnCancel" [confirmBtnTmpl]="btnConfirm" timepickerClass="">
     </ngx-mat-timepicker>
@@ -28,4 +28,4 @@
   </ng-template>
   <ng-template #btnConfirm>
     <button class="btn" mat-raised-button>Додати</button>
-  </ng-template>
+  </ng-template>
diff --git a/src/app/shared/components/filters-list/working-hours/working-hours.component.scss b/src/app/shared/components/filters-list/working-hours/working-hours.component.scss
@@ -1,11 +1,18 @@
 @import "src/app/shared/styles/buttons.scss";
 
 .filter-text{
+  margin: 0;
   font-family: Innerspace;
   font-weight: 700;
   line-height: 14.6px;
   color:#444444;
 }
+.title {
+  margin-top: 24px;
+}
+.wrapper {
+  margin-top: 16px;
+}
 .filter-list-wrapper {
   min-width: 200px;
   min-height: 50px;
@@ -17,10 +24,12 @@
 
 .time-input{
   border: 1px solid #E3E3E3;
+  background-color: #FFFFFF;
   box-sizing: border-box;
   border-radius: 21px;
   padding: 0.5rem;
-  max-width: 80px;
+  max-width: 85px;
+  max-height: 34px;
   text-align: center;
 }
 ::ng-deep .mat-form-field-underline {
@@ -30,6 +39,9 @@
   padding: 0;
   margin: 0;
 }
+:host ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-infix {
+  padding: 0 !important;
+}
 
 .toggle{
   height: 40px;

diff --git a/src/app/shared/styles/toggle-button.scss b/src/app/shared/styles/toggle-button.scss
@@ -1,9 +1,10 @@
-.mat-button-toggle-button :active{
+.mat-button-toggle-button :active {
   color: #3849F9;
 }
+
 .mat-button-toggle-checked {
-  background-color: #E3E3E3;
-  color: #2979FF;
+  background-color: rgba(56, 73, 249, 0.07);
+  color: #3849F9;
   border-top-left-radius: 1.2rem;
   border-bottom-left-radius: 1.2rem;
   border: 2px solid #3849F9;

diff --git a/src/app/shell/result/ordering/ordering.component.scss b/src/app/shell/result/ordering/ordering.component.scss
@@ -7,7 +7,7 @@
   box-sizing: border-box;
 }
 .select, .options{
-  font-family: Open Sans;
+  font-family: "Open Sans", sans-serif;
   font-style: normal;
   font-weight: bold;
   font-size: 14px;

diff --git a/src/styles.scss b/src/styles.scss
@@ -141,6 +141,20 @@ $config: mat-typography-config(
   word-break: break-all !important;
   white-space: normal !important;
 }
+
+.mat-checkbox-inner-container {
+  height: 18px !important;
+  width: 18px !important;
+  align-items: center !important;
+}
+
+.mat-checkbox-checked {
+  & .mat-checkbox-background,
+  .mat-checkbox-frame {
+      background-color: #3849F9 !important;
+      border-radius: 3px;
+  }
+}
 .mat-radio-button.mat-primary.mat-radio-checked .mat-radio-outer-circle {
   border-color: #3849F9 !important;
 }