From 4cf3ab7d11c08939d89963c7e7c0e83e103a6643 Mon Sep 17 00:00:00 2001
From: Abhishek <guywhodesigns@gmail.com>
Date: Jul 25 2018 17:58:10 +0000
Subject: update package page ui


---

diff --git a/src/pages/package-search/package-search.html b/src/pages/package-search/package-search.html
old mode 100644
new mode 100755
index 015bded..3a10377
--- a/src/pages/package-search/package-search.html
+++ b/src/pages/package-search/package-search.html
@@ -1,28 +1,30 @@
-<!--
-  Generated template for the SearchPage page.
-
-  See http://ionicframework.com/docs/components/#navigation for more info on
-  Ionic pages and navigation.
--->
-<ion-header>
-
-  <ion-navbar>
-    <ion-title>Fedora Package Search</ion-title>
-  </ion-navbar>
-
+<ion-header class="pkg-head">
+  <ion-title>
+    <img src="./assets/img/back.svg" navPop>
+    <span>Fedora Package Search</span>
+  </ion-title>
+  <ion-searchbar [(ngModel)]="searchQuery" (cancel)="clear()" (change)="search()" autocorrect="off" placeholder="Enter a package name...">
+  </ion-searchbar>
 </ion-header>
 
 
-<ion-content padding>
-  <ion-searchbar [(ngModel)]="searchQuery" (cancel)="clear()" (change)="search()" autocorrect="off"></ion-searchbar>
+<ion-content class="pkg-content">
   <ion-list>
-    <ion-list-header *ngIf="packages.length > 0">
-        Showing {{ matches }} results
-      </ion-list-header>
-    <ion-item (click)="showPackage(pkg)" *ngFor="let pkg of packages">
-      <ion-icon [ngClass]="getPackageType(pkg)" name="cube" item-start></ion-icon>
-      <h2>{{ pkg.name }}</h2>
-      <h3>{{ pkg.summary }}</h3>
-    </ion-item>
+    <div *ngIf="packages.length > 0">
+      <ion-label>Showing {{ matches }} results</ion-label>
+      <ion-card (click)="showPackage(pkg)" tappable *ngFor="let pkg of packages">
+        <ion-row style="margin-bottom: 4px">
+          <ion-col>
+            <ion-card-header>
+              <ion-icon [ngClass]="getPackageType(pkg)" name="cube" item-start></ion-icon> {{ pkg.name }}</ion-card-header>
+          </ion-col>
+        </ion-row>
+        <ion-row>
+          <ion-col>
+            <ion-card-content>{{ pkg.summary }}</ion-card-content>
+          </ion-col>
+        </ion-row>
+      </ion-card>
+    </div>
   </ion-list>
 </ion-content>
diff --git a/src/pages/package-search/package-search.scss b/src/pages/package-search/package-search.scss
old mode 100644
new mode 100755
index dfc5957..936baec
--- a/src/pages/package-search/package-search.scss
+++ b/src/pages/package-search/package-search.scss
@@ -1,3 +1,86 @@
-page-search {
+.pkg-head {
+  padding: 16px 24px;
+  background-color: #fff;
+  span {
+    font-family: "Montserrat-Regular";
+    font-size: 16px;
+    color: #9A9FA6;
+    letter-spacing: 0.57px;
+    margin: 0 0 16px 16px;
+    text-transform: uppercase;
+  }
+  .toolbar-title {
+    padding: 0 !important;
+  }
+  .searchbar {
+    padding: 16px 0 0 0;
+    .searchbar-search-icon {
+      right: 90%;
+      background-image: url(../assets/img/search.svg);
+    }
+    .searchbar-input {
+      box-shadow: none;
+      padding: 8px 12px 8px 48px;
+      line-height: 2.5rem;
+      border: 1px solid transparent;
+      font-family: "OpenSans-Regular";
+      background: rgba(239, 240, 241, 0.50);
+      &:focus {
+        background: #fff;
+        border: 1px solid rgba(#3B6FBB, 0.5);
+      }
+    }
+  }
+  &::after {
+    background-image: none;
+    box-shadow: 0 2px 4px 0 rgba(86, 86, 86, 0.05);
+  }
+}
 
+.pkg-content {
+  [col-1],
+  [col-11] {
+    padding: 0 !important;
+  }
+  .col{
+    padding:0;
+    ion-icon{
+      color: unset;
+      margin-right: 4px;
+      vertical-align: middle;
+    }
+  }
+  background-color: #EFF0F1 !important;
+  ion-list {
+    margin: 0 !important;
+  }
+  .card {
+    padding: 12px 16px;
+    margin: 0 0 2px 0;
+    width: 100%;
+    background-color: #fff !important;
+    box-shadow: none;
+  }
+  .emptystate {
+    height: 50vh;
+  }
+  .card-header {
+    font-family: "OpenSans-Semibold";
+    font-size: 14px;
+    color: #3B6FBB;
+    line-height: 20px;
+    padding: 0;
+  }
+  ion-label {
+    padding: 16px 16px 12px 16px;
+    background-color: #fff;
+    margin: 0;
+  }
+  .card-content {
+    font-family: "OpenSans-Regular";
+    font-size: 12px;
+    color: #535961;
+    line-height: 20px;
+    padding: 0;
+  }
 }
diff --git a/src/pages/package-search/package-search.ts b/src/pages/package-search/package-search.ts
old mode 100644
new mode 100755