From 9dafe671ae5bcdb2de34c56e0ac350818ef706b1 Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kyle.spearrin@gmail.com>
Date: Wed, 31 Jan 2018 22:26:00 -0500
Subject: [PATCH] shoe bitwarden logo when nothing else to show

---
 src/app/vault/vault.component.html |  7 +++++++
 src/scss/vault.scss                | 31 +++++++++++++++++++++++++++++-
 2 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/src/app/vault/vault.component.html b/src/app/vault/vault.component.html
index 9dc3a7839c..f5fc4d53bd 100644
--- a/src/app/vault/vault.component.html
+++ b/src/app/vault/vault.component.html
@@ -28,6 +28,13 @@
                         (onCancelled)="cancelledAddEdit($event)"
                         (onGeneratePassword)="openPasswordGenerator()">
     </app-vault-add-edit>
+    <div id="logo" *ngIf="action !== 'add' && action !== 'edit' && action !== 'view'">
+        <div class="content">
+            <div class="inner-content">
+                <img src="../../images/logo@2x.png" />
+            </div>
+        </div>
+    </div>
     <ng-template #passwordGenerator></ng-template>
     <ng-template #attachments></ng-template>
     <ng-template #folderAddEdit></ng-template>
diff --git a/src/scss/vault.scss b/src/scss/vault.scss
index 8d882c478b..240e2a773c 100644
--- a/src/scss/vault.scss
+++ b/src/scss/vault.scss
@@ -4,7 +4,7 @@
     height: 100%;
     display: flex;
 
-    #groupings, #items, #details {
+    #groupings, #items, #details, #logo {
         display: flex;
         flex-direction: column;
 
@@ -161,6 +161,35 @@
         }
     }
 
+    #logo {
+        flex: 1;
+        min-width: 0;
+
+        .content {
+            overflow-y: hidden;
+            overflow-x: auto;
+        }
+
+        .inner-content {
+            min-width: 320px;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+        }
+
+        img {
+            width: 282px;
+            opacity: 0.3;
+            transition: all 1s ease-in-out;
+
+            &:hover {
+                opacity: 1;
+            }
+        }
+    }
+
     .header {
         min-height: 44px;
         max-height: 44px;