add compact theme

Author: Sneezry

_locales/en/messages.json

@@ -309,6 +309,10 @@
         "message": "Simple",
         "description": "Simple theme"
     },
+    "theme_compact": {
+        "message": "Compact",
+        "description": "Compact theme"
+    },
     "theme_high_contrast": {
         "message": "High Contrast",
         "description": "High Contrast theme"

sass/_ui.scss

@@ -80,6 +80,25 @@ $themes: (
     grey-search: #b1b1b3,
     blue-menu: #f4fcff,
   ),
+  compact: (
+    black-1: black,
+    black-transparent: rgba(0, 0, 0, 0.5),
+    white-1: white,
+    white-transparent: rgba(255, 255, 255, 0.5),
+    grey-1: grey,
+    grey-2: #ccc,
+    grey-3: #eee,
+    grey-background: #fff,
+    blue-1: #08c,
+    yellow-1: #fff1ba,
+    yellow-2: #fff4cc,
+    red-1: #dd4b39,
+    red-2: #eea59c,
+    black-search: #2a2a2e,
+    white-search: #f9f9fa,
+    grey-search: #b1b1b3,
+    blue-menu: #f4fcff,
+  ),
 );
 
 $theme-map: null;

sass/popup.scss

@@ -1078,8 +1078,9 @@ svg {
   }
 }
 
-// Simple overrides
-.theme-simple {
+// Simple & Compact overrides
+.theme-simple,
+.theme-compact {
   .header {
     border-bottom: white 1px solid !important;
 
@@ -1146,6 +1147,43 @@ svg {
   }
 }
 
+// Compact overrides
+.theme-compact {
+  #codes {
+    &:not(.edit) {
+      .entry {
+        padding: 0 10px;
+        margin: 0 0 0 10px;
+      }
+    }
+  }
+
+  .entry {
+    .sector {
+      bottom: 0;
+    }
+
+    .showqr,
+    .pin {
+      top: 0;
+    }
+
+    .code {
+      font-size: 32px;
+      margin-top: -5px;
+      letter-spacing: 0.5rem;
+    }
+  }
+
+  a.entry {
+    border-bottom: #eee 1px solid !important;
+  }
+
+  .issuer.account {
+    display: none;
+  }
+}
+
 // Accessibility overrides
 .theme-accessibility {
   select {

src/components/Popup.vue

@@ -3,10 +3,14 @@
     v-cloak
     v-bind:class="{
       'theme-normal':
-        theme !== 'accessibility' && theme !== 'dark' && theme !== 'simple',
+        theme !== 'accessibility' &&
+        theme !== 'dark' &&
+        theme !== 'simple' &&
+        theme !== 'compact',
       'theme-accessibility': theme === 'accessibility',
       'theme-dark': theme === 'dark',
       'theme-simple': theme === 'simple',
+      'theme-compact': theme === 'compact',
       hideoutline,
     }"
     v-on:mousedown="hideoutline = true"

src/components/Popup/EntryComponent.vue

@@ -38,7 +38,12 @@
     >
       <IconRedo />
     </div>
-    <div class="issuer">{{ entry.issuer.split("::")[0] }}</div>
+    <div class="issuer">
+      {{
+        entry.issuer.split("::")[0] +
+        (theme === "compact" ? ` (${entry.account})` : "")
+      }}
+    </div>
     <div class="issuerEdit">
       <input
         v-bind:placeholder="i18n.issuer"
@@ -55,7 +60,7 @@
       }"
       v-html="style.isEditing ? showBulls(entry) : showCode(entry.code)"
     ></div>
-    <div class="issuer">{{ entry.account }}</div>
+    <div class="issuer account">{{ entry.account }}</div>
     <div class="issuerEdit">
       <input
         v-bind:placeholder="i18n.accountName"
@@ -101,6 +106,7 @@ const computedPrototype = [
     "encryption",
   ]),
   mapState("style", ["style"]),
+  mapState("menu", ["theme"]),
 ];
 
 let computed = {};

src/components/Popup/PreferencesPage.vue

@@ -8,6 +8,7 @@
       <option value="normal">{{ i18n.theme_light }}</option>
       <option value="dark">{{ i18n.theme_dark }}</option>
       <option value="simple">{{ i18n.theme_simple }}</option>
+      <option value="compact">{{ i18n.theme_compact }}</option>
       <option value="accessibility">{{ i18n.theme_high_contrast }}</option>
     </a-select-input>
     <a-select-input