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,7 +18,9 @@
             subscription is activated.<br> Please be patient.
         </div>
     @endif
-    <h3 class="pb-4">Projects</h3>
+
+    <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)
@@ -56,8 +58,10 @@
                 </div>
             </div>
         @endif
+    </section>
 
-    <h3 class="py-4">Servers</h3>
+    <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)
@@ -116,9 +120,12 @@
                 </div>
             @endif
         @endif
+    </section>
+
     @if ($servers->count() > 0 && $projects->count() > 0)
+        <section>
             <div class="flex items-center gap-2">
-            <h3 class="py-4">Deployments</h3>
+                <h3 class="pb-2">Deployments</h3>
                 @if (count($deployments_per_server) > 0)
                     <x-loading />
                 @endif
@@ -138,7 +145,7 @@
             </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>
+                    <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([
@@ -167,6 +174,7 @@
                     <div>No deployments running.</div>
                 @endforelse
             </div>
+        </section>
     @endif