Merge pull request #1888 from coollabsio/next

v4.0.0-beta.244

.tinkerwell/snippets/DeleteUser.php

@@ -1,22 +0,0 @@
-<?php
-
-use App\Models\User;
-
-$email = 'test@example.com';
-$user = User::whereEmail($email)->first();
-$teams = $user->teams;
-foreach ($teams as $team) {
-    $servers = $team->servers;
-    if ($servers->count() > 0) {
-        foreach ($servers as $server) {
-            dump($server);
-            $server->delete();
-        }
-    }
-    dump($team);
-    $team->delete();
-}
-if ($user) {
-    dump($user);
-    $user->delete();
-}

.tinkerwell/snippets/SendEmail.php

@@ -1,28 +0,0 @@
-<?php
-/**
- * @label Send Email
- * @description Send email to all users
- */
-
-use App\Models\User;
-use Illuminate\Support\Facades\Mail;
-
-set_transanctional_email_settings();
-
-$users = User::whereEmail('test@example.com');
-foreach ($users as $user) {
-  Mail::send([], [], function ($message) use ($user) {
-    $message
-      ->to($user->email)
-      ->subject("Testing")
-      ->text(
-        <<<EOF
-Hello,
-
-Welcome to Coolify Cloud.
-Here is your user id: $user->id
-
-EOF
-      );
-  });
-}

app/Livewire/Boarding/Index.php

@@ -15,14 +15,11 @@ class Index extends Component
 {
     protected $listeners = ['serverInstalled' => 'validateServer'];
 
-    #[Url()]
+    public string $currentState = 'welcome';
-    public string $state = 'welcome';
 
-    #[Url()]
     public ?string $selectedServerType = null;
     public ?Collection $privateKeys = null;
 
-    #[Url()]
     public ?int $selectedExistingPrivateKey = null;
     public ?string $privateKeyType = null;
     public ?string $privateKey = null;
@@ -33,7 +30,6 @@ class Index extends Component
 
     public ?Collection $servers = null;
 
-    #[Url()]
     public ?int $selectedExistingServer = null;
     public ?string $remoteServerName = null;
     public ?string $remoteServerDescription = null;
@@ -46,7 +42,6 @@ class Index extends Component
 
     public Collection $projects;
 
-    #[Url()]
     public ?int $selectedProject = null;
     public ?Project $createdProject = null;
 
@@ -71,25 +66,25 @@ uZx9iFkCELtxrh31QJ68AAAAEXNhaWxANzZmZjY2ZDJlMmRkAQIDBA==
             $this->remoteServerDescription = 'Created by Coolify';
             $this->remoteServerHost = 'coolify-testing-host';
         }
-        if ($this->state === 'create-project') {
+        // if ($this->currentState === 'create-project') {
-            $this->getProjects();
+        //     $this->getProjects();
-        }
+        // }
-        if ($this->state === 'create-resource') {
+        // if ($this->currentState === 'create-resource') {
-            $this->selectExistingServer();
+        //     $this->selectExistingServer();
-            $this->selectExistingProject();
+        //     $this->selectExistingProject();
-        }
+        // }
-        if ($this->state === 'private-key') {
+        // if ($this->currentState === 'private-key') {
-            $this->setServerType('remote');
+        //     $this->setServerType('remote');
-        }
+        // }
-        if ($this->state === 'create-server') {
+        // if ($this->currentState === 'create-server') {
-            $this->selectExistingPrivateKey();
+        //     $this->selectExistingPrivateKey();
-        }
+        // }
-        if ($this->state === 'validate-server') {
+        // if ($this->currentState === 'validate-server') {
-            $this->selectExistingServer();
+        //     $this->selectExistingServer();
-        }
+        // }
-        if ($this->state === 'select-existing-server') {
+        // if ($this->currentState === 'select-existing-server') {
-            $this->selectExistingServer();
+        //     $this->selectExistingServer();
-        }
+        // }
 
     }
     public function explanation()
@@ -97,7 +92,7 @@ uZx9iFkCELtxrh31QJ68AAAAEXNhaWxANzZmZjY2ZDJlMmRkAQIDBA==
         if (isCloud()) {
             return $this->setServerType('remote');
         }
-        $this->state = 'select-server-type';
+        $this->currentState = 'select-server-type';
     }
 
     public function restartBoarding()
@@ -136,10 +131,10 @@ uZx9iFkCELtxrh31QJ68AAAAEXNhaWxANzZmZjY2ZDJlMmRkAQIDBA==
             $this->servers = Server::ownedByCurrentTeam(['name'])->where('id', '!=', 0)->get();
             if ($this->servers->count() > 0) {
                 $this->selectedExistingServer = $this->servers->first()->id;
-                $this->state = 'select-existing-server';
+                $this->currentState = 'select-existing-server';
                 return;
             }
-            $this->state = 'private-key';
+            $this->currentState = 'private-key';
         }
     }
     public function selectExistingServer()
@@ -147,12 +142,12 @@ uZx9iFkCELtxrh31QJ68AAAAEXNhaWxANzZmZjY2ZDJlMmRkAQIDBA==
         $this->createdServer = Server::find($this->selectedExistingServer);
         if (!$this->createdServer) {
             $this->dispatch('error', 'Server is not found.');
-            $this->state = 'private-key';
+            $this->currentState = 'private-key';
             return;
         }
         $this->selectedExistingPrivateKey = $this->createdServer->privateKey->id;
         $this->serverPublicKey = $this->createdServer->privateKey->publicKey();
-        $this->state = 'validate-server';
+        $this->currentState = 'validate-server';
     }
     public function getProxyType()
     {
@@ -160,7 +155,7 @@ uZx9iFkCELtxrh31QJ68AAAAEXNhaWxANzZmZjY2ZDJlMmRkAQIDBA==
         $this->selectProxy(ProxyTypes::TRAEFIK_V2->value);
         // $proxyTypeSet = $this->createdServer->proxy->type;
         // if (!$proxyTypeSet) {
-        //     $this->state = 'select-proxy';
+        //     $this->currentState = 'select-proxy';
         //     return;
         // }
         $this->getProjects();
@@ -173,12 +168,12 @@ uZx9iFkCELtxrh31QJ68AAAAEXNhaWxANzZmZjY2ZDJlMmRkAQIDBA==
         }
         $this->createdPrivateKey = PrivateKey::find($this->selectedExistingPrivateKey);
         $this->privateKey = $this->createdPrivateKey->private_key;
-        $this->state = 'create-server';
+        $this->currentState = 'create-server';
     }
     public function createNewServer()
     {
         $this->selectedExistingServer = null;
-        $this->state = 'private-key';
+        $this->currentState = 'private-key';
     }
     public function setPrivateKey(string $type)
     {
@@ -187,7 +182,7 @@ uZx9iFkCELtxrh31QJ68AAAAEXNhaWxANzZmZjY2ZDJlMmRkAQIDBA==
         if ($type === 'create') {
             $this->createNewPrivateKey();
         }
-        $this->state = 'create-private-key';
+        $this->currentState = 'create-private-key';
     }
     public function savePrivateKey()
     {
@@ -202,7 +197,7 @@ uZx9iFkCELtxrh31QJ68AAAAEXNhaWxANzZmZjY2ZDJlMmRkAQIDBA==
             'team_id' => currentTeam()->id
         ]);
         $this->createdPrivateKey->save();
