From 423c4e06c793e87d85b7a0a99c422ac0253c130b Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kyle.spearrin@gmail.com>
Date: Sat, 14 Apr 2018 14:16:21 -0400
Subject: [PATCH] style homepage

---
 src/popup/accounts/home.component.html | 22 ++++-----
 src/popup/scss/pages.scss              | 66 ++++++++++++++++++++++++++
 2 files changed, 75 insertions(+), 13 deletions(-)

diff --git a/src/popup/accounts/home.component.html b/src/popup/accounts/home.component.html
index f4c3eed96c..5eaa6406e6 100644
--- a/src/popup/accounts/home.component.html
+++ b/src/popup/accounts/home.component.html
@@ -1,15 +1,11 @@
-<div class="home-page">
-    <a routerLink="/environment" class="settings-icon">
-        <i class="fa fa-cog fa-lg"></i><span>&nbsp;{{'settings' | i18n}}</span>
-    </a>
-    <img src="../images/logo@2x.png" alt="bitwarden" class="img-responsive" />
-    <p>{{'loginOrCreateNewAccount' | i18n}}</p>
-    <div class="bottom-buttons">
-        <a class="btn btn-lg btn-primary btn-block" routerLink="/register">
-            <strong>{{'createAccount' | i18n}}</strong>
-        </a>
-        <a class="btn btn-lg btn-link btn-block" routerLink="/login">
-            {{'login' | i18n}}
-        </a>
+<div class="center-content">
+    <div class="content">
+        <img src="../images/logo@2x.png" alt="bitwarden" class="img-responsive" />
+        <p class="lead text-center">{{'loginOrCreateNewAccount' | i18n}}</p>
+        <a class="btn primary block" routerLink="/login"><b>{{'login' | i18n}}</b></a>
+        <a class="btn block" routerLink="/register">{{'createAccount' | i18n}}</a>
     </div>
 </div>
+<a routerLink="/environment" class="settings-icon">
+    <i class="fa fa-cog fa-lg"></i><span>&nbsp;{{'settings' | i18n}}</span>
+</a>
diff --git a/src/popup/scss/pages.scss b/src/popup/scss/pages.scss
index 5d8d916501..67f13e203f 100644
--- a/src/popup/scss/pages.scss
+++ b/src/popup/scss/pages.scss
@@ -15,3 +15,69 @@ app-password-generator .password-block {
     text-align: center;
     margin: 20px;
 }
+
+app-home {
+    position: fixed;
+    height: 100%;
+    width: 100%;
+
+    .center-content {
+        margin-top: -50px;
+        height: calc(100% + 50px);
+    }
+
+    img {
+        width: 282px;
+        margin: 0 auto;
+    }
+
+    p.lead {
+        margin: 30px 0;
+    }
+
+    .btn + .btn {
+        margin-top: 10px;
+    }
+
+    a.settings-icon {
+        color: #bbbbbb;
+        position: absolute;
+        top: 10px;
+        left: 10px;
+
+        span {
+            visibility: hidden;
+        }
+
+        &:hover {
+            color: $brand-primary;
+            text-decoration: none;
+
+            span {
+                visibility: visible;
+            }
+        }
+    }
+}
+
+body.body-sm, body.body-xs {
+    app-home {
+        .center-content {
+            margin-top: 0;
+            height: 100%;
+        }
+
+        p.lead {
+            margin: 15px 0;
+        }
+    }
+}
+
+body.body-full {
+    app-home {
+        .center-content {
+            margin-top: -80px;
+            height: calc(100% + 80px);
+        }
+    }
+}