stubbed out settings list and various styling

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>

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>

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;

src/popup/less/popup.less

@@ -36,3 +36,7 @@ body {
         top: 0;
     }
 }
+
+.monospaced {
+    font-family: @font-family-monospace;
+}

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;