-        $this->state = 'create-server';
+        $this->currentState = 'create-server';
     }
     public function saveServer()
     {
@@ -231,7 +226,7 @@ uZx9iFkCELtxrh31QJ68AAAAEXNhaWxANzZmZjY2ZDJlMmRkAQIDBA==
         $this->createdServer->settings->save();
         $this->createdServer->addInitialNetwork();
         $this->selectedExistingServer = $this->createdServer->id;
-        $this->state = 'validate-server';
+        $this->currentState = 'validate-server';
     }
     public function installServer()
     {
@@ -258,7 +253,7 @@ uZx9iFkCELtxrh31QJ68AAAAEXNhaWxANzZmZjY2ZDJlMmRkAQIDBA==
             $dockerVersion = instant_remote_process(["docker version|head -2|grep -i version| awk '{print $2}'"], $this->createdServer, true);
             $dockerVersion = checkMinimumDockerEngineVersion($dockerVersion);
             if (is_null($dockerVersion)) {
-                $this->state = 'validate-server';
+                $this->currentState = 'validate-server';
                 throw new \Exception('Docker not found or old version is installed.');
             }
             $this->createdServer->settings()->update([
@@ -286,12 +281,12 @@ uZx9iFkCELtxrh31QJ68AAAAEXNhaWxANzZmZjY2ZDJlMmRkAQIDBA==
         if ($this->projects->count() > 0) {
             $this->selectedProject = $this->projects->first()->id;
         }
-        $this->state = 'create-project';
+        $this->currentState = 'create-project';
     }
     public function selectExistingProject()
     {
         $this->createdProject = Project::find($this->selectedProject);
-        $this->state = 'create-resource';
+        $this->currentState = 'create-resource';
     }
     public function createNewProject()
     {
@@ -299,7 +294,7 @@ uZx9iFkCELtxrh31QJ68AAAAEXNhaWxANzZmZjY2ZDJlMmRkAQIDBA==
             'name' => "My first project",
             'team_id' => currentTeam()->id
         ]);
-        $this->state = 'create-resource';
+        $this->currentState = 'create-resource';
     }
     public function showNewResource()
     {

composer.json

@@ -41,7 +41,6 @@
         "stripe/stripe-php": "^12.0",
         "symfony/yaml": "^6.2",
         "visus/cuid2": "^2.0.0",
-        "wire-elements/modal": "^2.0",
         "yosymfony/toml": "^1.0"
     },
     "require-dev": {

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "9bdaf702cdd870434444f8937a816fdb",
+    "content-hash": "e095b8a9eb22df2943cbc3e9649ff9e8",
     "packages": [
         {
             "name": "amphp/amp",
@@ -11859,64 +11859,6 @@
             },
             "time": "2022-06-03T18:03:27+00:00"
         },
-        {
-            "name": "wire-elements/modal",
-            "version": "2.0.9",
-            "source": {
-                "type": "git",
-                "url": "https://github.com/wire-elements/modal.git",
-                "reference": "899b05e313403669aa8a359db71a066246184355"
-            },
-            "dist": {
-                "type": "zip",
-                "url": "https://api.github.com/repos/wire-elements/modal/zipball/899b05e313403669aa8a359db71a066246184355",
-                "reference": "899b05e313403669aa8a359db71a066246184355",
-                "shasum": ""
-            },
-            "require": {
-                "livewire/livewire": "^3.2.3",
-                "php": "^8.1",
-                "spatie/laravel-package-tools": "^1.9"
-            },
-            "require-dev": {
-                "orchestra/testbench": "^8.5",
-                "phpunit/phpunit": "^9.5"
-            },
-            "type": "library",
-            "extra": {
-                "laravel": {
-                    "providers": [
-                        "LivewireUI\\Modal\\LivewireModalServiceProvider"
-                    ]
-                }
-            },
-            "autoload": {
-                "psr-4": {
-                    "LivewireUI\\Modal\\": "src"
-                }
-            },
-            "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
-            "authors": [
-                {
-                    "name": "Philo Hermans",
-                    "email": "me@philohermans.com"
-                }
-            ],
-            "description": "Laravel Livewire modal component",
-            "keywords": [
-                "laravel",
-                "livewire",
-                "modal"
-            ],
-            "support": {
-                "issues": "https://github.com/wire-elements/modal/issues",
-                "source": "https://github.com/wire-elements/modal/tree/2.0.9"
-            },
-            "time": "2023-12-08T09:31:14+00:00"
-        },
         {
             "name": "yosymfony/parser-utils",
             "version": "v2.0.0",

config/sentry.php

@@ -7,7 +7,7 @@ return [
 
     // The release version of your application
     // Example with dynamic git hash: trim(exec('git --git-dir ' . base_path('.git') . ' log --pretty="%h" -n1 HEAD'))
-    'release' => '4.0.0-beta.242',
+    'release' => '4.0.0-beta.244',
     // When left empty or `null` the Laravel environment will be used
     'environment' => config('app.env'),
 

config/version.php

@@ -1,3 +1,3 @@
 <?php
 
-return '4.0.0-beta.242';
+return '4.0.0-beta.244';

config/wire-elements-modal.php

@@ -1,52 +0,0 @@
-<?php
-
-return [
-
-    /*
-    |--------------------------------------------------------------------------
-    | Include CSS
-    |--------------------------------------------------------------------------
-    |
-    | The modal uses TailwindCSS, if you don't use TailwindCSS you will need
-    | to set this parameter to true. This includes the modern-normalize css.
-    |
-    */
-    'include_css' => false,
-
-    /*
-    |--------------------------------------------------------------------------
-    | Include JS
-    |--------------------------------------------------------------------------
-    |
-    | Livewire UI will inject the required Javascript in your blade template.
-    | If you want to bundle the required Javascript you can set this to false
-    | and add `require('vendor/wire-elements/modal/resources/js/modal');`
-    | to your script bundler like webpack.
-    |
-    */
-    'include_js' => false,
-
-    /*
-    |--------------------------------------------------------------------------
-    | Modal Component Defaults
-    |--------------------------------------------------------------------------
-    |
-    | Configure the default properties for a modal component.
-    |
-    | Supported modal_max_width
-    | 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl'
-    */
-    'component_defaults' => [
-        'modal_max_width' => '7xl',
-
-        'close_modal_on_click_away' => true,
-
-        'close_modal_on_escape' => true,
-
-        'close_modal_on_escape_is_forceful' => true,
-
-        'dispatch_close_event' => false,
-
-        'destroy_on_close' => false,
-    ],
-];

resources/css/app.css

@@ -4,7 +4,7 @@
 
 html,
 body {
-    @apply h-full bg-neutral-100 text-neutral-800 dark:bg-base dark:text-neutral-400;
+    @apply h-full bg-neutral-50 text-neutral-800 dark:bg-base dark:text-neutral-400;
 }
 
 body {
@@ -41,7 +41,7 @@ option {
 }
 
 .button {
-    @apply flex items-center justify-center gap-2 px-3 py-1 text-sm font-normal normal-case rounded cursor-pointer bg-neutral-200 hover:bg-neutral-300 dark:bg-coolgray-200 dark:text-white dark:hover:bg-coolgray-100 dark:hover:dark:text-white dark:disabled:bg-coolgray-100/40 dark:disabled:text-neutral-800 disabled:bg-neutral-100 disabled:text-neutral-200 disabled:cursor-not-allowed min-w-fit hover:dark:text-white focus:outline-1 ;
+    @apply flex items-center justify-center gap-2 px-3 py-1 text-sm text-white normal-case rounded cursor-pointer hover:bg-black/80 bg-coolgray-200 hover:bg-coolgray-500 hover:text-white disabled:bg-coolgray-100/10 disabled:cursor-not-allowed min-w-fit focus:outline-1 dark:disabled:text-neutral-600;
 }
 
 button[isError]:not(:disabled) {
@@ -94,7 +94,7 @@ tr {
 }
 
 tr th {
-    @apply px-3 py-3.5 text-left text-white;
+    @apply px-3 py-3.5 text-left text-black dark:text-white;
 }
 
 tr th:first-child {
@@ -118,7 +118,10 @@ tr td:first-child {
 }
 
 .dropdown-item {
-    @apply relative flex cursor-pointer select-none dark:text-white hover:bg-neutral-300 dark:hover:bg-coollabs items-center pr-4 pl-2 py-1 text-xs justify-start outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 gap-2 w-full;
+    @apply relative flex cursor-pointer select-none dark:text-white hover:bg-neutral-100 dark:hover:bg-coollabs items-center pr-4 pl-2 py-1 text-xs justify-start outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 gap-2 w-full;
+}
+.dropdown-item-no-padding {
+    @apply relative flex cursor-pointer select-none dark:text-white hover:bg-neutral-100 dark:hover:bg-coollabs items-center py-1 text-xs justify-start outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 gap-2 w-full;
 }
 
 .badge {
@@ -187,7 +190,10 @@ tr td:first-child {
 }
 
 .box {
-    @apply flex lg:flex-row flex-col p-2 transition-colors cursor-pointer min-h-[4rem] dark:bg-coolgray-100 bg-white border border-neutral-200 dark:border-black hover:bg-neutral-200 dark:hover:bg-coollabs-100 dark:hover:text-white hover:no-underline;
+    @apply flex lg:flex-row flex-col p-2 transition-colors cursor-pointer min-h-[4rem] dark:bg-coolgray-100 bg-white border border-neutral-200 dark:border-black hover:bg-neutral-100 dark:hover:bg-coollabs-100 dark:hover:text-white hover:no-underline;
+}
+.box-boarding {
+    @apply flex lg:flex-row flex-col p-2 transition-colors cursor-pointer min-h-[4rem] dark:bg-coolgray-100 dark:text-white bg-neutral-50 border border-neutral-200 dark:border-black hover:bg-neutral-100 dark:hover:bg-coollabs-100 dark:hover:text-white hover:text-black hover:no-underline text-black;
 }
 
 .on-box {

resources/js/app.js

@@ -1,6 +1,5 @@
 import { createApp } from "vue";
 import MagicBar from "./components/MagicBar.vue";
-import "../../vendor/wire-elements/modal/resources/js/modal";
 
 const app = createApp({});
 app.component("magic-bar", MagicBar);

resources/views/auth/confirm-password.blade.php

@@ -3,7 +3,7 @@
         <div>
             <div class="flex flex-col items-center pb-8">
                 <div class="text-5xl font-bold tracking-tight text-center dark:text-white">Coolify</div>
-                <x-version />
+                {{-- <x-version /> --}}
             </div>
             <div class="w-96">
                 <form action="/user/confirm-password" method="POST" class="flex flex-col gap-2">

resources/views/auth/forgot-password.blade.php

@@ -5,7 +5,7 @@
                 <a href="{{ route('dashboard') }}">
                     <div class="text-5xl font-bold tracking-tight text-center dark:text-white">Coolify</div>
                 </a>
-                <x-version />
+                {{-- <x-version /> --}}
             </div>
 
             <div class="flex items-center gap-2">

resources/views/auth/two-factor-challenge.blade.php

@@ -3,31 +3,25 @@
         <div>
             <div class="flex flex-col items-center pb-8">
                 <div class="text-5xl font-bold tracking-tight text-center dark:text-white">Coolify</div>
-                <x-version />
+                {{-- <x-version /> --}}
             </div>
-            <div class="w-96" x-data="{ showRecovery: false }">
+            <div class="w-96">
                 <form action="/two-factor-challenge" method="POST" class="flex flex-col gap-2">
                     @csrf
-                    <template x-if="!showRecovery">
+                    <div>
-                        <div>
+                        <x-forms.input autofocus type="number" name="code" label="{{ __('input.code') }}" autofocus />
-                            <x-forms.input required type="number" name="code" label="{{ __('input.code') }}"
+                        {{-- <div class="pt-2 text-xs cursor-pointer hover:underline hover:dark:text-white"
-                                autofocus />
+                            x-on:click="showRecovery = !showRecovery">Use
-                            <div class="pt-2 text-xs cursor-pointer hover:underline hover:dark:text-white"
+                            Recovery Code
-                                x-on:click="showRecovery = !showRecovery">Use
+                        </div> --}}
-                                Recovery Code
+                    </div>
-                            </div>
+                    <div>
-                        </div>
+                        <x-forms.input name="recovery_code" label="{{ __('input.recovery_code') }}" />
-                    </template>
+                        {{-- <div class="pt-2 text-xs cursor-pointer hover:underline hover:dark:text-white"
-                    <template x-if="showRecovery">
+                            x-on:click="showRecovery = !showRecovery">Use
-                        <div>
+                            One-Time Code
-                            <x-forms.input required type="text" name="recovery_code"
+                        </div> --}}
-                                label="{{ __('input.recovery_code') }}" />
+                    </div>
-                            <div class="pt-2 text-xs cursor-pointer hover:underline hover:dark:text-white"
-                                x-on:click="showRecovery = !showRecovery">Use
-                                One-Time Code
-                            </div>
-                        </div>
-                    </template>
                     <x-forms.button type="submit">{{ __('auth.login') }}</x-forms.button>
                 </form>
                 @if ($errors->any())

resources/views/auth/verify-email.blade.php

@@ -1,6 +1,6 @@
-<x-layout-subscription>
+<x-layout>
-    <div class="min-h-screen hero">
+    <section class="flex flex-col h-full lg:items-center lg:justify-center">
-        <div class="min-w-fit">
+        <div class="flex flex-col items-center justify-center px-6 py-8 mx-auto max-w-7xl lg:py-0">
             <h1> Verification Email Sent </h1>
             <div class="flex justify-center gap-2 text-center">
                 <br>To activate your account, please open the email and follow the
@@ -8,5 +8,5 @@
             </div>
             <livewire:verify-email />
         </div>
-    </div>
+    </section>
-</x-layout-subscription>
+</x-layout>

resources/views/components/boarding-step.blade.php

@@ -1,5 +1,5 @@
 <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
-    <div class="box-border col-span-2 lg:min-w-[24rem] min-h-[21rem]">
+    <div class="box-border col-span-2 lg:min-w-[24rem] lg:min-h-[21rem]">
         <h1 class="text-2xl font-bold lg:text-5xl">{{ $title }}</h1>
         <div class="py-6">
             @isset($question)
@@ -16,7 +16,7 @@
     </div>
     @isset($explanation)
         <div class="col-span-1">
-            <h1 class="pb-8 font-bold">Explanation</h1>
+            <h3 class="pb-8 font-bold">Explanation</h3>
             <div class="space-y-4">
                 {{ $explanation }}
             </div>

resources/views/components/dropdown.blade.php

@@ -2,11 +2,11 @@
     dropdownOpen: false
 }" class="relative" @click.outside="dropdownOpen = false">
     <button @click="dropdownOpen=true"
-        class="inline-flex items-center justify-start pr-10 transition-colors focus:outline-none disabled:opacity-50 disabled:pointer-events-none">
+        class="inline-flex items-center justify-start pr-8 transition-colors focus:outline-none disabled:opacity-50 disabled:pointer-events-none">
         <span class="flex flex-col items-start h-full leading-none">
             {{ $title }}
         </span>
-        <svg class="absolute right-0 w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+        <svg class="absolute right-0 w-4 h-4 mr-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
             stroke-width="1.5" stroke="currentColor">
             <path stroke-linecap="round" stroke-linejoin="round"
                 d="M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9" />
@@ -16,7 +16,7 @@
     <div x-show="dropdownOpen" @click.away="dropdownOpen=false" x-transition:enter="ease-out duration-200"
         x-transition:enter-start="-translate-y-2" x-transition:enter-end="translate-y-0"
         class="absolute top-0 z-50 mt-6 min-w-max" x-cloak>
-        <div class="p-1 mt-1 border dark:bg-coolgray-200 bg-neutral-200 dark:border-black border-neutral-300">
+        <div class="p-1 mt-1 bg-white border rounded shadow dark:bg-coolgray-200 dark:border-black border-neutral-300">
             {{ $slot }}
         </div>
     </div>

resources/views/components/external-link.blade.php

@@ -1,4 +1,4 @@
-<svg class="inline-flex w-3 h-3 ml-1 text-black dark:text-white" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"
+<svg class="inline-flex w-3 h-3 ml-1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"
     focusable="false" viewBox="0 0 24 24">
     <path d="M0 0h24v24H0V0z" fill="none">
     </path>

resources/views/components/forms/button.blade.php

@@ -10,6 +10,6 @@
 
     {{ $slot }}
     @if ($attributes->whereStartsWith('wire:click')->first())
-        <x-loading wire:target="{{ $attributes->whereStartsWith('wire:click')->first() }}" wire:loading.delay />
+        <x-loading-on-button wire:target="{{ $attributes->whereStartsWith('wire:click')->first() }}" wire:loading.delay />
     @endif
 </button>

resources/views/components/loading-on-button.blade.php

@@ -0,0 +1,13 @@
+@props(['text' => null])
+<div class="inline-flex items-center justify-center" {{ $attributes }}>
+    @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"
+        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"
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
+        </path>
+    </svg>
+</div>

resources/views/components/modal-input.blade.php

@@ -23,28 +23,28 @@
     <template x-teleport="body">
         <div x-show="modalOpen" class="fixed top-0 left-0 lg:px-0 px-4 z-[99] flex items-center 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"
+            <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>
-            <div x-show="modalOpen" x-trap.inert.noscroll="modalOpen" x-transition:enter="ease-out duration-100"
+            <div x-show="modalOpen" x-trap.inert.noscroll="modalOpen" @click.outside="modalOpen=false" 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 drop-shadow min-w-full lg:min-w-[36rem] max-w-fit bg-white border-neutral-200 dark:bg-base px-6 dark:border-coolgray-300">
                 <div class="flex items-center justify-between pb-3">
                     <h3 class="text-2xl font-bold">{{ $title }}</h3>
                     <button @click="modalOpen=false"
-                        class="absolute top-0 right-0 flex items-center justify-center w-8 h-8 mt-5 mr-5 rounded-full dark:text-white hover:bg-coolgray-300">
+                        class="absolute top-0 right-0 flex items-center justify-center w-8 h-8 mt-5 mr-5 rounded-full dark:text-white hover:bg-neutral-100 dark:hover:bg-coolgray-300">
                         <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                             stroke-width="1.5" stroke="currentColor">
                             <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                         </svg>
                     </button>
                 </div>
-                <div class="relative flex items-center justify-center w-auto pb-4">
+                <div class="relative flex items-center justify-center w-auto">
                     {{ $slot }}
                 </div>
             </div>

resources/views/components/navbar.blade.php

@@ -1,10 +1,72 @@
-<nav class="flex flex-col flex-1 pl-2 bg-white border-r dark:border-coolgray-200 dark:bg-base">
+<nav class="flex flex-col flex-1 pl-2 bg-white border-r dark:border-coolgray-200 dark:bg-base" x-data="{
-    <div class="flex w-full pt-6 pb-4 pl-3">
+    init() {
-        <div class="flex flex-col">
+            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
+                const userSettings = localStorage.getItem('theme');
+                if (userSettings !== 'system') {
+                    return;
+                }
+                if (e.matches) {
+                    document.documentElement.classList.add('dark');
+                } else {
+                    document.documentElement.classList.remove('dark');
+                }
+            });
+            this.queryTheme();
+        },
+        setTheme(type) {
+            this.theme = type;
+            localStorage.setItem('theme', type);
+            this.queryTheme();
+        },
+        queryTheme() {
+            const darkModePreference = window.matchMedia('(prefers-color-scheme: dark)').matches;
+            const userSettings = localStorage.getItem('theme') || 'dark';
+            localStorage.setItem('theme', userSettings);
+            if (userSettings === 'dark') {
+                document.documentElement.classList.add('dark');
+                this.theme = 'dark';
+            } else if (userSettings === 'light') {
+                document.documentElement.classList.remove('dark');
+                this.theme = 'light';
+            } else if (darkModePreference) {
+                this.theme = 'system';
+                document.documentElement.classList.add('dark');
+            } else if (!darkModePreference) {
+                this.theme = 'system';
+                document.documentElement.classList.remove('dark');
+            }
+        }
+}">
+    <div class="flex pt-6 pb-4 pl-3">
+        <div class="flex flex-col w-full">
             <div class="text-2xl font-bold tracking-wide dark:text-white">Coolify</div>
             <x-version />
         </div>
-        {{-- <button onclick="changeTheme()">Dark/light</button> --}}
+        <div class="pt-1">
+            <x-dropdown>
+                <x-slot:title>
+                    <div class="flex justify-end w-8" x-show="theme === 'dark' || theme === 'system'">
+                        <svg class="w-5 h-5 rounded dark:fill-white" xmlns="http://www.w3.org/2000/svg"
+                            viewBox="0 0 24 24">
+                            <path
+                                d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z" />
+                        </svg>
+                    </div>
+                    <div class="flex justify-end w-8" x-show="theme === 'light'">
+                        <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                            <path
+                                d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" />
+                        </svg>
+                    </div>
+                </x-slot:title>
+                <div class="flex flex-col gap-1">
+                    <button @click="setTheme('dark')" class="px-1 dropdown-item-no-padding">Dark</button>
+                    <button @click="setTheme('light')" class="px-1 dropdown-item-no-padding">Light</button>
+                    <button @click="setTheme('system')" class="px-1 dropdown-item-no-padding">System</button>
+                </div>
+            </x-dropdown>
+        </div>
+
     </div>
     <div class="px-2 pt-2 pb-7">
         <livewire:switch-team />
@@ -12,7 +74,7 @@
     <ul role="list" class="flex flex-col flex-1 gap-y-7">
         <li class="flex-1 ">
             <ul role="list" class="flex flex-col h-full space-y-1.5">
-                @if (isSubscribed())
+                @if (isSubscribed() || !isCloud())
                     <li>
                         <a title="Dashboard" href="/"
                             class="{{ request()->is('/') ? 'menu-item-active menu-item' : 'menu-item' }}">
@@ -111,8 +173,8 @@
                             class="{{ request()->is('tags*') ? 'menu-item-active menu-item' : 'menu-item' }}"
                             href="{{ route('tags.index') }}">
                             <svg class="icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                                <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                                <g fill="none" stroke="currentColor" stroke-linecap="round"
-                                    stroke-width="2">
+                                    stroke-linejoin="round" stroke-width="2">
                                     <path
                                         d="M3 8v4.172a2 2 0 0 0 .586 1.414l5.71 5.71a2.41 2.41 0 0 0 3.408 0l3.592-3.592a2.41 2.41 0 0 0 0-3.408l-5.71-5.71A2 2 0 0 0 9.172 6H5a2 2 0 0 0-2 2" />
                                     <path d="m18 19l1.592-1.592a4.82 4.82 0 0 0 0-6.816L15 6m-8 4h-.01" />
@@ -263,7 +325,7 @@
                         <livewire:help />
                     </x-modal-input>
                 </li>
-                <li >
+                <li>
                     <form action="/logout" method="POST">
                         @csrf
                         <button title="Logout" type="submit" class="gap-2 mb-6 menu-item">

resources/views/components/pricing-plans.blade.php

@@ -8,13 +8,13 @@
                 class="grid grid-cols-2 p-1 text-xs font-semibold leading-5 text-center rounded dark:text-white gap-x-1 bg-white/5">
                 <legend class="sr-only">Payment frequency</legend>
                 <label class="cursor-pointer rounded px-2.5 py-1"
-                    :class="selected === 'monthly' ? 'bg-coollabs-100 dark:text-white' : ''">
+                    :class="selected === 'monthly' ? 'bg-coollabs-100 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"
-                    :class="selected === 'yearly' ? 'bg-coollabs-100 dark:text-white' : ''">
+                    :class="selected === 'yearly' ? 'bg-coollabs-100 text-white' : ''">
                     <input type="radio" x-on:click="selected = 'yearly'" name="frequency" value="annually"
                         class="sr-only">
                     <span>Annually</span>
@@ -27,7 +27,7 @@
                     days trial</span> included on all plans, without credit card details.</div>
         @endif
         <div x-show="selected === 'monthly'" class="flex justify-center h-10 mt-3 text-sm leading-6 ">
-            <div>Save <span class="font-bold dark:text-warning">10%</span> annually with the yearly plans.
+            <div>Save <span class="font-bold text-black dark:text-warning">10%</span> annually with the yearly plans.
             </div>
         </div>
         <div x-show="selected === 'yearly'" class="flex justify-center h-10 mt-3 text-sm leading-6 ">

resources/views/components/status/index.blade.php

@@ -8,7 +8,7 @@
     <x-status.stopped :status="$resource->status" />
 @endif
 @if (!str($resource->status)->contains('exited') && $showRefreshButton)
-    <button title="Refresh Status" wire:click='check_status(true)' class="mx-1 hover:fill-white fill-warning">
+    <button title="Refresh Status" wire:click='check_status(true)' class="mx-1 dark:hover:fill-white fill-coollabs dark:fill-warning">
         <svg class="w-4 h-4" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
             <path
                 d="M12 2a10.016 10.016 0 0 0-7 2.877V3a1 1 0 1 0-2 0v4.5a1 1 0 0 0 1 1h4.5a1 1 0 0 0 0-2H6.218A7.98 7.98 0 0 1 20 12a1 1 0 0 0 2 0A10.012 10.012 0 0 0 12 2zm7.989 13.5h-4.5a1 1 0 0 0 0 2h2.293A7.98 7.98 0 0 1 4 12a1 1 0 0 0-2 0a9.986 9.986 0 0 0 16.989 7.133V21a1 1 0 0 0 2 0v-4.5a1 1 0 0 0-1-1z" />

resources/views/components/version.blade.php

@@ -1,2 +1,2 @@
-<a {{ $attributes->merge(['class' => 'text-xs cursor-pointer opacity-90 hover:opacity-100 dark:hover:text-white hover:text-black z-[60]']) }}
+<a {{ $attributes->merge(['class' => 'text-xs cursor-pointer opacity-90 hover:opacity-100 dark:hover:text-white hover:text-black']) }}
     href="https://github.com/coollabsio/coolify/releases/tag/v{{ config('version') }}">v{{ config('version') }}</a>

resources/views/destination/all.blade.php

@@ -8,29 +8,30 @@
         @endif
     </div>
     <div class="subtitle">Network endpoints to deploy your resources.</div>
-    <div class="grid gap-2 lg:grid-cols-2">
+    <div class="grid gap-2 lg:grid-cols-1">
         @forelse ($destinations as $destination)
             @if ($destination->getMorphClass() === 'App\Models\StandaloneDocker')
-                <a class="flex gap-4 text-center hover:no-underline box group"
+            <div class="box group">
+                <a class="flex flex-col mx-6"
                     href="{{ route('destination.show', ['destination_uuid' => data_get($destination, 'uuid')]) }}">
-                    <div class="group-hover:dark:text-white">
+                    <div class="box-title">{{ $destination->name }}</div>
-                        <div>{{ $destination->name }}</div>
+                    <div class="box-description">server: {{ $destination->server->name }}</div>
-                    </div>
                 </a>
+            </div>
             @endif
             @if ($destination->getMorphClass() === 'App\Models\SwarmDocker')
-                <a class="flex gap-4 text-center hover:no-underline box group"
+            <div class="box group">
+                <a class="flex flex-col mx-6"
                     href="{{ route('destination.show', ['destination_uuid' => data_get($destination, 'uuid')]) }}">
-
+                    <div class="box-title">{{ $destination->name }}</div>
-                    <div class="group-hover:dark:text-white">
+                    <div class="box-description">server: {{ $destination->server->name }}</div>
-                        <div>{{ $destination->name }}</div>
-                    </div>
                 </a>
+            </div>
             @endif
         @empty
             <div>
                 @if ($servers->count() === 0)
-                    <div> No servers found. Please add one first.</div>
+                    <div>No servers found. Please add one first.</div>
                 @else
                     <div>No destinations found.</div>
                 @endif

resources/views/errors/401.blade.php

@@ -1,20 +1,18 @@
 @extends('layouts.base')
-<div class="min-h-screen hero">
+<div class="flex flex-col items-center justify-center h-full">
-    <div class="text-center hero-content">
+    <div>
-        <div class="">
+        <p class="font-mono font-semibold text-7xl dark:text-warning">401</p>
-            <p class="font-mono text-6xl font-semibold dark:text-warning">401</p>
+        <h1 class="mt-4 font-bold tracking-tight dark:text-white">You shall not pass!</h1>
-            <h1 class="mt-4 font-bold tracking-tight dark:text-white">You shall not pass!</h1>
+        <p class="text-base leading-7 text-neutral-300">You don't have permission to access this page.
-            <p class="mt-6 text-base leading-7 text-neutral-300">You don't have permission to access this page.
+        </p>
-            </p>
+        <div class="flex items-center mt-10 gap-x-6">
-            <div class="flex items-center justify-center mt-10 gap-x-6">
+            <a href="/">
-                <a href="/">
+                <x-forms.button>Go back home</x-forms.button>
-                    <x-forms.button>Go back home</x-forms.button>
+            </a>
-                </a>
+            <a target="_blank" class="text-xs" href="{{ config('coolify.contact') }}">Contact
-                <a target="_blank" class="text-xs" href="{{ config('coolify.contact') }}">Contact
+                support
-                    support
+                <x-external-link />
-                    <x-external-link />
+            </a>
-                </a>
-            </div>
         </div>
     </div>
 </div>

resources/views/errors/402.blade.php

@@ -1,5 +1,17 @@
-@extends('errors::minimal')
+@extends('layouts.base')
 
-@section('title', __('Payment Required'))
+<div class="flex flex-col items-center justify-center h-full">
-@section('code', '402')
+    <div>
-@section('message', __('Payment Required'))
+        <p class="font-mono font-semibold text-7xl dark:text-warning">402</p>
+        <h1 class="mt-4 font-bold tracking-tight dark:text-white">Payment required.</h1>
+        <div class="flex items-center mt-10 gap-x-6">
+            <a href="/">
+                <x-forms.button>Go back home</x-forms.button>
+            </a>
+            <a target="_blank" class="text-xs" href="{{ config('coolify.contact') }}">Contact
+                support
+                <x-external-link />
+            </a>
+        </div>
+    </div>
+</div>

resources/views/errors/403.blade.php

@@ -1,20 +1,18 @@
 @extends('layouts.base')
-<div class="min-h-screen hero">
+<div class="flex flex-col items-center justify-center h-full">
-    <div class="text-center hero-content">
+    <div>
-        <div class="">
+        <p class="font-mono font-semibold text-7xl dark:text-warning">403</p>
-            <p class="font-mono text-6xl font-semibold dark:text-warning">403</p>
+        <h1 class="mt-4 font-bold tracking-tight dark:text-white">You shall not pass!</h1>
-            <h1 class="mt-4 font-bold tracking-tight dark:text-white">You shall not pass!</h1>
+        <p class="text-base leading-7 text-neutral-300">You don't have permission to access this page.
-            <p class="mt-6 text-base leading-7 text-neutral-300">You don't have permission to access this page.
+        </p>
-            </p>
+        <div class="flex items-center mt-10 gap-x-6">
-            <div class="flex items-center justify-center mt-10 gap-x-6">
+            <a href="/">
-                <a href="/">
+                <x-forms.button>Go back home</x-forms.button>
-                    <x-forms.button>Go back home</x-forms.button>
+            </a>
-                </a>
+            <a target="_blank" class="text-xs" href="{{ config('coolify.contact') }}">Contact
-                <a target="_blank" class="text-xs" href="{{ config('coolify.contact') }}">Contact
+                support
-                    support
+                <x-external-link />
-                    <x-external-link />
+            </a>
-                </a>
-            </div>
         </div>
     </div>
 </div>

resources/views/errors/404.blade.php

@@ -1,21 +1,19 @@
 @extends('layouts.base')
-<div class="min-h-screen hero">
+<div class="flex flex-col items-center justify-center h-full">
-    <div class="text-center hero-content">
+    <div>
-        <div class="">
+        <p class="font-mono font-semibold text-7xl dark:text-warning">404</p>
-            <p class="font-mono text-6xl font-semibold dark:text-warning">404</p>
+        <h1 class="mt-4 font-bold tracking-tight dark:text-white">How did you got here?</h1>
-            <h1 class="mt-4 font-bold tracking-tight dark:text-white">How did you got here?</h1>
+        <p class="text-base leading-7 text-neutral-300">Sorry, we couldn’t find the page you’re looking
-            <p class="mt-6 text-base leading-7 text-neutral-300">Sorry, we couldn’t find the page you’re looking
+            for.
-                for.
+        </p>
-            </p>
+        <div class="flex items-center mt-10 gap-x-6">
-            <div class="flex items-center justify-center mt-10 gap-x-6">
+            <a href="/">
-                <a href="/">
+                <x-forms.button>Go back home</x-forms.button>
-                    <x-forms.button>Go back home</x-forms.button>
+            </a>
-                </a>
+            <a target="_blank" class="text-xs" href="{{ config('coolify.contact') }}">Contact
-                <a target="_blank" class="text-xs" href="{{ config('coolify.contact') }}">Contact
+                support
-                    support
+                <x-external-link />
-                    <x-external-link />
+            </a>
-                </a>
-            </div>
         </div>
     </div>
 </div>

resources/views/errors/419.blade.php

@@ -1,20 +1,19 @@
 @extends('layouts.base')
-<div class="min-h-screen hero">
+<div class="flex flex-col items-center justify-center h-full">
-    <div class="text-center hero-content">
+    <div>
-        <div class="">
+        <p class="font-mono font-semibold text-7xl dark:text-warning">419</p>
-            <p class="font-mono text-6xl font-semibold dark:text-warning">419</p>
+        <h1 class="mt-4 font-bold tracking-tight dark:text-white">This page is definitely old, not like you!</h1>
-            <h1 class="mt-4 font-bold tracking-tight dark:text-white">This page is definitely old, not like you!</h1>
+        <p class="text-base leading-7 text-neutral-300">Sorry, we couldn’t find the page you’re looking
-            <p class="mt-6 text-base leading-7 text-neutral-300">Sorry, we couldn’t find the page you’re looking
+            for.
-                for.
+        </p>
-            </p>
+        <div class="flex items-center mt-10 gap-x-6">
-            <div class="flex items-center justify-center mt-10 gap-x-6">
+            <a href="/">
-                <a href="/">
+                <x-forms.button>Go back home</x-forms.button>
-                    <x-forms.button>Go back home</x-forms.button>
+            </a>
-                </a>
+            <a target="_blank" class="text-xs" href="{{ config('coolify.contact') }}">Contact
-                <a href="{{ config('coolify.contact') }}" class="font-semibold dark:text-white ">Contact
+                support
-                    support
+                <x-external-link />
-                    <span aria-hidden="true">&rarr;</span></a>
+            </a>
-            </div>
         </div>
     </div>
 </div>

resources/views/errors/429.blade.php

@@ -1,20 +1,19 @@
 @extends('layouts.base')
-<div class="min-h-screen hero">
+<div class="flex flex-col items-center justify-center h-full">
-    <div class="text-center hero-content">
+    <div>
-        <div class="">
+        <p class="font-mono font-semibold text-7xl dark:text-warning">429</p>
-            <p class="font-mono text-6xl font-semibold dark:text-warning">429</p>
+        <h1 class="mt-4 font-bold tracking-tight dark:text-white">Woah, slow down there!</h1>
-            <h1 class="mt-4 font-bold tracking-tight dark:text-white">Woah, slow down there!</h1>
+        <p class="text-base leading-7 text-neutral-300">You're making too many requests. Please wait a few
-            <p class="mt-6 text-base leading-7 text-neutral-300">You're making too many requests. Please wait a few
+            seconds before trying again.
-                seconds before trying again.
+        </p>
-            </p>
+        <div class="flex items-center mt-10 gap-x-6">
-            <div class="flex items-center justify-center mt-10 gap-x-6">
+            <a href="/">
-                <a href="/">
+                <x-forms.button>Go back home</x-forms.button>
-                    <x-forms.button>Go back home</x-forms.button>
+            </a>
-                </a>
+            <a target="_blank" class="text-xs" href="{{ config('coolify.contact') }}">Contact
-                <a href="{{ config('coolify.contact') }}" class="font-semibold dark:text-white ">Contact
+                support
-                    support
+                <x-external-link />
-                    <span aria-hidden="true">&rarr;</span></a>
+            </a>
-            </div>
         </div>
     </div>
 </div>

resources/views/errors/500.blade.php

@@ -1,23 +1,22 @@
 @extends('layouts.base')
-<div class="min-h-screen hero ">
+<div class="flex flex-col items-center justify-center h-full">
-    <div class="text-center hero-content">
+    <div>
-        <div>
+        <p class="font-mono font-semibold text-red-500 text-7xl">500</p>
-            <p class="font-mono text-6xl font-semibold dark:text-warning">500</p>
+        <h1 class="mt-4 font-bold tracking-tight dark:text-white">Something is not okay, are you okay?</h1>
-            <h1 class="mt-4 font-bold tracking-tight dark:text-white">Something is not okay, are you okay?</h1>
+        <p class="text-base leading-7 text-neutral-300">There has been an error, we are working on it.
-            <p class="mt-6 text-base leading-7 text-neutral-300">There has been an error, we are working on it.
+        </p>
-            </p>
+        @if ($exception->getMessage() !== '')
-            @if ($exception->getMessage() !== '')
+            <code class="mt-6 text-xs text-left text-red-500">Error: {{ $exception->getMessage() }}
-                <code class="mt-6 text-xs text-left text-red-500">Error: {{ $exception->getMessage() }}
+            </code>
-                </code>
+        @endif
-            @endif
+        <div class="flex items-center mt-10 gap-x-6">
-            <div class="flex items-center justify-center mt-10 gap-x-6">
+            <a href="/">
-                <a href="/">
+                <x-forms.button>Go back home</x-forms.button>
-                    <x-forms.button>Go back home</x-forms.button>
+            </a>
-                </a>
+            <a target="_blank" class="text-xs" href="{{ config('coolify.contact') }}">Contact
-                <a href="{{ config('coolify.contact') }}" class="font-semibold dark:text-white">Contact
+                support
-                    support
+                <x-external-link />
-                    <span aria-hidden="true">&rarr;</span></a>
+            </a>
-            </div>
         </div>
     </div>
 </div>

resources/views/errors/503.blade.php

@@ -1,17 +1,16 @@
 @extends('layouts.base')
-<div class="min-h-screen hero ">
+<div class="flex flex-col items-center justify-center h-full">
-    <div class="text-center hero-content">
+    <div>
-        <div>
+        <p class="font-mono font-semibold text-7xl dark:text-warning">503</p>
-            <p class="font-mono text-6xl font-semibold dark:text-warning">503</p>
+        <h1 class="mt-4 font-bold tracking-tight dark:text-white">We are working on serious things.</h1>
-            <h1 class="mt-4 font-bold tracking-tight dark:text-white">We are working on serious things.</h1>
+        <p class="text-base leading-7 text-neutral-300">Service Unavailable. Be right back. Thanks for your
-            <p class="mt-6 text-base leading-7 text-neutral-300">Service Unavailable. Be right back. Thanks for your
+            patience.
-                patience.
+        </p>
-            </p>
+        <div class="flex items-center mt-10 gap-x-6">
-            <div class="flex items-center justify-center mt-10 gap-x-6">
+            <a target="_blank" class="text-xs" href="{{ config('coolify.contact') }}">Contact
-                <a href="{{ config('coolify.contact') }}" class="font-semibold dark:text-white ">Contact
+                support
-                    support
+                <x-external-link />
-                    <span aria-hidden="true">&rarr;</span></a>
+            </a>
-            </div>
         </div>
     </div>
 </div>

resources/views/layouts/app.blade.php

@@ -1,7 +1,7 @@
 @extends('layouts.base')
 @section('body')
     @parent
-    @if (isSubscribed())
+    @if (isSubscribed() || !isCloud())
         <livewire:layout-popups />
     @endif
     @auth

resources/views/layouts/base.blade.php

@@ -38,23 +38,17 @@
 @section('body')
 
     <body>
-        {{-- @livewire('wire-elements-modal') --}}
         <x-toast />
         <script data-navigate-once>
-            if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia(
+            if (localStorage.theme === 'dark') {
-                    '(prefers-color-scheme: dark)').matches)) {
                 document.documentElement.classList.add('dark')
-            } else {
+            } else if (localStorage.theme === 'light') {
                 document.documentElement.classList.remove('dark')
-            }
+            } else {
-
+                if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-            function changeTheme() {
-                if (localStorage.theme === 'dark') {
-                    localStorage.theme = 'light'
-                    document.documentElement.classList.remove('dark')
-                } else {
-                    localStorage.theme = 'dark'
                     document.documentElement.classList.add('dark')
+                } else {
+                    document.documentElement.classList.remove('dark')
                 }
             }
             @auth

resources/views/layouts/boarding.blade.php

@@ -1,7 +1,7 @@
 @extends('layouts.base')
 @section('body')
-    <main class="h-full bg-gray-50 dark:bg-base">
+    <main class="h-full">
-            {{ $slot }}
+        {{ $slot }}
     </main>
     @parent
 @endsection

resources/views/layouts/simple.blade.php

@@ -1,7 +1,7 @@
 @extends('layouts.base')
 @section('body')
-    @parent
+    <main class="h-full bg-gray-50 dark:bg-base">
-    <main>
         {{ $slot }}
     </main>
+    @parent
 @endsection

resources/views/livewire/activity-monitor.blade.php

@@ -10,7 +10,7 @@
             </div>
         @endif
         <div
-            class="flex flex-col-reverse w-full px-4 py-2 overflow-y-auto dark:text-white border border-solid rounded bg-coolgray-100 scrollbar border-coolgray-300 max-h-96">
+            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 max-h-96">
             <pre class="font-mono whitespace-pre-wrap" @if ($isPollingActive) wire:poll.1000ms="polling" @endif>{{ RunRemoteProcess::decodeOutput($this->activity) }}</pre>
         </div>
     @else

resources/views/livewire/boarding/index.blade.php

@@ -1,345 +1,322 @@
 @php use App\Enums\ProxyTypes; @endphp
 <section class="flex flex-col h-full lg:items-center lg:justify-center">
-    <div class="flex flex-col items-center justify-center px-6 py-8 mx-auto max-w-7xl lg:py-0">
+    <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 ">
-        @if ($state === 'welcome')
+        @if ($currentState === 'welcome')
             <h1 class="text-3xl font-bold lg:text-5xl">Welcome to Coolify</h1>
-            <p class="py-6 text-base text-center lg:text-xl">Let me help you set up the basics.</p>
+            <div class="py-6 text-center lg:text-xl">Let me help you set up the basics.</div>
             <div class="flex justify-center ">
-                <x-forms.button class="justify-center w-64 box" wire:click="$set('state','explanation')">Get
+                <x-forms.button class="justify-center w-64 box-boarding" wire:click="$set('currentState','explanation')">Get
                     Started
                 </x-forms.button>
             </div>
-        @endif
+        @elseif ($currentState === 'explanation')
-        <div>
+            <x-boarding-step title="What is Coolify?">
-            @if ($state === 'explanation')
+                <x-slot:question>
-                <x-boarding-step title="What is Coolify?">
+                    Coolify is an all-in-one application to automate tasks on your servers, deploy application with
-                    <x-slot:question>
+                    Git
-                        Coolify is an all-in-one application to automate tasks on your servers, deploy application with
+                    integrations, deploy databases and services, monitor these resources with notifications and
-                        Git
+                    alerts
-                        integrations, deploy databases and services, monitor these resources with notifications and
+                    without vendor lock-in
-                        alerts
+                    and <a href="https://coolify.io" class="dark:text-white hover:underline">much much more</a>.
-                        without vendor lock-in
+                    <br><br>
-                        and <a href="https://coolify.io" class="dark:text-white hover:underline">much much more</a>.
+                    <span class="text-xl">
-                        <br><br>
+                        <x-highlighted text="Self-hosting with superpowers!" /></span>
-                        <span class="text-xl">
+                </x-slot:question>
-                            <x-highlighted text="Self-hosting with superpowers!" /></span>
+                <x-slot:explanation>
-                    </x-slot:question>
+                    <p><x-highlighted text="Task automation:" /> You don't need to manage your servers anymore.
-                    <x-slot:explanation>
+                        Coolify does
-                        <p><x-highlighted text="Task automation:" /> You don't need to manage your servers anymore.
+                        it for you.</p>
-                            Coolify does
+                    <p><x-highlighted text="No vendor lock-in:" /> All configurations are stored on your servers, so
-                            it for you.</p>
+                        everything works without a connection to Coolify (except integrations and automations).</p>
-                        <p><x-highlighted text="No vendor lock-in:" /> All configurations are stored on your servers, so
+                    <p><x-highlighted text="Monitoring:" />You can get notified on your favourite platforms
-                            everything works without a connection to Coolify (except integrations and automations).</p>
+                        (Discord,
-                        <p><x-highlighted text="Monitoring:" />You can get notified on your favourite platforms
+                        Telegram, Email, etc.) when something goes wrong, or an action is needed from your side.</p>
-                            (Discord,
+                </x-slot:explanation>
-                            Telegram, Email, etc.) when something goes wrong, or an action is needed from your side.</p>
+                <x-slot:actions>
-                    </x-slot:explanation>
+                    <x-forms.button class="justify-center lg:w-64 box-boarding" wire:click="explanation">Next
-                    <x-slot:actions>
+                    </x-forms.button>
-                        <x-forms.button class="justify-center lg:w-64 box" wire:click="explanation">Next
+                </x-slot:actions>
-                        </x-forms.button>
+            </x-boarding-step>
-                    </x-slot:actions>
+        @elseif ($currentState === 'select-server-type')
-                </x-boarding-step>
+            <x-boarding-step title="Server">
-            @endif
+                <x-slot:question>
-            @if ($state === 'select-server-type')
+                    Do you want to deploy your resources to your <x-highlighted text="Localhost" />
-                <x-boarding-step title="Server">
+                    or to a <x-highlighted text="Remote Server" />?
-                    <x-slot:question>
+                </x-slot:question>
-                        Do you want to deploy your resources to your <x-highlighted text="Localhost" />
+                <x-slot:actions>
-                        or to a <x-highlighted text="Remote Server" />?
+                    <x-forms.button class="justify-center w-64 box-boarding" wire:target="setServerType('localhost')"
-                    </x-slot:question>
+                        wire:click="setServerType('localhost')">Localhost
-                    <x-slot:actions>
+                    </x-forms.button>
-                        <x-forms.button class="justify-center w-64 box" wire:target="setServerType('localhost')"
-                            wire:click="setServerType('localhost')">Localhost
-                        </x-forms.button>
 
-                        <x-forms.button class="justify-center w-64 box " wire:target="setServerType('remote')"
+                    <x-forms.button class="justify-center w-64 box-boarding " wire:target="setServerType('remote')"
-                            wire:click="setServerType('remote')">Remote Server
+                        wire:click="setServerType('remote')">Remote Server
+                    </x-forms.button>
+                    @if (!$serverReachable)
+                        Localhost is not reachable with the following public key.
+                        <br /> <br />
+                        Please make sure you have the correct public key in your ~/.ssh/authorized_keys file for
+                        user
+                        'root' or skip the boarding process and add a new private key manually to Coolify and to the
+                        server.
+                        <br />
+                        Check this <a target="_blank" class="underline"
+                            href="https://coolify.io/docs/server/openssh">documentation</a> for further help.
+                        <x-forms.input readonly id="serverPublicKey"></x-forms.input>
+                        <x-forms.button class="lg:w-64 box-boarding" wire:target="setServerType('localhost')"
+                            wire:click="setServerType('localhost')">Check again
                         </x-forms.button>
-                        @if (!$serverReachable)
+                    @endif
-                            Localhost is not reachable with the following public key.
+                </x-slot:actions>
-                            <br /> <br />
+                <x-slot:explanation>
-                            Please make sure you have the correct public key in your ~/.ssh/authorized_keys file for
+                    <p>Servers are the main building blocks, as they will host your applications, databases,
-                            user
+                        services, called resources. Any CPU intensive process will use the server's CPU where you
-                            'root' or skip the boarding process and add a new private key manually to Coolify and to the
+                        are deploying your resources.</p>
-                            server.
+                    <p><x-highlighted text="Localhost" /> is the server where Coolify is running on. It is not
-                            <br />
+                        recommended to use one server
-                            Check this <a target="_blank" class="underline"
+                        for everything.</p>
-                                href="https://coolify.io/docs/server/openssh">documentation</a> for further help.
+                    <p><x-highlighted text="A remote server" /> is a server reachable through SSH. It can be hosted
-                            <x-forms.input readonly id="serverPublicKey"></x-forms.input>
+                        at home, or from any cloud
-                            <x-forms.button class="lg:w-64 box" wire:target="setServerType('localhost')"
+                        provider.</p>
-                                wire:click="setServerType('localhost')">Check again
+                </x-slot:explanation>
+            </x-boarding-step>
+        @elseif ($currentState === 'private-key')
+            <x-boarding-step title="SSH Key">
+                <x-slot:question>
+                    Do you have your own SSH Private Key?
+                </x-slot:question>
+                <x-slot:actions>
+                    <x-forms.button class="justify-center lg:w-64 box-boarding" wire:target="setPrivateKey('own')"
+                        wire:click="setPrivateKey('own')">Yes
+                    </x-forms.button>
+                    <x-forms.button class="justify-center lg:w-64 box-boarding" wire:target="setPrivateKey('create')"
+                        wire:click="setPrivateKey('create')">No (create one for me)
+                    </x-forms.button>
+                    @if (count($privateKeys) > 0)
+                        <form wire:submit='selectExistingPrivateKey' class="flex flex-col w-full gap-4 lg:pr-10">
+                            <x-forms.select label="Existing SSH Keys" id='selectedExistingPrivateKey'>
+                                @foreach ($privateKeys as $privateKey)
+                                    <option wire:key="{{ $loop->index }}" value="{{ $privateKey->id }}">
+                                        {{ $privateKey->name }}</option>
+                                @endforeach
+                            </x-forms.select>
+                            <x-forms.button type="submit">Use this SSH Key</x-forms.button>
+                        </form>
+                    @endif
+                </x-slot:actions>
+                <x-slot:explanation>
+                    <p>SSH Keys are used to connect to a remote server through a secure shell, called SSH.</p>
+                    <p>You can use your own ssh private key, or you can let Coolify to create one for you.</p>
+                    <p>In both ways, you need to add the public version of your ssh private key to the remote
+                        server's
+                        <code class="dark:text-warning">~/.ssh/authorized_keys</code> file.
+                    </p>
+                </x-slot:explanation>
+            </x-boarding-step>
+        @elseif ($currentState === 'select-existing-server')
+            <x-boarding-step title="Select a server">
+                <x-slot:question>
+                    There are already servers available for your Team. Do you want to use one of them?
+                </x-slot:question>
+                <x-slot:actions>
+                    <div class="flex flex-col gap-4">
+                        <div>
+                            <x-forms.button class="justify-center w-64 box-boarding" wire:click="createNewServer">No (create
+                                one
+                                for
+                                me)
                             </x-forms.button>
-                        @endif
+                        </div>
-                    </x-slot:actions>
+                        <div>
-                    <x-slot:explanation>
+                            <form wire:submit='selectExistingServer' class="flex flex-col w-full gap-4 lg:w-96">
-                        <p>Servers are the main building blocks, as they will host your applications, databases,
+                                <x-forms.select label="Existing servers" class="w-96" id='selectedExistingServer'>
-                            services, called resources. Any CPU intensive process will use the server's CPU where you
+                                    @foreach ($servers as $server)
-                            are deploying your resources.</p>
+                                        <option wire:key="{{ $loop->index }}" value="{{ $server->id }}">
-                        <p><x-highlighted text="Localhost" /> is the server where Coolify is running on. It is not
+                                            {{ $server->name }}</option>
-                            recommended to use one server
-                            for everything.</p>
-                        <p><x-highlighted text="A remote server" /> is a server reachable through SSH. It can be hosted
-                            at home, or from any cloud
-                            provider.</p>
-                    </x-slot:explanation>
-                </x-boarding-step>
-            @endif
-        </div>
-        <div>
-            @if ($state === 'private-key')
-                <x-boarding-step title="SSH Key">
-                    <x-slot:question>
-                        Do you have your own SSH Private Key?
-                    </x-slot:question>
-                    <x-slot:actions>
-                        <x-forms.button class="justify-center lg:w-64 box" wire:target="setPrivateKey('own')"
-                            wire:click="setPrivateKey('own')">Yes
-                        </x-forms.button>
-                        <x-forms.button class="justify-center lg:w-64 box" wire:target="setPrivateKey('create')"
-                            wire:click="setPrivateKey('create')">No (create one for me)
-                        </x-forms.button>
-                        @if (count($privateKeys) > 0)
-                            <form wire:submit='selectExistingPrivateKey' class="flex flex-col w-full gap-4 lg:pr-10">
-                                <x-forms.select label="Existing SSH Keys" id='selectedExistingPrivateKey'>
-                                    @foreach ($privateKeys as $privateKey)
-                                        <option wire:key="{{ $loop->index }}" value="{{ $privateKey->id }}">
-                                            {{ $privateKey->name }}</option>
                                     @endforeach
                                 </x-forms.select>
-                                <x-forms.button type="submit">Use this SSH Key</x-forms.button>
+                                <x-forms.button type="submit">Use this Server</x-forms.button>
+                            </form>
+                        </div>
+                    </div>
+                    @if (!$serverReachable)
+                        This server is not reachable with the following public key.
+                        <br /> <br />
+                        Please make sure you have the correct public key in your ~/.ssh/authorized_keys file for
+                        user
+                        'root' or skip the boarding process and add a new private key manually to Coolify and to the
+                        server.
+                        <x-forms.input readonly id="serverPublicKey"></x-forms.input>
+                        <x-forms.button class="w-64 box-boarding" wire:target="validateServer" wire:click="validateServer">Check
+                            again
+                        </x-forms.button>
+                    @endif
+                </x-slot:actions>
+                <x-slot:explanation>
+                    <p>Private Keys are used to connect to a remote server through a secure shell, called SSH.</p>
+                    <p>You can use your own private key, or you can let Coolify to create one for you.</p>
+                    <p>In both ways, you need to add the public version of your private key to the remote server's
+                        <code>~/.ssh/authorized_keys</code> file.
+                    </p>
+                </x-slot:explanation>
+            </x-boarding-step>
+        @elseif ($currentState === 'create-private-key')
+            <x-boarding-step title="Create Private Key">
+                <x-slot:question>
+                    Please let me know your key details.
+                </x-slot:question>
+                <x-slot:actions>
+                    <form wire:submit='savePrivateKey' class="flex flex-col w-full gap-4 lg:pr-10">
+                        <x-forms.input required placeholder="Choose a name for your Private Key. Could be anything."
+                            label="Name" id="privateKeyName" />
+                        <x-forms.input placeholder="Description, so others will know more about this."
+                            label="Description" id="privateKeyDescription" />
+                        <x-forms.textarea required placeholder="-----BEGIN OPENSSH PRIVATE KEY-----" label="Private Key"
+                            id="privateKey" />
+                        @if ($privateKeyType === 'create')
+                            <x-forms.textarea rows="7" readonly label="Public Key" id="publicKey" />
+                            <span class="font-bold dark:text-warning">ACTION REQUIRED: Copy the 'Public Key' to your
+                                server's
+                                ~/.ssh/authorized_keys
+                                file.</span>
+                        @endif
+                        <x-forms.button type="submit">Save</x-forms.button>
+                    </form>
+                </x-slot:actions>
+                <x-slot:explanation>
+                    <p>Private Keys are used to connect to a remote server through a secure shell, called SSH.</p>
+                    <p>You can use your own private key, or you can let Coolify to create one for you.</p>
+                    <p>In both ways, you need to add the public version of your private key to the remote server's
+                        <code>~/.ssh/authorized_keys</code> file.
+                    </p>
+                </x-slot:explanation>
+            </x-boarding-step>
+        @elseif ($currentState === 'create-server')
+            <x-boarding-step title="Create Server">
+                <x-slot:question>
+                    Please let me know your server details.
+                </x-slot:question>
+                <x-slot:actions>
+                    <form wire:submit='saveServer' class="flex flex-col w-full gap-4 lg:pr-10">
+                        <div class="flex flex-col gap-2 lg:flex-row">
+                            <x-forms.input required placeholder="Choose a name for your Server. Could be anything."
+                                label="Name" id="remoteServerName" />
+                            <x-forms.input placeholder="Description, so others will know more about this."
+                                label="Description" id="remoteServerDescription" />
+                        </div>
+                        <div class="flex flex-col gap-2 lg:flex-row ">
+                            <x-forms.input required placeholder="127.0.0.1" label="IP Address" id="remoteServerHost" />
+                            <x-forms.input required placeholder="Port number of your server. Default is 22."
+                                label="Port" id="remoteServerPort" />
+                            <x-forms.input required readonly
+                                placeholder="Username to connect to your server. Default is root." label="Username"
+                                id="remoteServerUser" />
+                        </div>
+                        <div class="lg:w-64">
+                            <x-forms.checkbox
+                                helper="If you are using Cloudflare Tunnels, enable this. It will proxy all ssh requests to your server through Cloudflare.<br><span class='dark:text-warning'>Coolify does not install/setup Cloudflare (cloudflared) on your server.</span>"
+                                id="isCloudflareTunnel" label="Cloudflare Tunnel" />
+                        </div>
+                        <x-forms.button type="submit">Continue</x-forms.button>
+                    </form>
+                </x-slot:actions>
+                <x-slot:explanation>
+                    <p>Username should be <x-highlighted text="root" /> for now. We are working on to use
+                        non-root users.</p>
+                </x-slot:explanation>
+            </x-boarding-step>
+        @elseif ($currentState === 'validate-server')
+            <x-boarding-step title="Validate & Configure Server">
+                <x-slot:question>
+                    I need to validate your server (connection, Docker Engine, etc) and configure if something is
+                    missing for me. Are you okay with this?
+                </x-slot:question>
+                <x-slot:actions>
+                    <x-slide-over closeWithX fullScreen>
+                        <x-slot:title>Validate & configure</x-slot:title>
+                        <x-slot:content>
+                            <livewire:server.validate-and-install :server="$this->createdServer" />
+                        </x-slot:content>
+                        <x-forms.button @click="slideOverOpen=true" class="w-full font-bold box-boarding lg:w-96"
+                            wire:click.prevent='installServer' isHighlighted>
+                            Let's do it!
+                        </x-forms.button>
+                    </x-slide-over>
+                </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: 22<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
+                            documentation</a>.</p>
+                </x-slot:explanation>
+            </x-boarding-step>
+        @elseif ($currentState === 'create-project')
+            <x-boarding-step title="Project">
+                <x-slot:question>
+                    @if (count($projects) > 0)
+                        You already have some projects. Do you want to use one of them or should I create a new one
+                        for
+                        you?
+                    @else
+                        Let's create an initial project for you. You can change all the details later on.
+                    @endif
+                </x-slot:question>
+                <x-slot:actions>
+                    <x-forms.button class="justify-center w-64 box-boarding" wire:click="createNewProject">Create new
+                        project!</x-forms.button>
+                    <div>
+                        @if (count($projects) > 0)
+                            <form wire:submit='selectExistingProject' class="flex flex-col w-full gap-4 lg:w-96">
+                                <x-forms.select label="Existing projects" class="w-96" id='selectedProject'>
+                                    @foreach ($projects as $project)
+                                        <option wire:key="{{ $loop->index }}" value="{{ $project->id }}">
+                                            {{ $project->name }}</option>
+                                    @endforeach
+                                </x-forms.select>
+                                <x-forms.button type="submit">Use this Project</x-forms.button>
                             </form>
                         @endif
-                    </x-slot:actions>
+                    </div>
-                    <x-slot:explanation>
+                </x-slot:actions>
-                        <p>SSH Keys are used to connect to a remote server through a secure shell, called SSH.</p>
+                <x-slot:explanation>
-                        <p>You can use your own ssh private key, or you can let Coolify to create one for you.</p>
+                    <p>Projects contain several resources combined into one virtual group. There are no
-                        <p>In both ways, you need to add the public version of your ssh private key to the remote
+                        limitations on the number of projects you can add.</p>
-                            server's
+                    <p>Each project should have at least one environment, this allows you to create a production &
-                            <code class="dark:text-warning">~/.ssh/authorized_keys</code> file.
+                        staging version of the same application, but grouped separately.</p>
-                        </p>
+                </x-slot:explanation>
-                    </x-slot:explanation>
+            </x-boarding-step>
-                </x-boarding-step>
+        @elseif ($currentState === 'create-resource')
-            @endif
+            <x-boarding-step title="Resources">
-        </div>
+                <x-slot:question>
-        <div>
+                    Let's go to the new resource page, where you can create your first resource.
-            @if ($state === 'select-existing-server')
+                </x-slot:question>
-                <x-boarding-step title="Select a server">
+                <x-slot:actions>
-                    <x-slot:question>
+                    <div class="items-center justify-center w-64 box-boarding" wire:click="showNewResource">Let's do
-                        There are already servers available for your Team. Do you want to use one of them?
+                        it!</div>
-                    </x-slot:question>
+                </x-slot:actions>
-                    <x-slot:actions>
+                <x-slot:explanation>
-                        <div class="flex flex-col gap-4">
+                    <p>A resource could be an application, a database or a service (like WordPress).</p>
-                            <div>
+                </x-slot:explanation>
-                                <x-forms.button class="justify-center w-64 box" wire:click="createNewServer">No (create
+            </x-boarding-step>
-                                    one
+        @endif
-                                    for
+    </div>
-                                    me)
+    <div class="flex flex-col justify-center gap-4 pt-4 lg:gap-2 lg:flex">
-                                </x-forms.button>
+        <div class="flex justify-center w-full gap-2">
-                            </div>
+            <div class="cursor-pointer hover:underline dark:hover:text-white" wire:click='skipBoarding'>Skip
-                            <div>
+                onboarding</div>
-                                <form wire:submit='selectExistingServer' class="flex flex-col w-full gap-4 lg:w-96">
+            <div class="cursor-pointer hover:underline dark:hover:text-white" wire:click='restartBoarding'>Restart
-                                    <x-forms.select label="Existing servers" class="w-96" id='selectedExistingServer'>
+                onboarding</div>
-                                        @foreach ($servers as $server)
-                                            <option wire:key="{{ $loop->index }}" value="{{ $server->id }}">
-                                                {{ $server->name }}</option>
-                                        @endforeach
-                                    </x-forms.select>
-                                    <x-forms.button type="submit">Use this Server</x-forms.button>
-                                </form>
-                            </div>
-                        </div>
-                        @if (!$serverReachable)
-                            This server is not reachable with the following public key.
-                            <br /> <br />
-                            Please make sure you have the correct public key in your ~/.ssh/authorized_keys file for
-                            user
-                            'root' or skip the boarding process and add a new private key manually to Coolify and to the
-                            server.
-                            <x-forms.input readonly id="serverPublicKey"></x-forms.input>
-                            <x-forms.button class="w-64 box" wire:target="validateServer"
-                                wire:click="validateServer">Check
-                                again
-                            </x-forms.button>
-                        @endif
-                    </x-slot:actions>
-                    <x-slot:explanation>
-                        <p>Private Keys are used to connect to a remote server through a secure shell, called SSH.</p>
-                        <p>You can use your own private key, or you can let Coolify to create one for you.</p>
-                        <p>In both ways, you need to add the public version of your private key to the remote server's
-                            <code>~/.ssh/authorized_keys</code> file.
-                        </p>
-                    </x-slot:explanation>
-                </x-boarding-step>
-            @endif
-        </div>
-        <div>
-            @if ($state === 'create-private-key')
-                <x-boarding-step title="Create Private Key">
-                    <x-slot:question>
-                        Please let me know your key details.
-                    </x-slot:question>
-                    <x-slot:actions>
-                        <form wire:submit='savePrivateKey' class="flex flex-col w-full gap-4 lg:pr-10">
-                            <x-forms.input required placeholder="Choose a name for your Private Key. Could be anything."
-                                label="Name" id="privateKeyName" />
-                            <x-forms.input placeholder="Description, so others will know more about this."
-                                label="Description" id="privateKeyDescription" />
-                            <x-forms.textarea required placeholder="-----BEGIN OPENSSH PRIVATE KEY-----"
-                                label="Private Key" id="privateKey" />
-                            @if ($privateKeyType === 'create')
-                                <x-forms.textarea rows="7" readonly label="Public Key" id="publicKey" />
-                                <span class="font-bold dark:text-warning">ACTION REQUIRED: Copy the 'Public Key' to your
-                                    server's
-                                    ~/.ssh/authorized_keys
-                                    file.</span>
-                            @endif
-                            <x-forms.button type="submit">Save</x-forms.button>
-                        </form>
-                    </x-slot:actions>
-                    <x-slot:explanation>
-                        <p>Private Keys are used to connect to a remote server through a secure shell, called SSH.</p>
-                        <p>You can use your own private key, or you can let Coolify to create one for you.</p>
-                        <p>In both ways, you need to add the public version of your private key to the remote server's
-                            <code>~/.ssh/authorized_keys</code> file.
-                        </p>
-                    </x-slot:explanation>
-                </x-boarding-step>
-            @endif
-        </div>
-        <div>
-            @if ($state === 'create-server')
-                <x-boarding-step title="Create Server">
-                    <x-slot:question>
-                        Please let me know your server details.
-                    </x-slot:question>
-                    <x-slot:actions>
-                        <form wire:submit='saveServer' class="flex flex-col w-full gap-4 lg:pr-10">
-                            <div class="flex flex-col gap-2 lg:flex-row">
-                                <x-forms.input required placeholder="Choose a name for your Server. Could be anything."
-                                    label="Name" id="remoteServerName" />
-                                <x-forms.input placeholder="Description, so others will know more about this."
-                                    label="Description" id="remoteServerDescription" />
-                            </div>
-                            <div class="flex flex-col gap-2 lg:flex-row ">
-                                <x-forms.input required placeholder="127.0.0.1" label="IP Address"
-                                    id="remoteServerHost" />
-                                <x-forms.input required placeholder="Port number of your server. Default is 22."
-                                    label="Port" id="remoteServerPort" />
-                                <x-forms.input required readonly
-                                    placeholder="Username to connect to your server. Default is root."
-                                    label="Username" id="remoteServerUser" />
-                            </div>
-                            <div class="lg:w-64">
-                                <x-forms.checkbox
-                                    helper="If you are using Cloudflare Tunnels, enable this. It will proxy all ssh requests to your server through Cloudflare.<br><span class='dark:text-warning'>Coolify does not install/setup Cloudflare (cloudflared) on your server.</span>"
-                                    id="isCloudflareTunnel" label="Cloudflare Tunnel" />
-                            </div>
-                            <x-forms.button type="submit">Continue</x-forms.button>
-                        </form>
-                    </x-slot:actions>
-                    <x-slot:explanation>
-                        <p>Username should be <x-highlighted text="root" /> for now. We are working on to use
-                            non-root users.</p>
-                    </x-slot:explanation>
-                </x-boarding-step>
-            @endif
-        </div>
-        <div>
-            @if ($state === 'validate-server')
-                <x-boarding-step title="Validate & Configure Server">
-                    <x-slot:question>
-                        I need to validate your server (connection, Docker Engine, etc) and configure if something is
-                        missing for me. Are you okay with this?
-                    </x-slot:question>
-                    <x-slot:actions>
-                        <x-slide-over closeWithX fullScreen>
-                            <x-slot:title>Validate & configure</x-slot:title>
-                            <x-slot:content>
-                                <livewire:server.validate-and-install :server="$this->createdServer" />
-                            </x-slot:content>
-                            <x-forms.button @click="slideOverOpen=true" class="w-full font-bold box lg:w-96"
-                                wire:click.prevent='installServer' isHighlighted>
-                                Let's do it!
-                            </x-forms.button>
-                        </x-slide-over>
-                    </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: 22<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
-                                documentation</a>.</p>
-                    </x-slot:explanation>
-                </x-boarding-step>
-            @endif
-        </div>
-        <div>
-            @if ($state === 'create-project')
-                <x-boarding-step title="Project">
-                    <x-slot:question>
-                        @if (count($projects) > 0)
-                            You already have some projects. Do you want to use one of them or should I create a new one
-                            for
-                            you?
-                        @else
-                            Let's create an initial project for you. You can change all the details later on.
-                        @endif
-                    </x-slot:question>
-                    <x-slot:actions>
-                        <x-forms.button class="justify-center w-64 box" wire:click="createNewProject">Create new
-                            project!</x-forms.button>
-                        <div>
-                            @if (count($projects) > 0)
-                                <form wire:submit='selectExistingProject' class="flex flex-col w-full gap-4 lg:w-96">
-                                    <x-forms.select label="Existing projects" class="w-96" id='selectedProject'>
-                                        @foreach ($projects as $project)
-                                            <option wire:key="{{ $loop->index }}" value="{{ $project->id }}">
-                                                {{ $project->name }}</option>
-                                        @endforeach
-                                    </x-forms.select>
-                                    <x-forms.button type="submit">Use this Project</x-forms.button>
-                                </form>
-                            @endif
-                        </div>
-                    </x-slot:actions>
-                    <x-slot:explanation>
-                        <p>Projects contain several resources combined into one virtual group. There are no
-                            limitations on the number of projects you can add.</p>
-                        <p>Each project should have at least one environment, this allows you to create a production &
-                            staging version of the same application, but grouped separately.</p>
-                    </x-slot:explanation>
-                </x-boarding-step>
-            @endif
-        </div>
-        <div>
-            @if ($state === 'create-resource')
-                <x-boarding-step title="Resources">
-                    <x-slot:question>
-                        Let's go to the new resource page, where you can create your first resource.
-                    </x-slot:question>
-                    <x-slot:actions>
-                        <div class="items-center justify-center w-64 box" wire:click="showNewResource">Let's do
-                            it!</div>
-                    </x-slot:actions>
-                    <x-slot:explanation>
-                        <p>A resource could be an application, a database or a service (like WordPress).</p>
-                    </x-slot:explanation>
-                </x-boarding-step>
-            @endif
-        </div>
-        <div class="flex flex-col justify-center gap-4 pt-4 lg:gap-2 lg:flex">
-            <div class="flex justify-center w-full gap-2">
-                <x-forms.button wire:click='skipBoarding'>Skip onboarding</x-forms.button>
-                <x-forms.button wire:click='restartBoarding'>Restart onboarding</x-forms.button>
-            </div>
-            <x-modal-input title="How can we help?">
-                <x-slot:content>
-                    <x-forms.button class="w-full" title="Send us feedback or get help!">
-                        Feedback
-                    </x-forms.button>
-                </x-slot:content>
-                <livewire:help />
-            </x-modal-input>
         </div>
+        <x-modal-input title="How can we help?">
+            <x-slot:content>
+                <div class="w-full text-center cursor-pointer hover:underline dark:hover:text-white"
+                    title="Send us feedback or get help!">
+                    Feedback
+                </div>
+            </x-slot:content>
+            <livewire:help />
+        </x-modal-input>
+    </div>
     </div>
 </section>

resources/views/livewire/dashboard.blade.php

@@ -21,21 +21,20 @@
             @foreach ($projects as $project)
                 <div class="gap-2 border border-transparent cursor-pointer box group">
                     @if (data_get($project, 'environments')->count() === 1)
-                        <a class="flex flex-col flex-1 mx-6 hover:no-underline"
+                        <a class="flex flex-col justify-center flex-1 mx-6"
                             href="{{ route('project.resource.index', ['project_uuid' => data_get($project, 'uuid'), 'environment_name' => data_get($project, 'environments.0.name', 'production')]) }}">
                             <div class="box-title">{{ $project->name }}</div>
-                            <div class="box-description">
+                            <div class="box-description"> {{ $project->description }}</div>
-                                {{ $project->description }}</div>
                         </a>
                     @else
-                        <a class="flex flex-col flex-1 mx-6 hover:no-underline"
+                        <a class="flex flex-col justify-center flex-1 mx-6"
                             href="{{ route('project.show', ['project_uuid' => data_get($project, 'uuid')]) }}">
                             <div class="box-title">{{ $project->name }}</div>
                             <div class="box-description">
                                 {{ $project->description }}</div>
                         </a>
                     @endif
-                    <div class="flex items-center justify-center gap-2 pt-4 pb-2 mr-4 lg:py-0 lg:justify-normal">
+                    <div class="flex items-center justify-center gap-2 pt-4 pb-2 mr-4 text-xs lg:py-0 lg:justify-normal">
                         <a class="hover:underline"
                             href="{{ route('project.resource.create', ['project_uuid' => data_get($project, 'uuid'), 'environment_name' => data_get($project, 'environments.0.name', 'production')]) }}">
                             <span class="p-2 font-bold">+
@@ -71,7 +70,7 @@
                         'border-transparent' => $server->settings->is_reachable,
                         'border-red-500' => !$server->settings->is_reachable,
                     ])>
-                    <div class="flex flex-col mx-6">
+                    <div class="flex flex-col justify-center mx-6">
                         <div class="box-title">
                             {{ $server->name }}
                         </div>
@@ -79,13 +78,13 @@
                             {{ $server->description }}</div>
                         <div class="flex gap-1 text-xs text-error">
                             @if (!$server->settings->is_reachable)
-                                <span>Not reachable</span>
+                                Not reachable
                             @endif
                             @if (!$server->settings->is_reachable && !$server->settings->is_usable)
                                 &
                             @endif
                             @if (!$server->settings->is_usable)
-                                <span>Not usable by Coolify</span>
+                                Not usable by Coolify
                             @endif
                         </div>
                     </div>
@@ -137,7 +136,7 @@
                             'dark:border-coolgray-300' => data_get($deployment, 'status') === 'queued',
                             'border-yellow-500' => data_get($deployment, 'status') === 'in_progress',
                         ])>
