From 3bd24a15fcdb4f2becc763b20c541da1e8c30d16 Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kyle.spearrin@gmail.com>
Date: Sat, 17 Sep 2016 01:23:32 -0400
Subject: [PATCH] tools page list items stubbed out with some styling

---
 src/popup/app/tools/views/tools.html | 32 +++++++++++++++++++++++++++-
 src/popup/less/components.less       | 28 ++++++++++++++++--------
 2 files changed, 50 insertions(+), 10 deletions(-)

diff --git a/src/popup/app/tools/views/tools.html b/src/popup/app/tools/views/tools.html
index 057c98ca80..2b35fb35b6 100644
--- a/src/popup/app/tools/views/tools.html
+++ b/src/popup/app/tools/views/tools.html
@@ -2,5 +2,35 @@
     <div class="title">Tools</div>
 </div>
 <div class="content content-tabs">
-    Some content for your tools.
+    <div class="list">
+        <div class="list-section">
+            <div class="list-section-items">
+                <a class="list-section-item wrap" href="#">
+                    <span class="leading-icon"><i class="fa fa-refresh fa-fw"></i></span>
+                    <span class="text">Password Generator</span>
+                    <span class="detail">Automatically generate strong, unique passwords for your logins.</span>
+                </a>
+                <a class="list-section-item wrap" href="#">
+                    <span class="leading-icon"><i class="fa fa-globe fa-fw"></i></span>
+                    <span class="text">bitwarden Web Vault</span>
+                    <span class="detail">Manage your logins from any web browser with the bitwarden web vault.</span>
+                </a>
+                <a class="list-section-item wrap" href="#">
+                    <span class="leading-icon"><i class="fa fa-apple fa-fw"></i></span>
+                    <span class="text">bitwarden iOS Vault</span>
+                    <span class="detail">Manage your logins from your mobile devices with the bitwarden iOS vault.</span>
+                </a>
+                <a class="list-section-item wrap" href="#">
+                    <span class="leading-icon"><i class="fa fa-android fa-fw"></i></span>
+                    <span class="text">bitwarden Android Vault</span>
+                    <span class="detail">Manage your logins from your mobile devices with the bitwarden Android vault.</span>
+                </a>
+                <a class="list-section-item wrap" href="#">
+                    <span class="leading-icon"><i class="fa fa-cloud-upload fa-fw"></i></span>
+                    <span class="text">Import Logins</span>
+                    <span class="detail">Quickly bulk import your logins from other password management applications.</span>
+                </a>
+            </div>
+        </div>
+    </div>
 </div>
diff --git a/src/popup/less/components.less b/src/popup/less/components.less
index eceec2da2a..5407b54fda 100644
--- a/src/popup/less/components.less
+++ b/src/popup/less/components.less
@@ -196,13 +196,22 @@
         padding: 10px 10px;
         background-color: white;
         text-decoration: none;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
         color: @text-color;
         position: relative;
         z-index: 1;
 
+        &:not(.wrap) {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+
+            .text, .detail {
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+        }
+
         &:before {
             content: "";
             position: absolute;
@@ -224,21 +233,22 @@
             background-color: @list-item-hover;
         }
 
+        .leading-icon {
+            font-size: 35px;
+            float: left;
+            display: inline-block;
+            margin-right: 8px;
+        }
+
         .text {
             display: block;
             color: @text-color;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
         }
 
         .detail {
             font-size: @font-size-small;
             color: @gray-light;
             display: block;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
         }
 
         label, .item-label {