fix(ui): update border styling for consistency across components and enhance loading indicators
This commit is contained in:
@@ -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"
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user