-                            <div class="flex flex-col mx-6">
+                            <div class="flex flex-col justify-center mx-6">
                                 <div class="box-title">
                                     {{ data_get($deployment, 'application_name') }}
                                 </div>

resources/views/livewire/layout-popups.blade.php

@@ -20,8 +20,8 @@
             <x-slot:description>
                 <span>Please
                     consider donating on <a href="https://github.com/sponsors/coollabsio"
-                        class="text-xs dark:text-white underline">GitHub</a> or <a href="https://opencollective.com/coollabsio"
+                        class="text-xs underline dark:text-white">GitHub</a> or <a href="https://opencollective.com/coollabsio"
-                        class="text-xs dark:text-white underline">OpenCollective</a>.<br><br></span>
+                        class="text-xs underline dark:text-white">OpenCollective</a>.<br><br></span>
                 <span>It enables us to keep creating features without paywalls, ensuring our work remains free and
                     open.</span>
             </x-slot:description>
@@ -35,7 +35,7 @@
             <div><span class="font-bold text-red-500">WARNING:</span> The number of active servers exceeds the limit
                 covered by your payment. If not resolved, some of your servers <span class="font-bold text-red-500">will
                     be deactivated</span>. Visit <a href="{{ route('subscription.show') }}"
-                    class="dark:text-white underline">/subscription</a> to update your subscription or remove some servers.
+                    class="underline dark:text-white">/subscription</a> to update your subscription or remove some servers.
             </div>
         </x-banner>
     @endif
