From fca18152169c67c5f54f51dc22b511e522dee4f0 Mon Sep 17 00:00:00 2001
From: Tim Koch <me@timkoch.dev>
Date: Sun, 27 Oct 2024 11:25:55 +0100
Subject: [PATCH 1/6] Apply tailwind shadow to .box class

Makes .box elements appear raised above the background.
Only works in light mode!
---
 resources/css/app.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/css/app.css b/resources/css/app.css
index 00a62a131..55d8d95f8 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -217,7 +217,7 @@ tr td:first-child {
 }
 
 .box {
-    @apply relative flex lg:flex-row flex-col p-2 transition-colors cursor-pointer min-h-[4rem] dark:bg-coolgray-100 bg-white border text-black dark:text-white hover:text-black border-neutral-200 dark:border-black hover:bg-neutral-100 dark:hover:bg-coollabs-100 dark:hover:text-white hover:no-underline;
+    @apply relative flex lg:flex-row flex-col p-2 transition-colors cursor-pointer min-h-[4rem] dark:bg-coolgray-100 shadow bg-white border text-black dark:text-white hover:text-black border-neutral-200 dark:border-black hover:bg-neutral-100 dark:hover:bg-coollabs-100 dark:hover:text-white hover:no-underline;
 }
 
 .box-boarding {

From a35e2f427bb077f0ab563c44e62de4eb21175b5b Mon Sep 17 00:00:00 2001
From: Tim Koch <me@timkoch.dev>
Date: Sun, 27 Oct 2024 12:10:07 +0100
Subject: [PATCH 2/6] Fix inconsistent navbar padding

"Coolify" had pl-3 while the SwitchTeam element and the menu items below had px-2
---
 resources/views/components/navbar.blade.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/views/components/navbar.blade.php b/resources/views/components/navbar.blade.php
index 93dd72f8e..460b9350b 100644
--- a/resources/views/components/navbar.blade.php
+++ b/resources/views/components/navbar.blade.php
@@ -46,7 +46,7 @@
             }
         }
 }">
-    <div class="flex pt-6 pb-4 pl-3">
+    <div class="flex pt-6 pb-4 pl-2">
         <div class="flex flex-col w-full">
             <div class="text-2xl font-bold tracking-wide dark:text-white">Coolify</div>
             <x-version />

From f073d01a5f819ad209f6d78ee3ccd7c5fa436113 Mon Sep 17 00:00:00 2001
From: Tim Koch <me@timkoch.dev>
Date: Sun, 27 Oct 2024 12:24:34 +0100
Subject: [PATCH 3/6] Give more space to navbar

Especially in full width and mobile view, the navbar looked cramped
because there was very little padding to the left end of the screen.
This commit adds horizontal padding to the navbar
and increases its width from 48 to 56 tailwind units.
---
 resources/views/components/navbar.blade.php | 2 +-
 resources/views/layouts/app.blade.php       | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/resources/views/components/navbar.blade.php b/resources/views/components/navbar.blade.php
