src/app/profile/structure-edition-summary/structure-edition-summary.component.html

@@ -300,6 +300,25 @@
           <app-missing-information></app-missing-information>
         </ng-container>
       </div>
+    </div>
+
+    <div class="section publics">
+      <div class="sectionHeader">
+        <p>Public spécifique admis</p>
+        <app-button
+          class="hide-on-mobile"
+          [text]="'Modifier'"
+          [style]="buttonTypeEnum.Secondary"
+          [extraClass]="'editButton'"
+          (action)="goToEdit(structureFormStep.structurePublicTargetOptional)"
+        ></app-button>
+        <app-button
+          class="hide-on-desktop"
+          [iconBtn]="'edit'"
+          [style]="buttonTypeEnum.SecondaryOnlyIcon"
+          (action)="goToEdit(structureFormStep.structurePublicTargetOptional)"
+        ></app-button>
+      </div>
       <div class="content">
         <ng-container
           *ngIf="
@@ -339,6 +358,17 @@
           </div>
         </ng-container>
       </div>
+      <div class="content">
+        <ng-container
+          *ngIf="
+            structure.categoriesDisplay.languageAndIlliteracy.length === 0 &&
+            structure.categoriesDisplay.publicOthers.length === 0 &&
+            structure.categoriesDisplay.handicaps.length === 0
+          "
+        >
+          <app-no-information></app-no-information>
+        </ng-container>
+      </div>
     </div>
 
     <div class="section proceduresAccompaniment">
@@ -649,7 +679,11 @@
         ></app-button>
       </div>
       <div class="content" *ngIf="members">
-        <p>{{ members.length }} membre(s)</p>
+        <div [ngPlural]="members.length">
+          <ng-template ngPluralCase="1">Aucun autre membre</ng-template>
+          <ng-template ngPluralCase="2">1 membre</ng-template>
+          <ng-template ngPluralCase="other">{{ members.length - 1 }} membre(s)</ng-template>
+        </div>
       </div>
     </div>
   </div>

src/app/profile/structure-members-management/structure-members-management.component.html

@@ -15,6 +15,9 @@
       ></app-button>
     </div>
 
+    <div *ngIf="isLoading" class="loader">
+      <img class="loader-gif" src="/assets/gif/loader_circle.gif" alt />
+    </div>
     <div *ngIf="structureWithOwners && tempUsers" class="membersList">
       <div *ngFor="let member of structureWithOwners.owners" class="member-card">
         <div class="user">

src/app/profile/structure-members-management/structure-members-management.component.ts

 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
+import { finalize } from 'rxjs';
 import { Owner } from '../../models/owner.model';
 import { Structure } from '../../models/structure.model';
 import { StructureWithOwners } from '../../models/structureWithOwners.model';