@@ -57,7 +57,7 @@
                     highly recommended to enable at least
                     one
                     notification channel to receive important alerts.<br>Visit <a
-                        href="{{ route('notifications.email') }}" class="dark:text-white underline">/notification</a> to
+                        href="{{ route('notifications.email') }}" class="underline dark:text-white">/notification</a> to
                     enable notifications.</span>
         </x-slot:description>
         <x-slot:button-text @click="disableNotification()">

resources/views/livewire/profile/index.blade.php

@@ -18,8 +18,10 @@
         </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">
             <x-forms.input id="new_password" label="New Password" required type="password" />
             <x-forms.input id="new_password_confirmation" label="New Password Again" required type="password" />
+            </div>
         </div>
     </form>
     <h2 class="py-4">Two-factor Authentication</h2>

resources/views/livewire/project/application/general.blade.php

@@ -51,7 +51,7 @@
                                 helper="WARNING: Advanced use cases only. Your docker compose file will be deployed as-is. Nothing is modified by Coolify. You need to configure the proxy parts. More info in the <a href='https://coolify.io/docs/docker/compose#raw-docker-compose-deployment'>documentation.</a>" />
                         </div>
                         @if (count($parsedServices) > 0 && !$application->settings->is_raw_compose_deployment_enabled)
-                        <h3>Domains</h3>
+                            <h3>Domains</h3>
                             @foreach (data_get($parsedServices, 'services') as $serviceName => $service)
                                 @if (!isDatabaseImage(data_get($service, 'image')))
                                     <div class="flex items-end gap-2">
