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

@@ -122,7 +122,7 @@
}
@utility navbar-main {
@apply flex flex-col gap-4 justify-items-start pb-2 border-b-2 border-solid h-fit md:flex-row sm:justify-between dark:border-coolgray-200 md:items-center;
@apply flex flex-col gap-4 justify-items-start pb-2 border-b-2 border-solid h-fit md:flex-row sm:justify-between dark:border-coolgray-200 border-neutral-200 md:items-center;
}
@utility loading {

View File

@@ -3,7 +3,7 @@
@if (isset($text))
<div>{{ $text }}</div>
@endif
<svg class="w-4 h-4 mx-1 ml-3 text-warning animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none"
<svg class="w-4 h-4 mx-1 ml-3 dark:text-warning animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor"

View File

@@ -362,7 +362,7 @@
</li>
@endpersist
@endif
<li>
{{-- <li>
<a title="Onboarding"
class="{{ request()->is('onboarding*') ? 'menu-item-active menu-item' : 'menu-item' }}"
href="{{ route('onboarding') }}">
@@ -372,7 +372,7 @@
</svg>
Onboarding
</a>
</li>
</li> --}}
<li>
<a title="Sponsor us" class="menu-item" href="https://coolify.io/sponsorships"
target="_blank">
@@ -410,7 +410,7 @@
<form action="/logout" method="POST">
@csrf
<button title="Logout" type="submit" class="gap-2 mb-6 menu-item">
<svg class="icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<svg class="icon mr-1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor"
d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2a9.985 9.985 0 0 1 8 4h-2.71a8 8 0 1 0 .001 12h2.71A9.985 9.985 0 0 1 12 22m7-6v-3h-8v-2h8V8l5 4z" />
</svg>

View File

@@ -4,7 +4,7 @@
</x-slot>
<section class="flex flex-col h-full lg:items-center lg:justify-center">
<div
class="flex flex-col items-center justify-center p-10 mx-2 mt-10 bg-white border rounded-lg shadow-sm lg:p-20 dark:bg-transparent dark:border-none max-w-7xl ">
class="flex flex-col items-center justify-center p-10 mx-2 mt-10 bg-white border rounded-lg shadow-sm lg:p-20 dark:bg-transparent dark:border-none max-w-7xl border-neutral-200">
@if ($currentState === 'welcome')
<h1 class="text-3xl font-bold lg:text-5xl">Welcome to Coolify</h1>
<div class="py-6 text-center lg:text-xl">Let me help you set up the basics.</div>
@@ -277,8 +277,7 @@
<x-forms.input required placeholder="Choose a name for your Server. Could be anything."
label="Name" id="remoteServerName" wire:model="remoteServerName" />
<x-forms.input placeholder="Description, so others will know more about this."
label="Description" id="remoteServerDescription"
wire:model="remoteServerDescription" />
label="Description" id="remoteServerDescription" wire:model="remoteServerDescription" />
<x-forms.input required placeholder="127.0.0.1" label="IP Address" id="remoteServerHost"
wire:model="remoteServerHost" />
<div x-data="{ showAdvanced: false }" class="flex flex-col gap-2">
@@ -323,7 +322,8 @@
</x-slot:actions>
<x-slot:explanation>
<p>This will install the latest Docker Engine on your server, configure a few things to be able
to run optimal.<br><br>Minimum Docker Engine version is: {{ $minDockerVersion }}<br><br>To manually install
to run optimal.<br><br>Minimum Docker Engine version is: {{ $minDockerVersion }}<br><br>To
manually install
Docker
Engine, check <a target="_blank" class="underline dark:text-warning"
href="https://docs.docker.com/engine/install/#server">this

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">

View File

@@ -19,7 +19,7 @@
<h2>Change Password</h2>
<x-forms.button type="submit" label="Save">Save</x-forms.button>
</div>
<div class="text-xs font-bold text-warning pb-2">Resetting the password will logout all sessions.</div>
<div class="text-xs font-bold dark:text-warning pb-2">Resetting the password will logout all sessions.</div>
<div class="flex flex-col gap-2">
<x-forms.input id="current_password" label="Current Password" required type="password" />
<div class="flex gap-2">

View File

@@ -8,16 +8,16 @@
</a>
<a class="{{ request()->routeIs('project.application.deployment.index') ? 'dark:text-white' : '' }}"
href="{{ route('project.application.deployment.index', $parameters) }}">
<button>Deployments</button>
Deployments
</a>
<a class="{{ request()->routeIs('project.application.logs') ? 'dark:text-white' : '' }}"
href="{{ route('project.application.logs', $parameters) }}">
<button>Logs</button>
Logs
</a>
@if (!$application->destination->server->isSwarm())
<a class="{{ request()->routeIs('project.application.command') ? 'dark:text-white' : '' }}"
href="{{ route('project.application.command', $parameters) }}">
<button>Terminal</button>
Terminal
</a>
@endif
<x-applications.links :application="$application" />

View File

@@ -5,11 +5,11 @@
</div>
<div class="pb-4 ">You can easily rollback to a previously built (local) images
quickly.</div>
<div wire:target='loadImages'>
<div wire:target='loadImages' wire:loading.remove>
<div class="flex flex-wrap">
@forelse ($images as $image)
<div class="w-2/4 p-2">
<div class="bg-white border rounded-sm dark:border-black dark:bg-coolgray-100">
<div class="bg-white border rounded-sm dark:border-black dark:bg-coolgray-100 border-neutral-200">
<div class="p-2">
<div class="">
@if (data_get($image, 'is_current'))
@@ -31,7 +31,7 @@
Rollback
</x-forms.button>
@else
<x-forms.button class="bg-coolgray-100"
<x-forms.button class="dark:bg-coolgray-100"
wire:click="rollbackImage('{{ data_get($image, 'tag') }}')">
Rollback
</x-forms.button>
@@ -44,4 +44,5 @@
@endforelse
</div>
</div>
<div wire:target='loadImages' wire:loading>Loading available docker images...</div>
</div>

View File

@@ -5,7 +5,7 @@
<h1>Backups</h1>
<livewire:project.shared.configuration-checker :resource="$database" />
<livewire:project.database.heading :database="$database" />
<div class="pt-6">
<div>
<livewire:project.database.backup-edit :backup="$backup" :s3s="$s3s" :status="data_get($database, 'status')" />
<livewire:project.database.backup-executions :backup="$backup" />
</div>

View File

@@ -11,16 +11,16 @@
class="flex overflow-x-scroll shrink-0 gap-6 items-center whitespace-nowrap sm:overflow-x-hidden scrollbar min-h-10">
<a class="{{ request()->routeIs('project.database.configuration') ? 'dark:text-white' : '' }}"
href="{{ route('project.database.configuration', $parameters) }}">
<button>Configuration</button>
Configuration
</a>
<a class="{{ request()->routeIs('project.database.logs') ? 'dark:text-white' : '' }}"
href="{{ route('project.database.logs', $parameters) }}">
<button>Logs</button>
Logs
</a>
<a class="{{ request()->routeIs('project.database.command') ? 'dark:text-white' : '' }}"
href="{{ route('project.database.command', $parameters) }}">
<button>Terminal</button>
Terminal
</a>
@if (
$database->getMorphClass() === 'App\Models\StandalonePostgresql' ||
@@ -29,7 +29,7 @@
$database->getMorphClass() === 'App\Models\StandaloneMariadb')
<a class="{{ request()->routeIs('project.database.backup.index') ? 'dark:text-white' : '' }}"
href="{{ route('project.database.backup.index', $parameters) }}">
<button>Backups</button>
Backups
</a>
@endif
</nav>

View File

@@ -2,7 +2,7 @@
<form wire:submit='submit' @class([
'flex flex-col items-center gap-4 p-4 bg-white border lg:items-start dark:bg-base',
'border-error' => $is_really_required,
'dark:border-coolgray-300' => !$is_really_required,
'dark:border-coolgray-300 border-neutral-200' => !$is_really_required,
])>
@if ($isLocked)
<div class="flex flex-1 w-full gap-2">

View File

@@ -1,4 +1,4 @@
<div class="p-4 my-4 border dark:border-coolgray-200">
<div class="p-4 my-4 border dark:border-coolgray-200 border-neutral-200">
<div x-init="$wire.getLogs" id="screen" x-data="{
fullscreen: false,
alwaysScroll: false,
@@ -56,7 +56,7 @@
<x-forms.checkbox instantSave label="Include Timestamps" id="showTimeStamps"></x-forms.checkbox>
</form>
<div :class="fullscreen ? 'fullscreen' : 'relative w-full py-4 mx-auto'">
<div class="flex overflow-y-auto flex-col-reverse px-4 py-2 w-full bg-white dark:text-white dark:bg-coolgray-100 scrollbar dark:border-coolgray-300"
<div class="flex overflow-y-auto flex-col-reverse px-4 py-2 w-full bg-white dark:text-white dark:bg-coolgray-100 scrollbar dark:border-coolgray-300 border-neutral-200"
:class="fullscreen ? '' : 'max-h-96 border border-solid rounded-sm'">
<div :class="fullscreen ? 'fixed top-4 right-4' : 'absolute top-6 right-0'">
<div class="flex justify-end gap-4" :class="fullscreen ? 'fixed' : ''"

View File

@@ -6,7 +6,8 @@
<div class="pb-4">Define how your resource's health should be checked.</div>
<div class="flex flex-col gap-4">
@if ($resource->custom_healthcheck_found)
<div class="text-warning">A custom health check has been found and will be used until you enable this.</div>
<div class="dark:text-warning">A custom health check has been found and will be used until you enable this.
</div>
@endif
<div class="w-32">
<x-forms.checkbox instantSave id="resource.health_check_enabled" label="Enabled" />
@@ -25,8 +26,8 @@
<x-forms.input id="resource.health_check_response_text" placeholder="OK" label="Response Text" />
</div>
<div class="flex gap-2">
<x-forms.input min=1 type="number" id="resource.health_check_interval" placeholder="30" label="Interval (s)"
required />
<x-forms.input min=1 type="number" id="resource.health_check_interval" placeholder="30"
label="Interval (s)" required />
<x-forms.input type="number" id="resource.health_check_timeout" placeholder="30" label="Timeout (s)"
required />
<x-forms.input type="number" id="resource.health_check_retries" placeholder="3" label="Retries" required />

View File

@@ -9,7 +9,7 @@
<div>
<h2>Logs</h2>
@if (str($status)->contains('exited'))
<div class="pt-2">The resource is not running.</div>
<div class="pt-4">The resource is not running.</div>
@else
<div class="pt-2" wire:loading wire:target="loadAllContainers">
Loading containers...
@@ -44,7 +44,7 @@
<div>
<h2>Logs</h2>
@if (str($status)->contains('exited'))
<div class="pt-2">The resource is not running.</div>
<div class="pt-4">The resource is not running.</div>
@else
<div class="pt-2" wire:loading wire:target="loadAllContainers">
Loading containers...
@@ -68,7 +68,7 @@
<div>
<h2>Logs</h2>
@if (str($status)->contains('exited'))
<div class="pt-2">The resource is not running.</div>
<div class="pt-4">The resource is not running.</div>
@else
<div class="pt-2" wire:loading wire:target="loadAllContainers">
Loading containers...

View File

@@ -47,7 +47,7 @@
@endif
</div>
@if (in_array('root', $permissions))
<div class="font-bold text-warning">Root access, be careful!</div>
<div class="font-bold dark:text-warning">Root access, be careful!</div>
@endif
</form>
@if (session()->has('token'))

View File

@@ -13,7 +13,7 @@
</div>
<div>Sends service logs to 3rd party tools.</div>
<div class="flex flex-col gap-4 pt-4">
<div class="p-4 border dark:border-coolgray-300">
<div class="p-4 border dark:border-coolgray-300 border-neutral-200">
<form wire:submit='submit("newrelic")' class="flex flex-col">
<h3>New Relic</h3>
<div class="w-32">

View File

@@ -29,7 +29,7 @@
@endif
<div wire:loading wire:target="checkProxy" class="badge badge-warning"></div>
<div wire:loading wire:target="checkProxy"
class="pl-2 pr-1 text-xs font-bold tracking-wider text-warning">
class="pl-2 pr-1 text-xs font-bold tracking-wider dark:text-warning">
Checking Ports Availability...
</div>
@if ($proxyStatus !== 'exited')
@@ -60,7 +60,7 @@
href="{{ route('server.show', [
'server_uuid' => data_get($server, 'uuid'),
]) }}">
<button>Configuration</button>
Configuration
</a>
@if (!$server->isSwarmWorker() && !$server->settings->is_build_server)
@@ -68,26 +68,26 @@
href="{{ route('server.proxy', [
'server_uuid' => data_get($server, 'uuid'),
]) }}">
<button>Proxy</button>
Proxy
</a>
@endif
<a class="{{ request()->routeIs('server.resources') ? 'dark:text-white' : '' }}"
href="{{ route('server.resources', [
'server_uuid' => data_get($server, 'uuid'),
]) }}">
<button>Resources</button>
Resources
</a>
<a class="{{ request()->routeIs('server.command') ? 'dark:text-white' : '' }}"
href="{{ route('server.command', [
'server_uuid' => data_get($server, 'uuid'),
]) }}">
<button>Terminal</button>
Terminal
</a>
<a class="{{ request()->routeIs('server.security.patches') ? 'dark:text-white' : '' }}"
href="{{ route('server.security.patches', [
'server_uuid' => data_get($server, 'uuid'),
]) }}">
<button>Security</button>
Security
</a>
</nav>
<div class="order-first sm:order-last">