@@ -26,6 +27,7 @@ export class StructureMembersManagementComponent implements OnInit {
   public excludeModalOpenned = false;
   public cancelAddTempUserModalOpenned = false;
   public buttonTypeEnum = ButtonType;
+  public isLoading = true;
 
   constructor(
     private route: ActivatedRoute,
@@ -39,9 +41,12 @@ export class StructureMembersManagementComponent implements OnInit {
       if (data.structure) {
         this.structure = new Structure(data.structure);
         let currentProfile = await this.profileService.getProfile();
-        this.structureService.getStructureWithOwners(data.structure._id, currentProfile).subscribe((s) => {
-          this.structureWithOwners = s;
-        });
+        this.structureService
+          .getStructureWithOwners(data.structure._id, currentProfile)
+          .pipe(finalize(() => (this.isLoading = false)))
+          .subscribe((s) => {
+            this.structureWithOwners = s;
+          });
         this.structureService.getTempUsers(data.structure._id).subscribe((data) => {
           this.tempUsers = data;
         });

src/app/shared/components/button/button.component.html

@@ -278,3 +278,9 @@
     ></app-svg-icon>
   </button>
 </ng-container>
+<ng-container *ngIf="style === buttonTypeEnum.TagCloudResetButton">
+  <button class="flex row btn-tags-cloud reset" (click)="doAction()">
+    <span>Supprimer les filtres</span>
+    <app-svg-icon [type]="'ico'" [icon]="'tagReset'" [iconClass]="'icon-16'" [iconColor]="'black'"></app-svg-icon>
+  </button>
+</ng-container>

src/app/shared/components/button/button.component.scss

@@ -316,6 +316,19 @@ button {
   &.unchecked {
     background: $grey-1;
   }
+
+  &.reset {
+    justify-content: space-between;
+    width: 156px;
+    max-width: unset;
+    background: $white;
+    color: $black;
+    border: 1px solid $grey-4;
+    border-radius: 20px;
+    span {
+      max-width: unset;
+    }
+  }
 }
 button:disabled {
   opacity: 0.4;

src/app/shared/components/button/buttonType.enum.ts

@@ -15,4 +15,5 @@ export enum ButtonType {
   modalPrimary,
   modalSecondary,
   TagCloudButton,
+  TagCloudResetButton,
 }

src/app/shared/components/structure-detail-print/structure-detail-print.component.html

@@ -8,11 +8,17 @@
       <div class="mobile-column">
         <div fxLayout="column" fxFlex="100%">
           <div *ngIf="structure.address" fxLayout="row" fxLayoutAlign="none center" fxLayoutGap="13px">
-            <app-svg-icon [type]="'ico'" [icon]="'adress'" [title]="'Adresse'"></app-svg-icon>
+            <app-svg-icon [type]="'ico'" [icon]="'adress'" [title]="'Adresse'" [iconClass]="'icon-22'"></app-svg-icon>
             <p>{{ structure.address.numero }} {{ structure.address.street }}, {{ structure.address.commune }}</p>
           </div>
-          <div *ngIf="structure.contactPhone" fxLayout="row" fxLayoutAlign="none center" fxLayoutGap="13px">
-            <app-svg-icon [type]="'ico'" [icon]="'tel'" [title]="'Téléphone'"></app-svg-icon>
+          <div
+            *ngIf="structure.contactPhone"
+            fxLayout="row"
+            fxLayoutAlign="none center"
+            [iconClass]="'icon-22'"
+            fxLayoutGap="13px"
+          >
+            <app-svg-icon [type]="'ico'" [icon]="'tel'" [title]="'Téléphone'" [iconClass]="'icon-22'"></app-svg-icon>
             <p>{{ structure.contactPhone | phone }}</p>
           </div>
           <div
@@ -21,7 +27,12 @@
             fxLayoutAlign="none center"
             fxLayoutGap="13px"
           >
-            <app-svg-icon [type]="'ico'" [iconClass]="'grey-1'" [icon]="'email'" [title]="'Email'"></app-svg-icon>
+            <app-svg-icon
+              [type]="'ico'"
+              [iconClass]="'grey-1 icon-22'"
+              [icon]="'email'"
+              [title]="'Email'"
+            ></app-svg-icon>
             <p>{{ structure.contactMail }}</p>
           </div>
         </div>
@@ -31,50 +42,47 @@
   <!-- Accueil -->
   <div
     *ngIf="tclStopPoints || structure.hours.hasData() || structure.remoteAccompaniment"
-    fxLayout="column"
-    class="structure-details-block"
-    fxLayoutAlign="baseline baseline"
-    fxLayoutGap="20px"
+    class="structure-details-block flex column"
   >
     <!-- Opening Hours -->
-    <div fxLayout="row" class="w-100 mobile-column">
-      <div *ngIf="structure.hours.hasData()" fxFlex="60%">
-        <h3 class="subtitle">Horaires</h3>
-        <div fxLayout="column">
-          <div *ngFor="let day of structure.hours | keyvalue: keepOriginalOrder">
-            <div *ngIf="day.value.open" fxLayout="row" fxLayoutAlign="none baseline">
-              <h4 fxFlex="30%">{{ day.key | day }}</h4>
-              <div class="opening-time w100" fxLayout="column" fxLayoutAlign="none baseline">
-                <div *ngFor="let timeRange of day.value.time">
-                  <p *ngIf="timeRange.opening">
-                    de {{ timeRange.formatOpeningDate() }} à {{ timeRange.formatClosingDate() }}
-                  </p>
-                </div>
+    <div class="w-100 mobile-column flex row mb20">
+      <div *ngIf="structure.hours.hasData()" class="timeContainer">
+        <h3 class="subtitle">HORAIRES</h3>
+        <div *ngFor="let day of structure.hours | keyvalue: keepOriginalOrder">
+          <div *ngIf="day.value.open" class="mb4">
+            <h4>{{ day.key | day }}</h4>
+            <div class="opening-time w100">
+              <div *ngFor="let timeRange of day.value.time">
+                <p *ngIf="timeRange.opening">{{ timeRange.opening }} - {{ timeRange.closing }}</p>
               </div>
             </div>
           </div>
         </div>
       </div>
       <!-- accessModality -->
-      <div *ngIf="tclStopPoints.length > 0" fxFlex="40%">
-        <h3 class="subtitle">Accès</h3>
-        <div fxLayout="column">
-          <div *ngFor="let tclStop of tclStopPoints | slice: 0:3">
-            <div fxLayout="row wrap" fxLayoutGap="5px" class="tclStop">
-              <p>{{ tclStop.name }}:</p>
-              <p *ngIf="tclStop.subLines.length > 0">Métro</p>
-              <p *ngFor="let sub of tclStop.subLines">{{ sub }}</p>
-              <p *ngIf="tclStop.tramLines.length > 0">Tram</p>
-              <p *ngFor="let tram of tclStop.tramLines">{{ tram }}</p>
-              <p *ngIf="tclStop.busLines.length > 0">Bus</p>
-              <p *ngFor="let bus of tclStop.busLines">{{ bus }}</p>
+      <div *ngIf="tclStopPoints.length">
+        <h3 class="subtitle">ACCÈS</h3>
+        <div class="flex column container">
+          <div *ngFor="let tclStop of tclStopPoints | slice: 0:3" class="flex column tclStop">
+            <p>{{ tclStop.name }}</p>
+            <div class="flex">
+              <p *ngIf="tclStop.subLines.length" class="bold">Métro&nbsp;:&nbsp;</p>
+              <p *ngFor="let sub of tclStop.subLines" class="line">{{ sub }}</p>
+            </div>
+            <div class="flex">
+              <p *ngIf="tclStop.tramLines.length" class="bold">Tram&nbsp;:&nbsp;</p>
+              <p *ngFor="let tram of tclStop.tramLines" class="line">{{ tram }}</p>
+            </div>
+            <div class="flex">
+              <p *ngIf="tclStop.busLines.length" class="bold">Bus&nbsp;:&nbsp;</p>
+              <p *ngFor="let bus of tclStop.busLines" class="line">{{ bus }}</p>
             </div>
           </div>
         </div>
       </div>
     </div>
-    <div *ngIf="structure.exceptionalClosures" class="bold-info">
-      <h3 class="subtitle">Précisions sur les horaires</h3>
+    <div *ngIf="structure.exceptionalClosures" class="mb20">
+      <h3 class="subtitle">PRÉCISIONS SUR LES HORAIRES</h3>
       <p>{{ structure.exceptionalClosures }}</p>
     </div>
     <div *ngIf="structure.remoteAccompaniment" class="bold-info">

src/app/shared/components/structure-detail-print/structure-detail-print.component.scss

@@ -12,19 +12,17 @@ h2 {
 }
 h3 {
   margin: 0 0 8px 0;
-  @include lato-regular-16;
+  @include lato-regular-14;
 }
 h4 {
-  margin-left: 0;
-  margin-bottom: 0;
-  margin-top: 4px;
+  margin: 0;
   @include lato-regular-14;
   color: $grey-2;
   text-transform: capitalize;
 }
 p,
 .custom-link {
-  @include lato-regular-16;
+  @include lato-regular-14;
   margin-top: 9px;
   margin-bottom: 9px;
   &.no-margin {
@@ -56,12 +54,10 @@ a {
   }
 }
 
-.structure-details-container > .structure-details-block {
-  .subtitle {
-    @include lato-bold-16;
-    margin-bottom: 10px;
-    color: $grey-3;
-  }
+.subtitle {
+  @include lato-bold-14;
+  margin-bottom: 8px;
+  color: $grey-3;
 }
 
 .structure-details-container > .structure-details-block ~ .structure-details-block {
@@ -82,7 +78,7 @@ a {
 }
 
 .bold-info {
-  @include lato-bold-16;
+  @include lato-bold-14;
 }
 
 @media print {
@@ -103,6 +99,9 @@ a {
 }
 
 .mobile-column {
+  p {
+    margin: 0;
+  }
   @media #{$tablet} {
     flex-direction: row;
   }
@@ -122,7 +121,26 @@ a {
     flex-direction: column;
   }
 }
-.tclStop p {
-  margin-top: 0;
-  margin-bottom: 0.2rem;
+
+.tclStop {
+  margin-bottom: 4px;
+  .line:not(:empty):not(:last-child):after {
+    content: ',\00a0';
+  }
+  p {
+    margin-top: 0;
+  }
+}
+
+.timeContainer {
+  flex: 1;
+  box-sizing: border-box;
+  max-width: 50%;
+}
+.mb4 {
+  margin-bottom: 4px;
+}
+
+.mb20 {
+  margin-bottom: 20px;
 }

src/app/shared/components/svg-icon/svg-icon.component.scss

@@ -5,6 +5,20 @@
   align-items: center;
 }
 
+$sizes: (
+  16: 16px,
+  22: 22px,
+  26: 26px,
+  28: 28px,
+  30: 30px,
+  32: 32px,
+  40: 40px,
+  52: 52px,
+  75: 75px,
+  80: 80px,
+  112: 112px,
+);
+
 .icon {
   display: inline-block;
   height: 2em;
@@ -13,44 +27,11 @@
     width: unset;
     height: unset;
   }
-  &.icon-16 {
-    height: 16px;
-    width: 16px;
-  }
-  &.icon-26 {
-    height: 26px;
-    width: 26px;
-  }
-  &.icon-28 {
-    width: 28px;
-    height: 28px;
-  }
-  &.icon-30 {
-    width: 30px;
-    height: 30px;
-  }
-  &.icon-32 {
-    width: 32px;
-    height: 32px;
-  }
-  &.icon-52 {
-    width: 52px;
-    height: 52px;
-  }
-  &.icon-40 {
-    width: 40px;
-    height: 40px;
-  }
-  &.icon-75 {
-    width: 4.688em;
-  }
-  &.icon-80 {
-    height: 80px;
-    width: 80px;
-  }
-  &.icon-112 {
-    height: 112px;
-    width: 112px;
+  @each $sizename, $size in $sizes {
+    &.icon-#{$sizename} {
+      height: $size;
+      width: $size;
+    }
   }
   &.validation {
     height: 36px;

src/app/structure-list/components/card/card.component.html

@@ -14,7 +14,7 @@
           <span class="typeStructure" [ngClass]="{ typeStructureOrientation: isOrientation }">{{
             structure.getLabelTypeStructure()
           }}</span>
-          <span *ngIf="isOrientation" class="distance">
+          <span *ngIf="isOrientation && structure.distance" class="distance">
             {{ this.formatDistance() }}
           </span>
         </div>

src/app/structure-list/components/structure-list-search/structure-list-search.component.html

@@ -160,8 +160,6 @@
       [text]="filter.displayText ? filter.displayText : filter.id"
       (action)="removeFilter(filter)"
     ></app-button>
-    <div class="reset-icon" (click)="resetFilters()">
-      <app-svg-icon [type]="'ico'" [icon]="'tagReset'" [iconColor]="'black'"></app-svg-icon>
-    </div>
+    <app-button [style]="buttonTypeEnum.TagCloudResetButton" (action)="resetFilters()"></app-button>
   </div>
 </div>

src/app/structure-list/components/structure-list-search/structure-list-search.component.scss

+@import '../../../../assets/scss/search';
 @import '../../../../assets/scss/color';
 @import '../../../../assets/scss/typography';
 @import '../../../../assets/scss/inputs';
-@import '../../../../assets/scss/hyperlink';
 @import '../../../../assets/scss/breakpoint';
 @import '../../../../assets/scss/buttons';
 
-.block {
-  padding: 0 1rem;
-  border-bottom: solid 1px $grey-4;
-  @media #{$large-tablet} {
-    padding: 0 10px;
-  }
-}
-.content {
-  margin-bottom: 0.5rem;
-  display: flex;
-  align-items: center;
-
-  input {
-    @include lato-regular-13;
-    @include input-search;
-    margin-top: unset;
-  }
-  .inputSearch {
-    padding: 6px 10px 6px 6px;
-    width: 200px;
-    min-width: 200px;
-    background-color: $grey-8;
-    color: $grey-3;
-    height: 36px;
-    border-radius: 50px;
-    margin-right: 0.25rem;
-    @media #{$large-desktop} {
-      width: 300px;
-      min-width: 250px;
-    }
-    @media #{$large-tablet} {
-      width: 100%;
-      margin-bottom: 0.5rem;
-      margin-right: 0;
-    }
-    .container {
-      width: 100%;
-      height: 40px;
-      .separation {
-        border-right: solid 1px $grey-4;
-        width: 5px;
-        height: 23px;
-        margin-right: 5px;
-      }
-    }
-  }
-  @media #{$large-tablet} {
-    flex-direction: column !important;
-  }
-}
-.btn-container {
-  width: 100%;
-  display: flex;
-}
 .btnSection {
-  width: 100%;
-  @media #{$large-tablet} {
-    display: contents !important;
-  }
-  button {
-    background: $white;
-    height: 36px;
-    border: 1px solid $grey-4;
-    padding: 10px 12px;
-    outline: none;
-    border-radius: 50px;
-    cursor: pointer;
-    text-align: left;
-    transition: all 300ms ease;
-    line-height: 110%;
-    @include btn-normal;
-    @include lato-regular-13;
-    &:hover:not(.selected) {
-      background: $grey-7;
-    }
-    .arrow {
-      background-color: transparent;
-      border-bottom: 1px solid black;
-      border-right: 1px solid black;
-      transform: translateY(-25%) rotate(45deg);
-      margin: 0 5px 0 10px;
-      height: 7px;
-      width: 7px;
-      transition: all 300ms ease;
-    }
-    &:focus {
-      border-color: $focus-color;
-    }
-  }
-  .selected {
-    background-color: $primary-color;
-    border-color: $primary-color !important;
-    color: $white;
-    .arrow {
-      background-color: transparent;
-      border-bottom: 1px solid $white;
-      border-right: 1px solid $white;
-      transform: translateY(25%) rotate(-135deg);
-      margin: 0 5px 0 10px;
-      height: 7px;
-      width: 7px;
-    }
-  }
-  .btn-filter {
-    height: 40px;
-    span {
-      line-height: 110%;
-    }
-  }
-  .containCheckedFilters {
-    border-color: $primary-color;
-  }
   .checkboxButton {
     box-sizing: border-box;
     @include btn-filter;
@@ -177,82 +66,7 @@
     }
   }
 }
-::ng-deep .btn-regular.tertiary {
-  height: 40px !important;
-  div {
-    line-height: normal;
-  }
-}
+
 .last-button {
   margin-left: auto;
 }
-.footerSearchSection {
-  margin: 8px 0px 8px 0px;
-  height: 40px;
-}
-
-.icon {
-  background-color: transparent;
-  border: 1px solid transparent;
-  outline: none;
-  cursor: pointer;
-  &.pin {
-    padding: 4px 6px 8px 6px;
-    &:hover {
-      .ico-pin-search {
-        background-color: $primary-color;
-      }
-    }
-    &:focus {
-      border-color: $primary-color;
-      .ico-pin-search {
-        background-color: $primary-color;
-      }
-    }
-    &:active {
-      border-color: transparent;
-      .ico-pin-search {
-        background-color: $blue-light;
-      }
-    }
-  }
-  &.close {
-    &:focus {
-      border-color: $primary-color;
-    }
-    &:active {
-      border-color: transparent;
-    }
-  }
-}
-a {
-  @include hyperlink;
-  text-align: right;
-}
-
-.phoneSection {
-  margin: 9px 0px 18px 0px;
-  display: none;
-  .btnSection {
-    padding: 0;
-  }
-}
-@media #{$large-tablet} {
-  .isntPhoneContent {
-    display: none !important;
-  }
-  .phoneSection {
-    display: block;
-  }
-}
-.filterTags {
-  margin: 0.5rem 0 0 0;
-  .title {
-    margin-top: 5px;
-    color: $grey-3;
-  }
-  .reset-icon {
-    padding-top: 0.2rem;
-    cursor: pointer;
-  }
-}

src/app/utils/formUtils.ts

@@ -30,7 +30,7 @@ export class formUtils {
       inputs: ['website', 'facebook', 'twitter', 'instagram'],
     },
     { step: structureFormStep.structurePublicTarget, name: 'Public admis', inputs: ['publics'] },
-
+    { step: structureFormStep.structurePublicTarget, name: 'Public admis - Optionnel', inputs: ['publics'] },
     {
       step: structureFormStep.structureDigitalHelpingAccompaniment,
       name: 'Aides au numérique',

src/app/utils/orientationUtils.ts

@@ -44,7 +44,7 @@ export class OrientationUtils {
     },
     {
       title: 'Acquérir les compétences numériques de base',
-      hint: '(Ordianteur et smartphone, mails, réseaux sociaux et bureautique...)',
+      hint: '(Ordinateur et smartphone, mails, réseaux sociaux et bureautique...)',
       key: NeedsType.learnSkills,
     },
   ];

src/assets/ico/sprite.svg

@@ -693,13 +693,6 @@
     <path d="M15.5 6.5L6.5 15.5" stroke="#BDBDBD" stroke-width="1.5" stroke-linecap="round" />
   </symbol>
 
-  <symbol id="tagReset" width="26" height="26" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M7.04307 8H7V14H13V13.9569L7.04307 8Z" fill="#696969" />
-    <path
-      d="M10.3738 21.6869C11.5497 22.8501 13.0573 23.6202 14.6889 23.8913C16.3206 24.1623 17.9962 23.9209 19.485 23.2004C20.9738 22.4798 22.2027 21.3155 23.0025 19.8676C23.8023 18.4198 24.1336 16.7597 23.9509 15.1158C23.7683 13.4719 23.0805 11.925 21.9824 10.6881C20.8843 9.45121 19.4297 8.58509 17.819 8.20897C16.2083 7.83285 14.5207 7.96523 12.9883 8.58789C11.456 9.21054 10.1543 10.2929 9.26242 11.6859"
-      stroke="#696969" stroke-width="1.5" />
-  </symbol>
-
   <symbol id="closeModal" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M27.0279 11.9135C27.5486 11.3928 28.2873 11.2873 28.6778 11.6778C29.0683 12.0683 28.9628 12.807 28.4421 13.3277L13.3572 28.4127C12.8365 28.9334 12.0978 29.0389 11.7072 28.6484C11.3167 28.2578 11.4222 27.5192 11.9429 26.9985L27.0279 11.9135Z"
@@ -1689,11 +1682,14 @@
     <path d="M15.5 6.5L6.5 15.5" stroke="#BDBDBD" stroke-width="1.5" stroke-linecap="round" />
   </symbol>
 
-  <symbol id="tagReset" width="26" height="26" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M7.04307 8H7V14H13V13.9569L7.04307 8Z" fill="#696969" />
+
+  <symbol id="tagReset" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M2.41783 4.91505L2.1416 4.63882V6.22461H3.72739L3.61783 6.11505L2.41783 4.91505L3.12493 4.20794L2.41783 4.91505Z"
+      stroke="#333333" stroke-width="2" />
     <path
-      d="M10.3738 21.6869C11.5497 22.8501 13.0573 23.6202 14.6889 23.8913C16.3206 24.1623 17.9962 23.9209 19.485 23.2004C20.9738 22.4798 22.2027 21.3155 23.0025 19.8676C23.8023 18.4198 24.1336 16.7597 23.9509 15.1158C23.7683 13.4719 23.0805 11.925 21.9824 10.6881C20.8843 9.45121 19.4297 8.58509 17.819 8.20897C16.2083 7.83285 14.5207 7.96523 12.9883 8.58789C11.456 9.21054 10.1543 10.2929 9.26242 11.6859"
-      stroke="#696969" stroke-width="1.5" />
+      d="M3.9742 12.838C4.88949 13.8222 6.09674 14.4863 7.41803 14.7325C8.73932 14.9786 10.1047 14.7938 11.313 14.2053C12.5214 13.6167 13.5086 12.6556 14.1293 11.4635C14.7501 10.2714 14.9714 8.91138 14.7607 7.58397C14.55 6.25656 13.9185 5.03194 12.9592 4.09061C11.9999 3.14928 10.7635 2.54103 9.43236 2.35552C8.1012 2.17 6.74565 2.41704 5.56551 3.06021C4.38537 3.70338 3.44307 4.70866 2.87749 5.92789"
+      stroke="#333333" stroke-width="1.5" />
   </symbol>
 
   <symbol id="closeModal" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">

src/assets/scss/_buttons.scss

@@ -19,18 +19,6 @@
   }
 }
 
