Merge pull request #4068 from TimKochDev/design

Design: More Space and Visual Hierarchy

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 {
@@ -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;
 }
@@ -217,7 +221,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 {

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');
@@ -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 />

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>

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)
+    <section>
-        <div class="grid grid-cols-1 gap-2 xl:grid-cols-2">
+        <h3 class="pb-2">Projects</h3>
-            @foreach ($projects as $project)
+        @if ($projects->count() > 0)
-                <div class="gap-2 border border-transparent cursor-pointer box group"
+            <div class="grid grid-cols-1 gap-2 xl:grid-cols-2">
-                    onclick="gotoProject('{{ $project->uuid }}','{{ $project->default_environment }}')">
+                @foreach ($projects as $project)
-                    <div class="flex flex-1 mx-6">
+                    <div class="gap-2 border border-transparent cursor-pointer box group"
-                        <div class="flex flex-col justify-center flex-1">
+                        onclick="gotoProject('{{ $project->uuid }}','{{ $project->default_environment }}')">
-                            <div class="box-title">{{ $project->name }}</div>
+                        <div class="flex flex-1 mx-6">
-                            <div class="box-description">
+                            <div class="flex flex-col justify-center flex-1">
-                                {{ $project->description }}
+                                <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
-            @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>
             </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">
+                    <x-modal-input buttonTitle="Add" title="New Project">
-                        <livewire:server.create />
+                        <livewire:project.add-empty />
-                    </x-modal-input> your first server
+                    </x-modal-input> your first project or
-                    or
+                    go to the <a class="underline dark:text-white" href="{{ route('onboarding') }}">onboarding</a> page.
-                    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)
+
-        <div class="flex items-center gap-2">
+    <section>
-            <h3 class="py-4">Deployments</h3>
+        <h3 class="pb-2">Servers</h3>
-            @if (count($deployments_per_server) > 0)
+        @if ($servers->count() > 0)
-                <x-loading />
+            <div class="grid grid-cols-1 gap-2 xl:grid-cols-2">
-            @endif
+                @foreach ($servers as $server)
-            <x-modal-confirmation
+                    <a href="{{ route('server.show', ['server_uuid' => data_get($server, 'uuid')]) }}"
-                title="Confirm Cleanup Queues?"
+                        @class([
-                buttonTitle="Cleanup Queues"
+                            'gap-2 border cursor-pointer box group',
-                isErrorButton
+                            'border-transparent' => $server->settings->is_reachable,
-                submitAction="cleanup_queue"
+                            'border-red-500' => !$server->settings->is_reachable,
-                :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',
                         ])>
-                            <div class="flex flex-col justify-center mx-6">
+                        <div class="flex flex-col justify-center mx-6">
-                                <div class="box-title">
+                            <div class="box-title">
-                                    {{ data_get($deployment, 'application_name') }}
+                                {{ $server->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>
+                            <div class="box-description">
-                        </a>
+                                {{ $server->description }}</div>
-                    @endforeach
+                            <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
+            @else
-                <div>No deployments running.</div>
+                <div class="flex flex-col gap-1">
-            @endforelse
+                    <div class='font-bold dark:text-warning'>No servers found.</div>
-        </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