Fix logo ratio

electron/src/index.ts

@@ -15,7 +15,7 @@ unhandled();
 const trayMenuTemplate: (MenuItemConstructorOptions | MenuItem)[] = [new MenuItem({ label: 'Quit App', role: 'quit' })];
 const appMenuBarMenuTemplate: (MenuItemConstructorOptions | MenuItem)[] = [
   { role: process.platform === 'darwin' ? 'appMenu' : 'fileMenu' },
-  // { role: 'viewMenu' },
+  { role: 'viewMenu' },
   {
     label: "Edit",
     submenu: [

src/components/account/AccountToken.vue

@@ -86,7 +86,7 @@ function round(num: number) {
 <template>
 <div>
   <div class="c-account-item" style="text-align: center" >
-    <img class="c-account-item__icon" :src="item.content.image" alt="icon" style="height: 64px">
+    <img class="c-account-item__icon" :src="item.content.image" alt="icon" style="">
 
     <h2 class="c-account-item__title">{{ item.content.title }}</h2>
 
@@ -126,6 +126,11 @@ function round(num: number) {
 
 <style scoped lang="scss">
 .c-account-item {
+  &__icon {
+    max-width: 120px;
+    height: 64px;
+    object-fit: contain;
+  }
 
   &__title {
     font-size: 1.25rem;

src/components/account/edit/LogoSelect.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import apiClient from '@/service/api-client';
+import { isElectron } from '@/store/main-store';
 import { simpleAlert, simpleToast } from '@/utilities/alert';
 import useLoading from '@/utilities/loading';
 import { Clipboard } from '@capacitor/clipboard';
@@ -75,7 +76,7 @@ watch(currentColor, () => {
 async function pasteImage() {
   let imgDataUri: string | null = null;
 
-  if (Capacitor.isNativePlatform()) {
+  if (Capacitor.isNativePlatform() && !isElectron.value) {
     imgDataUri = await readImageFromDevice();
   } else {
     imgDataUri = await readImageFromBrowser();
@@ -181,19 +182,25 @@ async function resizeImage(imgDataUri: string) {
     const img = document.createElement('img');
     img.addEventListener('load', (evt) => {
       const canvas = document.createElement("canvas");
-      canvas.width = 96;
-      canvas.height = 96;
-
-      const ctx = canvas.getContext("2d")!;
-
-      const maxWidth = canvas.width;
-      const maxHeight = canvas.height;
 
       let width = img.width;
       let height = img.height;
       let x = 0;
       let y = 0;
 
+      if (width > height) {
+        canvas.width = 120;
+        canvas.height = 120 / width * height;
+      } else {
+        canvas.width = 96;
+        canvas.height = 96;
+      }
+
+      const ctx = canvas.getContext("2d")!;
+
+      const maxWidth = canvas.width;
+      const maxHeight = canvas.height;
+
       // Resize
       if (width > height) {
         if (width > maxWidth) {

src/service/encryption-service.ts

@@ -48,7 +48,15 @@ export default new class EncryptionService {
   async getMasterKey(kek?: Uint8Array | string) {
     await sodium.ready;
 
-    kek = kek || secretToolkit.decode(kekStorage.value);
+    try {
+      kek = kek || secretToolkit.decode(kekStorage.value);
+    } catch (e) {
+      console.warn(
+        'Invalid KEK, debug info:',
+        kekStorage.value
+      );
+      throw new Error('Invalid KEK', { cause: e });
+    }
 
     const secret = await sodiumCipher.decrypt(base64UrlDecode(encSecretStorage.value), kek);
 

src/views/AccountsPage.vue

@@ -316,8 +316,9 @@ async function deleteAccounts(accounts: Account[]) {
   }
 
   &__icon img {
-    width: 56px;
-    aspect-ratio: 1;
+    width: 120px;
+    height: 56px;
+    object-fit: contain;
   }
 }
 </style>