-@mixin btn-search {
-  background: $white;
-  height: 31px;
-  border: none;
-  color: $primary-color;
-  padding: 3px 16px;
-  outline: none;
-  cursor: pointer;
-  display: table-cell;
-  vertical-align: middle;
-  @include btn-bold;
-}
 @mixin btn-search-filter {
   background: $primary-color;
   height: 36px;
@@ -43,11 +31,7 @@
   @include lato-regular-13;
   line-break: 18px;
 }
-@mixin btn-search-addStructure {
-  @include btn-bold-underline;
-  color: $primary-color;
-  outline: none;
-}
+
 @mixin btn-grey {
   box-sizing: border-box;
   border-radius: 6px;

src/assets/scss/_color.scss

 $black: #000000;
 $white: #ffff;
-$white-1: #e5e5e5;
 /*  GREYS  */
 $grey: #b4bbbf;
 $grey-1: #333333;
@@ -25,7 +24,6 @@ $green: #41c29c;
 $orange-warning: #da6c2e;
 /* OTHERS */
 $blue: #348899;
-$blue-ultra-light: #eaf8fb;
 $blue-light: #c9ecf3;
 /* APP COLORS */
 $primary-color: $red;

src/assets/scss/_icons.scss

 @import './color';
 
-.ico-mglass {
-  position: relative;
-  display: inline-block;
-  background: transparent;
-  border-radius: 30px;
-  border: 2px solid $grey-1;
-  height: 12px;
-  width: 12px;
-  min-width: 12px;
-  max-width: 12px;
-
-  &:after {
-    content: '';
-    height: 2px;
-    width: 8px;
-    background: $grey-1;
-    position: absolute;
-    top: 14px;
-    left: 10px;
-    -webkit-transform: rotate(45deg);
-    -moz-transform: rotate(45deg);
-    -ms-transform: rotate(45deg);
-    -o-transform: rotate(45deg);
-  }
-}
-
-.ico-pin {
-  width: 20px;
-  height: 20px;
-  max-width: 20px;
-  max-height: 20px;
-  border-radius: 50% 50% 50% 0;
-  background: transparent;
-  transform: rotate(-45deg);
-  left: 50%;
-  top: 50%;
-  margin: -4px 0 0 0;
-  &.after {
-    content: '';
-    width: 14px;
-    height: 14px;
-    margin: 8px 0 0 8px;
-    background: transparent;
-    border-radius: 50%;
-  }
-}
-.ico-pin-search {
-  width: 18px;
-  height: 18px;
-  border-radius: 50% 50% 50% 0;
-  -webkit-transform: rotate(-45deg);
-  transform: rotate(-45deg);
-  background-color: $grey-3;
-  &:before {
-    content: '';
-    position: absolute;
-    left: 5px;
-    top: 6px;
-    width: 7px;
-    height: 7px;
-    border-radius: 4px;
-    background-color: $white;
-  }
-}
-.ico-dot-available {
-  height: 12px;
-  width: 12px;
-  background-color: $green;
-  border-radius: 50%;
-  margin-right: 8px;
-}
-.ico-dot-unavailable {
-  height: 12px;
-  width: 12px;
-  background-color: $red;
-  border-radius: 50%;
-  margin-right: 8px;
-}
-.ico-dot-unknown {
-  height: 12px;
-  width: 12px;
-  background-color: $grey-4;
-  border-radius: 50%;
-  margin-right: 8px;
-}
-
-.ico-marker-pin {
-  width: 30px;
-  height: 30px;
-  border-radius: 50% 50% 50% 0;
-  background: $primary-color;
-  position: absolute;
-  transform: rotate(-45deg);
-  left: 50%;
-  top: 50%;
-  margin: -15px 0 0 -15px;
-  &.selected {
-    background: $primary-color;
-  }
-}
-
-.ico-marker-pin::after {
-  content: '';
-  width: 10px;
-  height: 10px;
-  margin: 10px 0 0 10px;
-  background: #fff;
-  position: absolute;
-  border-radius: 50%;
-}
-
-.ico-marker-pin-sm {
-  width: 18px;
-  height: 18px;
-  border-radius: 50% 50% 50% 0;
-  background: $grey-3;
-  transform: rotate(-45deg);
-  margin: 0px 4px;
-  &.absolute {
-    position: absolute;
-    margin: 0;
-  }
-}
-
-.ico-marker-pin-sm::after {
-  content: '';
-  width: 7px;
-  height: 7px;
-  margin: 6px 0 0 5px;
-  background: $app-background;
-  position: absolute;
-  border-radius: 50%;
-}
-
-.ico-profile {
-  .head {
-    width: 12px;
-    height: 12px;
-    border-radius: 25px;
-    border: 2px solid $grey-1;
-  }
-  .body {
-    width: 28px;
-    height: 10px;
-    border-radius: 20px 20px 0px 0px;
-    border-top: 2px solid $grey-1;
-    border-right: 2px solid $grey-1;
-    border-left: 2px solid $grey-1;
-  }
-}
-
-.ico-close {
-  .mdiv {
-    height: 10px;
-    width: 2px;
-    margin-left: 5px;
-    background-color: $grey-3;
-    transform: rotate(45deg);
-    z-index: 1;
-  }
-
-  .md {
-    height: 10px;
-    width: 2px;
-    background-color: $grey-3;
-    transform: rotate(90deg);
-    z-index: 2;
-  }
-}
-
 .ico-close-search {
   width: 16px;
   height: 16px;
@@ -191,356 +21,6 @@
   background-color: $grey-4;
 }
 
-.ic-arrow-left {
-  box-sizing: border-box;
-  position: relative;
-  display: block;
-  transform: scale(var(--ggs, 1));
-  width: 22px;
-  height: 22px;
-}
-.ic-arrow-left::after,
-.ic-arrow-left::before {
-  content: '';
-  display: block;
-  box-sizing: border-box;
-  position: absolute;
-  left: 3px;
-}
-.ic-arrow-left::after {
-  width: 8px;
-  height: 8px;
-  border-bottom: 2px solid;
-  border-left: 2px solid;
-  transform: rotate(45deg);
-  bottom: 7px;
-}
-.ic-arrow-left::before {
-  width: 16px;
-  height: 2px;
-  bottom: 10px;
-  background: currentColor;
-}
-
-.ic-print {
-  width: 0.68em;
-  height: 1em;
-  border-style: solid;
-  border-color: currentcolor;
-  background-color: transparent;
-  border-width: 0.07em;
-  border-radius: 0.05em;
-  margin: 0 0.16em;
-}
-.ic-print:before {
-  width: 1em;
-  height: 0.4em;
-  border-width: 0.07em 0.21em 0;
-  border-style: solid;
-  border-color: currentColor currentcolor transparent;
-  border-radius: 0.05em 0.05em 0 0;
-  top: 0.25em;
-  left: 50%;
-  transform: translateX(-50%);
-  background-image: linear-gradient(transparent 20%, currentcolor 20%, currentcolor 60%, transparent 60%);
-}
-.ic-print:after {
-  width: 0.45em;
-  height: 0.065em;
-  background-color: currentColor;
-  left: 50%;
-  transform: translateX(-50%);
-  top: 0.6em;
-  box-shadow: 0 0.12em, -0.1em -0.28em 0 0.05em;
-}
-
-.ic-mail,
-.ic-mail::after {
-  display: block;
-  box-sizing: border-box;
-  height: 14px;
-  border: 2px solid;
-}
-.ic-mail {
-  color: $grey-2;
-  overflow: hidden;
-  transform: scale(var(--ggs, 1));
-  position: absolute;
-  width: 18px;
-  border-radius: 2px;
-}
-.ic-mail::after {
-  content: '';
-  position: absolute;
-  border-radius: 3px;
-  width: 14px;
-  transform: rotate(-45deg);
-  bottom: 3px;
-  left: 0;
-}
-
-.ic-phone {
-  color: $grey-2;
-  box-sizing: border-box;
-  position: absolute;
-  display: block;
-  width: 22px;
-  height: 22px;
-  transform: scale(var(--ggs, 1));
-}
-.ic-phone::after,
-.ic-phone::before {
-  content: '';
-  display: block;
-  box-sizing: border-box;
-  position: absolute;
-}
-.ic-phone::after {
-  width: 18px;
-  height: 18px;
-  border-top-left-radius: 1px;
-  border-bottom-right-radius: 1px;
-  border-bottom-left-radius: 12px;
-  border-left: 4px solid;
-  border-bottom: 4px solid;
-  left: 2px;
-  bottom: 2px;
-  background: linear-gradient(to left, currentColor 10px, transparent 0) no-repeat right 11px/6px 4px,
-    linear-gradient(to left, currentColor 10px, transparent 0) no-repeat -1px 0/4px 6px;
-}
-.ic-phone::before {
-  width: 20px;
-  height: 20px;
-  border: 6px double;
-  border-top-color: transparent;
-  border-bottom-color: transparent;
-  border-left-color: transparent;
-  border-radius: 50%;
-  transform: rotate(-45deg);
-  bottom: 2px;
-  left: 2px;
-}
-
-.ic-mouse {
-  box-sizing: border-box;
-  position: relative;
-  display: block;
-  transform: scale(var(--ggs, 1));
-  width: 16px;
-  height: 24px;
-  border: 2px solid;
-  border-radius: 10px;
-}
-.ic-mouse::after {
-  content: '';
-  display: block;
-  box-sizing: border-box;
-  position: absolute;
-  border-radius: 3px;
-  width: 2px;
-  height: 6px;
-  background: currentColor;
-  top: 3px;
-  left: 5px;
-}
-
-.ic-wifi {
-  color: #000;
-  position: absolute;
-  margin-left: 7px;
-  margin-top: 13px;
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  border-top: solid 1px currentColor;
-  border-right: solid 1px transparent;
-  border-bottom: solid 1px transparent;
-  border-left: solid 1px transparent;
-}
-.ic-wifi:before {
-  content: '';
-  position: absolute;
-  left: -5px;
-  top: -5px;
-  width: 14px;
-  height: 14px;
-  border-radius: 50%;
-  border-top: solid 1px currentColor;
-  border-right: solid 1px transparent;
-  border-bottom: solid 1px transparent;
-  border-left: solid 1px transparent;
-}
-.ic-wifi:after {
-  content: '';
-  position: absolute;
-  left: -9px;
-  top: -9px;
-  width: 22px;
-  height: 22px;
-  border-radius: 50%;
-  border-top: solid 1px currentColor;
-  border-right: solid 1px transparent;
-  border-bottom: solid 1px transparent;
-  border-left: solid 1px transparent;
-}
-
-.ic-screen {
-  box-sizing: border-box;
-  position: absolute;
-  display: block;
-  transform: scale(var(--ggs, 1));
-  width: 22px;
-  height: 14px;
-  border: 2px solid;
-  border-radius: 3px;
-  margin-top: -4px;
-}
-.ic-screen::after,
-.ic-screen::before {
-  content: '';
-  display: block;
-  box-sizing: border-box;
-  position: absolute;
-  border-radius: 3px;
-  width: 10px;
-  height: 2px;
-  background: currentColor;
-  top: 14px;
-  left: 4px;
-}
-.ic-screen::before {
-  width: 2px;
-  height: 6px;
-  top: 10px;
-  left: 8px;
-}
-
-.ic-globe-alt,
-.ic-globe-alt::after,
-.ic-globe-alt::before {
-  color: $grey-2;
-  display: block;
-  box-sizing: border-box;
-  height: 18px;
-  border: 2px solid;
-}
-.ic-globe-alt {
-  position: absolute;
-  transform: scale(var(--ggs, 1));
-  width: 18px;
-  border-radius: 22px;
-}
-.ic-globe-alt::after,
-.ic-globe-alt::before {
-  content: '';
-  position: absolute;
-  width: 8px;
-  border-radius: 100%;
-  top: -2px;
-  left: 3px;
-}
-.ic-globe-alt::after {
-  width: 24px;
-  height: 20px;
-  border: 2px solid transparent;
-  border-bottom: 2px solid;
-  top: -11px;
-  left: -5px;
-}
-
-.ic-camera {
-  box-sizing: border-box;
-  position: absolute;
-  display: block;
-  transform: scale(var(--ggs, 1));
-  border: 2px solid;
-  border-radius: 3px;
-  width: 18px;
-  height: 12px;
-  perspective: 24px;
-}
-.ic-camera::after,
-.ic-camera::before {
-  content: '';
-  display: block;
-  box-sizing: border-box;
-  position: absolute;
-}
-.ic-camera::before {
-  border: 2px solid;
-  border-left-color: transparent;
-  transform: rotateY(-70deg);
-  width: 8px;
-  height: 8px;
-  right: -7px;
-  top: 0;
-}
-.ic-camera::after {
-  width: 10px;
-  height: 5px;
-  border-top: 2px solid;
-  border-right: 2px solid;
-  top: -5px;
-  right: 2px;
-  border-top-right-radius: 2px;
-}
-
-.ic-calendar-today {
-  box-sizing: border-box;
-  position: absolute;
-  display: block;
-  transform: scale(var(--ggs, 1));
-  width: 18px;
-  height: 18px;
-  border: 2px solid;
-  border-top: 4px solid;
-  border-radius: 3px;
-}
-.ic-calendar-today::before {
-  content: '';
-  display: block;
-  box-sizing: border-box;
-  position: absolute;
-  background: currentColor;
-  height: 4px;
-  width: 4px;
-  border-radius: 2px;
-  right: 2px;
-  bottom: 2px;
-}
-
-.ic-user {
-  display: block;
-  position: absolute;
-  transform: scale(var(--ggs, 1));
-  box-sizing: border-box;
-  width: 12px;
-  height: 18px;
-}
-.ic-user::after,
-.ic-user::before {
-  content: '';
-  display: block;
-  box-sizing: border-box;
-  position: absolute;
-  border: 2px solid;
-}
-.ic-user::before {
-  width: 8px;
-  height: 8px;
-  border-radius: 30px;
-  top: 0;
-  left: 2px;
-}
-.ic-user::after {
-  width: 12px;
-  height: 9px;
-  border-bottom: 0;
-  border-top-left-radius: 3px;
-  border-top-right-radius: 3px;
-  top: 9px;
-}
-
 .ico-close-details {
   width: 44px;
   height: 44px;
@@ -570,145 +50,3 @@
     transform: rotate(-45deg);
   }
 }
