save

src/app/pages/search/search.module.ts

@@ -7,6 +7,7 @@ import { IonicModule } from '@ionic/angular';
 import { SearchPageRoutingModule } from './search-routing.module';
 
 import { SearchPage } from './search.page';
+import { BtnModalDismissPageModule } from 'src/app/shared/btn-modal-dismiss/btn-modal-dismiss.module';
 /* import { ComponentsModule } from 'src/app/components/components.module'; */
 /* import { TagCloudModule } from 'angular-tag-cloud-module'; */
 
@@ -17,7 +18,8 @@ import { SearchPage } from './search.page';
     IonicModule,
     /* TagCloudModule, */
     /* ComponentsModule, */
-    SearchPageRoutingModule
+    SearchPageRoutingModule,
+    BtnModalDismissPageModule,
   ],
   declarations: [SearchPage],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]

src/app/pages/search/search.page.html

@@ -2,8 +2,7 @@
 <!-- HEADER-->
 <ion-header class="ion-no-border header-main  d-md-flex flex-md-row-reverse">
   <ion-progress-bar type="indeterminate" class="loader" *ngIf="showLoader"></ion-progress-bar>
-  <div class="d-flex ion-justify-content-between">
-    
+  <div class="top-box d-flex ion-justify-content-between">
     <ion-form  [class.d-none]="!showSearchInput">
       <div class="d-flex search-input-container ion-justify-content-between" >
         <div class="icon">
@@ -33,7 +32,13 @@
     <div class="profile">
       <ion-icon class="icon" src="assets/images/icons-profile.svg"></ion-icon>
     </div>
-  </div>  
+
+    <div class="btn-modal-dismiss">
+      <button class="btn-no-color" (click)="close()">
+        <ion-icon class="icon" src="assets/images/icons-search-close.svg"></ion-icon>
+      </button>
+    </div>
+  </div>
 
   <!-- Search drop down -->
   <div class="advance-search pa-0 pt-10  flex-md-grow-1" *ngIf="showAdvanceSearch">

src/app/pages/search/search.page.scss

@@ -1,3 +1,9 @@
+.top-box{
+  display: flex;
+  align-content: center;
+  align-items: center;
+  justify-content: center;
+}
 .header-main{
   padding: 5px 18px;
   padding-bottom: 2px;
@@ -6,6 +12,21 @@
     width: 100%;
     padding-right: 10px;
   }
+  .btn-modal-dismiss{
+    width: 50px !important;
+   
+    padding: 0 !important;
+    margin: 0 !important;
+    margin-left: 25px !important;
+    border: 1px solid red;
+
+    btn-modal-dismiss icon{
+      font-size: 45px !important;
+    }
+  }
+  .ion-align-content-center{
+    align-content: center;
+  }
   .search-input-container{
     background-color: white;
     border-radius: 27.5px;