Update browser extension and mobile app download UI (#914)

This commit is contained in:
Leendert de Borst
2025-06-12 14:47:16 +02:00
committed by Leendert de Borst
parent eb64d86c78
commit 061f846b66
3 changed files with 14 additions and 36 deletions

View File

@@ -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)
{

View File

@@ -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>
}

View File

@@ -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;
}