fix(search) : fix input + design

src/app/structure-list/components/modal-filter/modal-filter.component.scss

@@ -10,13 +10,13 @@
     margin-left: 0;
   }
 
-  margin-left: 206px;
+  margin-left: 196px;
 }
 .modalplusFiltres {
   @media #{$desktop} {
     margin-left: 0;
   }
-  margin-left: 412px;
+  margin-left: 396px;
 }
 .modal {
   max-height: 648px;
@@ -29,6 +29,7 @@
   position: absolute;
   border: 1px solid $grey-5;
   border-radius: 6px;
+  margin-top: 3.5px;
   @include background-hash;
   ::-webkit-scrollbar {
     width: 10px;

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

@@ -9,10 +9,16 @@
       fxLayoutGap="1.5vw"
       (ngSubmit)="applyFilter(searchForm.value.searchTerm)"
     >
-      <div class="icon">
-        <div class="ico-pin-search grey"></div>
+      <div class="inputSection" fxLayout="row" fxLayoutAlign="space-between center">
+        <input type="text" formControlName="searchTerm" placeholder="Rechercher une adresse, une association..." />
+        <div class="icon close" (click)="clearInput()">
+          <div class="ico-close grey"></div>
+        </div>
+        <div class="separator"></div>
+        <div class="icon pin">
+          <div class="ico-pin-search blue"></div>
+        </div>
       </div>
-      <input type="text" formControlName="searchTerm" placeholder="Rechercher une adresse, une association..." />
       <div class="searchButton">
         <button type="submit">Rechercher</button>
       </div>

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

@@ -4,6 +4,7 @@
 @import '../../../../assets/scss/breakpoint';
 @import '../../../../assets/scss/shapes';
 @import '../../../../assets/scss/buttons';
+@import '../../../../assets/scss/inputs';
 
 .header {
   .title {
@@ -17,24 +18,31 @@
 .content {
   margin: 10px 0 0px 0;
   .icon {
-    border: 1px solid $grey;
-    padding: 4px 6px 8px 6px;
+    padding: 0 6px 0 6px;
     border-radius: 4px;
     cursor: pointer;
+    &.pin {
+      margin-bottom: 4px;
+    }
   }
   input {
-    width: 100%;
-    background-color: $grey-5;
-    border: none;
     @include cn-regular-14;
-    display: flex;
-    align-items: center;
-    padding-left: 10px;
-    text-overflow: ellipsis;
-    color: $grey-1;
-    outline: none;
+    @include input-search;
   }
   .searchSection {
+    .separator {
+      height: 100%;
+      width: 2px;
+      background-color: $grey-6;
+      margin: 0 5px 0 5px;
+    }
+    .inputSection {
+      padding: 6px 3px 6px 6px;
+      min-width: 463px;
+      border: 1px solid $grey-6;
+      background-color: $white;
+      height: 40px;
+    }
     .searchButton {
       border: 1px solid $grey-6;
       border-radius: 6px;
@@ -47,7 +55,7 @@
     }
   }
   .btnSection {
-    padding: 16px 0 8px 0;
+    padding: 16px 0 0px 0;
     button {
       @include btn-filter;
       .btnText {
@@ -134,8 +142,7 @@
   }
 }
 .footerSearchSection {
-  margin-bottom: 30px;
-  margin-right: 20px;
+  margin: 17px 0px 17px 0px;
 
   a {
     @include cn-bold-14;

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

@@ -38,6 +38,11 @@ export class SearchComponent implements OnInit {
 
     this.checkedModulesFilter = new Array();
   }
+  // Clear input search
+  public clearInput(): void {
+    this.searchForm.reset();
+    this.applyFilter(null);
+  }
 
   // Sends an array containing all filters
   public applyFilter(term: string): void {

src/assets/scss/_icons.scss

@@ -66,8 +66,8 @@
     border-radius: 4px;
     background-color: white;
   }
-  &.grey {
-    background-color: #828282;
+  &.blue {
+    background-color: $secondary-color;
   }
 }
 .ico-dot-available {
@@ -123,3 +123,23 @@
     border-left: 2px solid $purple;
   }
 }
+
+.ico-close {
+  width: 15px;
+  height: 13px;
+  text-align: center;
+  &:before {
+    transform: rotate(45deg);
+  }
+  &:after {
+    transform: rotate(-45deg);
+  }
+}
+.ico-close:before,
+.ico-close:after {
+  position: absolute;
+  content: '';
+  height: 14px;
+  width: 2px;
+  background-color: $grey-6;
+}

src/assets/scss/_inputs.scss

+@mixin input-search {
+  width: 100%;
+  border: none;
+  padding-left: 10px;
+  text-overflow: ellipsis;
+  color: $grey-1;
+  outline: none;
+  font-style: italic;
+}