+ import { MorePage, AboutDetailPage, AboutPage, BookmarksPage} from '../pages/more/more';

+     AboutDetailPage,

+     AboutPage,

+     BookmarksPage,

+     AboutDetailPage,

+     BookmarksPage,

+     AboutPage,

+   color: #A07CBC!important;

+   color: #E59728!important;

+ }

+ 

+ .hidden{

+     display: none;

+ <svg width="76" height="58" viewBox="0 0 76 58" fill="none" xmlns="http://www.w3.org/2000/svg">

+ <path d="M73.3972 6.05428H66.0863V0.760014C66.0863 0.340182 65.7461 0 65.3263 0H0.760015C0.340183 0 0 0.340182 0 0.760014V51.0549C0 53.7815 2.21848 56 4.94511 56H69.3617C72.0059 56 74.1572 53.8489 74.1572 51.2046V6.81429C74.1572 6.39446 73.817 6.05428 73.3972 6.05428ZM72.6372 51.2046C72.6372 53.0107 71.1678 54.48 69.3617 54.48C67.5556 54.48 66.0863 53.0107 66.0863 51.2046V49.0998C66.0863 48.68 65.7461 48.3398 65.3263 48.3398C64.9065 48.3398 64.5663 48.68 64.5663 49.0998V51.2046C64.5663 52.4702 65.06 53.6221 65.8638 54.48H4.94511C3.05647 54.48 1.52003 52.9434 1.52003 51.0547V1.52003H64.5664V42.0019C64.5664 42.4217 64.9066 42.7619 65.3264 42.7619C65.7463 42.7619 66.0865 42.4217 66.0865 42.0019V7.5743H72.6373V51.2046H72.6372ZM31.0255 10.0897H6.81307C6.39324 10.0897 6.05306 10.4298 6.05306 10.8497V29.0081C6.05306 29.4279 6.39324 29.7681 6.81307 29.7681H31.0255C31.4453 29.7681 31.7855 29.4279 31.7855 29.0081V10.8497C31.7855 10.43 31.4453 10.0897 31.0255 10.0897ZM30.2655 28.2481H7.57309V11.6097H30.2655V28.2481ZM34.3008 10.8497C34.3008 10.4298 34.641 10.0897 35.0608 10.0897H59.2732C59.6931 10.0897 60.0332 10.4298 60.0332 10.8497C60.0332 11.2695 59.6931 11.6097 59.2732 11.6097H35.0608C34.641 11.6097 34.3008 11.2695 34.3008 10.8497ZM34.3008 16.9042C34.3008 16.4844 34.641 16.1442 35.0608 16.1442H59.2732C59.6931 16.1442 60.0332 16.4844 60.0332 16.9042C60.0332 17.3241 59.6931 17.6643 59.2732 17.6643H35.0608C34.641 17.6643 34.3008 17.3239 34.3008 16.9042ZM34.3008 22.9587C34.3008 22.5388 34.641 22.1987 35.0608 22.1987H59.2732C59.6931 22.1987 60.0332 22.5388 60.0332 22.9587C60.0332 23.3785 59.6931 23.7187 59.2732 23.7187H35.0608C34.641 23.7187 34.3008 23.3784 34.3008 22.9587ZM35.0608 29.773C34.641 29.773 34.3008 29.4328 34.3008 29.0129C34.3008 28.5931 34.641 28.2529 35.0608 28.2529H59.2732C59.6931 28.2529 60.0332 28.5931 60.0332 29.0129C60.0332 29.4328 59.6931 29.773 59.2732 29.773H35.0608ZM31.7855 35.0674C31.7855 35.4872 31.4453 35.8274 31.0255 35.8274H6.81307C6.39324 35.8274 6.05306 35.4872 6.05306 35.0674C6.05306 34.6475 6.39324 34.3074 6.81307 34.3074H31.0255C31.4453 34.3074 31.7855 34.6475 31.7855 35.0674ZM31.7855 41.1171C31.7855 41.5369 31.4453 41.8771 31.0255 41.8771H6.81307C6.39324 41.8771 6.05306 41.5369 6.05306 41.1171C6.05306 40.6973 6.39324 40.3571 6.81307 40.3571H31.0255C31.4453 40.3571 31.7855 40.6973 31.7855 41.1171ZM31.7855 47.1667C31.7855 47.5865 31.4453 47.9267 31.0255 47.9267H6.81307C6.39324 47.9267 6.05306 47.5865 6.05306 47.1667C6.05306 46.7468 6.39324 46.4066 6.81307 46.4066H31.0255C31.4453 46.4066 31.7855 46.747 31.7855 47.1667ZM60.3216 35.0674C60.3216 35.4872 59.9814 35.8274 59.5616 35.8274H35.3492C34.9294 35.8274 34.5892 35.4872 34.5892 35.0674C34.5892 34.6475 34.9294 34.3074 35.3492 34.3074H59.5616C59.9813 34.3074 60.3216 34.6475 60.3216 35.0674ZM60.3216 41.1171C60.3216 41.5369 59.9814 41.8771 59.5616 41.8771H35.3492C34.9294 41.8771 34.5892 41.5369 34.5892 41.1171C34.5892 40.6973 34.9294 40.3571 35.3492 40.3571H59.5616C59.9813 40.3571 60.3216 40.6973 60.3216 41.1171ZM60.3216 47.1667C60.3216 47.5865 59.9814 47.9267 59.5616 47.9267H35.3492C34.9294 47.9267 34.5892 47.5865 34.5892 47.1667C34.5892 46.7468 34.9294 46.4066 35.3492 46.4066H59.5616C59.9813 46.4066 60.3216 46.747 60.3216 47.1667Z" transform="translate(1 1)" fill="#B2B5BA" stroke="#B2B5BA" stroke-width="0.5"/>

+ </svg>

+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">

+ <path d="M13.1155 11.8587L10.6667 11.2471L10.568 10.8533C12.2445 10.5529 13.1147 10.0471 13.1538 10.024C13.2791 9.95021 13.3573 9.81687 13.368 9.672C13.3787 9.52712 13.3138 9.38313 13.2009 9.29154C13.1893 9.28267 12.0587 8.32975 12.0587 5.04354C12.0587 2.13242 11.3565 0.656875 9.97154 0.656875H9.824C9.35467 0.210667 8.96446 0 8 0C6.72888 0 3.94221 1.27021 3.94221 5.04354C3.94221 8.32975 2.81067 9.28267 2.80621 9.28708C2.68708 9.37508 2.62133 9.51729 2.62842 9.66488C2.63642 9.81242 2.71642 9.94667 2.84354 10.0231C2.88267 10.0471 3.74487 10.5564 5.432 10.856L5.33421 11.2471L2.88533 11.8595C1.18579 12.2835 0 13.8035 0 15.5555C0 15.6738 0.0462083 15.7875 0.129792 15.8702C0.213333 15.9529 0.327125 16 0.444458 16L15.5556 15.9982C15.8009 15.9982 16 15.7991 16 15.5538C16 13.8035 14.8142 12.2835 13.1155 11.8587ZM0.922667 15.1093C1.09779 13.9609 1.944 13.0107 3.10046 12.7209L5.808 12.0444C5.96713 12.0044 6.09246 11.88 6.13154 11.7209L6.41154 10.6C6.44267 10.4773 6.41954 10.3485 6.34933 10.2435C6.27821 10.1395 6.16713 10.0702 6.04179 10.0524C4.99379 9.90754 4.24358 9.66663 3.79558 9.48888C4.23825 8.848 4.83113 7.52533 4.83113 5.04354C4.83113 1.62842 7.37067 0.888875 8 0.888875C8.76713 0.888875 8.91913 1.00708 9.32713 1.416C9.41067 1.49867 9.52358 1.54579 9.64179 1.54579H9.97067C10.7325 1.54579 11.1689 2.82133 11.1689 5.04358C11.1689 7.52358 11.7609 8.84625 12.2027 9.48713C11.7529 9.66492 11 9.90492 9.95733 10.0516C9.83288 10.0685 9.72088 10.1387 9.65067 10.2427C9.58046 10.3476 9.55733 10.4765 9.58846 10.5992L9.86846 11.7218C9.90846 11.881 10.0329 12.0063 10.192 12.0454L12.8995 12.7218C14.0551 13.0107 14.9013 13.9618 15.0773 15.1112L0.922667 15.1093Z" fill="#C4C7CC"/>

+ </svg>

+ <svg width="13" height="16" viewBox="0 0 13 16" fill="none" xmlns="http://www.w3.org/2000/svg">

+ <path d="M10.8333 0H2.16665C0.9724 0 0 0.747342 0 1.66665V15.6666C0 15.8013 0.105747 15.9233 0.2678 15.974C0.429853 16.0266 0.6162 15.9973 0.740147 15.902L6.5 11.4713L12.2599 15.9027C12.3431 15.966 12.454 16 12.5667 16C12.6221 16 12.6785 15.992 12.7322 15.9747C12.8943 15.9233 13 15.8013 13 15.6667V1.66668C13 0.747999 12.0276 0 10.8333 0ZM12.1333 14.8613L6.8068 10.764C6.72185 10.6993 6.61095 10.6666 6.5 10.6666C6.38905 10.6666 6.27815 10.6993 6.1932 10.7646L0.866653 14.862V1.66665C0.866653 1.11531 1.44991 0.666655 2.16665 0.666655H10.8333C11.5501 0.666655 12.1333 1.11531 12.1333 1.66665V14.8613H12.1333Z" fill="#C4C7CC"/>

+ </svg>

+ <svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">

+ <path d="M14.8565 8.57153C14.8565 12.6675 11.5239 16 7.42858 16C3.33251 16 0 12.6673 0 8.57153C0 6.45319 0.908425 4.42865 2.49271 3.02017C2.72825 2.81026 3.09038 2.83031 3.29969 3.06694C3.50952 3.30349 3.48823 3.66302 3.25273 3.87274C1.91178 5.06706 1.14272 6.77903 1.14272 8.57153C1.14272 12.038 3.96259 14.8571 7.42858 14.8571C10.8945 14.8571 13.7138 12.038 13.7138 8.57153C13.7138 6.77903 12.9457 5.06702 11.6065 3.87508C11.37 3.66524 11.3478 3.30361 11.5576 3.06916C11.7695 2.83031 12.1312 2.81026 12.3655 3.02017C13.9483 4.42869 14.8565 6.45319 14.8565 8.57153ZM7.42858 6.85719C7.74447 6.85719 8.00002 6.60269 8.00002 6.28575V0.571435C8.00002 0.256718 7.74447 0 7.42858 0C7.1127 0 6.85704 0.256794 6.85704 0.571435V6.28575C6.85704 6.60269 7.1127 6.85719 7.42858 6.85719Z" fill="#C4C7CC"/>

+ </svg>

+ <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">

+ <path d="M1.08593 8.09004V8.14004H1.13593H3.49091C3.78191 8.14004 4.00887 8.36701 4.00887 8.65801V15.432C4.00887 15.723 3.78191 15.95 3.49091 15.95H0.567965C0.276965 15.95 0.05 15.723 0.05 15.432V9.90476V8.65801V8.02078C0.05 3.62935 3.62935 0.05 8.02078 0.05C12.4122 0.05 15.9917 3.62935 16.0193 8.02109V8.65801V9.90476V15.432C16.0193 15.723 15.7923 15.95 15.5013 15.95H12.5784C12.2874 15.95 12.0604 15.723 12.0604 15.432V8.65801C12.0604 8.36701 12.2874 8.14004 12.5784 8.14004H14.9333H14.9833V8.09004V8.02078C14.9833 4.18364 11.8718 1.07208 8.03463 1.07208C4.19743 1.07208 1.08593 4.19756 1.08593 8.02078V8.09004ZM2.92294 14.9279H2.97294V14.8779V9.22597V9.21212V9.16212H2.92294H1.12208H1.07208V9.21212V9.90476V14.8779V14.9279H1.12208H2.92294ZM14.9195 14.9279H14.9695V14.8779V9.91861V9.23983V9.18983H14.9195H13.1325H13.0825V9.23983V14.8779V14.9279H13.1325H14.9195Z" fill="#C4C7CC" stroke="white" stroke-width="0.1"/>

+ </svg>

+ <svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">

+ <path d="M15.3218 15.4886L10.8332 10.8205C11.9781 9.67232 12.6874 8.08942 12.6874 6.34369C12.6874 2.8456 9.84179 0 6.34369 0C2.8456 0 0 2.8456 0 6.34369C0 9.84179 2.8456 12.6874 6.34369 12.6874C7.87917 12.6874 9.28837 12.1385 10.3867 11.2277L14.8862 15.9073C14.9454 15.9692 15.0246 16 15.104 16C15.1795 16 15.2548 15.9719 15.3134 15.9157C15.4336 15.8 15.4372 15.6088 15.3218 15.4886ZM6.34369 12.0832C3.17879 12.0832 0.604161 9.50859 0.604161 6.34369C0.604161 3.17879 3.17879 0.604161 6.34369 0.604161C9.50859 0.604161 12.0832 3.17879 12.0832 6.34369C12.0832 9.50859 9.50829 12.0832 6.34369 12.0832Z" transform="translate(1 1)" fill="#CBCED3" stroke="#CBCED3" stroke-width="0.4"/>

+ </svg>

+ <!--

+ Template for the bookmarks page

+ -->

+ 

+ <ion-header>

+   <ion-title>

+     <img src="./assets/img/back.svg" tappable navPop>

+     <span>{{selectedItem.title}}</span>

+   </ion-title>

+ </ion-header>

+ <ion-content>

+    <p [innerHTML]="selectedItem.description"></p>

+ </ion-content>

+ <!--

+ Template for the bookmarks page

+ -->

+ 

+ <ion-header>

+   <ion-title>

+     <img src="./assets/img/back.svg" tappable navPop>

+     <span>About Us</span>

+   </ion-title>

+ </ion-header>

+ <ion-content>

+   <ion-list no-lines>

+     <button ion-item *ngFor="let item of navItems" (click)="openAboutDetailPage(item)" icon-start>

+       {{ item.title }}

+     </button>

+   </ion-list>

+ </ion-content>

+ <!--

+ Template for the bookmarks page

+ -->

+ 

+ <ion-header>

+   <ion-title>

+     <img src="./assets/img/back.svg" tappable navPop>

+     <span>Bookmarks</span>

+   </ion-title>

+ </ion-header>

+ <ion-content>

+   <div class="emptystate">

+     <img src="./assets/img/es-bookmarks.svg">

+     <h1>We couldn't find any articles</h1>

+     <h2>Press <img src="./assets/img/bookmark-inactive.svg"> to save an article for offline viewing</h2>

+     <button (click)="toMag()">Read Latest Articles</button>

+   </div>

+ </ion-content>

+ <ion-header no-border>

+   <ion-navbar>

+     <ion-title>

+       <img src="./assets/img/Fedora.svg" height="24px" alt="Fedora">

+     </ion-title>

+     <ion-buttons end>

+       <button tappable (click)="openNotificationPage()">

+         <img src="./assets/img/notification.svg">

+       </button>

+     </ion-buttons>

+   </ion-navbar>

+ </ion-header>

+ <ion-content>

+   <ion-row [ngClass]="{'hidden':!loggedIn,'login':true}">

+     <div class="avatar">A</div>

+     <!--Login details-->

+     <div class="details">

+       <h1>Abhishek Sharma</h1>

+       <h2>@thelittlewonder</h2>

+     </div>

+   </ion-row>

+   <ion-list no-lines class="menu">

+     <button ion-item (click)="itemSelected('account')" [ngClass]="{'hidden':!loggedIn}">

+       <img src="./assets/img/more-account.svg">

+       <span>Account</span>

+     </button>

+     <button ion-item (click)="itemSelected('login')" [ngClass]="{'hidden':loggedIn}">

+         <img src="./assets/img/more-account.svg">

+         <span>Login to FAS</span>

+       </button>

+     <button ion-item (click)="itemSelected('package')">

+       <img src="./assets/img/more-search.svg">

+       <span>Search Packages</span>

+     </button>

+     <button ion-item (click)="itemSelected('podcast')">

+       <img src="./assets/img/more-podcast.svg">

+       <span>Fedora Podcast</span>

+     </button>

+     <button ion-item (click)="itemSelected('bookmarks')">

+       <img src="./assets/img/more-bookmark.svg">

+       <span>Bookmarks</span>

+     </button>

+     <button ion-item (click)="itemSelected('about')">

+       <img src="./assets/img/fedora.png">

+       <span>About Fedora</span>

+     </button>

+     <button ion-item (click)="itemSelected('logout')" [ngClass]="{'hidden':!loggedIn}">

+       <img src="./assets/img/more-logout.svg">

+       <span>Logout</span>

+   .login {

+     margin: 24px 0 12px 24px;

+     h1 {

+       font-family: "OpenSans-Semibold";

+       font-size: 16px;

+       color: #3C6DB3;

+       margin: 0 0 4px 0;

+     }

+     h2 {

+       font-family: "OpenSans-Regular";

+       font-size: 12px;

+       color: #9A9EA5;

+       margin: 0;

+     }

+     .avatar {

+       background-color: #3c6db3;

+       color: #fff;

+       font-size: 18px;

+       line-height: 25px;

+       height: 100%;

+       border-radius: 50%;

+       padding: 7px 13px;

+       font-family: "OpenSans-Bold";

+       margin-right: 8px;

+     }

+   }

+   .menu {

+     margin-top: 12px;

+     button {

+       padding: 0 32px;

+       .label-md {

+         margin: 0;

+       }

+       ion-label {

+         overflow: visible;

+       }

+       img {

+         margin-right: 16px;

+       }

+       span {

+         font-family: 'OpenSans-Regular';

+         font-size: 16px;

+         color: #535861;

+         text-transform: none;

+         letter-spacing: 0;

+       }

+     }

+   }

+ }

