From 68337d6523820c53a57fdc52f15981ec29de6d86 Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kyle.spearrin@gmail.com>
Date: Mon, 19 Sep 2016 23:04:32 -0400
Subject: [PATCH] stubbed out settings list and various styling

---
 src/popup/app/settings/views/settings.html   | 65 ++++++++++++++++++--
 src/popup/app/vault/views/vaultViewSite.html |  4 +-
 src/popup/less/components.less               |  5 +-
 src/popup/less/popup.less                    |  4 ++
 src/popup/less/variables.less                |  1 +
 5 files changed, 69 insertions(+), 10 deletions(-)

diff --git a/src/popup/app/settings/views/settings.html b/src/popup/app/settings/views/settings.html
index 49f01a368f..ed05d2b61c 100644
--- a/src/popup/app/settings/views/settings.html
+++ b/src/popup/app/settings/views/settings.html
@@ -5,14 +5,48 @@
     <div class="list">
         <div class="list-section">
             <div class="list-section-header">
-                Manage
+                Security
             </div>
             <div class="list-section-items">
                 <a class="list-section-item" href="#">
-                    Folders
+                    Lock Options
                 </a>
-                <a class="list-section-item" href="#" ng-click="sync()">
+                <a class="list-section-item" href="#">
+                    Unlock with PIN Code
+                </a>
+                <a class="list-section-item" href="#">
+                    Two-step Login
+                    <i class="fa fa-chevron-right fa-lg"></i>
+                </a>
+            </div>
+        </div>
+        <div class="list-section">
+            <div class="list-section-header">
+                Account
+            </div>
+            <div class="list-section-items">
+                <a class="list-section-item" href="#">
+                    Change Master Password
+                    <i class="fa fa-chevron-right fa-lg"></i>
+                </a>
+                <a class="list-section-item" href="#">
+                    Change Email
+                    <i class="fa fa-chevron-right fa-lg"></i>
+                </a>
+            </div>
+        </div>
+        <div class="list-section">
+            <div class="list-section-header">
+                Manage
+            </div>
+            <div class="list-section-items">
+                <a class="list-section-item" href="">
+                    Folders
+                    <i class="fa fa-chevron-right fa-lg"></i>
+                </a>
+                <a class="list-section-item" href="" ng-click="sync()">
                     Sync
+                    <i class="fa fa-chevron-right fa-lg"></i>
                 </a>
             </div>
         </div>
@@ -21,15 +55,34 @@
                 Current Session
             </div>
             <div class="list-section-items">
-                <a class="list-section-item" href="#">
+                <a class="list-section-item" href="">
                     Lock
                 </a>
-                <a class="list-section-item" href="#" ng-click="logOut()">
+                <a class="list-section-item" href="" ng-click="logOut()">
                     Log out
                 </a>
             </div>
+        </div>
+        <div class="list-section">
+            <div class="list-section-header">
+                Other
+            </div>
+            <div class="list-section-items">
+                <a class="list-section-item" href="#">
+                    About
+                    <i class="fa fa-chevron-right fa-lg"></i>
+                </a>
+                <a class="list-section-item" href="#">
+                    Help &amp; Feedback
+                    <i class="fa fa-chevron-right fa-lg"></i>
+                </a>
+                <a class="list-section-item" href="#">
+                    Rate the Extension
+                    <i class="fa fa-chevron-right fa-lg"></i>
+                </a>
+            </div>
             <div class="list-section-footer">
-                This is a footer note.
+                Please consider helping us out with a good review!
             </div>
         </div>
     </div>
diff --git a/src/popup/app/vault/views/vaultViewSite.html b/src/popup/app/vault/views/vaultViewSite.html
index 8dc25b2c7b..5b85986c5c 100644
--- a/src/popup/app/vault/views/vaultViewSite.html
+++ b/src/popup/app/vault/views/vaultViewSite.html
@@ -31,7 +31,7 @@
                         <i class="fa fa-lg fa-clipboard"></i>
                     </a>
                     <span class="item-label">Username</span>
-                    <span id="username">{{site.username}}</span>
+                    <span id="username" class="monospaced">{{site.username}}</span>
                 </div>
                 <div class="list-section-item" ng-show="site.password">
                     <a class="btn-list" href="" title="Copy Password" ngclipboard ngclipboard-error="clipboardError(e)"
@@ -43,7 +43,7 @@
                     </a>
                     <span class="item-label">Password</span>
                     <span ng-show="!showPassword">{{site.maskedPassword}}</span>
-                    <span id="password" ng-show="showPassword">{{site.password}}</span>
+                    <span id="password" ng-show="showPassword" class="monospaced">{{site.password}}</span>
                 </div>
             </div>
         </div>
diff --git a/src/popup/less/components.less b/src/popup/less/components.less
index 5d0d6f761b..eaab9ce581 100644
--- a/src/popup/less/components.less
+++ b/src/popup/less/components.less
@@ -173,6 +173,7 @@
             padding: 5px 10px;
             color: @gray-light;
             text-transform: uppercase;
+            font-size: (@font-size-base - 1);
 
             label {
                 font-weight: normal;
@@ -287,7 +288,7 @@
         .fa-chevron-right {
             float: right;
             margin-top: 3px;
-            color: @gray-light;
+            color: @list-icon-color;
         }
 
         &.condensed {
@@ -360,7 +361,7 @@
 
 .generate-password-block {
     margin: 20px;
-    font-size: 20px;
+    font-size: 19px;
     text-align: center;
     white-space: nowrap;
     overflow: hidden;
diff --git a/src/popup/less/popup.less b/src/popup/less/popup.less
index 9f11bcfc7c..21fb9c1268 100644
--- a/src/popup/less/popup.less
+++ b/src/popup/less/popup.less
@@ -36,3 +36,7 @@ body {
         top: 0;
     }
 }
+
+.monospaced {
+    font-family: @font-family-monospace;
+}
diff --git a/src/popup/less/variables.less b/src/popup/less/variables.less
index e304760e40..7d129c10db 100644
--- a/src/popup/less/variables.less
+++ b/src/popup/less/variables.less
@@ -9,6 +9,7 @@
 @border-color-dark: #ddd;
 @list-item-hover: #fbfbfb;
 @text-disabled: #d2d6de;
+@list-icon-color: #c7c7cd;
 
 @brand-primary: #3c8dbc;
 @brand-danger: #dd4b39;