feat(ui): Upgrade to Tailwind v4 (#5710)
This commit is contained in:
@@ -10,7 +10,7 @@
|
||||
</div>
|
||||
@endif
|
||||
<div @class([
|
||||
'flex flex-col-reverse w-full px-4 py-2 overflow-y-auto bg-white border border-solid rounded dark:text-white dark:bg-coolgray-100 scrollbar border-neutral-300 dark:border-coolgray-300',
|
||||
'flex flex-col-reverse w-full px-4 py-2 overflow-y-auto bg-white border border-solid rounded-sm dark:text-white dark:bg-coolgray-100 scrollbar border-neutral-300 dark:border-coolgray-300',
|
||||
'max-h-[48rem]' => $fullHeight,
|
||||
'max-h-96' => !$fullHeight,
|
||||
])>
|
||||
|
||||
@@ -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 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 ">
|
||||
@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>
|
||||
@@ -89,7 +89,7 @@
|
||||
<p class="mb-2">If the connection details are correct, please ensure:</p>
|
||||
<ul class="list-disc list-inside">
|
||||
<li>The correct public key is in your <code
|
||||
class="bg-red-200 dark:bg-red-900 px-1 rounded">~/.ssh/authorized_keys</code>
|
||||
class="bg-red-200 dark:bg-red-900 px-1 rounded-sm">~/.ssh/authorized_keys</code>
|
||||
file for the specified user</li>
|
||||
<li>Or skip the boarding process and manually add a new private key to Coolify and
|
||||
the server</li>
|
||||
@@ -207,7 +207,7 @@
|
||||
<p class="mb-2">If the connection details are correct, please ensure:</p>
|
||||
<ul class="list-disc list-inside">
|
||||
<li>The correct public key is in your <code
|
||||
class="bg-red-200 dark:bg-red-900 px-1 rounded">~/.ssh/authorized_keys</code>
|
||||
class="bg-red-200 dark:bg-red-900 px-1 rounded-sm">~/.ssh/authorized_keys</code>
|
||||
file for the specified user</li>
|
||||
<li>Or skip the boarding process and manually add a new private key to Coolify and
|
||||
the server</li>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<a class="flex items-center mb-6 text-5xl font-extrabold tracking-tight text-gray-900 dark:text-white">
|
||||
Coolify
|
||||
</a>
|
||||
<div class="w-full bg-white shadow md:mt-0 sm:max-w-md xl:p-0 dark:bg-base ">
|
||||
<div class="w-full bg-white shadow-sm md:mt-0 sm:max-w-md xl:p-0 dark:bg-base ">
|
||||
<div class="p-6 space-y-4 md:space-y-6 sm:p-8">
|
||||
<form class="flex flex-col gap-2" wire:submit='submit'>
|
||||
<x-forms.input id="email" type="email" placeholder="Email" readonly label="Email" />
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
</div>
|
||||
@endif
|
||||
<div
|
||||
class="scrollbar flex flex-col-reverse w-full overflow-y-auto border border-solid rounded border-coolgray-300 max-h-[32rem] p-4 pt-6 text-xs dark:text-white">
|
||||
class="scrollbar flex flex-col-reverse w-full overflow-y-auto border border-solid rounded-sm border-coolgray-300 max-h-[32rem] p-4 pt-6 text-xs dark:text-white">
|
||||
|
||||
<pre class="font-mono whitespace-pre-wrap" @if ($isPollingActive) wire:poll.1000ms="polling" @endif>{{ RunRemoteProcess::decodeOutput($this->activity) }}</pre>
|
||||
</div>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<form class="flex flex-col w-full gap-2 rounded" wire:submit='submit'>
|
||||
<form class="flex flex-col w-full gap-2 rounded-sm" wire:submit='submit'>
|
||||
<x-forms.input placeholder="Your Cool Project" id="name" label="Name" required />
|
||||
<x-forms.input placeholder="This is my cool project everyone knows about" id="description" label="Description" />
|
||||
<div class="subtitle">New project will have a default <span class="dark:text-warning font-bold">production</span>
|
||||
|
||||
@@ -44,17 +44,12 @@
|
||||
<div class="flex flex-col">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span @class([
|
||||
'px-3 py-1 rounded-md text-xs font-medium shadow-sm',
|
||||
'bg-blue-100/80 text-blue-700 dark:bg-blue-500/20 dark:text-blue-300' =>
|
||||
data_get($deployment, 'status') === 'in_progress',
|
||||
'bg-purple-100/80 text-purple-700 dark:bg-purple-500/20 dark:text-purple-300' =>
|
||||
data_get($deployment, 'status') === 'queued',
|
||||
'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-200' =>
|
||||
data_get($deployment, 'status') === 'failed',
|
||||
'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-200' =>
|
||||
data_get($deployment, 'status') === 'finished',
|
||||
'bg-gray-100 text-gray-700 dark:bg-gray-600/30 dark:text-gray-300' =>
|
||||
data_get($deployment, 'status') === 'cancelled-by-user',
|
||||
'px-3 py-1 rounded-md text-xs font-medium shadow-xs',
|
||||
'bg-blue-100/80 text-blue-700 dark:bg-blue-500/20 dark:text-blue-300' => data_get($deployment, 'status') === 'in_progress',
|
||||
'bg-purple-100/80 text-purple-700 dark:bg-purple-500/20 dark:text-purple-300' => data_get($deployment, 'status') === 'queued',
|
||||
'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-200' => data_get($deployment, 'status') === 'failed',
|
||||
'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-200' => data_get($deployment, 'status') === 'finished',
|
||||
'bg-gray-100 text-gray-700 dark:bg-gray-600/30 dark:text-gray-300' => data_get($deployment, 'status') === 'cancelled-by-user',
|
||||
])>
|
||||
@php
|
||||
$statusText = match (data_get($deployment, 'status')) {
|
||||
|
||||
@@ -57,7 +57,7 @@
|
||||
<div id="screen" :class="fullscreen ? 'fullscreen' : 'relative'">
|
||||
<div @if ($isKeepAliveOn) wire:poll.2000ms="polling" @endif
|
||||
class="flex flex-col-reverse w-full p-2 px-4 mt-4 overflow-y-auto bg-white dark:text-white dark:bg-coolgray-100 scrollbar dark:border-coolgray-300"
|
||||
:class="fullscreen ? '' : 'min-h-14 max-h-[40rem] border border-dotted rounded'">
|
||||
:class="fullscreen ? '' : 'min-h-14 max-h-[40rem] border border-dotted rounded-sm'">
|
||||
<div :class="fullscreen ? 'fixed' : 'absolute'" class="top-2 right-5">
|
||||
<div class="flex justify-end gap-4 fixed -translate-x-full">
|
||||
<button title="Toggle timestamps" x-on:click="showTimestamps = !showTimestamps">
|
||||
|
||||
@@ -83,11 +83,11 @@
|
||||
@if ($application->build_pack !== 'dockercompose')
|
||||
<div class="flex items-end gap-2">
|
||||
@if ($application->settings->is_container_label_readonly_enabled == false)
|
||||
<x-forms.input placeholder="https://coolify.io" wire:model.blur="application.fqdn"
|
||||
<x-forms.input placeholder="https://coolify.io" wire:model.blur-sm="application.fqdn"
|
||||
label="Domains" readonly
|
||||
helper="Readonly labels are disabled. You can set the domains in the labels section." />
|
||||
@else
|
||||
<x-forms.input placeholder="https://coolify.io" wire:model.blur="application.fqdn"
|
||||
<x-forms.input placeholder="https://coolify.io" wire:model.blur-sm="application.fqdn"
|
||||
label="Domains"
|
||||
helper="You can specify one domain with path or more with comma. You can specify a port to bind the domain to.<br><br><span class='text-helper'>Example</span><br>- http://app.coolify.io,https://cloud.coolify.io/dashboard<br>- http://app.coolify.io/api/v3<br>- http://app.coolify.io:3000 -> app.coolify.io will point to port 3000 inside the container. " />
|
||||
<x-forms.button wire:click="getWildcardDomain">Generate Domain
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<nav wire:poll.10000ms="check_status">
|
||||
<x-resources.breadcrumbs :resource="$application" :parameters="$parameters" :title="$lastDeploymentInfo" :lastDeploymentLink="$lastDeploymentLink" />
|
||||
<div class="navbar-main">
|
||||
<nav class="flex flex-shrink-0 gap-6 items-center whitespace-nowrap scrollbar min-h-10">
|
||||
<nav class="flex shrink-0 gap-6 items-center whitespace-nowrap scrollbar min-h-10">
|
||||
<a class="{{ request()->routeIs('project.application.configuration') ? 'dark:text-white' : '' }}"
|
||||
href="{{ route('project.application.configuration', $parameters) }}">
|
||||
Configuration
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<div class="flex flex-wrap">
|
||||
@forelse ($images as $image)
|
||||
<div class="w-2/4 p-2">
|
||||
<div class="bg-white border rounded dark:border-black dark:bg-coolgray-100">
|
||||
<div class="bg-white border rounded-sm dark:border-black dark:bg-coolgray-100">
|
||||
<div class="p-2">
|
||||
<div class="">
|
||||
@if (data_get($image, 'is_current'))
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
@endif
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span @class([
|
||||
'px-3 py-1 rounded-md text-xs font-medium tracking-wide shadow-sm',
|
||||
'px-3 py-1 rounded-md text-xs font-medium tracking-wide shadow-xs',
|
||||
'bg-blue-100/80 text-blue-700 dark:bg-blue-500/20 dark:text-blue-300 dark:shadow-blue-900/5' => data_get($execution, 'status') === 'running',
|
||||
'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-200 dark:shadow-red-900/5' => data_get($execution, 'status') === 'failed',
|
||||
'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-200 dark:shadow-green-900/5' => data_get($execution, 'status') === 'success',
|
||||
@@ -59,7 +59,7 @@
|
||||
Backup Availability:
|
||||
</div>
|
||||
<span @class([
|
||||
'px-2 py-1 rounded text-xs font-medium',
|
||||
'px-2 py-1 rounded-sm text-xs font-medium',
|
||||
'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-200' => !data_get($execution, 'local_storage_deleted', false),
|
||||
'bg-gray-100 text-gray-600 dark:bg-gray-800/50 dark:text-gray-400' => data_get($execution, 'local_storage_deleted', false),
|
||||
])>
|
||||
@@ -78,7 +78,7 @@
|
||||
</span>
|
||||
@if($backup->save_s3)
|
||||
<span @class([
|
||||
'px-2 py-1 rounded text-xs font-medium',
|
||||
'px-2 py-1 rounded-sm text-xs font-medium',
|
||||
'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-200' => !data_get($execution, 's3_storage_deleted', false),
|
||||
'bg-gray-100 text-gray-600 dark:bg-gray-800/50 dark:text-gray-400' => data_get($execution, 's3_storage_deleted', false),
|
||||
])>
|
||||
@@ -98,7 +98,7 @@
|
||||
@endif
|
||||
</div>
|
||||
@if (data_get($execution, 'message'))
|
||||
<div class="mt-2 p-2 bg-gray-100 dark:bg-coolgray-200 rounded">
|
||||
<div class="mt-2 p-2 bg-gray-100 dark:bg-coolgray-200 rounded-sm">
|
||||
<pre class="whitespace-pre-wrap text-sm">{{ data_get($execution, 'message') }}</pre>
|
||||
</div>
|
||||
@endif
|
||||
@@ -116,7 +116,7 @@
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<div class="p-4 bg-gray-100 dark:bg-coolgray-100 rounded">No executions found.</div>
|
||||
<div class="p-4 bg-gray-100 dark:bg-coolgray-100 rounded-sm">No executions found.</div>
|
||||
@endforelse
|
||||
</div>
|
||||
<script>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<form class="flex flex-col w-full gap-2 rounded" wire:submit='submit'>
|
||||
<form class="flex flex-col w-full gap-2 rounded-sm" wire:submit='submit'>
|
||||
<x-forms.input placeholder="0 0 * * * or daily" id="frequency"
|
||||
helper="You can use every_minute, hourly, daily, weekly, monthly, yearly or a cron expression." label="Frequency"
|
||||
required />
|
||||
|
||||
@@ -8,8 +8,8 @@
|
||||
</x-slide-over>
|
||||
<div class="navbar-main">
|
||||
<nav
|
||||
class="flex overflow-x-scroll flex-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' : '' }}"
|
||||
class="flex overflow-x-scroll shrink-0 gap-6 items-center whitespace-nowrap sm:overflow-x-hidden scrollbar min-h-10">
|
||||
<a wire:navigate class="{{ request()->routeIs('project.database.configuration') ? 'dark:text-white' : '' }}"
|
||||
href="{{ route('project.database.configuration', $parameters) }}">
|
||||
<button>Configuration</button>
|
||||
</a>
|
||||
|
||||
@@ -40,7 +40,7 @@
|
||||
@if ($unsupported)
|
||||
<div>Database restore is not supported.</div>
|
||||
@else
|
||||
<div class="pt-2 rounded alert-error">
|
||||
<div class="pt-2 rounded-sm alert-error">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 stroke-current shrink-0" fill="none"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<div>
|
||||
<dialog id="newInitScript" class="modal">
|
||||
<form method="dialog" class="flex flex-col gap-2 rounded modal-box" wire:submit='save_new_init_script'>
|
||||
<form method="dialog" class="flex flex-col gap-2 rounded-sm modal-box" wire:submit='save_new_init_script'>
|
||||
<h3 class="text-lg font-bold">Add Init Script</h3>
|
||||
<x-forms.input placeholder="create_test_db.sql" id="new_filename" label="Filename" required />
|
||||
<x-forms.textarea placeholder="CREATE DATABASE test;" id="new_content" label="Content" required />
|
||||
@@ -181,7 +181,7 @@
|
||||
<div class="flex items-center gap-2 pb-2">
|
||||
<h3>Initialization scripts</h3>
|
||||
<x-modal-input buttonTitle="+ Add" title="New Init Script">
|
||||
<form class="flex flex-col w-full gap-2 rounded" wire:submit='save_new_init_script'>
|
||||
<form class="flex flex-col w-full gap-2 rounded-sm" wire:submit='save_new_init_script'>
|
||||
<x-forms.input placeholder="create_test_db.sql" id="new_filename" label="Filename"
|
||||
required />
|
||||
<x-forms.textarea rows="20" placeholder="CREATE DATABASE test;" id="new_content"
|
||||
|
||||
@@ -62,7 +62,7 @@
|
||||
@endif
|
||||
</div>
|
||||
@if ($build_pack === 'dockercompose')
|
||||
<x-forms.input placeholder="/" wire:model.blur="base_directory" label="Base Directory"
|
||||
<x-forms.input placeholder="/" wire:model.blur-sm="base_directory" label="Base Directory"
|
||||
helper="Directory to use as root. Useful for monorepos." />
|
||||
<x-forms.input placeholder="/docker-compose.yaml" id="docker_compose_location"
|
||||
label="Docker Compose Location"
|
||||
|
||||
@@ -95,7 +95,7 @@
|
||||
@endif
|
||||
</div>
|
||||
@if ($build_pack === 'dockercompose')
|
||||
<x-forms.input placeholder="/" wire:model.blur="base_directory"
|
||||
<x-forms.input placeholder="/" wire:model.blur-sm="base_directory"
|
||||
label="Base Directory"
|
||||
helper="Directory to use as root. Useful for monorepos." />
|
||||
<x-forms.input placeholder="/docker-compose.yaml" id="docker_compose_location"
|
||||
|
||||
@@ -45,9 +45,9 @@
|
||||
@endif
|
||||
</div>
|
||||
@if ($build_pack === 'dockercompose')
|
||||
<x-forms.input placeholder="/" wire:model.blur="base_directory" label="Base Directory"
|
||||
<x-forms.input placeholder="/" wire:model.blur-sm="base_directory" label="Base Directory"
|
||||
helper="Directory to use as root. Useful for monorepos." />
|
||||
<x-forms.input placeholder="/docker-compose.yaml" wire:model.blur="docker_compose_location"
|
||||
<x-forms.input placeholder="/docker-compose.yaml" wire:model.blur-sm="docker_compose_location"
|
||||
label="Docker Compose Location"
|
||||
helper="It is calculated together with the Base Directory:<br><span class='dark:text-warning'>{{ Str::start($base_directory . $docker_compose_location, '/') }}</span>" />
|
||||
Compose file location in your repository:<span
|
||||
|
||||
@@ -110,7 +110,7 @@
|
||||
<x-slot:documentation>
|
||||
<template x-if="service.documentation">
|
||||
<div class="flex items-center px-2" title="Read the documentation.">
|
||||
<a class="p-2 rounded hover:bg-gray-100 dark:hover:bg-coolgray-200 hover:no-underline group-hover:dark:text-white text-neutral-600"
|
||||
<a class="p-2 rounded-sm hover:bg-gray-100 dark:hover:bg-coolgray-200 hover:no-underline dark:group-hover:text-white text-neutral-600"
|
||||
onclick="event.stopPropagation()" :href="service.documentation"
|
||||
target="_blank">
|
||||
Docs
|
||||
@@ -253,7 +253,7 @@
|
||||
@foreach ($swarmDockers as $swarmDocker)
|
||||
<div class="w-full box group" wire:click="setDestination('{{ $swarmDocker->uuid }}')">
|
||||
<div class="flex flex-col mx-6">
|
||||
<div class="font-bold group-hover:dark:text-white">
|
||||
<div class="font-bold dark:group-hover:text-white">
|
||||
Swarm Docker <span class="text-xs">({{ $swarmDocker->name }})</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -290,7 +290,7 @@
|
||||
<div class="flex-1"></div>
|
||||
|
||||
<div class="flex items-center px-2" title="Read the documentation.">
|
||||
<a class="p-2 hover:underline group-hover:dark:text-white dark:text-white text-neutral-6000"
|
||||
<a class="p-2 hover:underline dark:group-hover:text-white dark:text-white text-neutral-6000"
|
||||
onclick="event.stopPropagation()" href="https://hub.docker.com/_/postgres/" target="_blank">
|
||||
Documentation
|
||||
</a>
|
||||
@@ -306,7 +306,7 @@
|
||||
</div>
|
||||
<div class="flex-1"></div>
|
||||
<div class="flex items-center px-2" title="Read the documentation.">
|
||||
<a class="p-2 hover:underline group-hover:dark:text-white dark:text-white text-neutral-600"
|
||||
<a class="p-2 hover:underline dark:group-hover:text-white dark:text-white text-neutral-600"
|
||||
onclick="event.stopPropagation()" href="https://github.com/supabase/postgres"
|
||||
target="_blank">
|
||||
Documentation
|
||||
@@ -323,7 +323,7 @@
|
||||
</div>
|
||||
<div class="flex-1"></div>
|
||||
<div class="flex items-center px-2" title="Read the documentation.">
|
||||
<a class="p-2 hover:underline group-hover:dark:text-white dark:text-white text-neutral-600"
|
||||
<a class="p-2 hover:underline dark:group-hover:text-white dark:text-white text-neutral-600"
|
||||
onclick="event.stopPropagation()" href="https://github.com/postgis/docker-postgis"
|
||||
target="_blank">
|
||||
Documentation
|
||||
@@ -341,7 +341,7 @@
|
||||
<div class="flex-1"></div>
|
||||
|
||||
<div class="flex items-center px-2" title="Read the documentation.">
|
||||
<a class="p-2 hover:underline group-hover:dark:text-white dark:text-white text-neutral-600"
|
||||
<a class="p-2 hover:underline dark:group-hover:text-white dark:text-white text-neutral-600"
|
||||
onclick="event.stopPropagation()" href="https://github.com/pgvector/pgvector"
|
||||
target="_blank">
|
||||
Documentation
|
||||
|
||||
@@ -88,7 +88,7 @@
|
||||
</div>
|
||||
</a>
|
||||
<div
|
||||
class="flex flex-wrap gap-1 pt-1 group-hover:dark:text-white group-hover:text-black group min-h-6">
|
||||
class="flex flex-wrap gap-1 pt-1 dark:group-hover:text-white group-hover:text-black group min-h-6">
|
||||
<template x-for="tag in item.tags">
|
||||
<a :href="`/tags/${tag.name}`" class="tag" x-text="tag.name">
|
||||
</a>
|
||||
@@ -134,7 +134,7 @@
|
||||
</div>
|
||||
</a>
|
||||
<div
|
||||
class="flex flex-wrap gap-1 pt-1 group-hover:dark:text-white group-hover:text-black group min-h-6">
|
||||
class="flex flex-wrap gap-1 pt-1 dark:group-hover:text-white group-hover:text-black group min-h-6">
|
||||
<template x-for="tag in item.tags">
|
||||
<a :href="`/tags/${tag.name}`" class="tag" x-text="tag.name">
|
||||
</a>
|
||||
@@ -180,7 +180,7 @@
|
||||
</div>
|
||||
</a>
|
||||
<div
|
||||
class="flex flex-wrap gap-1 pt-1 group-hover:dark:text-white group-hover:text-black group min-h-6">
|
||||
class="flex flex-wrap gap-1 pt-1 dark:group-hover:text-white group-hover:text-black group min-h-6">
|
||||
<template x-for="tag in item.tags">
|
||||
<a :href="`/tags/${tag.name}`" class="tag" x-text="tag.name">
|
||||
</a>
|
||||
|
||||
@@ -9,8 +9,8 @@
|
||||
<h1>{{ $title }}</h1>
|
||||
<x-resources.breadcrumbs :resource="$service" :parameters="$parameters" />
|
||||
<div class="navbar-main" x-data">
|
||||
<nav class="flex flex-shrink-0 gap-6 items-center whitespace-nowrap scrollbar min-h-10">
|
||||
<a class="{{ request()->routeIs('project.service.configuration') ? 'dark:text-white' : '' }}"
|
||||
<nav class="flex shrink-0 gap-6 items-center whitespace-nowrap scrollbar min-h-10">
|
||||
<a wire:navigate class="{{ request()->routeIs('project.service.configuration') ? 'dark:text-white' : '' }}"
|
||||
href="{{ route('project.service.configuration', $parameters) }}">
|
||||
<button>Configuration</button>
|
||||
</a>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<form class="flex flex-col w-full gap-2 rounded" wire:submit='submit'>
|
||||
<form class="flex flex-col w-full gap-2 rounded-sm" wire:submit='submit'>
|
||||
<x-forms.input placeholder="NODE_ENV" id="key" label="Name" required />
|
||||
<x-forms.textarea x-show="$wire.is_multiline === true" x-cloak id="value" label="Value" required />
|
||||
<x-forms.input x-show="$wire.is_multiline === false" x-cloak placeholder="production" id="value"
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
|
||||
@if(!$hasShell)
|
||||
<div class="flex items-center justify-center w-full py-4 mx-auto">
|
||||
<div class="p-4 w-full rounded border dark:bg-coolgray-100 dark:border-coolgray-300">
|
||||
<div class="p-4 w-full rounded-sm border dark:bg-coolgray-100 dark:border-coolgray-300">
|
||||
<div class="flex flex-col items-center justify-center space-y-4">
|
||||
<svg class="w-12 h-12 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
|
||||
|
||||
@@ -57,7 +57,7 @@
|
||||
</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"
|
||||
:class="fullscreen ? '' : 'max-h-96 border border-solid rounded'">
|
||||
: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' : ''"
|
||||
style="transform: translateX(-100%)">
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<form class="flex flex-col w-full gap-2 rounded" wire:submit='submit'>
|
||||
<form class="flex flex-col w-full gap-2 rounded-sm" wire:submit='submit'>
|
||||
<x-forms.input placeholder="Run cron" id="name" label="Name" />
|
||||
<x-forms.input placeholder="php artisan schedule:run" id="command" label="Command" />
|
||||
<x-forms.input placeholder="0 0 * * * or daily"
|
||||
|
||||
@@ -27,7 +27,7 @@
|
||||
@endif
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span @class([
|
||||
'px-3 py-1 rounded-md text-xs font-medium tracking-wide shadow-sm',
|
||||
'px-3 py-1 rounded-md text-xs font-medium tracking-wide shadow-xs',
|
||||
'bg-blue-100/80 text-blue-700 dark:bg-blue-500/20 dark:text-blue-300 dark:shadow-blue-900/5' => data_get($execution, 'status') === 'running',
|
||||
'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-200 dark:shadow-red-900/5' => data_get($execution, 'status') === 'failed',
|
||||
'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-200 dark:shadow-green-900/5' => data_get($execution, 'status') === 'success',
|
||||
@@ -58,7 +58,7 @@
|
||||
</x-forms.button>
|
||||
@endif
|
||||
@if (data_get($execution, 'id') == $selectedKey)
|
||||
<div class="p-4 mb-2 bg-gray-100 dark:bg-coolgray-200 rounded">
|
||||
<div class="p-4 mb-2 bg-gray-100 dark:bg-coolgray-200 rounded-sm">
|
||||
@if (data_get($execution, 'status') === 'running')
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span>Task is running...</span>
|
||||
@@ -87,6 +87,6 @@
|
||||
</div>
|
||||
@endif
|
||||
@empty
|
||||
<div class="p-4 bg-gray-100 dark:bg-coolgray-100 rounded">No executions found.</div>
|
||||
<div class="p-4 bg-gray-100 dark:bg-coolgray-100 rounded-sm">No executions found.</div>
|
||||
@endforelse
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<div class="flex flex-col w-full gap-2 max-h-[80vh] overflow-y-auto scrollbar">
|
||||
<form class="flex flex-col w-full gap-2 rounded " wire:submit='submitPersistentVolume'>
|
||||
<form class="flex flex-col w-full gap-2 rounded-sm " wire:submit='submitPersistentVolume'>
|
||||
<div class="flex flex-col">
|
||||
<h3>Volume Mount</h3>
|
||||
<div>Docker Volumes mounted to the container.</div>
|
||||
@@ -26,7 +26,7 @@
|
||||
</div>
|
||||
|
||||
</form>
|
||||
<form class="flex flex-col w-full gap-2 rounded py-4" wire:submit='submitFileStorage'>
|
||||
<form class="flex flex-col w-full gap-2 rounded-sm py-4" wire:submit='submitFileStorage'>
|
||||
<div class="flex flex-col">
|
||||
<h3>File Mount</h3>
|
||||
<div>Actual file mounted from the host system to the container.</div>
|
||||
@@ -40,7 +40,7 @@
|
||||
</x-forms.button>
|
||||
</div>
|
||||
</form>
|
||||
<form class="flex flex-col w-full gap-2 rounded" wire:submit='submitFileStorageDirectory'>
|
||||
<form class="flex flex-col w-full gap-2 rounded-sm" wire:submit='submitFileStorageDirectory'>
|
||||
<div class="flex flex-col">
|
||||
<h3>Directory Mount</h3>
|
||||
<div>Directory mounted from the host system to the container.</div>
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
{{ $tag->name }}
|
||||
<svg wire:click="deleteTag('{{ $tag->id }}')" xmlns="http://www.w3.org/2000/svg" fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
class="inline-block w-3 h-3 rounded cursor-pointer stroke-current hover:bg-red-500">
|
||||
class="inline-block w-3 h-3 rounded-sm cursor-pointer stroke-current hover:bg-red-500">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12">
|
||||
</path>
|
||||
</svg>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<div id="terminal-container" x-data="terminalData()">
|
||||
@if(!$hasShell)
|
||||
<div class="flex pt-4 items-center justify-center w-full py-4 mx-auto">
|
||||
<div class="p-4 w-full rounded border dark:bg-coolgray-100 dark:border-coolgray-300">
|
||||
<div class="p-4 w-full rounded-sm border dark:bg-coolgray-100 dark:border-coolgray-300">
|
||||
<div class="flex flex-col items-center justify-center space-y-4">
|
||||
<svg class="w-12 h-12 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<div class="flex items-center gap-2">
|
||||
<h1>Environments</h1>
|
||||
<x-modal-input buttonTitle="+ Add" title="New Environment">
|
||||
<form class="flex flex-col w-full gap-2 rounded" wire:submit='submit'>
|
||||
<form class="flex flex-col w-full gap-2 rounded-sm" wire:submit='submit'>
|
||||
<x-forms.input placeholder="production" id="name" label="Name" required />
|
||||
<x-forms.button type="submit">
|
||||
Save
|
||||
|
||||
@@ -19,9 +19,8 @@
|
||||
</div>
|
||||
<div class="box-description">
|
||||
{{ $key->description }}
|
||||
@if (!$key->isInUse())
|
||||
<span
|
||||
class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-yellow-400 text-black">Unused</span>
|
||||
@if (!$key->isInUse())
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded-sm text-xs font-medium bg-yellow-400 text-black">Unused</span>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
|
||||
@@ -104,7 +104,7 @@
|
||||
<x-forms.button
|
||||
wire:click="toggleCertificate"
|
||||
type="button"
|
||||
class="!py-1 !px-2 text-sm">
|
||||
class="py-1! px-2! text-sm">
|
||||
{{ $showCertificate ? 'Hide' : 'Show' }}
|
||||
</x-forms.button>
|
||||
</div>
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
</div>
|
||||
@elseif (!$server->isFunctional())
|
||||
<div
|
||||
class="p-4 mb-4 w-full text-sm text-yellow-800 bg-yellow-100 rounded dark:bg-yellow-900 dark:text-yellow-300">
|
||||
class="p-4 mb-4 w-full text-sm text-yellow-800 bg-yellow-100 rounded-sm dark:bg-yellow-900 dark:text-yellow-300">
|
||||
To <span class="font-semibold">automatically</span> configure Cloudflare Tunnels, please
|
||||
validate your server first.</span> Then you will need a Cloudflare token and an SSH
|
||||
domain configured.
|
||||
|
||||
@@ -27,7 +27,7 @@
|
||||
@endif
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span @class([
|
||||
'px-3 py-1 rounded-md text-xs font-medium tracking-wide shadow-sm',
|
||||
'px-3 py-1 rounded-md text-xs font-medium tracking-wide shadow-xs',
|
||||
'bg-blue-100/80 text-blue-700 dark:bg-blue-500/20 dark:text-blue-300 dark:shadow-blue-900/5' => data_get($execution, 'status') === 'running',
|
||||
'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-200 dark:shadow-red-900/5' => data_get($execution, 'status') === 'failed',
|
||||
'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-200 dark:shadow-green-900/5' => data_get($execution, 'status') === 'success',
|
||||
@@ -61,7 +61,7 @@
|
||||
@endif
|
||||
@if (data_get($execution, 'id') == $selectedKey)
|
||||
<div class="flex flex-col">
|
||||
<div class="p-4 mb-2 bg-gray-100 dark:bg-coolgray-200 rounded">
|
||||
<div class="p-4 mb-2 bg-gray-100 dark:bg-coolgray-200 rounded-sm">
|
||||
@if (data_get($execution, 'status') === 'running')
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span>Execution is running...</span>
|
||||
@@ -95,9 +95,9 @@
|
||||
<div class="mt-6 space-y-6">
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Cleanup Log:</h3>
|
||||
@foreach(json_decode(data_get($execution, 'cleanup_log'), true) as $result)
|
||||
<div class="overflow-hidden rounded-lg border border-gray-200 dark:border-coolgray-400 bg-white dark:bg-coolgray-100 shadow-sm">
|
||||
<div class="overflow-hidden rounded-lg border border-gray-200 dark:border-coolgray-400 bg-white dark:bg-coolgray-100 shadow-xs">
|
||||
<div class="flex items-center gap-2 px-4 py-3 bg-gray-50 dark:bg-coolgray-200 border-b border-gray-200 dark:border-coolgray-400">
|
||||
<svg class="h-5 w-5 flex-shrink-0 text-gray-500 dark:text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||||
<svg class="h-5 w-5 shrink-0 text-gray-500 dark:text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
<code class="flex-1 text-sm font-mono text-gray-700 dark:text-gray-300">{{ data_get($result, 'command') }}</code>
|
||||
@@ -123,6 +123,6 @@
|
||||
</div>
|
||||
@endif
|
||||
@empty
|
||||
<div class="p-4 bg-gray-100 dark:bg-coolgray-100 rounded">No executions found.</div>
|
||||
<div class="p-4 bg-gray-100 dark:bg-coolgray-100 rounded-sm">No executions found.</div>
|
||||
@endforelse
|
||||
</div>
|
||||
|
||||
@@ -146,7 +146,7 @@
|
||||
confirmationLabel="Please type the confirmation text to disable two step confirmation."
|
||||
shortConfirmationLabel="Confirmation text" step3ButtonText="Disable Two Step Confirmation" />
|
||||
</div>
|
||||
<div class="w-full px-4 py-2 mb-4 text-white rounded-sm border-l-4 border-red-500 bg-error">
|
||||
<div class="w-full px-4 py-2 mb-4 text-white rounded-xs border-l-4 border-red-500 bg-error">
|
||||
<p class="font-bold">Warning!</p>
|
||||
<p>Disabling two step confirmation reduces security (as anyone can easily delete anything) and
|
||||
increases
|
||||
|
||||
@@ -32,7 +32,7 @@
|
||||
</div>
|
||||
<div class="subtitle">Your Private GitHub App for private repositories.</div>
|
||||
@if (!data_get($github_app, 'installation_id'))
|
||||
<div class="mb-10 rounded alert-error">
|
||||
<div class="mb-10 rounded-sm alert-error">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 stroke-current shrink-0" fill="none"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
@@ -197,7 +197,7 @@
|
||||
</x-forms.button>
|
||||
</div>
|
||||
<h3>Automated Installation</h3>
|
||||
<div class=" pb-5 rounded alert-error">
|
||||
<div class=" pb-5 rounded-sm alert-error">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 stroke-current shrink-0" fill="none"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
}" class="relative w-full py-2 mx-auto overflow-hidden text-sm font-normal rounded-md">
|
||||
<div x-data="{ id: $id('accordion') }" class="cursor-pointer">
|
||||
<button @click="setActiveAccordion(id)"
|
||||
class="flex items-center justify-between w-full px-1 py-2 text-left select-none hover:dark:text-white hover:bg-white/5"
|
||||
class="flex items-center justify-between w-full px-1 py-2 text-left select-none dark:hover:text-white hover:bg-white/5"
|
||||
type="button">
|
||||
<h4>Self-hosted / Enterprise GitHub</h4>
|
||||
<svg class="w-4 h-4 duration-200 ease-out" :class="{ 'rotate-180': activeAccordion == id }"
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
<x-forms.input required label="Name" id="name" />
|
||||
<x-forms.input label="Description" id="description" />
|
||||
</div>
|
||||
<x-forms.input required type="url" label="Endpoint" wire:model.blur="endpoint" />
|
||||
<x-forms.input required type="url" label="Endpoint" wire:model.blur-sm="endpoint" />
|
||||
<div class="flex gap-2">
|
||||
<x-forms.input required label="Bucket" id="bucket" />
|
||||
<x-forms.input required helper="Region only required for AWS. Leave it as-is for other providers."
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
</x-slot>
|
||||
@if (auth()->user()->isAdminFromSession())
|
||||
@if (request()->query->get('cancelled'))
|
||||
<div class="mb-6 rounded alert-error">
|
||||
<div class="mb-6 rounded-sm alert-error">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 stroke-current shrink-0" fill="none"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
@@ -23,7 +23,7 @@
|
||||
</div>
|
||||
@else
|
||||
@if ($isUnpaid)
|
||||
<div class="mb-6 rounded alert-error">
|
||||
<div class="mb-6 rounded-sm alert-error">
|
||||
<span>Your last payment was failed for Coolify Cloud.</span>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
@@ -2,15 +2,15 @@
|
||||
<div class="px-6 mx-auto lg:px-8">
|
||||
<div class="flex justify-center">
|
||||
<fieldset
|
||||
class="grid grid-cols-2 p-1 text-xs font-semibold leading-5 text-center rounded dark:text-white gap-x-1 dark:bg-white/5 bg-black/5">
|
||||
class="grid grid-cols-2 p-1 text-xs font-semibold leading-5 text-center rounded-sm dark:text-white gap-x-1 dark:bg-white/5 bg-black/5">
|
||||
<legend class="sr-only">Payment frequency</legend>
|
||||
<label class="cursor-pointer rounded px-2.5 py-1"
|
||||
<label class="cursor-pointer rounded-sm px-2.5 py-1"
|
||||
:class="selected === 'monthly' ? 'dark:bg-coollabs-100 bg-warning dark:text-white' : ''">
|
||||
<input type="radio" x-on:click="selected = 'monthly'" name="frequency" value="monthly"
|
||||
class="sr-only">
|
||||
<span>Monthly</span>
|
||||
</label>
|
||||
<label class="cursor-pointer rounded px-2.5 py-1"
|
||||
<label class="cursor-pointer rounded-sm px-2.5 py-1"
|
||||
:class="selected === 'yearly' ? 'dark:bg-coollabs-100 bg-warning dark:text-white' : ''">
|
||||
<input type="radio" x-on:click="selected = 'yearly'" name="frequency" value="annually"
|
||||
class="sr-only">
|
||||
|
||||
@@ -27,20 +27,20 @@
|
||||
</button>
|
||||
<template x-teleport="body">
|
||||
<div x-show="modalOpen"
|
||||
class="fixed top-0 lg:pt-10 left-0 z-[99] flex items-start justify-center w-screen h-screen"
|
||||
class="fixed top-0 lg:pt-10 left-0 z-99 flex items-start justify-center w-screen h-screen"
|
||||
x-cloak>
|
||||
<div x-show="modalOpen" x-transition:enter="ease-out duration-100"
|
||||
x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
|
||||
x-transition:leave="ease-in duration-100" x-transition:leave-start="opacity-100"
|
||||
x-transition:leave-end="opacity-0"
|
||||
class="absolute inset-0 w-full h-full bg-black bg-opacity-20 backdrop-blur-sm"></div>
|
||||
class="absolute inset-0 w-full h-full bg-black/20 backdrop-blur-xs"></div>
|
||||
<div x-show="modalOpen" x-trap.inert.noscroll="modalOpen" x-transition:enter="ease-out duration-100"
|
||||
x-transition:enter-start="opacity-0 -translate-y-2 sm:scale-95"
|
||||
x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
|
||||
x-transition:leave="ease-in duration-100"
|
||||
x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
|
||||
x-transition:leave-end="opacity-0 -translate-y-2 sm:scale-95"
|
||||
class="relative w-full py-6 border rounded min-w-full lg:min-w-[36rem] max-w-fit bg-neutral-100 border-neutral-400 dark:bg-base px-7 dark:border-coolgray-300">
|
||||
class="relative w-full py-6 border rounded-sm min-w-full lg:min-w-[36rem] max-w-fit bg-neutral-100 border-neutral-400 dark:bg-base px-7 dark:border-coolgray-300">
|
||||
<div class="flex items-center justify-between pb-3">
|
||||
<h3 class="text-lg font-semibold">Upgrade confirmation</h3>
|
||||
<button x-show="!showProgress" @click="modalOpen=false"
|
||||
@@ -54,7 +54,7 @@
|
||||
<div class="relative w-auto pb-8">
|
||||
<p>Are you sure you would like to upgrade your instance to {{ $latestVersion }}?</p>
|
||||
<br />
|
||||
|
||||
|
||||
<div class="p-4 mb-4 text-yellow-800 border border-yellow-300 rounded-lg bg-yellow-50 dark:bg-yellow-900/30 dark:text-yellow-300 dark:border-yellow-800">
|
||||
<p class="font-medium">Warning: Any deployments running during the update process will fail. Please ensure no deployments are in progress on any server before continuing.</p>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user