From 88c961ff056c9ada013cc0dc11acfc5ed7d52ab6 Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kyle.spearrin@gmail.com>
Date: Fri, 13 Apr 2018 13:42:34 -0400
Subject: [PATCH] box lists

---
 .../password-generator.component.html         | 12 ++++---
 src/popup/scss/misc.scss                      |  4 +++
 src/popup/settings/settings.component.html    | 31 ++++++++++---------
 3 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/src/popup/generator/password-generator.component.html b/src/popup/generator/password-generator.component.html
index bde546d72d..8676606fc9 100644
--- a/src/popup/generator/password-generator.component.html
+++ b/src/popup/generator/password-generator.component.html
@@ -12,12 +12,16 @@
 </header>
 <content>
     <div class="password-block">{{password}}</div>
-    <div class="box">
-        <div class="box-content">
-            <a class="box-content-row" href="#" appStopClick appBlurClick
+    <div class="box list">
+        <div class="box-content single-line">
+            <a class="box-content-row text-primary" href="#" appStopClick appBlurClick
                (click)="regenerate()">{{'regeneratePassword' | i18n}}</a>
-            <a class="box-content-row" href="#" appStopClick appBlurClick
+            <a class="box-content-row text-primary" href="#" appStopClick appBlurClick
                (click)="copy()">{{'copyPassword' | i18n}}</a>
+        </div>
+    </div>
+    <div class="box list">
+        <div class="box-content single-line">
             <a class="box-content-row box-content-row-flex" routerLink="/generator-history">
                 <div class="row-main">{{'passwordHistory' | i18n}}</div>
                 <i class="fa fa-chevron-right row-sub-icon"></i>
diff --git a/src/popup/scss/misc.scss b/src/popup/scss/misc.scss
index 947146a6c8..cfb4bc700d 100644
--- a/src/popup/scss/misc.scss
+++ b/src/popup/scss/misc.scss
@@ -72,6 +72,10 @@ p.lead {
     display: none !important;
 }
 
+.display-block {
+    display: block !important;
+}
+
 .monospaced {
     font-family: $font-family-monospace;
 }
diff --git a/src/popup/settings/settings.component.html b/src/popup/settings/settings.component.html
index c3b41e5ede..acd6ba5649 100644
--- a/src/popup/settings/settings.component.html
+++ b/src/popup/settings/settings.component.html
@@ -8,9 +8,9 @@
     <div class="right"></div>
 </header>
 <content>
-    <div class="box">
+    <div class="box list">
         <div class="box-header">{{'manage' | i18n}}</div>
-        <div class="box-content">
+        <div class="box-content single-line">
             <a class="box-content-row box-content-row-flex text-default" routerLink="/folders">
                 <div class="row-main">{{'folders' | i18n}}</div>
                 <i class="fa fa-chevron-right fa-lg row-sub-icon"></i>
@@ -21,10 +21,10 @@
             </a>
         </div>
     </div>
-    <div class="box">
+    <div class="box list">
         <div class="box-header">{{'security' | i18n}}</div>
-        <div class="box-content">
-            <div class="box-content-row" appBoxRow>
+        <div class="box-content single-line">
+            <div class="box-content-row display-block" appBoxRow>
                 <label for="lockOption">{{'lockOptions' | i18n}}</label>
                 <select id="lockOption" name="LockOptions" [(ngModel)]="lockOption" (change)="saveLockOption()">
                     <option *ngFor="let o of lockOptions" [ngValue]="o.value">{{o.name}}</option>
@@ -42,12 +42,15 @@
             </a>
         </div>
     </div>
-    <div class="box">
+    <div class="box list">
         <div class="box-header">{{'account' | i18n}}</div>
-        <div class="box-content">
-            <a class="box-content-row box-content-row-flex text-default"  routerLink="/premium">
-                <div class="row-main">{{'premiumMembership' | i18n}}</div>
-                <i class="fa fa-chevron-right fa-lg row-sub-icon"></i>
+        <div class="box-content single-line">
+            <a class="box-content-row" routerLink="/premium">
+                <div class="row-main">
+                    <div class="icon text-primary"><i class="fa fa-fw fa-lg fa-star"></i></div>
+                    <span class="text text-primary"><b>{{'premiumMembership' | i18n}}</b></span>
+                </div>
+                <span><i class="fa fa-chevron-right fa-lg row-sub-icon"></i></span>
             </a>
             <a class="box-content-row box-content-row-flex text-default" href="#"
                appStopClick appBlurClick (click)="changePassword()">
@@ -61,9 +64,9 @@
             </a>
         </div>
     </div>
-    <div class="box">
+    <div class="box list">
         <div class="box-header">{{'tools' | i18n}}</div>
-        <div class="box-content">
+        <div class="box-content single-line">
             <a class="box-content-row box-content-row-flex text-default" href="#"
                appStopClick appBlurClick (click)="import()">
                 <div class="row-main">{{'importItems' | i18n}}</div>
@@ -80,9 +83,9 @@
             </a>
         </div>
     </div>
-    <div class="box">
+    <div class="box list">
         <div class="box-header">{{'other' | i18n}}</div>
-        <div class="box-content">
+        <div class="box-content single-line">
             <a class="box-content-row box-content-row-flex text-default"  routerLink="/options">
                 <div class="row-main">{{'options' | i18n}}</div>
                 <i class="fa fa-chevron-right fa-lg row-sub-icon"></i>