From 3b636ef0225e59ecdd89aba44a9ec54c44e51b9f Mon Sep 17 00:00:00 2001
From: Andras Bacsai <andras.bacsai@gmail.com>
Date: Tue, 16 May 2023 20:47:59 +0200
Subject: [PATCH] css sprinkle

---
 resources/css/app.css                         | 15 ++++--
 .../components/applications/navbar.blade.php  | 10 ++--
 .../views/components/inputs/button.blade.php  |  2 +-
 resources/views/components/layout.blade.php   |  2 +-
 resources/views/components/navbar.blade.php   | 12 ++---
 .../views/livewire/force-upgrade.blade.php    |  2 +-
 .../project/application/deploy.blade.php      |  2 +-
 .../environment-variable/add.blade.php        |  4 +-
 .../environment-variable/all.blade.php        | 11 ++---
 .../project/application/general.blade.php     |  8 ++--
 .../application/poll-deployment.blade.php     |  8 ++--
 .../views/livewire/server/form.blade.php      | 25 ++++++++++
 .../views/livewire/server/proxy.blade.php     | 10 ++--
 .../application/configuration.blade.php       | 18 +++----
 .../project/application/deployment.blade.php  |  2 +-
 .../project/application/deployments.blade.php |  2 +-
 resources/views/server/show.blade.php         | 48 +++----------------
 17 files changed, 87 insertions(+), 94 deletions(-)

diff --git a/resources/css/app.css b/resources/css/app.css
index 930542922..5806bf240 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -6,12 +6,15 @@ body {
     @apply bg-coolgray-100 text-white font-sans;
 }
 
+label {
+    @apply text-sm pb-2 font-bold tracking-wider;
+}
 input,
 textarea {
-    @apply border-none p-2 bg-coolgray-200 text-white disabled:text-neutral-600 read-only:text-neutral-600 read-only:select-none outline-none;
+    @apply border border-solid border-coolgray-500 rounded p-2 px-4 bg-transparent text-white disabled:text-neutral-600 read-only:text-neutral-600 read-only:select-none outline-none focus:bg-coolgray-200/50 transition-all hover:bg-coolgray-200/50;
 }
 select {
-    @apply border-none p-2 bg-coolgray-200 text-white disabled:text-neutral-600 read-only:select-none outline-none;
+    @apply border border-solid border-coolgray-400 rounded p-2 px-4 bg-transparent text-white disabled:text-neutral-600 read-only:select-none outline-none;
 }
 
 button {
@@ -45,6 +48,10 @@ h2 {
 h3 {
     @apply text-lg font-bold pb-4;
 }
-.box {
-    @apply flex items-center justify-center text-sm rounded cursor-pointer h-14 bg-coolgray-200 hover:bg-coollabs-100 p-2;
+a {
+    @apply m-2 hover:text-coollabs;
+}
+
+.box {
+    @apply flex items-center justify-center text-sm rounded cursor-pointer h-14 bg-coolgray-200 hover:bg-coollabs-100 hover:text-white p-2 hover:no-underline;
 }
diff --git a/resources/views/components/applications/navbar.blade.php b/resources/views/components/applications/navbar.blade.php
index e34d57df0..599b1e4ef 100644
--- a/resources/views/components/applications/navbar.blade.php
+++ b/resources/views/components/applications/navbar.blade.php
@@ -1,14 +1,11 @@
 <nav class="flex gap-4 py-2">
-    <a target="_blank" href="{{ $gitBranchLocation }}">
-        <x-inputs.button>Open on Git ↗️</x-inputs.button>
-    </a>
     <a
         href="{{ route('project.application.configuration', [
             'project_uuid' => Route::current()->parameters()['project_uuid'],
             'application_uuid' => Route::current()->parameters()['application_uuid'],
             'environment_name' => Route::current()->parameters()['environment_name'],
         ]) }}">
-        <x-inputs.button>Configuration</x-inputs.button>
+        Configuration
     </a>
     <a
         href="{{ route('project.application.deployments', [
