From 061f846b665fdff70276f24e17879aab60676840 Mon Sep 17 00:00:00 2001
From: Leendert de Borst <ldeborst@xivisoft.com>
Date: Thu, 12 Jun 2025 14:47:16 +0200
Subject: [PATCH] Update browser extension and mobile app download UI (#914)

---
 .../Main/Pages/Settings/Apps.razor            | 32 ++++++-------------
 .../Main/Pages/Welcome.razor                  |  2 +-
 .../wwwroot/css/tailwind.css                  | 16 +++-------
 3 files changed, 14 insertions(+), 36 deletions(-)

diff --git a/apps/server/AliasVault.Client/Main/Pages/Settings/Apps.razor b/apps/server/AliasVault.Client/Main/Pages/Settings/Apps.razor
index 392edf247..522205438 100644
--- a/apps/server/AliasVault.Client/Main/Pages/Settings/Apps.razor
+++ b/apps/server/AliasVault.Client/Main/Pages/Settings/Apps.razor
@@ -22,14 +22,13 @@
     </div>
 
     <div class="mb-8">
-        <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Browsers</h3>
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
             @foreach (var extension in Shared.Core.BrowserExtensions.Constants.Extensions
                 .Where(x => x.Key != BrowserType.Unknown)
                 .Select(x => x.Value))
             {
-                <div class="p-4 border rounded-lg dark:border-gray-700">
-                    <div class="flex items-center mb-4">
+                <div class="p-4 border rounded-lg dark:border-gray-700 flex justify-between items-center">
+                    <div class="flex items-center">
                         <img src="@extension.IconPath" alt="@extension.Name" class="w-8 h-8 mr-3">
                         <h4 class="text-lg font-medium text-gray-900 dark:text-white">@extension.Name</h4>
                     </div>
@@ -38,7 +37,7 @@
                         <a href="@extension.DownloadUrl"
                            target="_blank"
                            class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-primary-600 rounded-lg hover:bg-primary-700 focus:ring-4 focus:ring-primary-200 dark:focus:ring-primary-900">
-                            Install for @extension.Name
+                            Install
                         </a>
                     }
                     else
@@ -54,16 +53,16 @@
 
     <div class="mb-6">
         <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">Mobile Apps</h3>
-        <p class="text-gray-600 dark:text-gray-400">
+        <p class="text-gray-600 dark:text-gray-400 mb-4">
             The AliasVault mobile app allows you to access your aliases and identities on the go, view and manage received emails, and generate new aliases anytime. Your data is fully protected with on-device biometric authentication.
         </p>
     </div>
 
-    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
         @foreach (var app in Shared.Core.MobileApps.Constants.MobileApps)
         {
-            <div class="p-4 border rounded-lg dark:border-gray-700">
-                <div class="flex items-center mb-4">
+            <div class="p-4 border rounded-lg dark:border-gray-700 flex justify-between items-center">
+                <div class="flex items-center">
                     <img src="@app.IconPath" alt="@app.Name" class="w-8 h-8 mr-3">
                     <h4 class="text-lg font-medium text-gray-900 dark:text-white">@app.Name</h4>
                 </div>
@@ -72,7 +71,7 @@
                     <a href="@app.DownloadUrl"
                        target="_blank"
                        class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-primary-600 rounded-lg hover:bg-primary-700 focus:ring-4 focus:ring-primary-200 dark:focus:ring-primary-900">
-                        Download for @app.Name
+                        Download
                     </a>
                 }
                 else
@@ -87,17 +86,9 @@
 </div>
 
 @code {
-    /// <summary>
-    /// The current browser of the user.
-    /// </summary>
     private BrowserType CurrentBrowser { get; set; }
-
-    /// <summary>
-    /// Information for extension for the current browser of the user.
-    /// </summary>
     private BrowserExtensionInfo? CurrentBrowserExtension { get; set; } = null;
 
-    /// <inheritdoc />
     protected override async Task OnInitializedAsync()
     {
         await base.OnInitializedAsync();
@@ -114,15 +105,10 @@
         }
     }
 
-    /// <summary>
-    /// Determine current browser.
-    /// </summary>
-    /// <returns>Browser type enum value.</returns>
     private async Task<BrowserType> DetermineBrowser()
     {
         try
         {
-            // First check if it's Brave.
             var isBrave = await JsRuntime.InvokeAsync<bool>("eval", "navigator.brave?.isBrave() || false");
             if (isBrave)
             {
diff --git a/apps/server/AliasVault.Client/Main/Pages/Welcome.razor b/apps/server/AliasVault.Client/Main/Pages/Welcome.razor
index 4b6342267..3f96dadcc 100644
--- a/apps/server/AliasVault.Client/Main/Pages/Welcome.razor
+++ b/apps/server/AliasVault.Client/Main/Pages/Welcome.razor
@@ -70,7 +70,7 @@
                                                    class="flex flex-col items-center p-3 rounded-lg bg-gray-200 dark:bg-gray-600 hover:bg-gray-300 dark:hover:bg-gray-500 transition-colors">
                                                     <img src="@extension.IconPath" alt="@extension.Name" class="w-8 h-8 mb-2">
                                                     <span class="text-xs text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300">
-                                                        Install
+                                                        @extension.Name
                                                     </span>
                                                 </a>
                                             }
diff --git a/apps/server/AliasVault.Client/wwwroot/css/tailwind.css b/apps/server/AliasVault.Client/wwwroot/css/tailwind.css
index 14fb6e75d..28fe0969a 100644
--- a/apps/server/AliasVault.Client/wwwroot/css/tailwind.css
+++ b/apps/server/AliasVault.Client/wwwroot/css/tailwind.css
@@ -945,14 +945,6 @@ video {
   height: 1px;
 }
 
-.h-32 {
-  height: 8rem;
-}
-
-.h-screen {
-  height: 100vh;
-}
-
 .max-h-\[90vh\] {
   max-height: 90vh;
 }
@@ -1049,10 +1041,6 @@ video {
   width: 100vw;
 }
 
-.w-32 {
-  width: 8rem;
-}
-
 .min-w-0 {
   min-width: 0px;
 }
@@ -3223,6 +3211,10 @@ video {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 
+  .lg\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
   .lg\:flex-row {
     flex-direction: row;
   }