+ 

+ bookmarks,

+ about-us,

+ about-detail {

+   ion-header {

+     padding: 16px 24px;

+     background-color: #fff;

+     span {

+       font-family: "Montserrat-Semibold";

+       font-size: 16px;

+       color: #3C6DB3;

+       letter-spacing: 0.57px;

+       margin: 0 0 16px 16px;

+       text-transform: uppercase;

+     }

+     .toolbar-title {

+       padding: 0 !important;

+     }

+   }

+   .header-md::after {

+     background-color: #fff;

+     box-shadow: 0 2px 4px 0 rgba(86, 86, 86, 0.05);

+     background-image: none;

+   }

+   ion-content {

+     background-color: #ECEDEE !important;

+   }

+ }

+ 

+ about-us,

+ about-detail {

+   ion-content {

+     background-color: #fff !important;

+   }

+ }

+ 

+ about-us {

+   .header-md::after {

+     background-color: #FFF;

+     box-shadow: 0 2px 4px 0 rgba(86, 86, 86, 0.05);

+     background-image: none;

+     margin-bottom: 1em;

+   }

+   .item {

+     padding: 0 24px;

+   }

+   .label {

+     font-family: 'OpenSans-Regular';

+     font-size: 16px;

+     color: #535861;

+     text-transform: none;

+     letter-spacing: 0;

+     overflow: visible;

+   }

+ }

