Merge pull request coollabsio#1888 from coollabsio/next

v4.0.0-beta.244
raaghulr · Mar 26, 2024 · b7b2eca · b7b2eca
2 parents d162727 + dcaa2f4
commit b7b2eca
Show file tree

Hide file tree

Showing 48 changed files with 315 additions and 337 deletions.
diff --git a/.tinkerwell/snippets/DeleteUser.php b/.tinkerwell/snippets/DeleteUser.php
diff --git a/.tinkerwell/snippets/SendEmail.php b/.tinkerwell/snippets/SendEmail.php
diff --git a/config/sentry.php b/config/sentry.php
@@ -7,7 +7,7 @@
 
     // 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.243',
+    'release' => '4.0.0-beta.244',
     // When left empty or `null` the Laravel environment will be used
     'environment' => config('app.env'),
 

diff --git a/config/version.php b/config/version.php
@@ -1,3 +1,3 @@
 <?php
 
-return '4.0.0-beta.243';
+return '4.0.0-beta.244';
diff --git a/resources/css/app.css b/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 {

diff --git a/resources/views/components/boarding-step.blade.php b/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>

diff --git a/resources/views/components/dropdown.blade.php b/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 @@ class="inline-flex items-center justify-start pr-10 transition-colors focus:outl
     <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>

diff --git a/resources/views/components/external-link.blade.php b/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>

diff --git a/resources/views/components/forms/button.blade.php b/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>
diff --git a/resources/views/components/loading-on-button.blade.php b/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>
diff --git a/resources/views/components/modal-input.blade.php b/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>

diff --git a/resources/views/components/navbar.blade.php b/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">
-    <div class="flex w-full pt-6 pb-4 pl-3">
-        <div class="flex flex-col">
+<nav class="flex flex-col flex-1 pl-2 bg-white border-r dark:border-coolgray-200 dark:bg-base" x-data="{
+    init() {
+            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 />
@@ -111,8 +173,8 @@ class="{{ request()->is('security*') ? 'menu-item-active menu-item' : 'menu-item
                             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"
-                                    stroke-width="2">
+                                <g fill="none" stroke="currentColor" stroke-linecap="round"
+                                    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" />

diff --git a/resources/views/components/pricing-plans.blade.php b/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 @@ class="font-bold dark:text-warning">{{ config('constants.limits.trial_period') }
                     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 ">

diff --git a/resources/views/components/status/index.blade.php b/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" />

diff --git a/resources/views/components/version.blade.php b/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>