From 86afa200cdb706221f56c0d3e473fe097c00554c Mon Sep 17 00:00:00 2001
From: Andras Bacsai <andras.bacsai@gmail.com>
Date: Sun, 14 May 2023 14:43:49 +0200
Subject: [PATCH] ui changes

---
 app/Http/Livewire/Server/Form.php             |  2 +-
 resources/css/app.css                         |  9 +--
 .../views/components/inputs/button.blade.php  | 14 +++--
 .../views/components/magic-bar.blade.php      |  2 +-
 resources/views/components/navbar.blade.php   | 60 ++++++++++---------
 .../views/livewire/activity-monitor.blade.php | 14 ++---
 .../views/livewire/run-command.blade.php      |  2 +-
 .../views/livewire/server/form.blade.php      | 29 ++++++---
 .../views/livewire/server/proxy.blade.php     | 12 ++--
 resources/views/server/show.blade.php         | 24 +++++---
 10 files changed, 97 insertions(+), 71 deletions(-)

diff --git a/app/Http/Livewire/Server/Form.php b/app/Http/Livewire/Server/Form.php
index 923006789..ed2fc38b4 100644
--- a/app/Http/Livewire/Server/Form.php
+++ b/app/Http/Livewire/Server/Form.php
@@ -32,7 +32,7 @@ class Form extends Component
 
         $this->emit('newMonitorActivity', $activity->id);
     }