+ about-detail {

+   ion-content {

+     .scroll-content {

+       padding: 16px 24px;

+       font-size: 16px;

+       line-height: 26px;

+     }

+   }

+ import { NavController, NavParams } from 'ionic-angular';

+ import { NotificationsPage } from '../../pages/notifications/notifications';

+   /**

+    * For demo purposes

+    */

+   private loggedIn: boolean;

+   constructor(public navCtrl: NavController, public navParams: NavParams) {

+     this.loggedIn = false;

+   /**

+    * Open page to the corresponding menu item

+    * @param page page name clicked

+    */

+   itemSelected(page) {

+     switch (page) {

+       case 'bookmarks':

+         this.navCtrl.push(BookmarksPage, { animate: true, direction: 'forward' });

+         break;

+       case 'about':

+         this.navCtrl.push(AboutPage, { animate: true, direction: 'forward' });

+         break;

+       case 'package':

+         this.navCtrl.push(PackageSearchPage, { animate: true, direction: 'forward' });

+     }

+   }

+ 

+ 

+   /**

+    * Open the notifications pane from the home page

+    */

+   openNotificationPage() {

+     this.navCtrl.push(NotificationsPage, { animate: true, direction: 'forward' });

+ 

+ /**

+  * About Page Component

+  */

+ 

+ @Component({

+   selector: 'about-us',

+   templateUrl: 'about.html',

+ })

+ export class AboutPage {

+ 

+   /**

+    * List of Items to show in about us list

+    */

+   public navItems = [];

+ 

+   constructor(public navCtrl: NavController, public navParams: NavParams) {

+     this.navItems = [

+       {

+         'title': 'What is Fedora?',

+         'description': 'The Fedora Project is a community of people working together to build a free and open source software platform and to collaborate on and share user-focused solutions built on that platform. Or, in plain English, we make an operating system and we make it easy for you do useful stuff with it. <br/> <br/> The Fedora community includes thousands of individuals with different views and approaches, but together we share some common values. We call these the “Four Foundations”: Freedom, Friends, Features, and First.'

+       },

+       {

+         'title': 'Our Mission',

+         'description': 'Fedora creates an innovative platform for hardware, clouds, and containers that enables software developers and community members to build tailored solutions for their users.<br/><br/>At the operating system level, we don’t just integrate. We do new things — we build a platform, not just a distribution. The Features and First foundations drive us to innovate. We do all of this as a transparent, collaborative community of Friends, and entirely as open source and free software — Freedom.'

+       },

+       {

+         'title': 'Our Method',

+         'description': 'The Fedora Project is a center for innovation in free and open source software. In our community,contributors of all kinds come together to advance the ecosystem for the benefit of everyone. The Fedora community contributes everything it builds back to the free and open source world and continues to make advances of significance to the broader community, as evidenced by the regular and rapid incorporation of its features into other Linux distributions. Regardless of which Linux distribution you use, you are relying on code developed within the Fedora Project.<br/><br/>We believe software patents are harmful, a hindrance to innovation in software development, and are inconsistent with the values of free and open source software. While tightly integrating proprietary and patent encumbered components might superficially improve ease of use, this practice does not benefit the community in the long run. The Fedora community prefers approaches that benefit the progress of free software in the future over those that emphasize short term ease of use.'

+       },

+       {

+         'title': 'Women and Diversity',

+         'description': ''

+       },

+       {

+         'title': 'Contribute to Fedora App',

+         'description': 'Fedora App is the central location for Fedora users and innovators to stay updated on The Fedora Project. News updates, social posts, Ask Fedora, as well as articles from Fedora Magazine are all held under this app. <br/> <br/> Contribute to app development : <a href="https://pagure.io/Fedora-app/">https://pagure.io/Fedora-app/</a>'

+       }

+     ]

+   }

+ 

+   /**Open detailed info of selected item

+    * @param navItem clicked item of about Fedora

+    */

+   openAboutDetailPage(item) {

+     this.navCtrl.push(AboutDetailPage, { item: item });

+   }

+ }

+ 

+ /**

+  * About Detailed Component

+  */

+ @Component({

+   selector: 'about-detail',

+   templateUrl: 'about-detail.html',

+ })

+ export class AboutDetailPage {

+   /**

+    * Individual About Item receieved

+    */

+   public selectedItem;

+   constructor(public navCtrl: NavController, public navParams: NavParams) {

+     this.selectedItem = navParams.data.item;

+   }

+ }

+ 

+ /**

+  * Bookmarks Page Component

+  */

+ 

+ @Component({

+   selector: 'bookmarks',

+   templateUrl: 'bookmarks.html',

+ })

+ export class BookmarksPage {

+ 

+   constructor(public navCtrl: NavController, public navParams: NavParams) {

+   }

+ 

+   /**

+    * Switches to Mag View to read articles

+    */

+   toMag() {

+     this.navCtrl.parent.select(1);

+   }

+ }

+ 

+ 

+ <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-content class="pkg-content">

+     <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>

+ .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;

+   }

+   <ion-title>

+     <img src="./assets/img/back.svg" tappable navPop>

+     <span>{{ pkg.name }}</span>

+   </ion-title>

+ <ion-content>

+   <hr>

+   <ion-row>

+     <div class="info">

+       <ion-label>Description</ion-label>

+       <p [innerHTML]="pkg.description"></p>

+     </div>

+   </ion-row>

+ 

+   <ion-row>

+     <div class="info">

+       <ion-label>Install</ion-label>

+       <p class="code">

+         <code>$ sudo dnf install {{ pkg.name }}</code>

+       </p>

+     </div>

+   </ion-row>

+ 

+   <ion-row>

+     <div class="info">

+       <ion-label *ngIf="pkg.subPackages.length > 0">Sub Packages</ion-label>

+       <ion-list *ngIf="pkg.subPackages.length > 0" no-lines>

+         <ion-item (click)="showPackage(pkg)" *ngFor="let pkg of pkg.subPackages">

+           <h2>{{ pkg.name }}</h2>

+           <h3>{{ pkg.summary }}</h3>

+         </ion-item>

+       </ion-list>

+     </div>

+   </ion-row>

+   ion-header {

+     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;

+     }

+   }

+   .header-md::after {

+     background-color: #ECEDEE;

+     background-image: none;

+   }

+   .scroll-content {

+     padding: 24px !important;

+     h1 {

+       margin: 0 0 12px 0;

+       font-family: "OpenSans-Semibold";

+       font-size: 16px;

+       color: #3C6EB4;

+       line-height: 20px;

+     }

+     p {

+       margin: 16px 0 8px 0;

+     }

+     hr {

+       height: 0;

+       background-color: none;

+       border: 1px solid #EFF0F1;

+       margin: 0;

+     }

+     .info {

+       margin: 12px 0;

+       max-width: 100%;

+       ion-label {

+         margin: 0 0 6px 0;

+         font-size: 11px;

+       }

+       p {

+         margin: 0;

+       }

+       .code {

+         margin-top: 4px;

+         code {

+           background: #f0f0f0;

+           border-radius: 3px;

+           padding: 4px;

+         }

+       }

+       ion-item {

+         margin-top: 4px;

+         padding: 0;

+         h2 {

+           font-family: "OpenSans-Semibold";

+           font-size: 14px;

+           color: #3B6FBB;

+           padding: 0;

+           text-transform: none;

+           letter-spacing: 0;

+         }

+         h3 {

+           font-family: "OpenSans-Regular";

+           font-size: 12px;

+           color: #535961;

+           line-height: 20px;

+           padding: 0;