index 460b9350b..2f908fc81 100644
--- a/resources/views/components/navbar.blade.php
+++ b/resources/views/components/navbar.blade.php
@@ -1,4 +1,4 @@
-<nav class="flex flex-col flex-1 bg-white border-r dark:border-coolgray-200 dark:bg-base" x-data="{
+<nav class="flex flex-col flex-1 px-2 bg-white border-r dark:border-coolgray-200 dark:bg-base" x-data="{
     switchWidth() {
             if (this.full === 'full') {
                 localStorage.setItem('pageWidth', 'center');
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index e0f044353..47ea71ecc 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -18,7 +18,7 @@
             <div class="relative z-50 lg:hidden" :class="open ? 'block' : 'hidden'" role="dialog" aria-modal="true">
                 <div class="fixed inset-0 bg-black/80"></div>
                 <div class="fixed inset-0 flex">
-                    <div class="relative flex flex-1 w-full mr-16 max-w-48 ">
+                    <div class="relative flex flex-1 w-full mr-16 max-w-56 ">
                         <div class="absolute top-0 flex justify-center w-16 pt-5 left-full">
                             <button type="button" class="-m-2.5 p-2.5" x-on:click="open = !open">
                                 <span class="sr-only">Close sidebar</span>
@@ -29,14 +29,14 @@
                             </button>
                         </div>
 
-                        <div class="flex flex-col pb-2 overflow-y-auto min-w-48 dark:bg-coolgray-100 gap-y-5 scrollbar">
+                        <div class="flex flex-col pb-2 overflow-y-auto min-w-56 dark:bg-coolgray-100 gap-y-5 scrollbar">
                             <x-navbar />
                         </div>
                     </div>
                 </div>
             </div>
 
-            <div class="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-48 lg:flex-col">
+            <div class="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-56 lg:flex-col">
                 <div class="flex flex-col overflow-y-auto grow gap-y-5 scrollbar">
                     <x-navbar />
                 </div>
@@ -52,7 +52,7 @@
                 </button>
             </div>
 
-            <main class="lg:pl-48">
+            <main class="lg:pl-56">
                 <div class="p-4 sm:px-6 lg:px-8 lg:py-6">
                     {{ $slot }}
                 </div>

From 1a668d6c46d8bb4913783ab6ce80091cb580d5cc Mon Sep 17 00:00:00 2001
From: Tim Koch <me@timkoch.dev>
Date: Tue, 29 Oct 2024 15:20:36 +0100
Subject: [PATCH 4/6] Make h1 text size even larger

This is to make it even easier to visually distringuish between h1 and other heading elements.
For example, on pages with a h1 heading and multiple section headings,
this makes it easier to understand the structure of the page subconciously.
---
 resources/css/app.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/css/app.css b/resources/css/app.css
index 55d8d95f8..0f4f19fb9 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -69,7 +69,7 @@ button[isHighlighted]:not(:disabled) {
 }
 
 h1 {
-    @apply text-2xl font-bold dark:text-white;
+    @apply text-3xl font-bold dark:text-white;
 }
 
 h2 {

From c3fc22479a71348d7d7983c3a11d52a23d860778 Mon Sep 17 00:00:00 2001
From: Tim Koch <me@timkoch.dev>
Date: Wed, 30 Oct 2024 08:39:14 +0100
Subject: [PATCH 5/6] Apply mb-12 to <section> elements

I think Coolify's design would benefit from a bit more space
between groups of content throughout the site.
HTML's section elements are a perfect fit to
a) semantically group related content and
b) add spacing/visual coherence to it at the same time
---
 resources/css/app.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/resources/css/app.css b/resources/css/app.css
index 0f4f19fb9..73f19de96 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -124,6 +124,10 @@ tr td:first-child {
     @apply pl-4 pr-3 font-bold sm:pl-6;
 }
 
+section {
+    @apply mb-12;
+}
+
 .alert-success {
     @apply flex items-center gap-2 text-success;
 }

From 23211c3d142453c431379048ed63a6c778f22a77 Mon Sep 17 00:00:00 2001
From: Tim Koch <me@timkoch.dev>
Date: Wed, 30 Oct 2024 08:39:47 +0100
Subject: [PATCH 6/6] Utilize <section> on dashboard page

---
 resources/views/livewire/dashboard.blade.php | 280 ++++++++++---------
 1 file changed, 144 insertions(+), 136 deletions(-)

diff --git a/resources/views/livewire/dashboard.blade.php b/resources/views/livewire/dashboard.blade.php
index 2e4f8fc99..2b9620e30 100644
--- a/resources/views/livewire/dashboard.blade.php
+++ b/resources/views/livewire/dashboard.blade.php
@@ -18,155 +18,163 @@
             subscription is activated.<br> Please be patient.
         </div>
     @endif
-    <h3 class="pb-4">Projects</h3>
-    @if ($projects->count() > 0)
-        <div class="grid grid-cols-1 gap-2 xl:grid-cols-2">
-            @foreach ($projects as $project)
-                <div class="gap-2 border border-transparent cursor-pointer box group"
-                    onclick="gotoProject('{{ $project->uuid }}','{{ $project->default_environment }}')">
-                    <div class="flex flex-1 mx-6">
-                        <div class="flex flex-col justify-center flex-1">
-                            <div class="box-title">{{ $project->name }}</div>
-                            <div class="box-description">
-                                {{ $project->description }}
+
+    <section>
+        <h3 class="pb-2">Projects</h3>
+        @if ($projects->count() > 0)
+            <div class="grid grid-cols-1 gap-2 xl:grid-cols-2">
+                @foreach ($projects as $project)
+                    <div class="gap-2 border border-transparent cursor-pointer box group"
+                        onclick="gotoProject('{{ $project->uuid }}','{{ $project->default_environment }}')">
+                        <div class="flex flex-1 mx-6">
+                            <div class="flex flex-col justify-center flex-1">
+                                <div class="box-title">{{ $project->name }}</div>
+                                <div class="box-description">
+                                    {{ $project->description }}
+                                </div>
+                            </div>
+                            <div class="flex items-center justify-center gap-2 text-xs font-bold">
+                                <a class="hover:underline"
+                                    href="{{ route('project.resource.create', ['project_uuid' => $project->uuid, 'environment_name' => data_get($project, 'default_environment', 'production')]) }}">
+                                    <span class="p-2 font-bold">+ Add Resource</span>
+                                </a>
+                                <a class="hover:underline"
+                                    href="{{ route('project.edit', ['project_uuid' => $project->uuid]) }}">
+                                    Settings
+                                </a>
                             </div>
                         </div>
-                        <div class="flex items-center justify-center gap-2 text-xs font-bold">
-                            <a class="hover:underline"
-                                href="{{ route('project.resource.create', ['project_uuid' => $project->uuid, 'environment_name' => data_get($project, 'default_environment', 'production')]) }}">
-                                <span class="p-2 font-bold">+ Add Resource</span>
-                            </a>
-                            <a class="hover:underline"
-                                href="{{ route('project.edit', ['project_uuid' => $project->uuid]) }}">
-                                Settings
-                            </a>
-                        </div>
                     </div>
-                </div>
-            @endforeach
-        </div>
-    @else
-        <div class="flex flex-col gap-1">
-            <div class='font-bold dark:text-warning'>No projects found.</div>
-            <div class="flex items-center gap-1">
-                <x-modal-input buttonTitle="Add" title="New Project">
-                    <livewire:project.add-empty />
-                </x-modal-input> your first project or
-                go to the <a class="underline dark:text-white" href="{{ route('onboarding') }}">onboarding</a> page.
-            </div>
-        </div>
-    @endif
-
-    <h3 class="py-4">Servers</h3>
-    @if ($servers->count() > 0)
-        <div class="grid grid-cols-1 gap-2 xl:grid-cols-2">
-            @foreach ($servers as $server)
-                <a href="{{ route('server.show', ['server_uuid' => data_get($server, 'uuid')]) }}"
-                    @class([
-                        'gap-2 border cursor-pointer box group',
-                        'border-transparent' => $server->settings->is_reachable,
-                        'border-red-500' => !$server->settings->is_reachable,
-                    ])>
-                    <div class="flex flex-col justify-center mx-6">
-                        <div class="box-title">
-                            {{ $server->name }}
-                        </div>
-                        <div class="box-description">
-                            {{ $server->description }}</div>
-                        <div class="flex gap-1 text-xs text-error">
-                            @if (!$server->settings->is_reachable)
-                                Not reachable
-                            @endif
-                            @if (!$server->settings->is_reachable && !$server->settings->is_usable)
-                                &
-                            @endif
-                            @if (!$server->settings->is_usable)
-                                Not usable by Coolify
-                            @endif
-                        </div>
-                    </div>
-                    <div class="flex-1"></div>
-                </a>
-            @endforeach
-        </div>
-    @else
-        @if ($private_keys->count() === 0)
-            <div class="flex flex-col gap-1">
-                <div class='font-bold dark:text-warning'>No private keys found.</div>
-                <div class="flex items-center gap-1">Before you can add your server, first <x-modal-input
-                        buttonTitle="add" title="New Private Key">
-                        <livewire:security.private-key.create from="server" />
-                    </x-modal-input> a private key
-                    or
-                    go to the <a class="underline dark:text-white" href="{{ route('onboarding') }}">onboarding</a>
-                    page.
-                </div>
+                @endforeach
             </div>
         @else
             <div class="flex flex-col gap-1">
-                <div class='font-bold dark:text-warning'>No servers found.</div>
+                <div class='font-bold dark:text-warning'>No projects found.</div>
                 <div class="flex items-center gap-1">
-                    <x-modal-input buttonTitle="Add" title="New Server" :closeOutside="false">
-                        <livewire:server.create />
-                    </x-modal-input> your first server
-                    or
-                    go to the <a class="underline dark:text-white" href="{{ route('onboarding') }}">onboarding</a>
-                    page.
+                    <x-modal-input buttonTitle="Add" title="New Project">
+                        <livewire:project.add-empty />
+                    </x-modal-input> your first project or
+                    go to the <a class="underline dark:text-white" href="{{ route('onboarding') }}">onboarding</a> page.
                 </div>
             </div>
         @endif
-    @endif
-    @if ($servers->count() > 0 && $projects->count() > 0)
-        <div class="flex items-center gap-2">
-            <h3 class="py-4">Deployments</h3>
-            @if (count($deployments_per_server) > 0)
-                <x-loading />
-            @endif
-            <x-modal-confirmation
-                title="Confirm Cleanup Queues?"
-                buttonTitle="Cleanup Queues"
-                isErrorButton
-                submitAction="cleanup_queue"
-                :actions="['All running Deployment Queues will be cleaned up.']"
-                :confirmWithText="false"
-                :confirmWithPassword="false"
-                step2ButtonText="Permanently Cleanup Deployment Queues"
-                :dispatchEvent="true"
-                dispatchEventType="success"
-                dispatchEventMessage="Deployment Queues cleanup started."
-            />
-        </div>
-        <div wire:poll.3000ms="get_deployments" class="grid grid-cols-1">
-            @forelse ($deployments_per_server as $server_name => $deployments)
-                <h4 class="py-4">{{ $server_name }}</h4>
-                <div class="grid grid-cols-1 gap-2 lg:grid-cols-3">
-                    @foreach ($deployments as $deployment)
-                        <a href="{{ data_get($deployment, 'deployment_url') }}" @class([
-                            'gap-2 cursor-pointer box group border-l-2 border-dotted',
-                            'dark:border-coolgray-300' => data_get($deployment, 'status') === 'queued',
-                            'border-yellow-500' => data_get($deployment, 'status') === 'in_progress',
+    </section>
+
+    <section>
+        <h3 class="pb-2">Servers</h3>
+        @if ($servers->count() > 0)
+            <div class="grid grid-cols-1 gap-2 xl:grid-cols-2">
+                @foreach ($servers as $server)
+                    <a href="{{ route('server.show', ['server_uuid' => data_get($server, 'uuid')]) }}"
+                        @class([
+                            'gap-2 border cursor-pointer box group',
+                            'border-transparent' => $server->settings->is_reachable,
+                            'border-red-500' => !$server->settings->is_reachable,
                         ])>
-                            <div class="flex flex-col justify-center mx-6">
-                                <div class="box-title">
-                                    {{ data_get($deployment, 'application_name') }}
-                                </div>
-                                @if (data_get($deployment, 'pull_request_id') !== 0)
-                                    <div class="box-description">
-                                        PR #{{ data_get($deployment, 'pull_request_id') }}
-                                    </div>
-                                @endif
-                                <div class="box-description">
-                                    {{ str(data_get($deployment, 'status'))->headline() }}
-                                </div>
+                        <div class="flex flex-col justify-center mx-6">
+                            <div class="box-title">
+                                {{ $server->name }}
                             </div>
-                            <div class="flex-1"></div>
-                        </a>
-                    @endforeach
+                            <div class="box-description">
+                                {{ $server->description }}</div>
+                            <div class="flex gap-1 text-xs text-error">
+                                @if (!$server->settings->is_reachable)
+                                    Not reachable
+                                @endif
+                                @if (!$server->settings->is_reachable && !$server->settings->is_usable)
+                                    &
+                                @endif
+                                @if (!$server->settings->is_usable)
+                                    Not usable by Coolify
+                                @endif
+                            </div>
+                        </div>
+                        <div class="flex-1"></div>
+                    </a>
+                @endforeach
+            </div>
+        @else
+            @if ($private_keys->count() === 0)
+                <div class="flex flex-col gap-1">
+                    <div class='font-bold dark:text-warning'>No private keys found.</div>
+                    <div class="flex items-center gap-1">Before you can add your server, first <x-modal-input
+                            buttonTitle="add" title="New Private Key">
+                            <livewire:security.private-key.create from="server" />
+                        </x-modal-input> a private key
+                        or
+                        go to the <a class="underline dark:text-white" href="{{ route('onboarding') }}">onboarding</a>
+                        page.
+                    </div>
                 </div>
-            @empty
-                <div>No deployments running.</div>
-            @endforelse
-        </div>
+            @else
+                <div class="flex flex-col gap-1">
+                    <div class='font-bold dark:text-warning'>No servers found.</div>
+                    <div class="flex items-center gap-1">
+                        <x-modal-input buttonTitle="Add" title="New Server" :closeOutside="false">
+                            <livewire:server.create />
+                        </x-modal-input> your first server
+                        or
+                        go to the <a class="underline dark:text-white" href="{{ route('onboarding') }}">onboarding</a>
+                        page.
+                    </div>
+                </div>
+            @endif
+        @endif
+    </section>
+
+    @if ($servers->count() > 0 && $projects->count() > 0)
+        <section>
+            <div class="flex items-center gap-2">
+                <h3 class="pb-2">Deployments</h3>
+                @if (count($deployments_per_server) > 0)
+                    <x-loading />
+                @endif
+                <x-modal-confirmation
+                    title="Confirm Cleanup Queues?"
+                    buttonTitle="Cleanup Queues"
+                    isErrorButton
+                    submitAction="cleanup_queue"
+                    :actions="['All running Deployment Queues will be cleaned up.']"
+                    :confirmWithText="false"
+                    :confirmWithPassword="false"
+                    step2ButtonText="Permanently Cleanup Deployment Queues"
+                    :dispatchEvent="true"
+                    dispatchEventType="success"
+                    dispatchEventMessage="Deployment Queues cleanup started."
+                />
+            </div>
+            <div wire:poll.3000ms="get_deployments" class="grid grid-cols-1">
+                @forelse ($deployments_per_server as $server_name => $deployments)
+                    <h4 class="pb-2">{{ $server_name }}</h4>
+                    <div class="grid grid-cols-1 gap-2 lg:grid-cols-3">
+                        @foreach ($deployments as $deployment)
+                            <a href="{{ data_get($deployment, 'deployment_url') }}" @class([
+                                'gap-2 cursor-pointer box group border-l-2 border-dotted',
+                                'dark:border-coolgray-300' => data_get($deployment, 'status') === 'queued',
+                                'border-yellow-500' => data_get($deployment, 'status') === 'in_progress',
+                            ])>
+                                <div class="flex flex-col justify-center mx-6">
+                                    <div class="box-title">
+                                        {{ data_get($deployment, 'application_name') }}
+                                    </div>
+                                    @if (data_get($deployment, 'pull_request_id') !== 0)
+                                        <div class="box-description">
+                                            PR #{{ data_get($deployment, 'pull_request_id') }}
+                                        </div>
+                                    @endif
+                                    <div class="box-description">
+                                        {{ str(data_get($deployment, 'status'))->headline() }}
+                                    </div>
+                                </div>
+                                <div class="flex-1"></div>
+                            </a>
+                        @endforeach
+                    </div>
+                @empty
+                    <div>No deployments running.</div>
+                @endforelse
+            </div>
+        </section>
     @endif