-.ico-menu,
-.ico-menu:before,
-.ico-menu:after {
-  cursor: pointer;
-  border-radius: 1px;
-  height: 2px;
-  width: 23px;
-  background: $black;
-  position: absolute;
-  display: block;
-  content: '';
-}
-.ico-menu {
-  &:before {
-    top: -6px;
-  }
-  &:after {
-    bottom: -6px;
-  }
-}
-
-.ico-gg-eye-alt {
-  position: relative;
-  display: block;
-  transform: scale(var(--ggs, 1));
-  width: 24px;
-  height: 18px;
-  border-bottom-right-radius: 100px;
-  border-bottom-left-radius: 100px;
-  overflow: hidden;
-  box-sizing: border-box;
-}
-.ico-gg-eye-alt::after,
-.ico-gg-eye-alt::before {
-  content: '';
-  display: block;
-  border-radius: 100px;
-  position: absolute;
-  box-sizing: border-box;
-}
-.ico-gg-eye-alt::after {
-  top: 2px;
-  box-shadow: inset 0 -8px 0 2px $grey-3, inset 0 0 0 2px $grey-3;
-  width: 24px;
-  height: 24px;
-}
-.ico-gg-eye-alt::before {
-  width: 8px;
-  height: 8px;
-  border: 2px solid $grey-3;
-  bottom: 4px;
-  left: 8px;
-  background-color: $grey-3;
-}
-
-.ico-gg-add {
-  box-sizing: border-box;
-  position: relative;
-  display: block;
-  color: $green-1;
-  width: 32px;
-  height: 32px;
-}
-.ico-gg-add::after,
-.ico-gg-add::before {
-  content: '';
-  display: block;
-  box-sizing: border-box;
-  position: absolute;
-  width: 14px;
-  height: 2px;
-  background: currentColor;
-  border-radius: 5px;
-  top: 8px;
-  left: 0px;
-}
-.ico-gg-add::after {
-  width: 2px;
-  height: 14px;
-  top: 2px;
-  left: 6px;
-}
-
-.gg-eye-alt {
-  position: relative;
-  display: block;
-  width: 18px;
-  height: 12px;
-  border-bottom-right-radius: 100px;
-  border-bottom-left-radius: 100px;
-  overflow: hidden;
-  box-sizing: border-box;
-}
-.gg-eye-alt::after,
-.gg-eye-alt::before {
-  content: '';
-  display: block;
-  border-radius: 100px;
-  position: absolute;
-  box-sizing: border-box;
-}
-.gg-eye-alt::after {
-  top: 2px;
-  box-shadow: inset 0 -8px 0 2px, inset 0 0 0 2px;
-  width: 18px;
-  height: 18px;
-}
-.gg-eye-alt::before {
-  width: 2px;
-  height: 2px;
-  border: 2px solid black;
-  bottom: 3px;
-  left: 7px;
-  background-color: black;
-}
-
-.ico-gg-check {
-  box-sizing: border-box;
-  position: relative;
-  display: block;
-  transform: scale(var(--ggs, 1));
-  width: 22px;
-  height: 22px;
-  border: 1px solid transparent;
-  border-radius: 100px;
-  color: $white;
-}
-.ico-gg-check::after {
-  content: '';
-  display: block;
-  box-sizing: border-box;
-  position: absolute;
-  left: 5px;
-  top: -3px;
-  width: 7px;
-  height: 12px;
-  border-width: 0 2px 2px 0;
-  border-style: solid;
-  transform-origin: bottom left;
-  transform: rotate(45deg);
-  color: $white;
-}

src/assets/scss/_inputs.scss

@@ -28,6 +28,7 @@
   outline: none !important;
 }
 
+/**** DATE PICKER STYLE ****/
 /* The switch - the box around the slider */
 .switch {
   position: relative;

src/assets/scss/_layout.scss

 $header-height: 55px;
 $footer-height: 56px;
-$footer-form-height: 36px;
 $header-height-phone: 70px;
 $footer-height-phone: 75px;
-$progressBar-height: 50px;
 $header-post-height: 180px;
-$header-post-height-mobile: 140px;
 $content-desktop-width: 980px;