@@ -16,7 +13,10 @@
             'application_uuid' => Route::current()->parameters()['application_uuid'],
             'environment_name' => Route::current()->parameters()['environment_name'],
         ]) }}">
-        <x-inputs.button>Deployments</x-inputs.button>
+        Deployments
+    </a>
+    <a target="_blank" href="{{ $gitBranchLocation }}">
+        Open on Git ↗️
     </a>
     <livewire:project.application.deploy :applicationId="$applicationId" />
 </nav>
diff --git a/resources/views/components/inputs/button.blade.php b/resources/views/components/inputs/button.blade.php
index 93dcace54..34d4dfab0 100644
--- a/resources/views/components/inputs/button.blade.php
+++ b/resources/views/components/inputs/button.blade.php
@@ -3,7 +3,7 @@
     'isBold' => false,
     'disabled' => null,
     'defaultClass' => 'text-white hover:bg-coollabs h-10 rounded transition-colors',
-    'defaultWarningClass' => 'text-white bg-red-500 hover:bg-red-600 h-10 rounded',
+    'defaultWarningClass' => 'text-red-500 hover:text-white hover:bg-red-600 h-10 rounded',
     'disabledClass' => 'text-neutral-400 h-10 rounded',
     'loadingClass' => 'text-black bg-green-500 h-10 rounded',
     'confirm' => null,
diff --git a/resources/views/components/layout.blade.php b/resources/views/components/layout.blade.php
index 54fc23500..bef871e9c 100644
--- a/resources/views/components/layout.blade.php
+++ b/resources/views/components/layout.blade.php
@@ -22,7 +22,7 @@
     @livewireStyles
 </head>
 
-<body>
+<body class="antialiased">
 
     @livewireScripts
 
diff --git a/resources/views/components/navbar.blade.php b/resources/views/components/navbar.blade.php
index 1d133c683..e97f36e46 100644
--- a/resources/views/components/navbar.blade.php
+++ b/resources/views/components/navbar.blade.php
@@ -3,20 +3,20 @@
         <div class="flex px-2 py-1">
             <div class="flex gap-2 text-sm">
                 <a href="/">
-                    <x-inputs.button>Home</x-inputs.button>
+                    Home
                 </a>
                 <a href="/command-center">
-                    <x-inputs.button>Command Center</x-inputs.button>
+                    Command Center
                 </a>
                 <a href="/profile">
-                    <x-inputs.button>Profile</x-inputs.button>
+                    Profile
                 </a>
                 <a href="/profile/team">
-                    <x-inputs.button>Team</x-inputs.button>
+                    Team
                 </a>
                 @if (auth()->user()->isRoot())
                     <a href="/settings">
-                        <x-inputs.button>Settings</x-inputs.button>
+                        Settings
                     </a>
                 @endif
             </div>
@@ -28,7 +28,7 @@
                 <livewire:force-upgrade />
                 <form action="/logout" method="POST">
                     @csrf
-                    <x-inputs.button type="submit">Logout</x-inputs.button>
+                    <button class="m-1 hover:underline" type="submit">Logout</button>
                 </form>
             </div>
         </div>
diff --git a/resources/views/livewire/force-upgrade.blade.php b/resources/views/livewire/force-upgrade.blade.php
index bcf75191a..caa322a8f 100644
--- a/resources/views/livewire/force-upgrade.blade.php
+++ b/resources/views/livewire/force-upgrade.blade.php
@@ -1,5 +1,5 @@
 <div>
     @if (auth()->user()->teams->contains(0))
-        <x-inputs.button wire:click='upgrade'>Force Upgrade</x-inputs.button>
+        <button wire:click='upgrade' class="m-1 hover:underline">Force Upgrade</button>
     @endif
 </div>
diff --git a/resources/views/livewire/project/application/deploy.blade.php b/resources/views/livewire/project/application/deploy.blade.php
index 6ad3f5a71..ae5e75e2d 100644
--- a/resources/views/livewire/project/application/deploy.blade.php
+++ b/resources/views/livewire/project/application/deploy.blade.php
@@ -3,7 +3,7 @@
     @if ($application->status === 'running')
         <x-inputs.button wire:click='start'>Rebuild</x-inputs.button>
         <x-inputs.button wire:click='forceRebuild'>Force Rebuild</x-inputs.button>
