fix(ui): update border styling for consistency across components and enhance loading indicators

This commit is contained in:
Andras Bacsai
2025-06-25 10:56:35 +02:00
parent 2657504147
commit 0e27d1f46d
26 changed files with 89 additions and 80 deletions

View File

@@ -35,7 +35,7 @@
Select events for which you would like to receive Discord notifications.
</p>
<div class="flex flex-col gap-4 max-w-2xl">
<div class="border dark:border-coolgray-300 p-4 rounded-lg">
<div class="border dark:border-coolgray-300 border-neutral-200 p-4 rounded-lg">
<h3 class="font-medium mb-3">Deployments</h3>
<div class="flex flex-col gap-1.5 pl-1">
<x-forms.checkbox instantSave="saveModel" id="deploymentSuccessDiscordNotifications"
@@ -47,7 +47,7 @@
id="statusChangeDiscordNotifications" label="Container Status Changes" />
</div>
</div>
<div class="border dark:border-coolgray-300 p-4 rounded-lg">
<div class="border dark:border-coolgray-300 border-neutral-200 p-4 rounded-lg">
<h3 class="font-medium mb-3">Backups</h3>
<div class="flex flex-col gap-1.5 pl-1">
<x-forms.checkbox instantSave="saveModel" id="backupSuccessDiscordNotifications"
@@ -56,7 +56,7 @@
label="Backup Failure" />
</div>
</div>
<div class="border dark:border-coolgray-300 p-4 rounded-lg">
<div class="border dark:border-coolgray-300 border-neutral-200 p-4 rounded-lg">
<h3 class="font-medium mb-3">Scheduled Tasks</h3>
<div class="flex flex-col gap-1.5 pl-1">
<x-forms.checkbox instantSave="saveModel" id="scheduledTaskSuccessDiscordNotifications"
@@ -65,7 +65,7 @@
label="Scheduled Task Failure" />
</div>
</div>
<div class="border dark:border-coolgray-300 p-4 rounded-lg">
<div class="border dark:border-coolgray-300 border-neutral-200 p-4 rounded-lg">
<h3 class="font-medium mb-3">Server</h3>
<div class="flex flex-col gap-1.5 pl-1">
<x-forms.checkbox instantSave="saveModel" id="dockerCleanupSuccessDiscordNotifications"

View File

@@ -54,7 +54,8 @@
@endif
@if (!$useInstanceEmailSettings)
<div class="flex flex-col gap-4">
<form wire:submit='submitSmtp' class="p-4 border dark:border-coolgray-300 flex flex-col gap-2">
<form wire:submit='submitSmtp'
class="p-4 border dark:border-coolgray-300 border-neutral-200 flex flex-col gap-2">
<div class="flex items-center gap-2">
<h3>SMTP Server</h3>
<x-forms.button type="submit">
@@ -85,7 +86,8 @@
</div>
</div>
</form>
<form wire:submit='submitResend' class="p-4 border dark:border-coolgray-300 flex flex-col gap-2">
<form wire:submit='submitResend'
class="p-4 border dark:border-coolgray-300 border-neutral-200 flex flex-col gap-2">
<div class="flex items-center gap-2">
<h3>Resend</h3>
<x-forms.button type="submit">
@@ -112,7 +114,7 @@
Select events for which you would like to receive email notifications.
</p>
<div class="flex flex-col gap-4 max-w-2xl">
<div class="border dark:border-coolgray-300 p-4 rounded-lg">
<div class="border dark:border-coolgray-300 border-neutral-200 p-4 rounded-lg">
<h3 class="font-medium mb-3">Deployments</h3>
<div class="flex flex-col gap-1.5 pl-1">
<x-forms.checkbox instantSave="saveModel" id="deploymentSuccessEmailNotifications"
@@ -124,7 +126,7 @@
id="statusChangeEmailNotifications" label="Container Status Changes" />
</div>
</div>
<div class="border dark:border-coolgray-300 p-4 rounded-lg">
<div class="border dark:border-coolgray-300 border-neutral-200 p-4 rounded-lg">
<h3 class="font-medium mb-3">Backups</h3>
<div class="flex flex-col gap-1.5 pl-1">
<x-forms.checkbox instantSave="saveModel" id="backupSuccessEmailNotifications"
@@ -133,7 +135,7 @@
label="Backup Failure" />
</div>
</div>
<div class="border dark:border-coolgray-300 p-4 rounded-lg">
<div class="border dark:border-coolgray-300 border-neutral-200 p-4 rounded-lg">
<h3 class="font-medium mb-3">Scheduled Tasks</h3>
<div class="flex flex-col gap-1.5 pl-1">
<x-forms.checkbox instantSave="saveModel" id="scheduledTaskSuccessEmailNotifications"
@@ -142,7 +144,7 @@
label="Scheduled Task Failure" />
</div>
</div>
<div class="border dark:border-coolgray-300 p-4 rounded-lg">
<div class="border dark:border-coolgray-300 border-neutral-200 p-4 rounded-lg">
<h3 class="font-medium mb-3">Server</h3>
<div class="flex flex-col gap-1.5 pl-1">
<x-forms.checkbox instantSave="saveModel" id="dockerCleanupSuccessEmailNotifications"

View File