@@ -78,13 +78,13 @@
                     </x-forms.button>
                 </div>
             @endif
+
             @if ($application->build_pack !== 'dockercompose')
                 <div class="flex items-center gap-2 pt-8">
                     <h3>Docker Registry</h3>
                     @if ($application->build_pack !== 'dockerimage' && !$application->destination->server->isSwarm())
                         <x-helper
-                            helper='Push the built image to a docker registry. More info <a class="underline"
+                            helper="Push the built image to a docker registry. More info <a class='underline' href='https://coolify.io/docs/docker/registry' target='_blank'>here</a>." />
-                href="https://coolify.io/docs/docker/registry" target="_blank">here</a>' />
                     @endif
                 </div>
                 @if ($application->destination->server->isSwarm())

resources/views/livewire/project/application/rollback.blade.php

@@ -9,7 +9,7 @@
         <div class="flex flex-wrap">
             @forelse ($images as $image)
                 <div class="w-2/4 p-2">
-                    <div class="rounded shadow-lg bg-coolgray-100">
+                    <div class="bg-white border rounded dark:border-bg-black dark:bg-coolgray-100">
                         <div class="p-2">
                             <div class="">
                                 @if (data_get($image, 'is_current'))

resources/views/livewire/project/environment-edit.blade.php

@@ -48,7 +48,7 @@
             <livewire:project.shared.environment-variable.add />
         </x-modal-input>
     </div>
