From bc161672934e4160d1bdf70bca47c806ae4806ce Mon Sep 17 00:00:00 2001
From: Leendert de Borst <ldeborst@xivisoft.com>
Date: Thu, 27 Feb 2025 17:19:33 +0100
Subject: [PATCH] Refactor (#622)

---
 .../chrome/src/contentScript/Popup.ts         |  3 +-
 .../Credentials/DisplayFavicon.razor          |  2 +-
 .../wwwroot/css/tailwind.css                  | 58 +++++++++++++++++++
 3 files changed, 60 insertions(+), 3 deletions(-)

diff --git a/browser-extensions/chrome/src/contentScript/Popup.ts b/browser-extensions/chrome/src/contentScript/Popup.ts
index a310626de..a7cc8a843 100644
--- a/browser-extensions/chrome/src/contentScript/Popup.ts
+++ b/browser-extensions/chrome/src/contentScript/Popup.ts
@@ -1087,12 +1087,12 @@ function toUint8Array(buffer: Uint8Array | number[] | {[key: number]: number}):
     return new Uint8Array(buffer);
   }
 
-  // Handle object with numeric keys
   const length = Object.keys(buffer).length;
   const arr = new Uint8Array(length);
   for (let i = 0; i < length; i++) {
     arr[i] = buffer[i];
   }
+
   return arr;
 }
 
@@ -1195,6 +1195,5 @@ function detectMimeType(bytes: Uint8Array): string {
     return 'image/png';
   }
 
-  // Default to x-icon if unknown
   return 'image/x-icon';
 }
diff --git a/src/AliasVault.Client/Main/Components/Credentials/DisplayFavicon.razor b/src/AliasVault.Client/Main/Components/Credentials/DisplayFavicon.razor
index fe0237ede..80959d9ee 100644
--- a/src/AliasVault.Client/Main/Components/Credentials/DisplayFavicon.razor
+++ b/src/AliasVault.Client/Main/Components/Credentials/DisplayFavicon.razor
@@ -47,7 +47,7 @@ else
     /// </summary>
     /// <param name="bytes">The bytes of the favicon.</param>
     /// <returns>The mime type of the favicon.</returns>
-    private string DetectMimeType(byte[] bytes)
+    private static string DetectMimeType(byte[] bytes)
     {
         // Check for SVG.
         if (bytes.Length >= 5)
diff --git a/src/AliasVault.Client/wwwroot/css/tailwind.css b/src/AliasVault.Client/wwwroot/css/tailwind.css
index e27de19d9..970d18027 100644
--- a/src/AliasVault.Client/wwwroot/css/tailwind.css
+++ b/src/AliasVault.Client/wwwroot/css/tailwind.css
@@ -1186,6 +1186,12 @@ video {
   margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
+.space-y-1 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
+}
+
 .space-y-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1331,6 +1337,11 @@ video {
   border-top-width: 2px;
 }
 
+.border-blue-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(147 197 253 / var(--tw-border-opacity));
+}
+
 .border-blue-700 {
   --tw-border-opacity: 1;
   border-color: rgb(29 78 216 / var(--tw-border-opacity));
@@ -1376,6 +1387,16 @@ video {
   border-color: rgb(239 68 68 / var(--tw-border-opacity));
 }
 
+.border-blue-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(191 219 254 / var(--tw-border-opacity));
+}
+
+.border-gray-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(243 244 246 / var(--tw-border-opacity));
+}
+
 .bg-amber-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(255 251 235 / var(--tw-bg-opacity));
@@ -1713,6 +1734,10 @@ video {
   vertical-align: middle;
 }
 
+.align-text-bottom {
+  vertical-align: text-bottom;
+}
+
 .font-mono {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
 }
@@ -1921,6 +1946,11 @@ video {
   color: rgb(133 77 14 / var(--tw-text-opacity));
 }
 
+.text-primary-800 {
+  --tw-text-opacity: 1;
+  color: rgb(154 93 38 / var(--tw-text-opacity));
+}
+
 .opacity-0 {
   opacity: 0;
 }
@@ -2242,6 +2272,11 @@ video {
   --tw-ring-color: rgb(134 239 172 / var(--tw-ring-opacity));
 }
 
+.focus\:ring-primary-200:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(251 203 116 / var(--tw-ring-opacity));
+}
+
 .focus\:ring-primary-300:focus {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(248 185 99 / var(--tw-ring-opacity));
@@ -2296,6 +2331,11 @@ video {
   border-color: rgb(59 130 246 / var(--tw-border-opacity));
 }
 
+.dark\:border-blue-800:is(.dark *) {
+  --tw-border-opacity: 1;
+  border-color: rgb(30 64 175 / var(--tw-border-opacity));
+}
+
 .dark\:border-gray-400:is(.dark *) {
   --tw-border-opacity: 1;
   border-color: rgb(156 163 175 / var(--tw-border-opacity));
@@ -2351,6 +2391,10 @@ video {
   background-color: rgb(30 58 138 / var(--tw-bg-opacity));
 }
 
+.dark\:bg-blue-900\/50:is(.dark *) {
+  background-color: rgb(30 58 138 / 0.5);
+}
+
 .dark\:bg-gray-500:is(.dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(107 114 128 / var(--tw-bg-opacity));
@@ -2430,6 +2474,15 @@ video {
   background-color: rgb(113 63 18 / var(--tw-bg-opacity));
 }
 
+.dark\:bg-blue-900\/20:is(.dark *) {
+  background-color: rgb(30 58 138 / 0.2);
+}
+
+.dark\:bg-primary-900:is(.dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(123 74 30 / var(--tw-bg-opacity));
+}
+
 .dark\:bg-opacity-80:is(.dark *) {
   --tw-bg-opacity: 0.8;
 }
@@ -2678,6 +2731,11 @@ video {
   --tw-ring-color: rgb(154 93 38 / var(--tw-ring-opacity));
 }
 
+.dark\:focus\:ring-primary-900:focus:is(.dark *) {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(123 74 30 / var(--tw-ring-opacity));
+}
+
 .dark\:focus\:ring-red-800:focus:is(.dark *) {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(153 27 27 / var(--tw-ring-opacity));