View File

@@ -27,7 +27,9 @@
@endforeach
</x-forms.select>
<div class="">
<x-forms.checkbox instantSave type="checkbox" id="is_build_server" label="Use it as a build server?" />
<x-forms.checkbox instantSave type="checkbox" id="is_build_server"
helper="Build servers are used to build your applications, so you cannot deploy applications to it."
label="Use it as a build server?" />
</div>
<div class="">
<h3 class="pt-6">Swarm <span class="text-xs text-neutral-500">(experimental)</span></h3>

View File

@@ -13,8 +13,8 @@
<div>Here you can find all resources that are managed by Coolify.</div>
<div class="flex flex-row gap-4 py-10">
<div @class([
'box-without-bg cursor-pointer bg-coolgray-100 text-white w-full text-center items-center justify-center',
'bg-coollabs' => $activeTab === 'managed',
'box-without-bg cursor-pointer dark:bg-coolgray-100 dark:text-white w-full text-center items-center justify-center',
'dark:bg-coollabs bg-coollabs text-white' => $activeTab === 'managed',
]) wire:click="loadManagedContainers">
Managed
<div class="flex flex-col items-center justify-center">
@@ -22,8 +22,8 @@
</div>
</div>
<div @class([
'box-without-bg cursor-pointer bg-coolgray-100 text-white w-full text-center items-center justify-center',
'bg-coollabs' => $activeTab === 'unmanaged',
'box-without-bg cursor-pointer dark:bg-coolgray-100 dark:text-white w-full text-center items-center justify-center',
'dark:bg-coollabs bg-coollabs text-white' => $activeTab === 'unmanaged',
]) wire:click="loadUnmanagedContainers">
Unmanaged
<div class="flex flex-col items-center justify-center">