-        <x-inputs.button wire:click='stop'>Stop</x-inputs.button>
+        <x-inputs.button isWarning wire:click='stop'>Stop</x-inputs.button>
     @else
         <x-inputs.button wire:click='start'>Start</x-inputs.button>
         <x-inputs.button wire:click='forceRebuild'>Start (no cache)</x-inputs.button>
diff --git a/resources/views/livewire/project/application/environment-variable/add.blade.php b/resources/views/livewire/project/application/environment-variable/add.blade.php
index 7a85b80e4..23b0128cb 100644
--- a/resources/views/livewire/project/application/environment-variable/add.blade.php
+++ b/resources/views/livewire/project/application/environment-variable/add.blade.php
@@ -1,6 +1,6 @@
 <form wire:submit.prevent='submit' class="flex items-end gap-2 px-2">
-    <x-inputs.input noDirty id="key" label="Name" required />
-    <x-inputs.input noDirty id="value" label="Value" required />
+    <x-inputs.input noLabel noDirty id="key" label="Name" required />
+    <x-inputs.input noLabel noDirty id="value" label="Value" required />
     <div class="flex flex-col">
         <div class="flex items-center gap-2">
             <x-inputs.input noDirty type="checkbox" id="is_build_time" label="Build Variable?" />
diff --git a/resources/views/livewire/project/application/environment-variable/all.blade.php b/resources/views/livewire/project/application/environment-variable/all.blade.php
index 270efa283..a6b5aac26 100644
--- a/resources/views/livewire/project/application/environment-variable/all.blade.php
+++ b/resources/views/livewire/project/application/environment-variable/all.blade.php
@@ -1,11 +1,10 @@
 <div class="flex flex-col gap-2">
     <h3>Environment Variables</h3>
-    @forelse ($application->environment_variables as $env)
+    @foreach ($application->environment_variables as $env)
         <livewire:project.application.environment-variable.show wire:key="environment-{{ $env->id }}"
             :env="$env" />
-    @empty
-        <p>There are no environment variables for this application.</p>
-    @endforelse
-    <h4>Add new environment variable</h4>
-    <livewire:project.application.environment-variable.add />
+    @endforeach
+    <div class="pt-10">
+        <livewire:project.application.environment-variable.add />
+    </div>
 </div>
diff --git a/resources/views/livewire/project/application/general.blade.php b/resources/views/livewire/project/application/general.blade.php
index 55c065d75..3a9593365 100644
--- a/resources/views/livewire/project/application/general.blade.php
+++ b/resources/views/livewire/project/application/general.blade.php
@@ -1,9 +1,9 @@
 <div>
     <h3>General</h3>
     <form wire:submit.prevent='submit' class="flex flex-col">
-        <div class="flex flex-col gap-2">
+        <div class="flex flex-col gap-2 pb-4">
             <x-inputs.input id="application.name" label="Name" required />
-            <x-inputs.input id="application.fqdn" label="FQDN" />
+            <x-inputs.input id="application.fqdn" label="Domains" />
             <x-inputs.input id="application.install_command" label="Install Command" />
             <x-inputs.input id="application.build_command" label="Build Command" />
             <x-inputs.input id="application.start_command" label="Start Command" />
@@ -29,10 +29,9 @@
             @else
                 <x-inputs.input id="application.ports_exposes" label="Ports Exposes" required />
             @endif
-
             <x-inputs.input id="application.ports_mappings" label="Ports Mappings" />
         </div>
-        <x-inputs.button class="mx-auto mt-4 text-white bg-neutral-800 hover:bg-violet-600" type="submit">
+        <x-inputs.button isBold type="submit">
             Submit
         </x-inputs.button>
     </form>
