From 40543826b75d9ea7185f8cb6304fbf54cee45b9f Mon Sep 17 00:00:00 2001
From: Peter Maquiran <you@example.com>
Date: Tue, 5 Jan 2021 11:37:07 +0100
Subject: [PATCH] Add search result options

---
 src/app/home/home.page.html           |  4 +-
 src/app/pages/search/search.page.html | 76 +++++++++++++++++++++++++--
 src/app/pages/search/search.page.scss | 60 +++++++++++++++------
 3 files changed, 118 insertions(+), 22 deletions(-)

diff --git a/src/app/home/home.page.html b/src/app/home/home.page.html
index 1c45791b3..16eebfd41 100644
--- a/src/app/home/home.page.html
+++ b/src/app/home/home.page.html
@@ -24,10 +24,10 @@
           <ion-icon class="nav-icon" src="assets/images/icons-nav-actions.svg"></ion-icon>
           <ion-label>Acções</ion-label>
         </ion-tab-button>
-        <!-- <ion-tab-button tab="search">
+         <ion-tab-button tab="search">
           <ion-icon name="search"></ion-icon>
           <ion-label>Pesquisa</ion-label>
-        </ion-tab-button> -->
+        </ion-tab-button>
         <!-- <ion-tab-button tab="chat">
           <ion-icon class="nav-icon" src="assets/images/icons-nav-chat-inactive.svg"></ion-icon>
           <ion-label>Chat</ion-label>
diff --git a/src/app/pages/search/search.page.html b/src/app/pages/search/search.page.html
index 5742ae085..517ddefc2 100644
--- a/src/app/pages/search/search.page.html
+++ b/src/app/pages/search/search.page.html
@@ -4,12 +4,78 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content>
+<ion-content class="content">
   <ion-form>
-    <div class="div-search">
-      <ion-input class="search-input" type="search" placeholder="FMI"></ion-input>
-      <ion-icon class="icon-search" slot="end" name="search"></ion-icon>
-    </div>
+    <ion-grid class="search-input-container">
+      <ion-row class="ion-justify-content-around">
+        <ion-col class="icon-search-container">
+          <div class="icon-search-container">
+            <ion-icon class="icon-search" slot="end" name="search"></ion-icon>
+          </div>
+          
+        </ion-col>
+        <ion-col>
+          <div>
+            <ion-input class="search-input" type="search" placeholder="FMI"></ion-input>
+          </div>
+          
+        </ion-col>
+        <ion-col class="icon-search-container">
+          <div>
+            <ion-icon class="icon-search" slot="end" name="search"></ion-icon>
+          </div>
+        </ion-col>
+      </ion-row>
+    </ion-grid>
+
+  
+    <ion-grid class="search-result">
+      <ion-row class="ion-justify-content-between ion-text-center">
+        <ion-col >
+          <div class="button">
+            <p>Protocolos</p>
+            <ion-label class="label">10</ion-label>
+
+          </div>
+          
+        </ion-col>
+        <ion-col>
+          <div class="button">
+            <p>Faturas</p>
+            <ion-label class="label">10</ion-label>
+          </div>
+          
+        </ion-col>
+        <ion-col >
+          <div class="button">
+            <p>Relatório</p>
+            <ion-label class="label">10</ion-label>
+          </div>
+        </ion-col>
+      </ion-row>
+      <ion-row class="ion-justify-content-between ion-text-center">
+        <ion-col >
+          <div class="button">
+            <p>Protocolos</p>
+            <ion-label class="label">10</ion-label>
+          </div>
+          
+        </ion-col>
+        <ion-col>
+          <div class="button">
+            <p>Faturas</p>
+            <ion-label class="label">10</ion-label>
+          </div>
+        
+        </ion-col>
+        <ion-col >
+          <div class="button">
+            <p>Relatório</p>
+            <ion-label class="label">10</ion-label>
+          </div>
+        </ion-col>
+      </ion-row>
+    </ion-grid>
     
   </ion-form>
 </ion-content>
diff --git a/src/app/pages/search/search.page.scss b/src/app/pages/search/search.page.scss
index e2c1ca1a4..4226aacc8 100644
--- a/src/app/pages/search/search.page.scss
+++ b/src/app/pages/search/search.page.scss
@@ -1,18 +1,48 @@
-.div-search{
-    width: 94%;
-    margin: 3%;
-    border: 0.5px solid #333;
-    padding: 0 5px 0 5px;
-    overflow: auto;
-
-}
-.search-input{
-    width: 90%;
-    float: left;
+.search-input-container{
+    border: solid 1px #ebebeb;
 }
 .icon-search{
-    width: 8%;
-    padding: 8px 3px 5px 2px;
-    font-size: 25px;
-    float: right;
+    font-size: 16px;
+
+}
+
+.icon-search-container, .icon-search{
+    width: 45px;
+    height: 45px;
+}
+
+.search-result{
+  margin-top: 20px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #ebebeb;
+  .button{
+    border: solid 1px #e9e9e9;
+    
+    padding: 5px 20px;
+    p{
+      padding: 0px;
+      margin: 0px;
+      font-family: Roboto;
+      color: #0d89d1;
+      font-size: 15px;
+    }
+    .label{
+      font-family: Roboto;
+      font-size: 13px;
+      font-weight: 300;
+      color: #797979;
+    }
+    border-radius: 15px;
+  }
+  
+  .button:hover{
+    background-color: #42b9fe;
+    color: white;
+    p{
+      color: white;
+    }
+    .label{
+      color: white;
+    }
+  }
 }
\ No newline at end of file