View File

@@ -28,7 +28,7 @@
</div>
</form>
<div class="flex flex-col gap-4">
<div class="p-4 border dark:border-coolgray-300">
<div class="p-4 border dark:border-coolgray-300 border-neutral-200">
<form wire:submit.prevent="submitSmtp" class="flex flex-col">
<div class="flex gap-2">
<h3>SMTP Server</h3>
@@ -58,7 +58,7 @@
</div>
</form>
</div>
<div class="p-4 border dark:border-coolgray-300">
<div class="p-4 border dark:border-coolgray-300 border-neutral-200">
<form wire:submit.prevent="submitResend" class="flex flex-col">
<div class="flex gap-2">
<h3>Resend</h3>

View File

@@ -15,7 +15,7 @@
</div>
<div class="flex flex-col gap-2 pt-4">
@foreach ($oauth_settings_map as $oauth_setting)
<div class="p-4 border dark:border-coolgray-300">
<div class="p-4 border dark:border-coolgray-300 border-neutral-200">
<h3>{{ ucfirst($oauth_setting->provider) }}</h3>
<div class="w-32">
<x-forms.checkbox instantSave="instantSave('{{ $oauth_setting->provider }}')"
@@ -26,8 +26,8 @@
label="Client ID" />
<x-forms.input id="oauth_settings_map.{{ $oauth_setting->provider }}.client_secret"
type="password" label="Client Secret" autocomplete="new-password" />
<x-forms.input id="oauth_settings_map.{{ $oauth_setting->provider }}.redirect_uri" placeholder="{{ route('auth.callback', $oauth_setting->provider) }}"
label="Redirect URI" />
<x-forms.input id="oauth_settings_map.{{ $oauth_setting->provider }}.redirect_uri"
placeholder="{{ route('auth.callback', $oauth_setting->provider) }}" label="Redirect URI" />
@if ($oauth_setting->provider == 'azure')
<x-forms.input id="oauth_settings_map.{{ $oauth_setting->provider }}.tenant"
label="Tenant" />
@@ -37,7 +37,10 @@
helper="Optional parameter that supplies a hosted domain (HD) to Google, which<br>triggers a login hint to be displayed on the OAuth screen with this domain.<br><br><a class='underline dark:text-warning text-coollabs' href='https://developers.google.com/identity/openid-connect/openid-connect#hd-param' target='_blank'>Google Documentation</a>"
label="Tenant" />
@endif
@if ($oauth_setting->provider == 'authentik' || $oauth_setting->provider == 'clerk' || $oauth_setting->provider == 'zitadel')
@if (
$oauth_setting->provider == 'authentik' ||
$oauth_setting->provider == 'clerk' ||
$oauth_setting->provider == 'zitadel')
<x-forms.input id="oauth_settings_map.{{ $oauth_setting->provider }}.base_url"
label="Base URL" />
@endif

