style homepage

src/popup/accounts/home.component.html

@@ -1,15 +1,11 @@
-<div class="home-page">
+<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>
-    <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>
-</div>

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);
+        }
+    }
+}