-    <div class="flex items-center gap-2 pb-4">You can use these variables anywhere with <span class="dark:text-warning">@{{environment.VARIABLENAME}}</span><x-helper
+    <div class="flex items-center gap-2 pb-4">You can use these variables anywhere with <span class="dark:text-warning text-coollabs">@{{environment.VARIABLENAME}}</span><x-helper
             helper="More info <a class='underline dark:text-white' href='https://coolify.io/docs/environment-variables#shared-variables' target='_blank'>here</a>."></x-helper>
     </div>
     <div class="flex flex-col gap-2">

resources/views/livewire/project/index.blade.php

@@ -10,13 +10,13 @@
         @forelse ($projects as $project)
             <div class="box group" x-data
                 x-on:click="goto('{{ $project->uuid }}')">
-                <a class="flex flex-col flex-1 mx-6 hover:no-underline"
+                <a class="flex flex-col justify-center flex-1 mx-6"
                     href="{{ route('project.show', ['project_uuid' => data_get($project, 'uuid')]) }}">
                     <div class="box-title">{{ $project->name }}</div>
                     <div class="box-description ">
                         {{ $project->description }}</div>
                 </a>
-                <div class="flex items-center">
+                <div class="flex items-center text-xs">
                     <a class="mx-4 font-bold hover:underline"
                         href="{{ route('project.edit', ['project_uuid' => data_get($project, 'uuid')]) }}">
                         Settings