@@ -47,6 +46,5 @@
         <x-inputs.input disabled instantSave type="checkbox" id="is_dual_cert" label="Dual Certs?" />
         <x-inputs.input disabled instantSave type="checkbox" id="is_custom_ssl" label="Is Custom SSL?" />
         <x-inputs.input disabled instantSave type="checkbox" id="is_http2" label="Is Http2?" />
-
     </div>
 </div>
diff --git a/resources/views/livewire/project/application/poll-deployment.blade.php b/resources/views/livewire/project/application/poll-deployment.blade.php
index 53a5987d6..fc19dc8a1 100644
--- a/resources/views/livewire/project/application/poll-deployment.blade.php
+++ b/resources/views/livewire/project/application/poll-deployment.blade.php
@@ -1,6 +1,4 @@
-<div>
-    <pre
-        style="width: 100%;overflow-y: scroll;"
-        @if ($isKeepAliveOn) wire:poll.750ms="polling" @endif
-    >{{ \App\Actions\CoolifyTask\RunRemoteProcess::decodeOutput($activity) }}</pre>
+<div
+    class="flex flex-col-reverse w-full overflow-y-auto border border-solid rounded border-coolgray-300 max-h-[32rem] p-4">
+    <pre @if ($isKeepAliveOn) wire:poll.750ms="polling" @endif>{{ \App\Actions\CoolifyTask\RunRemoteProcess::decodeOutput($activity) }}</pre>
 </div>
diff --git a/resources/views/livewire/server/form.blade.php b/resources/views/livewire/server/form.blade.php
index 47cbf8b8d..f7301568e 100644
--- a/resources/views/livewire/server/form.blade.php
+++ b/resources/views/livewire/server/form.blade.php
@@ -1,4 +1,5 @@
 <div x-data="{ deleteServer: false }">
+    <h3>General</h3>
     <x-naked-modal show="deleteServer" message='Are you sure you would like to delete this server?' />
     <form wire:submit.prevent='submit' class="flex flex-col">
         <div class="flex flex-col gap-2 xl:flex-row">
@@ -49,4 +50,28 @@
             @endisset
         </div>
     </form>
+    <div class="flex items-center gap-2 py-4">
+        <div class="font-bold">Private Key</div>
+        <a class="px-2"
+            href="{{ route('private-key.show', ['private_key_uuid' => data_get($server, 'privateKey.uuid')]) }}">
+            {{ data_get($server, 'privateKey.uuid') }}
+        </a>
+        <a href="{{ route('server.private-key', ['server_uuid' => $server->uuid]) }}">
+            <x-inputs.button isBold>Change</x-inputs.button>
+        </a>
+    </div>
+    <div class="flex items-center gap-2 py-4">
+        <div class="font-bold">Destinations</div>
+        <div>
+            @foreach ($server->standaloneDockers as $docker)
+                <a class="px-2"
+                    href="{{ route('destination.show', ['destination_uuid' => data_get($docker, 'uuid')]) }}">
+                    {{ data_get($docker, 'network') }}
+                </a>
+            @endforeach
+        </div>
+        <a href="{{ route('destination.new', ['server_id' => $server->id]) }}">
+            <x-inputs.button isBold>Add</x-inputs.button>
+        </a>
+    </div>
 </div>
diff --git a/resources/views/livewire/server/proxy.blade.php b/resources/views/livewire/server/proxy.blade.php
index 69a245c18..713662566 100644
--- a/resources/views/livewire/server/proxy.blade.php
+++ b/resources/views/livewire/server/proxy.blade.php
@@ -2,8 +2,8 @@
     <x-naked-modal show="stopProxy" action="stopProxy"
         message='Are you sure you would like to stop the proxy? All resources will be unavailable.' />
     @if ($server->settings->is_validated)
-        <div class="flex items-center gap-2">
-            <h3>Proxy</h3>
+        <div class="flex items-center gap-2 mb-4">
+            <h3 class="pb-0">Proxy</h3>
             <div>{{ $server->extra_attributes->proxy_status }}</div>
         </div>
 
@@ -35,15 +35,15 @@
                     @isset($proxy_settings)
                         <h3>Configuration</h3>
                         @if ($selectedProxy->value === 'TRAEFIK_V2')