@@ -37,7 +37,7 @@
Select events for which you would like to receive Pushover notifications.
</p>
<div class="flex flex-col gap-4 max-w-2xl">
<div class="border dark:border-coolgray-300 p-4 rounded-lg">
<div class="border dark:border-coolgray-300 border-neutral-200 p-4 rounded-lg">
<h3 class="font-medium mb-3">Deployments</h3>
<div class="flex flex-col gap-1.5 pl-1">
<x-forms.checkbox instantSave="saveModel" id="deploymentSuccessPushoverNotifications"
@@ -49,7 +49,7 @@
id="statusChangePushoverNotifications" label="Container Status Changes" />
</div>
</div>
<div class="border dark:border-coolgray-300 p-4 rounded-lg">
<div class="border dark:border-coolgray-300 border-neutral-200 p-4 rounded-lg">
<h3 class="font-medium mb-3">Backups</h3>
<div class="flex flex-col gap-1.5 pl-1">
<x-forms.checkbox instantSave="saveModel" id="backupSuccessPushoverNotifications"
@@ -58,7 +58,7 @@
label="Backup Failure" />
</div>
</div>
<div class="border dark:border-coolgray-300 p-4 rounded-lg">
<div class="border dark:border-coolgray-300 border-neutral-200 p-4 rounded-lg">
<h3 class="font-medium mb-3">Scheduled Tasks</h3>
<div class="flex flex-col gap-1.5 pl-1">
<x-forms.checkbox instantSave="saveModel" id="scheduledTaskSuccessPushoverNotifications"
@@ -67,7 +67,7 @@
label="Scheduled Task Failure" />
</div>
</div>
<div class="border dark:border-coolgray-300 p-4 rounded-lg">
<div class="border dark:border-coolgray-300 border-neutral-200 p-4 rounded-lg">
<h3 class="font-medium mb-3">Server</h3>
<div class="flex flex-col gap-1.5 pl-1">
<x-forms.checkbox instantSave="saveModel" id="dockerCleanupSuccessPushoverNotifications"

View File

@@ -32,7 +32,7 @@
Select events for which you would like to receive Slack notifications.
</p>
<div class="flex flex-col gap-4 max-w-2xl">
<div class="border dark:border-coolgray-300 p-4 rounded-lg">
<div class="border dark:border-coolgray-300 border-neutral-200 p-4 rounded-lg">
<h3 class="font-medium mb-3">Deployments</h3>
<div class="flex flex-col gap-1.5 pl-1">
<x-forms.checkbox instantSave="saveModel" id="deploymentSuccessSlackNotifications"
@@ -44,14 +44,14 @@
id="statusChangeSlackNotifications" label="Container Status Changes" />
</div>
</div>
<div class="border dark:border-coolgray-300 p-4 rounded-lg">
<div class="border dark:border-coolgray-300 border-neutral-200 p-4 rounded-lg">
<h3 class="font-medium mb-3">Backups</h3>
<div class="flex flex-col gap-1.5 pl-1">
<x-forms.checkbox instantSave="saveModel" id="backupSuccessSlackNotifications" label="Backup Success" />
<x-forms.checkbox instantSave="saveModel" id="backupFailureSlackNotifications" label="Backup Failure" />
</div>
</div>
<div class="border dark:border-coolgray-300 p-4 rounded-lg">
<div class="border dark:border-coolgray-300 border-neutral-200 p-4 rounded-lg">
<h3 class="font-medium mb-3">Scheduled Tasks</h3>
<div class="flex flex-col gap-1.5 pl-1">
<x-forms.checkbox instantSave="saveModel" id="scheduledTaskSuccessSlackNotifications"
@@ -60,7 +60,7 @@
label="Scheduled Task Failure" />
</div>
</div>
<div class="border dark:border-coolgray-300 p-4 rounded-lg">
<div class="border dark:border-coolgray-300 border-neutral-200 p-4 rounded-lg">
<h3 class="font-medium mb-3">Server</h3>
<div class="flex flex-col gap-1.5 pl-1">
<x-forms.checkbox instantSave="saveModel" id="dockerCleanupSuccessSlackNotifications"

View File

@@ -37,7 +37,7 @@
Select events for which you would like to receive Telegram notifications.
</p>
<div class="flex flex-col gap-4 ">
<div class="border dark:border-coolgray-300 p-4 rounded-lg">
<div class="border dark:border-coolgray-300 border-neutral-200 p-4 rounded-lg">
<h3 class="text-lg font-medium mb-3">Deployments</h3>
<div class="flex flex-col gap-1.5 pl-1">
<div class="pl-1 flex gap-2">
@@ -67,7 +67,7 @@
</div>
</div>
</div>
<div class="border dark:border-coolgray-300 p-4 rounded-lg">
<div class="border dark:border-coolgray-300 border-neutral-200 p-4 rounded-lg">
<h3 class="text-lg font-medium mb-3">Backups</h3>
<div class="flex flex-col gap-1.5 pl-1">
<div class="pl-1 flex gap-2">
@@ -90,7 +90,7 @@
</div>
</div>
<div class="border dark:border-coolgray-300 p-4 rounded-lg">
<div class="border dark:border-coolgray-300 border-neutral-200 p-4 rounded-lg">
<h3 class="text-lg font-medium mb-3">Scheduled Tasks</h3>
<div class="flex flex-col gap-1.5 pl-1">
<div class="pl-1 flex gap-2">
@@ -113,7 +113,7 @@
</div>
</div>
<div class="border dark:border-coolgray-300 p-4 rounded-lg">
<div class="border dark:border-coolgray-300 border-neutral-200 p-4 rounded-lg">
<h3 class="text-lg font-medium mb-3">Server</h3>
<div class="flex flex-col gap-1.5 pl-1">
<div class="pl-1 flex gap-2">