resources/views/livewire/project/new/docker-compose.blade.php

@@ -6,16 +6,7 @@
             <h2>Docker Compose</h2>
             <x-forms.button type="submit">Save</x-forms.button>
         </div>
-        <x-forms.textarea label="Docker Compose file"
+        <x-forms.textarea label="Docker Compose file" rows="20" id="dockerComposeRaw"
-            helper="
-    You can use these variables in your Docker Compose file and Coolify will generate default values or replace them with the values you set on the UI forms.<br>
-    <br>
-    - SERVICE_FQDN_*: FQDN - could be changeable from the UI. (example: SERVICE_FQDN_GHOST)<br>
-    - SERVICE_URL_*: URL parsed from FQDN - could be changeable from the UI. (example: SERVICE_URL_GHOST)<br>
-    - SERVICE_BASE64_64_*: Generated 'base64' string with length of '64' (example: SERVICE_BASE64_64_GHOST, to generate 32 bit: SERVICE_BASE64_32_GHOST)<br>
-    - SERVICE_USER_*: Generated user (example: SERVICE_USER_MYSQL)<br>
-    - SERVICE_PASSWORD_*: Generated password (example: SERVICE_PASSWORD_MYSQL)<br>"
-            rows="20" id="dockerComposeRaw"
             placeholder='services:
   ghost:
     documentation: https://ghost.org/docs/config
@@ -44,6 +35,5 @@
       - MYSQL_DATABASE=${MYSQL_DATABASE}
       - MYSQL_ROOT_PASSWORD=${SERVICE_PASSWORD_MYSQL_ROOT}
 '></x-forms.textarea>
-        {{-- <x-forms.textarea label="Environment File" rows="20" id="envFile"></x-forms.textarea> --}}
     </form>
 </div>

resources/views/livewire/project/shared/destination.blade.php

@@ -3,7 +3,7 @@
     <div class="">Server related configurations.</div>
     <div class="grid grid-cols-1 gap-4 py-4">
         <div class="flex gap-2">
-            <div class="relative flex flex-col bg-white cursor-default dark:text-white box-without-bg dark:bg-coolgray-100 w-96">
+            <div class="relative flex flex-col bg-white border cursor-default dark:text-white box-without-bg dark:bg-coolgray-100 w-96 dark:border-black">
                 <div class="text-xl font-bold">Primary Server</div>
                 @if (str($resource->realStatus())->startsWith('running'))
                     <div title="{{ $resource->realStatus() }}" class="absolute bg-success -top-1 -left-1 badge ">

resources/views/livewire/project/shared/environment-variable/show.blade.php

@@ -1,5 +1,6 @@
 <div>