-                            <h4>traefik.conf</h4>
                             <form wire:submit.prevent='saveConfiguration'>
-                                <x-inputs.input noDirty type="textarea" wire:model.defer="proxy_settings" rows="30" />
-                                <div class="pt-2">
+                                <div class="py-2 pb-8">
                                     <x-inputs.button isBold>Save</x-inputs.button>
                                     <x-inputs.button wire:click.prevent="resetProxy">
                                         Reset Configuration
                                     </x-inputs.button>
                                 </div>
+                                <h4>traefik.conf</h4>
+                                <x-inputs.input noDirty type="textarea" wire:model.defer="proxy_settings" rows="30" />
                             </form>
                         @endif
                     @endisset
diff --git a/resources/views/project/application/configuration.blade.php b/resources/views/project/application/configuration.blade.php
index e4e5a0c52..edd72a8a7 100644
--- a/resources/views/project/application/configuration.blade.php
+++ b/resources/views/project/application/configuration.blade.php
@@ -1,27 +1,27 @@
 <x-layout>
-    <h1>Configuration</h1>
     <x-applications.navbar :applicationId="$application->id" :gitBranchLocation="$application->gitBranchLocation" />
+    <h1 class="py-10">Configuration</h1>
     <div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }" class="flex pt-6">
-        <div class="flex flex-col gap-4 min-w-fit">
-            <a :class="activeTab === 'general' && 'text-purple-500'"
+        <div class="flex flex-col min-w-fit">
+            <a :class="activeTab === 'general' && 'text-coollabs-100'"
                 @click.prevent="activeTab = 'general'; window.location.hash = 'general'" href="#">General</a>
-            <a :class="activeTab === 'environment-variables' && 'text-purple-500'"
+            <a :class="activeTab === 'environment-variables' && 'text-coollabs-100'"
                 @click.prevent="activeTab = 'environment-variables'; window.location.hash = 'environment-variables'"
                 href="#">Environment
                 Variables</a>
-            <a :class="activeTab === 'source' && 'text-purple-500'"
+            <a :class="activeTab === 'source' && 'text-coollabs-100'"
                 @click.prevent="activeTab = 'source'; window.location.hash = 'source'" href="#">Source</a>
-            <a :class="activeTab === 'destination' && 'text-purple-500'"
+            <a :class="activeTab === 'destination' && 'text-coollabs-100'"
                 @click.prevent="activeTab = 'destination'; window.location.hash = 'destination'"
                 href="#">Destination
             </a>
-            <a :class="activeTab === 'storages' && 'text-purple-500'"
+            <a :class="activeTab === 'storages' && 'text-coollabs-100'"
                 @click.prevent="activeTab = 'storages'; window.location.hash = 'storages'" href="#">Storages
             </a>
-            <a :class="activeTab === 'revert' && 'text-purple-500'"
+            <a :class="activeTab === 'revert' && 'text-coollabs-100'"
                 @click.prevent="activeTab = 'revert'; window.location.hash = 'revert'" href="#">Revert
             </a>