View File

@@ -56,7 +56,7 @@
</span>
</p>
<div class="flex items-center pt-6">
<svg xmlns="http://www.w3.org/2000/svg" class="flex-none w-8 h-8 mr-3 text-warning"
<svg xmlns="http://www.w3.org/2000/svg" class="flex-none w-8 h-8 mr-3 dark:text-warning"
fill="currentColor" viewBox="0 0 256 256">
<path
d="M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM222.93,203.8a8.5,8.5,0,0,1-7.48,4.2H40.55a8.5,8.5,0,0,1-7.48-4.2,7.59,7.59,0,0,1,0-7.72L120.52,44.21a8.75,8.75,0,0,1,15,0l87.45,151.87A7.59,7.59,0,0,1,222.93,203.8ZM120,144V104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,180Z">
@@ -89,8 +89,8 @@
</div>
<ul role="list" class="mt-8 space-y-3 text-sm leading-6 dark:text-neutral-400">
<li class="flex">
<svg class="flex-none w-5 h-6 mr-3 text-warning" viewBox="0 0 20 20" fill="currentColor"
aria-hidden="true">
<svg class="flex-none w-5 h-6 mr-3 dark:text-warning" viewBox="0 0 20 20"
fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
clip-rule="evenodd" />
@@ -99,8 +99,8 @@
<span class="px-1 font-bold dark:text-white">unlimited</span> servers
</li>
<li class="flex">
<svg class="flex-none w-5 h-6 mr-3 text-warning" viewBox="0 0 20 20" fill="currentColor"
aria-hidden="true">
<svg class="flex-none w-5 h-6 mr-3 dark:text-warning" viewBox="0 0 20 20"
fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
clip-rule="evenodd" />
@@ -109,7 +109,7 @@
<span class="px-1 font-bold dark:text-white">unlimited</span> applications per server
</li>
<li class="flex gap-x-3">
<svg class="flex-none w-5 h-6 text-warning" viewBox="0 0 20 20" fill="currentColor"
<svg class="flex-none w-5 h-6 dark:text-warning" viewBox="0 0 20 20" fill="currentColor"
aria-hidden="true">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
@@ -118,7 +118,7 @@
Free email notifications
</li>
<li class="flex gap-x-3">
<svg class="flex-none w-5 h-6 text-warning" viewBox="0 0 20 20" fill="currentColor"
<svg class="flex-none w-5 h-6 dark:text-warning" viewBox="0 0 20 20" fill="currentColor"
aria-hidden="true">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"