From be907282080c63815d335c14d5126606a0de7237 Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kyle.spearrin@gmail.com>
Date: Tue, 23 Jan 2018 20:27:17 -0500
Subject: [PATCH] styling

---
 src/app/vault/vault.component.html |  8 ++++----
 src/scss/styles.scss               | 32 +++++++++++++++++++++++++-----
 2 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/src/app/vault/vault.component.html b/src/app/vault/vault.component.html
index 7bf166b4af..2221642d15 100644
--- a/src/app/vault/vault.component.html
+++ b/src/app/vault/vault.component.html
@@ -26,15 +26,15 @@
                     <li><a href="#"><i class="fa fa-fw fa-sticky-note-o"></i> Secure Note</a></li>
                 </ul>
                 <h2><i class="fa fa-folder"></i> Folders</h2>
-                <ul>
+                <ul class="fa-ul">
                     <li *ngFor="let folder of vaultFolders">
-                        <a href="#"><i class="fa fa-fw fa-caret-right"></i> {{folder.name}}</a>
+                        <a href="#"><i class="fa-li fa fa-caret-right"></i> {{folder.name}}</a>
                     </li>
                 </ul>
                 <h2><i class="fa fa-cubes"></i> Collections</h2>
-                <ul>
+                <ul class="fa-ul">
                     <li *ngFor="let collection of vaultCollections">
-                        <a href="#"><i class="fa fa-fw fa-caret-right"></i> {{collection.name}}</a>
+                        <a href="#"><i class="fa-li fa fa-caret-right"></i> {{collection.name}}</a>
                     </li>
                 </ul>
             </div>
diff --git a/src/scss/styles.scss b/src/scss/styles.scss
index e282a2c0ac..716cef8955 100644
--- a/src/scss/styles.scss
+++ b/src/scss/styles.scss
@@ -25,6 +25,7 @@ $brand-primary-accent: #286090;
 
 $background-color: white;
 $background-color-alt: #f9fafc;
+$background-color-alt2: #ecf0f5;
 
 * {
     box-sizing: border-box;
@@ -57,6 +58,10 @@ html, body {
     color: $text-color;
 }
 
+body {
+    border-top: 1px solid $border-color-dark;
+}
+
 h1, h2, h3, h4, h5, h6 {
     font-family: $font-family-sans-serif;
     margin: 0;
@@ -120,15 +125,32 @@ a {
             margin-bottom: 5px;
         }
 
-        ul {
-            margin: 0 0 20px 0;
-            padding: 0;
-
+        ul:not(.fa-ul) {
             li {
                 margin: 0;
                 padding: 0;
                 list-style: none;
+            }
+        }
 
+        ul.fa-ul {
+            li {
+                .fa-li {
+                    left: -11px;
+                    top: 8px;
+                }
+
+                a {
+                    padding-left: 12px;
+                }
+            }
+        }
+
+        ul {
+            padding: 0;
+            margin: 0 0 15px 0;
+
+            li {
                 a {
                     display: block;
                     padding: 5px 0;
@@ -147,7 +169,7 @@ a {
     }
 
     #details {
-        background-color: $background-color;
+        background-color: $background-color-alt2;
         flex: 1;
         min-width: 400px;
     }