From 2382ee659232b033c06e8f0f34d20e945b7178a9 Mon Sep 17 00:00:00 2001
From: Leendert de Borst <ldeborst@xivisoft.com>
Date: Thu, 27 Feb 2025 20:23:13 +0100
Subject: [PATCH] Update brave detection and responsive design (#620)

---
 .../Pages/Settings/BrowserExtensions.razor    | 41 +++++++-----
 .../wwwroot/css/tailwind.css                  | 64 ++++++++-----------
 2 files changed, 52 insertions(+), 53 deletions(-)

diff --git a/src/AliasVault.Client/Main/Pages/Settings/BrowserExtensions.razor b/src/AliasVault.Client/Main/Pages/Settings/BrowserExtensions.razor
index b4ea5c392..4f4e484a5 100644
--- a/src/AliasVault.Client/Main/Pages/Settings/BrowserExtensions.razor
+++ b/src/AliasVault.Client/Main/Pages/Settings/BrowserExtensions.razor
@@ -30,7 +30,7 @@
         <div class="mb-6">
             <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Recommended for Your Browser</h3>
             <div class="p-4 border rounded-lg dark:border-gray-700 bg-blue-50 dark:bg-blue-900/20 border-blue-200">
-                <div class="flex items-center justify-between">
+                <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                     <div class="flex items-center">
                         <img src="@GetBrowserIcon(CurrentBrowser)" alt="@CurrentBrowser" class="w-8 h-8 mr-3">
                         <h4 class="text-lg font-medium text-gray-900 dark:text-white">@GetBrowserName(CurrentBrowser)</h4>
@@ -45,11 +45,9 @@
                     }
                     else
                     {
-                        <div class="flex items-center">
-                            <p class="text-sm text-blue-800 dark:text-blue-400">
-                                Support for @GetBrowserName(CurrentBrowser) is coming soon! For now, you can use our Chrome extension.
-                            </p>
-                        </div>
+                        <p class="text-sm text-blue-800 dark:text-blue-400">
+                            Support for @GetBrowserName(CurrentBrowser) is coming soon! For now, you can use our Chrome extension.
+                        </p>
                     }
                 </div>
             </div>
@@ -97,7 +95,7 @@
         Chrome,
         Safari,
         Edge,
-        Opera
+        Brave
     }
 
     /// <summary>
@@ -113,8 +111,7 @@
 
         try
         {
-            var userAgent = await JsRuntime.InvokeAsync<string>("eval", "navigator.userAgent");
-            CurrentBrowser = DetermineBrowser(userAgent);
+            CurrentBrowser = await DetermineBrowser();
         }
         catch (Exception ex)
         {
@@ -125,18 +122,30 @@
     /// <summary>
     /// Determine current browser.
     /// </summary>
-    /// <param name="userAgent">User agent string.</param>
     /// <returns>Browser type enum value.</returns>
-    private static BrowserType DetermineBrowser(string userAgent)
+    private async Task<BrowserType> DetermineBrowser()
     {
-        var ua = userAgent.ToLower();
-        return ua switch
+        try
+        {
+            // First check if it's Brave.
+            var isBrave = await JsRuntime.InvokeAsync<bool>("eval", "navigator.brave?.isBrave() || false");
+            if (isBrave)
+            {
+                return BrowserType.Brave;
+            }
+        }
+        catch (Exception ex)
+        {
+            Logger.LogError(ex, "Error checking for Brave browser");
+        }
+
+        var userAgent = await JsRuntime.InvokeAsync<string>("eval", "navigator.userAgent");
+        return userAgent.ToLower() switch
         {
             var x when x.Contains("firefox") => BrowserType.Firefox,
             var x when x.Contains("chrome") && !x.Contains("edg") => BrowserType.Chrome,
             var x when x.Contains("safari") && !x.Contains("chrome") => BrowserType.Safari,
             var x when x.Contains("edg") => BrowserType.Edge,
-            var x when x.Contains("opr") || x.Contains("opera") => BrowserType.Opera,
             _ => BrowserType.Unknown
         };
     }
@@ -150,7 +159,7 @@
         BrowserType.Chrome => "/img/browser-icons/chrome.svg",
         BrowserType.Safari => "/img/browser-icons/safari.svg",
         BrowserType.Edge => "/img/browser-icons/edge.svg",
-        BrowserType.Opera => "/img/browser-icons/brave.svg",
+        BrowserType.Brave => "/img/browser-icons/brave.svg",
         _ => string.Empty
     };
 
@@ -163,7 +172,7 @@
         BrowserType.Chrome => "Google Chrome",
         BrowserType.Safari => "Safari",
         BrowserType.Edge => "Microsoft Edge",
-        BrowserType.Opera => "Brave",
+        BrowserType.Brave => "Brave",
         _ => string.Empty
     };
 }
diff --git a/src/AliasVault.Client/wwwroot/css/tailwind.css b/src/AliasVault.Client/wwwroot/css/tailwind.css
index 970d18027..f175c3c1a 100644
--- a/src/AliasVault.Client/wwwroot/css/tailwind.css
+++ b/src/AliasVault.Client/wwwroot/css/tailwind.css
@@ -1337,9 +1337,9 @@ video {
   border-top-width: 2px;
 }
 
-.border-blue-300 {
+.border-blue-200 {
   --tw-border-opacity: 1;
-  border-color: rgb(147 197 253 / var(--tw-border-opacity));
+  border-color: rgb(191 219 254 / var(--tw-border-opacity));
 }
 
 .border-blue-700 {
@@ -1347,6 +1347,11 @@ video {
   border-color: rgb(29 78 216 / var(--tw-border-opacity));
 }
 
+.border-gray-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(243 244 246 / var(--tw-border-opacity));
+}
+
 .border-gray-200 {
   --tw-border-opacity: 1;
   border-color: rgb(229 231 235 / var(--tw-border-opacity));
@@ -1387,16 +1392,6 @@ 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));
@@ -1734,10 +1729,6 @@ 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;
 }
@@ -1916,6 +1907,11 @@ video {
   color: rgb(184 112 47 / var(--tw-text-opacity));
 }
 
+.text-primary-800 {
+  --tw-text-opacity: 1;
+  color: rgb(154 93 38 / var(--tw-text-opacity));
+}
+
 .text-red-500 {
   --tw-text-opacity: 1;
   color: rgb(239 68 68 / var(--tw-text-opacity));
@@ -1946,11 +1942,6 @@ 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;
 }
@@ -2331,11 +2322,6 @@ 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));
@@ -2391,8 +2377,8 @@ 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-blue-900\/20:is(.dark *) {
+  background-color: rgb(30 58 138 / 0.2);
 }
 
 .dark\:bg-gray-500:is(.dark *) {
@@ -2440,6 +2426,11 @@ video {
   background-color: rgb(214 131 56 / var(--tw-bg-opacity));
 }
 
+.dark\:bg-primary-900:is(.dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(123 74 30 / var(--tw-bg-opacity));
+}
+
 .dark\:bg-red-600:is(.dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(220 38 38 / var(--tw-bg-opacity));
@@ -2474,15 +2465,6 @@ 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;
 }
@@ -2787,6 +2769,14 @@ video {
     flex-direction: row;
   }
 
+  .sm\:items-center {
+    align-items: center;
+  }
+
+  .sm\:justify-between {
+    justify-content: space-between;
+  }
+
   .sm\:rounded-lg {
     border-radius: 0.5rem;
   }