-            {{-- <a :class="activeTab === 'previews' && 'text-purple-500'"
+            {{-- <a :class="activeTab === 'previews' && 'text-coollabs-100'"
                 @click.prevent="activeTab = 'previews'; window.location.hash = 'previews'" href="#">Previews
             </a> --}}
         </div>
diff --git a/resources/views/project/application/deployment.blade.php b/resources/views/project/application/deployment.blade.php
index 39be4e283..7e2b4b200 100644
--- a/resources/views/project/application/deployment.blade.php
+++ b/resources/views/project/application/deployment.blade.php
@@ -1,5 +1,5 @@
 <x-layout>
-    <h1>Deployment</h1>
     <x-applications.navbar :applicationId="$application->id" :gitBranchLocation="$application->gitBranchLocation" />
+    <h1 class="py-10">Deployment</h1>
     <livewire:project.application.poll-deployment :activity="$activity" :deployment_uuid="$deployment_uuid" />
 </x-layout>
diff --git a/resources/views/project/application/deployments.blade.php b/resources/views/project/application/deployments.blade.php
index 0714e23eb..ed9c09c86 100644
--- a/resources/views/project/application/deployments.blade.php
+++ b/resources/views/project/application/deployments.blade.php
@@ -1,6 +1,6 @@
 <x-layout>
-    <h1>Deployments</h1>
     <x-applications.navbar :applicationId="$application->id" :gitBranchLocation="$application->gitBranchLocation" />
+    <h1 class="py-10">Deployments</h1>
     <div class="pt-2">
         @forelse ($deployments as $deployment)
             <livewire:project.application.get-deployments :deployment_uuid="data_get($deployment->properties, 'type_uuid')" :created_at="data_get($deployment, 'created_at')" :status="data_get($deployment->properties, 'status')" />
diff --git a/resources/views/server/show.blade.php b/resources/views/server/show.blade.php
index 1e546c3fd..3e1a0fded 100644
--- a/resources/views/server/show.blade.php
+++ b/resources/views/server/show.blade.php
@@ -1,54 +1,20 @@
 <x-layout>
     <div class="text-3xl font-bold">Server</div>
-    <div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }">
-        <div class="flex gap-4">
+    <div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }" class="flex pt-6">
+        <div class="flex flex-col gap-4 min-w-fit">
             <a :class="activeTab === 'general' && 'text-purple-500'"
                 @click.prevent="activeTab = 'general'; window.location.hash = 'general'" href="#">General</a>
-            <a :class="activeTab === 'private-key' && 'text-purple-500'"
-                @click.prevent="activeTab = 'private-key'; window.location.hash = 'private-key'" href="#">Private
-                Key</a>
-            <a :class="activeTab === 'destinations' && 'text-purple-500'"
-                @click.prevent="activeTab = 'destinations'; window.location.hash = 'destinations'"
-                href="#">Destinations
-            </a>
             <a :class="activeTab === 'proxy' && 'text-purple-500'"
                 @click.prevent="activeTab = 'proxy'; window.location.hash = 'proxy'" href="#">Proxy
             </a>
         </div>
-        <div x-cloak x-show="activeTab === 'general'">
-            <h3>General Configurations</h3>
-            <livewire:server.form :server_id="$server->id" />
-        </div>
-        <div x-cloak x-show="activeTab === 'private-key'">
-            <div class="flex items-center gap-2">
-                <h3>Private Keys</h3>
-                <a href="{{ route('server.private-key', ['server_uuid' => $server->uuid]) }}">
-                    <x-inputs.button>Change</x-inputs.button>
-                </a>
+        <div class="w-full pl-8">
+            <div x-cloak x-show="activeTab === 'general'">
+                <livewire:server.form :server_id="$server->id" />
             </div>
-            <a href="{{ route('private-key.show', ['private_key_uuid' => data_get($server, 'privateKey.uuid')]) }}">
-                <x-inputs.button>{{ data_get($server, 'privateKey.uuid') }}</x-inputs.button>
-            </a>
-        </div>
-        <div x-cloak x-show="activeTab === 'destinations'">
-            <div class="flex items-center gap-2">
-                <h3>Destinations</h3>
-                <a href="{{ route('destination.new', ['server_id' => $server->id]) }}">
-                    <x-inputs.button>Add a new</x-inputs.button>
-                </a>
+            <div x-cloak x-show="activeTab === 'proxy'">
+                <livewire:server.proxy :server="$server" />
             </div>
-            @if ($server->standaloneDockers->count() > 0)
-                @foreach ($server->standaloneDockers as $docker)
-                    <a href="{{ route('destination.show', ['destination_uuid' => data_get($docker, 'uuid')]) }}">
-                        <x-inputs.button>{{ data_get($docker, 'network') }}</x-inputs.button>
-                    </a>
-                @endforeach
-            @else
-                <p>No destinations found</p>
-            @endif
-        </div>
-        <div x-cloak x-show="activeTab === 'proxy'">
-            <livewire:server.proxy :server="$server" />
         </div>
     </div>
 </x-layout>