-    <form wire:submit='submit' class="flex flex-col items-center gap-4 p-4 border lg:items-start dark:border-coolgray-300">
+    <form wire:submit='submit'
+        class="flex flex-col items-center gap-4 p-4 bg-white border lg:items-start dark:border-coolgray-300">
         @if ($isLocked)
             <div class="flex flex-1 w-full gap-2">
                 <x-forms.input disabled id="env.key" />
@@ -12,7 +13,7 @@
                 </svg>
                 <x-modal-confirmation isErrorButton buttonTitle="Delete">
                     You will delete environment variable <span
-                        class="font-bold dark:text-warning">{{ $env->key }}</span>.
+                        class="font-bold dark:text-warning text-coollabs">{{ $env->key }}</span>.
                 </x-modal-confirmation>
             </div>
         @else
@@ -39,9 +40,15 @@
                 </div>
             @endif
             <div class="flex flex-col w-full gap-2 lg:flex-row">
-                @if ($type !== 'service' && !$isSharedVariable)
+                @if ($type === 'service')
+                    <x-forms.checkbox instantSave id="env.is_build_time" label="Build Variable?" />
+                @else
+                    @if ($env->is_shared)
+                        <x-forms.checkbox instantSave id="env.is_build_time" label="Build Variable?" />
+                    @else
                     <x-forms.checkbox instantSave id="env.is_multiline" label="Is Multiline?" />
                     <x-forms.checkbox instantSave id="env.is_build_time" label="Build Variable?" />
+                    @endif
                 @endif
                 <div class="flex-1"></div>
                 @if ($isDisabled)

resources/views/livewire/project/shared/resource-operations.blade.php

@@ -14,9 +14,9 @@
                             <x-modal-confirmation action="cloneTo({{ data_get($destination, 'id') }})">
                                 <x:slot name="content">
                                     <div class="box">
-                                        <div class="flex flex-col gap-2 ">
+                                        <div class="flex flex-col">
-                                            <div class="font-bold dark:text-white">{{ $server->name }}</div>
+                                            <div class="box-title">{{ $server->name }}</div>
-                                            <div>{{ $destination->name }}</div>
+                                            <div class="box-description">{{ $destination->name }}</div>
                                         </div>
                                     </div>
                                 </x:slot>
@@ -35,16 +35,16 @@
                 class="font-bold dark:text-warning">{{ $resource->environment->project->name }} /
                 {{ $resource->environment->name }}</span> environment.
         </div>
-        <div class="grid gap-4">
+        <div class="flex flex-wrap gap-2">
             @forelse ($projects as $project)
-                <div class="flex flex-row flex-wrap gap-2">
+                <div class="flex flex-wrap gap-2">
                     @foreach ($project->environments as $environment)
                         <x-modal-confirmation action="moveTo({{ data_get($environment, 'id') }})">
                             <x:slot name="content">
                                 <div class="box">
-                                    <div class="flex flex-col gap-2 ">
+                                    <div class="flex flex-col">
-                                        <div class="font-bold dark:text-white">{{ $project->name }}</div>
+                                        <div class="box-title">{{ $project->name }}</div>
-                                        <div><span class="dark:text-warning">{{ $environment->name }}</span> environment
+                                        <div class="box-description">environment: {{ $environment->name }}
                                         </div>
                                     </div>
                                 </div>

resources/views/livewire/project/show.blade.php

@@ -17,7 +17,7 @@
                     <div class="description">
                         {{ $environment->description }}</div>
                 </a>
-                <div class="flex items-center">
+                <div class="flex items-center text-xs">
                     <a class="mx-4 font-bold hover:underline"
                         href="{{ route('project.environment.edit', ['project_uuid' => data_get($project, 'uuid'), 'environment_name' => $environment->name]) }}">
                         Settings

resources/views/livewire/server/index.blade.php

@@ -18,7 +18,7 @@
                     'border-red-500' =>
                         !$server->settings->is_reachable || $server->settings->force_disabled,
                 ])>
-                <div class="flex flex-col mx-6">
+                <div class="flex flex-col justify-center mx-6">
                     <div class="font-bold dark:text-white">
                         {{ $server->name }}
                     </div>

resources/views/livewire/subscription/index.blade.php

@@ -1,38 +1,40 @@
-@if ($settings->is_resale_license_active)
+<div>
-    @if (auth()->user()->isAdminFromSession())
+    @if ($settings->is_resale_license_active)
-        <div>
+        @if (auth()->user()->isAdminFromSession())
-            <div class="flex gap-2">
+            <div>
-                <h1>Choose a Plan</h1>
+                <div class="flex gap-2">
-                @if (subscriptionProvider() === 'stripe' && $alreadySubscribed)
+                    <h1>Choose a Plan</h1>
-                    <x-forms.button wire:click='stripeCustomerPortal'>Manage My Subscription</x-forms.button>
+                    @if (subscriptionProvider() === 'stripe' && $alreadySubscribed)
+                        <x-forms.button wire:click='stripeCustomerPortal'>Manage My Subscription</x-forms.button>
+                    @endif
+                </div>
+                @if (request()->query->get('cancelled'))
+                    <div class="mb-6 rounded 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"
+                                d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                        </svg>
+                        <span>Something went wrong with your subscription. Please try again or contact
+                            support.</span>
+                    </div>
+                @endif
+
+                @if (config('subscription.provider') !== null)
+                    <livewire:subscription.pricing-plans />
                 @endif
             </div>
-            @if (request()->query->get('cancelled'))
+        @else
-                <div class="mb-6 rounded alert-error">
+            <div class="flex flex-col justify-center mx-10">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 stroke-current shrink-0" fill="none"
+                <div class="flex gap-2">
-                        viewBox="0 0 24 24">
+                    <h1>Subscription</h1>
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                            d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
-                    </svg>
-                    <span>Something went wrong with your subscription. Please try again or contact
-                        support.</span>
                 </div>
-            @endif
+                <div>You are not an admin or have been removed from this team. If this does not make sense, please <span
-
+                        class="underline cursor-pointer dark:text-white" wire:click="help">contact
-            @if (config('subscription.provider') !== null)
+                        us</span>.</div>
-                <livewire:subscription.pricing-plans />
-            @endif
-        </div>
-    @else
-        <div class="flex flex-col justify-center mx-10">
-            <div class="flex gap-2">
-                <h1>Subscription</h1>
             </div>
-            <div>You are not an admin or have been removed from this team. If this does not make sense, please <span
+        @endif
-                    class="dark:text-white underline cursor-pointer" wire:click="help">contact
+    @else
-                    us</span>.</div>
+        <div class="px-10">Resale license is not active. Please contact your instance admin.</div>
-        </div>
     @endif
-@else
+</div>
-    <div class="px-10">Resale license is not active. Please contact your instance admin.</div>
-@endif

resources/views/livewire/team-shared-variables-index.blade.php

@@ -7,7 +7,7 @@
         </x-modal-input>
     </div>
     <div class="flex items-center gap-2 pb-4">You can use these variables anywhere with <span
-            class="dark:text-warning">@{{ team.VARIABLENAME }}</span> <x-helper
+            class="dark:text-warning text-coollabs">@{{ team.VARIABLENAME }}</span> <x-helper
             helper="More info <a class='underline dark:text-white' href='https://coolify.io/docs/environment-variables#shared-variables' target='_blank'>here</a>."></x-helper>
     </div>
 

resources/views/livewire/team/member.blade.php

@@ -1,6 +1,6 @@
 <tr @class([
-    'dark:text-white bg-coolblack hover:bg-coolgray-100',
+    'dark:text-white text-black dark:bg-coolblack dark:hover:bg-coolgray-100',
-    'bg-coolgray-100' => $member->id == auth()->user()->id,
+    'dark:bg-coolgray-100 bg-neutral-200' => $member->id == auth()->user()->id,
 ])>
     <td class="px-5 py-4 text-sm whitespace-nowrap">
         {{ $member->name }}

resources/views/livewire/team/member/index.blade.php

@@ -7,7 +7,7 @@
             <div class="overflow-x-auto">
                 <div class="inline-block min-w-full">
                     <div class="overflow-hidden">
-                        <table class="min-w-full divide-y divide-coolgray-400">
+                        <table class="min-w-full divide-y dark:divide-coolgray-400 divide-neutral-400">
                             <thead>
                                 <tr>
                                     <th class="px-5 py-3 text-xs font-medium text-left uppercase">Name
@@ -17,7 +17,7 @@
                                     <th class="px-5 py-3 text-xs font-medium text-left uppercase">Actions</th>
                                 </tr>
                             </thead>
-                            <tbody class="divide-y divide-coolgray-400">
+                            <tbody class="divide-y dark:divide-coolgray-400 divide-neutral-200">
                                 @foreach (currentTeam()->members as $member)
                                     <livewire:team.member :member="$member" :wire:key="$member->id" />
                                 @endforeach

resources/views/livewire/team/storage/index.blade.php

@@ -12,10 +12,10 @@
         @forelse ($s3 as $storage)
             <div x-data x-on:click="goto('{{ $storage->uuid }}')" @class(['gap-2 border cursor-pointer box group border-transparent'])>
                 <div class="flex flex-col mx-6">
-                    <div class=" group-hover:dark:text-white">
+                    <div class="box-title">
                         {{ $storage->name }}
                     </div>
-                    <div class="text-xs group-hover:dark:text-white">
+                    <div class="box-description">
                         {{ $storage->description }}</div>
                 </div>
             </div>

resources/views/vendor/wire-elements-modal/modal.blade.php

@@ -1,45 +0,0 @@
-<div>
-    @isset($jsPath)
-        <script>
-            {!! file_get_contents($jsPath) !!}
-        </script>
-    @endisset
-    @isset($cssPath)
-        <style>
-            {!! file_get_contents($cssPath) !!}
-        </style>
-    @endisset
-
-    <div x-data="LivewireUIModal()" x-on:close.stop="setShowPropertyTo(false)"
-        x-on:keydown.escape.window="closeModalOnEscape()" x-show="show" class="fixed inset-0 overflow-y-auto z-[60]"
-        style="display: none;">
-        <div class="flex items-end justify-center min-h-screen px-4 pt-4 pb-10 text-center sm:block sm:p-0">
-            <div x-show="show" x-on:click="closeModalOnClickAway()" x-transition:enter="ease-out duration-300"
-                x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
-                x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100"
-                x-transition:leave-end="opacity-0" class="fixed inset-0 transition-all transform">
-                <div class="absolute inset-0 bg-black opacity-70"></div>
-            </div>
-
-            {{-- <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span> --}}
-
-            <div x-show="show && showActiveComponent" x-transition:enter="ease-out duration-300"
-                x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
-                x-transition:leave="ease-in duration-200"
-                x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
-                x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                x-bind:class="modalWidth"
-                class="w-full overflow-hidden text-left align-bottom transition-all transform sm:align-middle sm:w-full"
-                id="modal-container" x-trap.noscroll.inert="show && showActiveComponent" aria-modal="true">
-                @forelse($components as $id => $component)
-                    <div class="sm:mx-20 sm:my-8" x-show.immediate="activeComponent == '{{ $id }}'"
-                        x-ref="{{ $id }}" wire:key="{{ $id }}">
-                        @livewire($component['name'], $component['arguments'], key($id))
-                    </div>
-                @empty
-                @endforelse
-            </div>
-        </div>
-    </div>
-</div>

routes/web.php

@@ -26,10 +26,8 @@ use App\Livewire\Notifications\Telegram as NotificationTelegram;
 use App\Livewire\Notifications\Discord as NotificationDiscord;
 
 use App\Livewire\Team\Index as TeamIndex;
-use App\Livewire\Team\Create as TeamCreate;
 
 use App\Livewire\Team\Storage\Index as TeamStorageIndex;
-use App\Livewire\Team\Storage\Create as TeamStorageCreate;
 use App\Livewire\Team\Storage\Show as TeamStorageShow;
 use App\Livewire\Team\Member\Index as TeamMemberIndex;
 
@@ -58,11 +56,9 @@ use App\Livewire\Project\Shared\Logs;
 use App\Livewire\Project\Shared\ScheduledTask\Show as ScheduledTaskShow;
 
 use App\Livewire\Security\ApiTokens;
-use App\Livewire\Security\PrivateKey\Create as SecurityPrivateKeyCreate;
 use App\Livewire\Security\PrivateKey\Show as SecurityPrivateKeyShow;
 
 use App\Livewire\Server\Index as ServerIndex;
-use App\Livewire\Server\Create as ServerCreate;
 use App\Livewire\Server\Show as ServerShow;
 use App\Livewire\Server\Resources as ResourcesShow;
 

tailwind.config.js

@@ -15,7 +15,6 @@ const colors = {
 module.exports = {
     darkMode: "selector",
     content: [
-        './vendor/wire-elements/modal/resources/views/*.blade.php',
         './storage/framework/views/*.php',
         "./resources/**/*.blade.php",
         "./app/**/*.php",

versions.json

@@ -4,7 +4,7 @@
             "version": "3.12.36"
         },
         "v4": {
-            "version": "4.0.0-beta.242"
+            "version": "4.0.0-beta.244"
         }
     }
 }