add no entry message (#729)

* add no entry message

* update wording

Author: Sneezry

_locales/en/messages.json

@@ -431,5 +431,8 @@
     },
     "learn_more": {
         "message": "Learn more"
+    },
+    "no_entires": {
+        "message": "No accounts to display. Add your first account now."
     }
 }

sass/popup.scss

@@ -229,7 +229,8 @@ svg {
     .issuer,
     .showqr,
     .showqr.hidden,
-    .pin {
+    .pin,
+    .no-entry {
       display: none;
     }
 
@@ -278,6 +279,21 @@ svg {
       animation: twinkling 1s infinite ease-in-out;
     }
   }
+
+  .no-entry {
+    @include themify($themes) {
+      color: themed("grey-1");
+    }
+
+    margin: 20px;
+    text-align: center;
+
+    svg {
+      width: 48px;
+      height: 48px;
+      margin: 20px;
+    }
+  }
 }
 
 .entry {

src/components/Popup/MainBody.vue

@@ -39,6 +39,15 @@
         v-bind:entry="entry"
         v-bind:tabindex="getTabindex(entry)"
       />
+      <div class="no-entry" v-if="entries.length === 0">
+        <IconKey />
+        <p>
+          {{ i18n.no_entires }}
+          <a href="#" v-on:click="openLink('https://otp.ee/quickstart')">{{
+            i18n.learn_more
+          }}</a>
+        </p>
+      </div>
     </div>
   </div>
 </template>
@@ -50,7 +59,8 @@ import { EntryStorage } from "../../models/storage";
 
 import EntryComponent from "./EntryComponent.vue";
 
-import IconPlus from "../../../svg/plus.svg";
+// import IconPlus from "../../../svg/plus.svg";
+import IconKey from "../../../svg/key-solid.svg";
 
 const computed: {
   filter: () => boolean;
@@ -70,6 +80,10 @@ export default Vue.extend({
   },
   computed,
   methods: {
+    openLink(url: string) {
+      window.open(url, "_blank");
+      return;
+    },
     isMatchedEntry(entry: OTPEntry) {
       for (const hash of this.$store.getters["accounts/matchedEntries"]) {
         if (entry.hash === hash) {
@@ -184,7 +198,8 @@ export default Vue.extend({
   },
   components: {
     EntryComponent,
-    IconPlus,
+    // IconPlus,
+    IconKey,
   },
 });
 </script>