-    public function checkServer()
+    public function validateServer()
     {
         try {
             $this->uptime = instantRemoteProcess(['uptime'], $this->server, false);
diff --git a/resources/css/app.css b/resources/css/app.css
index 7781ba274..19dd8f947 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -6,8 +6,9 @@ body {
     @apply bg-coolgray-100 text-white font-sans;
 }
 
-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  ;
+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;
 }
 select {
     @apply border-none p-2 bg-coolgray-200 text-white disabled:text-neutral-600 read-only:select-none outline-none;
@@ -20,11 +21,11 @@ button {
     @apply relative float-left;
 }
 .main-menu:after {
-    content: '/';
+    content: "/";
     @apply absolute right-0 top-0 text-neutral-400 px-2 pt-[0.3rem];
 }
 .magic-input {
-    @apply w-[25rem] rounded shadow outline-none focus:bg-neutral-700 text-white;
+    @apply w-[25rem] rounded outline-none bg-coolgray-400 focus:bg-neutral-700 text-white;
 }
 .magic-items {
     @apply absolute top-14 w-[25rem] bg-coolgray-200 border-b-2 border-r-2 border-l-2 border-solid border-coolgray-100 rounded-b;
diff --git a/resources/views/components/inputs/button.blade.php b/resources/views/components/inputs/button.blade.php
index f1b42b1e3..93dcace54 100644
--- a/resources/views/components/inputs/button.blade.php
+++ b/resources/views/components/inputs/button.blade.php
@@ -1,17 +1,21 @@
 @props([
     'isWarning' => null,
+    'isBold' => false,
     'disabled' => null,
-    'defaultClass' => 'text-white hover:bg-coollabs h-8 rounded transition-colors',
-    'defaultWarningClass' => 'text-white bg-red-500 hover:bg-red-600 h-8 rounded',
-    'disabledClass' => 'text-coolgray-200 h-8 rounded',
-    'loadingClass' => 'text-black bg-green-500 h-8 rounded',
+    'defaultClass' => 'text-white hover:bg-coollabs h-10 rounded transition-colors',
+    'defaultWarningClass' => 'text-white bg-red-500 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,
     'confirmAction' => null,
 ])
 <button {{ $attributes }} @class([
-    $defaultClass => !$confirm && !$isWarning && !$disabled,
+    $defaultClass => !$confirm && !$isWarning && !$disabled && !$isBold,
     $defaultWarningClass => ($confirm || $isWarning) && !$disabled,
     $disabledClass => $disabled,
+    $isBold => $isBold
+        ? 'bg-coollabs text-white hover:bg-coollabs-100 h-10 rounded transition-colors'
+        : '',
 ]) @if ($attributes->whereStartsWith('wire:click') && !$disabled)
     wire:target="{{ explode('(', $attributes->whereStartsWith('wire:click')->first())[0] }}"
     wire:loading.delay.class="{{ $loadingClass }}" wire:loading.delay.attr="disabled"
diff --git a/resources/views/components/magic-bar.blade.php b/resources/views/components/magic-bar.blade.php
index f657edb97..e1a78095a 100644
--- a/resources/views/components/magic-bar.blade.php
+++ b/resources/views/components/magic-bar.blade.php
@@ -1,4 +1,4 @@
-<div x-data="magicsearchbar" @slash.window="mainMenu = true" class="pt-2">
+<div x-data="magicsearchbar" @slash.window="mainMenu = true">
     {{-- Main --}}
     <template x-cloak x-if="isMainMenu">
         <div>
diff --git a/resources/views/components/navbar.blade.php b/resources/views/components/navbar.blade.php
index d4c74bb9c..614e62905 100644
--- a/resources/views/components/navbar.blade.php
+++ b/resources/views/components/navbar.blade.php
@@ -1,31 +1,33 @@
-<nav class="flex gap-2">
-    @auth
-        <div class="fixed flex gap-2 left-2 top-2">
-            <a href="/">
-                <x-inputs.button>Home</x-inputs.button>
-            </a>
-            <a href="/command-center">
-                <x-inputs.button>Command Center</x-inputs.button>
-            </a>
-            <a href="/profile">
-                <x-inputs.button>Profile</x-inputs.button>
-            </a>
-            @if (auth()->user()->isRoot())
-                <a href="/settings">
-                    <x-inputs.button>Settings</x-inputs.button>
+@auth
+    <nav class="bg-coolgray-200/75">
+        <div class="flex px-2 py-1">
+            <div class="flex gap-2">
+                <a href="/">
+                    <x-inputs.button>Home</x-inputs.button>
                 </a>
-            @endif
+                <a href="/command-center">
+                    <x-inputs.button>Command Center</x-inputs.button>
+                </a>
+                <a href="/profile">
+                    <x-inputs.button>Profile</x-inputs.button>
+                </a>
+                @if (auth()->user()->isRoot())
+                    <a href="/settings">
+                        <x-inputs.button>Settings</x-inputs.button>
+                    </a>
+                @endif
+            </div>
+            <div class="flex-1"></div>
+            <x-magic-bar />
+            <div class="flex-1"></div>
+            <div class="flex gap-2">
+                {{-- <livewire:check-update /> --}}
+                <livewire:force-upgrade />
+                <form action="/logout" method="POST">
+                    @csrf
+                    <x-inputs.button type="submit">Logout</x-inputs.button>
+                </form>
+            </div>
         </div>
-        <div class="flex-1"></div>
-        <x-magic-bar />
-        <div class="flex-1"></div>
-        <div class="fixed flex gap-2 right-2 top-2">
-            {{-- <livewire:check-update /> --}}
-            <livewire:force-upgrade />
-            <form action="/logout" method="POST">
-                @csrf
-                <x-inputs.button type="submit">Logout</x-inputs.button>
-            </form>
-        </div>
-    @endauth
-</nav>
+    </nav>
+@endauth
diff --git a/resources/views/livewire/activity-monitor.blade.php b/resources/views/livewire/activity-monitor.blade.php
index df632f398..92297f3f9 100644
--- a/resources/views/livewire/activity-monitor.blade.php
+++ b/resources/views/livewire/activity-monitor.blade.php
@@ -1,10 +1,10 @@
 <div>
-    <div
-        class="flex flex-col-reverse w-full overflow-y-auto border border-solid rounded border-coolgray-300 max-h-[32rem] p-4">
-        @if ($this->activity)
+    @if ($this->activity)
+        <div
+            class="flex flex-col-reverse w-full overflow-y-auto border border-solid rounded border-coolgray-300 max-h-[32rem] p-4">
             <pre class="whitespace-pre-wrap" @if ($isPollingActive) wire:poll.750ms="polling" @endif>{{ \App\Actions\CoolifyTask\RunRemoteProcess::decodeOutput($this->activity) }}</pre>
-        @else
-            <pre class="whitespace-pre-wrap">Output will be here...</pre>
-        @endif
-    </div>
+            {{-- @else
+            <pre class="whitespace-pre-wrap">Output will be here...</pre> --}}
+        </div>
+    @endif
 </div>
diff --git a/resources/views/livewire/run-command.blade.php b/resources/views/livewire/run-command.blade.php
index 611477527..dfd877272 100755
--- a/resources/views/livewire/run-command.blade.php
+++ b/resources/views/livewire/run-command.blade.php
@@ -10,7 +10,7 @@
                 @endif
             @endforeach
         </select>
-        <x-inputs.button type="submit">Run</x-inputs.button>
+        <x-inputs.button isBold type="submit">Run</x-inputs.button>
     </form>
     <div class="container w-full pt-10 mx-auto">
         <livewire:activity-monitor />
diff --git a/resources/views/livewire/server/form.blade.php b/resources/views/livewire/server/form.blade.php
index ddf6b5564..d47fe5a50 100644
--- a/resources/views/livewire/server/form.blade.php
+++ b/resources/views/livewire/server/form.blade.php
@@ -1,6 +1,23 @@
 <div x-data="{ deleteServer: false }">
     <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 pb-4">
+            <div class="flex items-center gap-2">
+                <div class="text-3xl font-bold">Server</div>
+                <x-inputs.button isBold type="submit">Submit</x-inputs.button>
+                <x-inputs.button isWarning x-on:click.prevent="deleteServer = true">
+                    Delete
+                </x-inputs.button>
+            </div>
+            <div>
+                @if ($server->settings->is_validated)
+                    <div class="text-green-400/90">Validated</div>
+                @else
+                    <div class="text-red-400/90">Not validated</div>
+                @endif
+            </div>
+        </div>
+
         <div class="flex flex-col gap-2 xl:flex-row">
             <div class="flex flex-col w-96">
                 <x-inputs.input id="server.name" label="Name" required />
@@ -18,15 +35,11 @@
                 @endif
             </div>
         </div>
-        <div class="flex">
-            <x-inputs.button type="submit">Submit</x-inputs.button>
-            <x-inputs.button wire:click.prevent='checkServer'>Check Server</x-inputs.button>
-            <x-inputs.button wire:click.prevent='installDocker'>Install Docker</x-inputs.button>
-            <x-inputs.button isWarning x-on:click.prevent="deleteServer = true">
-                Delete
-            </x-inputs.button>
+        <div class="flex gap-2">
+            <x-inputs.button isBold wire:click.prevent='validateServer'>Validate Server</x-inputs.button>
+            <x-inputs.button isBold wire:click.prevent='installDocker'>Install Docker</x-inputs.button>
+
         </div>
-        <x-inputs.input class="" disabled type="checkbox" id="server.settings.is_validated" label="Validated" />
     </form>
 
     @isset($uptime)
diff --git a/resources/views/livewire/server/proxy.blade.php b/resources/views/livewire/server/proxy.blade.php
index 6feb45043..2d6a6c07b 100644
--- a/resources/views/livewire/server/proxy.blade.php
+++ b/resources/views/livewire/server/proxy.blade.php
@@ -1,20 +1,20 @@
 <div>
-    <h2> Proxy </h2>
+    <h2>Proxy</h2>
 
-    @if($this->server->extra_attributes->proxy)
-        <div class="mt-6">
+    @if ($this->server->extra_attributes->proxy)
+        <div>
             <div>
-                Proxy type: {{ $this->server->extra_attributes->proxy  }}
+                Proxy type: {{ $this->server->extra_attributes->proxy }}
             </div>
 
             <div id="proxy_options" x-init="$wire.checkProxySettingsInSync()" class="relative w-fit">
 
                 {{-- Proxy is being checked against DB information --}}
-                @if(! $this->is_check_proxy_complete)
+                @if (!$this->is_check_proxy_complete)
                     @include('livewire.server._proxy.loading')
                 @endif
 
-                @if($this->is_check_proxy_complete && (! $this->is_proxy_settings_in_sync) )
+                @if ($this->is_check_proxy_complete && !$this->is_proxy_settings_in_sync)
                     @include('livewire.server._proxy.problems')
                 @endif
 
diff --git a/resources/views/server/show.blade.php b/resources/views/server/show.blade.php
index 24c70a2eb..06c1a434d 100644
--- a/resources/views/server/show.blade.php
+++ b/resources/views/server/show.blade.php
@@ -1,19 +1,25 @@
 <x-layout>
-    <h1>Server</h1>
     <livewire:server.form :server_id="$server->id" />
-    <h2>Private Key <a href="{{ route('server.private-key', ['server_uuid' => $server->uuid]) }}">
-            <x-inputs.button>Change</x-inputs.button>
+    <div class="flex items-center gap-2">
+        <h2>Private Key</h2>
+        <a href="{{ route('server.private-key', ['server_uuid' => $server->uuid]) }}">
+            <x-inputs.button isBold>Change</x-inputs.button>
         </a>
-    </h2>
+    </div>
     <p>{{ $server->privateKey->name }}</p>
-    <h2>Destinations <a href="{{ route('destination.new', ['server_id' => $server->id]) }}">
-            <x-inputs.button>New</x-inputs.button>
-        </a></h2>
-    @if ($server->standaloneDockers)
+    <div class="flex items-center gap-2">
+        <h2>Destinations</h2>
+        <a href="{{ route('destination.new', ['server_id' => $server->id]) }}">
+            <x-inputs.button isBold>New</x-inputs.button>
+        </a>
+    </div>
+    @if ($server->standaloneDockers->count() > 0)
         @foreach ($server->standaloneDockers as $docker)
             <p>Network: {{ data_get($docker, 'network') }}</p>
         @endforeach
+    @else
+        <p>No destinations found</p>
     @endif
 
-    <livewire:server.proxy :server="$server"/>
+    <livewire:server.proxy :server="$server" />
 </x-layout>