From 5a631df2a253edc28e95f21edf0687b70131fdb8 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <andras.bacsai@gmail.com>
Date: Mon, 25 Mar 2024 19:07:59 +0100
Subject: [PATCH] uiuiuiui

---
 resources/css/app.css                         |  4 ++--
 .../views/components/external-link.blade.php  |  2 +-
 .../views/components/forms/button.blade.php   |  2 +-
 .../components/loading-on-button.blade.php    | 13 +++++++++++
 .../views/components/modal-input.blade.php    |  6 ++---
 resources/views/components/navbar.blade.php   | 20 ++++++++++++----
 .../views/components/pricing-plans.blade.php  |  6 ++---
 .../views/components/status/index.blade.php   |  2 +-
 resources/views/destination/all.blade.php     | 23 ++++++++++---------
 .../views/livewire/activity-monitor.blade.php |  2 +-
 .../views/livewire/profile/index.blade.php    |  2 ++
 .../project/application/general.blade.php     |  6 ++---
 .../project/application/rollback.blade.php    |  2 +-
 .../project/environment-edit.blade.php        |  2 +-
 .../views/livewire/project/index.blade.php    |  2 +-
 .../project/new/docker-compose.blade.php      | 12 +---------
 .../project/shared/destination.blade.php      |  2 +-
 .../environment-variable/show.blade.php       | 13 ++++++++---
 .../shared/resource-operations.blade.php      | 16 ++++++-------
 .../views/livewire/server/index.blade.php     |  2 +-
 .../team-shared-variables-index.blade.php     |  2 +-
 .../views/livewire/team/member.blade.php      |  4 ++--
 .../livewire/team/member/index.blade.php      |  4 ++--
 23 files changed, 86 insertions(+), 63 deletions(-)
 create mode 100644 resources/views/components/loading-on-button.blade.php

diff --git a/resources/css/app.css b/resources/css/app.css
index f03e7e850..7ea0bc99a 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -41,7 +41,7 @@ option {
 }
 
 .button {
-    @apply flex items-center justify-center gap-2 px-3 py-1 text-sm font-normal normal-case rounded cursor-pointer bg-neutral-200 hover:bg-neutral-300 dark:bg-coolgray-200 dark:text-white dark:hover:bg-coolgray-100 dark:hover:dark:text-white dark:disabled:bg-coolgray-100/40 dark:disabled:text-neutral-800 disabled:bg-neutral-100 disabled:text-neutral-200 disabled:cursor-not-allowed min-w-fit hover:dark:text-white focus:outline-1 ;
+    @apply flex items-center justify-center gap-2 px-3 py-1 text-sm font-bold text-white normal-case rounded cursor-pointer hover:bg-black/80 bg-coolgray-200 hover:bg-coolgray-100 hover:text-white disabled:bg-coolgray-100/10 disabled:cursor-not-allowed min-w-fit focus:outline-1 dark:disabled:text-neutral-600;
 }
 
 button[isError]:not(:disabled) {
@@ -94,7 +94,7 @@ tr {
 }
 
 tr th {
-    @apply px-3 py-3.5 text-left text-white;
+    @apply px-3 py-3.5 text-left text-black dark:text-white;
 }
 
 tr th:first-child {
diff --git a/resources/views/components/external-link.blade.php b/resources/views/components/external-link.blade.php
index 6991e0637..ddf03427f 100644
--- a/resources/views/components/external-link.blade.php
+++ b/resources/views/components/external-link.blade.php
@@ -1,4 +1,4 @@
-<svg class="inline-flex w-3 h-3 ml-1 text-black dark:text-white" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"
+<svg class="inline-flex w-3 h-3 ml-1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"
     focusable="false" viewBox="0 0 24 24">
     <path d="M0 0h24v24H0V0z" fill="none">
     </path>
diff --git a/resources/views/components/forms/button.blade.php b/resources/views/components/forms/button.blade.php
index 460e5ac26..3eafc26c6 100644
--- a/resources/views/components/forms/button.blade.php
+++ b/resources/views/components/forms/button.blade.php
@@ -10,6 +10,6 @@
 
     {{ $slot }}
     @if ($attributes->whereStartsWith('wire:click')->first())
-        <x-loading wire:target="{{ $attributes->whereStartsWith('wire:click')->first() }}" wire:loading.delay />
+        <x-loading-on-button wire:target="{{ $attributes->whereStartsWith('wire:click')->first() }}" wire:loading.delay />
     @endif
 </button>
diff --git a/resources/views/components/loading-on-button.blade.php b/resources/views/components/loading-on-button.blade.php
new file mode 100644
index 000000000..78a1f9726
--- /dev/null
+++ b/resources/views/components/loading-on-button.blade.php
@@ -0,0 +1,13 @@
+@props(['text' => null])
+<div class="inline-flex items-center justify-center" {{ $attributes }}>
+    @if (isset($text))
+        <div>{{ $text }}</div>
+    @endif
+    <svg class="w-4 h-4 mx-1 ml-3 text-warning animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none"
+        viewBox="0 0 24 24">
+        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+        <path class="opacity-75" fill="currentColor"
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
+        </path>
+    </svg>
+</div>
diff --git a/resources/views/components/modal-input.blade.php b/resources/views/components/modal-input.blade.php
index 8b56ce750..924f530de 100644
--- a/resources/views/components/modal-input.blade.php
+++ b/resources/views/components/modal-input.blade.php
@@ -33,18 +33,18 @@
                 x-transition:leave="ease-in duration-100"
                 x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
                 x-transition:leave-end="opacity-0 -translate-y-2 sm:scale-95"
-                class="relative w-full py-6 border rounded min-w-full lg:min-w-[36rem] max-w-fit bg-neutral-100 border-neutral-400 dark:bg-base px-7 dark:border-coolgray-300">
+                class="relative w-full py-6 border rounded drop-shadow min-w-full lg:min-w-[36rem] max-w-fit bg-white border-neutral-200 dark:bg-base px-6 dark:border-coolgray-300">
                 <div class="flex items-center justify-between pb-3">
                     <h3 class="text-2xl font-bold">{{ $title }}</h3>
                     <button @click="modalOpen=false"
-                        class="absolute top-0 right-0 flex items-center justify-center w-8 h-8 mt-5 mr-5 rounded-full dark:text-white hover:bg-coolgray-300">
+                        class="absolute top-0 right-0 flex items-center justify-center w-8 h-8 mt-5 mr-5 rounded-full dark:text-white hover:bg-neutral-100 dark:hover:bg-coolgray-300">
                         <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                             stroke-width="1.5" stroke="currentColor">
                             <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                         </svg>
                     </button>
                 </div>
-                <div class="relative flex items-center justify-center w-auto pb-4">
+                <div class="relative flex items-center justify-center w-auto">
                     {{ $slot }}
                 </div>
             </div>
diff --git a/resources/views/components/navbar.blade.php b/resources/views/components/navbar.blade.php
index 0c0561a32..e4119ba3b 100644
--- a/resources/views/components/navbar.blade.php
+++ b/resources/views/components/navbar.blade.php
@@ -1,10 +1,20 @@
 <nav class="flex flex-col flex-1 pl-2 bg-white border-r dark:border-coolgray-200 dark:bg-base">
-    <div class="flex w-full pt-6 pb-4 pl-3">
-        <div class="flex flex-col">
+    <div class="flex pt-6 pb-4 pl-3">
+        <div class="flex flex-col w-full">
             <div class="text-2xl font-bold tracking-wide dark:text-white">Coolify</div>
             <x-version />
         </div>
-        {{-- <button onclick="changeTheme()">Dark/light</button> --}}
+        <button class="flex items-start w-12 pt-1 transition-all duration-200" onclick="changeTheme()">
+            <svg class="hidden w-5 h-5 rounded dark:block fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                <path
+                    d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z" />
+            </svg>
+
+            <svg class="block w-5 h-5 dark:hidden" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                <path
+                    d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" />
+            </svg>
+        </button>
     </div>
     <div class="px-2 pt-2 pb-7">
         <livewire:switch-team />
@@ -111,8 +121,8 @@
                             class="{{ request()->is('tags*') ? 'menu-item-active menu-item' : 'menu-item' }}"
                             href="{{ route('tags.index') }}">
                             <svg class="icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                                <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
-                                    stroke-width="2">
+                                <g fill="none" stroke="currentColor" stroke-linecap="round"
+                                    stroke-linejoin="round" stroke-width="2">
                                     <path
                                         d="M3 8v4.172a2 2 0 0 0 .586 1.414l5.71 5.71a2.41 2.41 0 0 0 3.408 0l3.592-3.592a2.41 2.41 0 0 0 0-3.408l-5.71-5.71A2 2 0 0 0 9.172 6H5a2 2 0 0 0-2 2" />
                                     <path d="m18 19l1.592-1.592a4.82 4.82 0 0 0 0-6.816L15 6m-8 4h-.01" />
diff --git a/resources/views/components/pricing-plans.blade.php b/resources/views/components/pricing-plans.blade.php
index cbfe7acd3..ca71bf93e 100644
--- a/resources/views/components/pricing-plans.blade.php
+++ b/resources/views/components/pricing-plans.blade.php
@@ -8,13 +8,13 @@
                 class="grid grid-cols-2 p-1 text-xs font-semibold leading-5 text-center rounded dark:text-white gap-x-1 bg-white/5">
                 <legend class="sr-only">Payment frequency</legend>
                 <label class="cursor-pointer rounded px-2.5 py-1"
-                    :class="selected === 'monthly' ? 'bg-coollabs-100 dark:text-white' : ''">
+                    :class="selected === 'monthly' ? 'bg-coollabs-100 text-white' : ''">
                     <input type="radio" x-on:click="selected = 'monthly'" name="frequency" value="monthly"
                         class="sr-only">
                     <span>Monthly</span>
                 </label>
                 <label class="cursor-pointer rounded px-2.5 py-1"
-                    :class="selected === 'yearly' ? 'bg-coollabs-100 dark:text-white' : ''">
+                    :class="selected === 'yearly' ? 'bg-coollabs-100 text-white' : ''">
                     <input type="radio" x-on:click="selected = 'yearly'" name="frequency" value="annually"
                         class="sr-only">
                     <span>Annually</span>
@@ -27,7 +27,7 @@
                     days trial</span> included on all plans, without credit card details.</div>
         @endif
         <div x-show="selected === 'monthly'" class="flex justify-center h-10 mt-3 text-sm leading-6 ">
-            <div>Save <span class="font-bold dark:text-warning">10%</span> annually with the yearly plans.
+            <div>Save <span class="font-bold text-black dark:text-warning">10%</span> annually with the yearly plans.
             </div>
         </div>
         <div x-show="selected === 'yearly'" class="flex justify-center h-10 mt-3 text-sm leading-6 ">
diff --git a/resources/views/components/status/index.blade.php b/resources/views/components/status/index.blade.php
index dda8edac9..c8902cd45 100644
--- a/resources/views/components/status/index.blade.php
+++ b/resources/views/components/status/index.blade.php
@@ -8,7 +8,7 @@
     <x-status.stopped :status="$resource->status" />
 @endif
 @if (!str($resource->status)->contains('exited') && $showRefreshButton)
-    <button title="Refresh Status" wire:click='check_status(true)' class="mx-1 hover:fill-white fill-warning">
+    <button title="Refresh Status" wire:click='check_status(true)' class="mx-1 dark:hover:fill-white fill-coollabs dark:fill-warning">
         <svg class="w-4 h-4" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
             <path
                 d="M12 2a10.016 10.016 0 0 0-7 2.877V3a1 1 0 1 0-2 0v4.5a1 1 0 0 0 1 1h4.5a1 1 0 0 0 0-2H6.218A7.98 7.98 0 0 1 20 12a1 1 0 0 0 2 0A10.012 10.012 0 0 0 12 2zm7.989 13.5h-4.5a1 1 0 0 0 0 2h2.293A7.98 7.98 0 0 1 4 12a1 1 0 0 0-2 0a9.986 9.986 0 0 0 16.989 7.133V21a1 1 0 0 0 2 0v-4.5a1 1 0 0 0-1-1z" />
diff --git a/resources/views/destination/all.blade.php b/resources/views/destination/all.blade.php
index 0326d8a67..7de97eb46 100644
--- a/resources/views/destination/all.blade.php
+++ b/resources/views/destination/all.blade.php
@@ -8,29 +8,30 @@
         @endif
     </div>
     <div class="subtitle">Network endpoints to deploy your resources.</div>
-    <div class="grid gap-2 lg:grid-cols-2">
+    <div class="grid gap-2 lg:grid-cols-1">
         @forelse ($destinations as $destination)
             @if ($destination->getMorphClass() === 'App\Models\StandaloneDocker')
-                <a class="flex gap-4 text-center hover:no-underline box group"
+            <div class="box group">
+                <a class="flex flex-col mx-6"
                     href="{{ route('destination.show', ['destination_uuid' => data_get($destination, 'uuid')]) }}">
-                    <div class="group-hover:dark:text-white">
-                        <div>{{ $destination->name }}</div>
-                    </div>
+                    <div class="box-title">{{ $destination->name }}</div>
+                    <div class="box-description">server: {{ $destination->server->name }}</div>
                 </a>
+            </div>
             @endif
             @if ($destination->getMorphClass() === 'App\Models\SwarmDocker')
-                <a class="flex gap-4 text-center hover:no-underline box group"
+            <div class="box group">
+                <a class="flex flex-col mx-6"
                     href="{{ route('destination.show', ['destination_uuid' => data_get($destination, 'uuid')]) }}">
-
-                    <div class="group-hover:dark:text-white">
-                        <div>{{ $destination->name }}</div>
-                    </div>
+                    <div class="box-title">{{ $destination->name }}</div>
+                    <div class="box-description">server: {{ $destination->server->name }}</div>
                 </a>
+            </div>
             @endif
         @empty
             <div>
                 @if ($servers->count() === 0)
-                    <div> No servers found. Please add one first.</div>
+                    <div>No servers found. Please add one first.</div>
                 @else
                     <div>No destinations found.</div>
                 @endif
diff --git a/resources/views/livewire/activity-monitor.blade.php b/resources/views/livewire/activity-monitor.blade.php
index 8600bc4fc..08ed57458 100644
--- a/resources/views/livewire/activity-monitor.blade.php
+++ b/resources/views/livewire/activity-monitor.blade.php
@@ -10,7 +10,7 @@
             </div>
         @endif
         <div
-            class="flex flex-col-reverse w-full px-4 py-2 overflow-y-auto dark:text-white border border-solid rounded bg-coolgray-100 scrollbar border-coolgray-300 max-h-96">
+            class="flex flex-col-reverse w-full px-4 py-2 overflow-y-auto bg-white border border-solid rounded dark:text-white dark:bg-coolgray-100 scrollbar border-neutral-300 dark:border-coolgray-300 max-h-96">
             <pre class="font-mono whitespace-pre-wrap" @if ($isPollingActive) wire:poll.1000ms="polling" @endif>{{ RunRemoteProcess::decodeOutput($this->activity) }}</pre>
         </div>
     @else
diff --git a/resources/views/livewire/profile/index.blade.php b/resources/views/livewire/profile/index.blade.php
index 404268eb0..2c47a9b17 100644
--- a/resources/views/livewire/profile/index.blade.php
+++ b/resources/views/livewire/profile/index.blade.php
@@ -18,8 +18,10 @@
         </div>
         <div class="flex flex-col gap-2">
             <x-forms.input id="current_password" label="Current Password" required type="password" />
+            <div class="flex gap-2">
             <x-forms.input id="new_password" label="New Password" required type="password" />
             <x-forms.input id="new_password_confirmation" label="New Password Again" required type="password" />
+            </div>
         </div>
     </form>
     <h2 class="py-4">Two-factor Authentication</h2>
diff --git a/resources/views/livewire/project/application/general.blade.php b/resources/views/livewire/project/application/general.blade.php
index 4a2fe7ec8..413957e7d 100644
--- a/resources/views/livewire/project/application/general.blade.php
+++ b/resources/views/livewire/project/application/general.blade.php
@@ -51,7 +51,7 @@
                                 helper="WARNING: Advanced use cases only. Your docker compose file will be deployed as-is. Nothing is modified by Coolify. You need to configure the proxy parts. More info in the <a href='https://coolify.io/docs/docker/compose#raw-docker-compose-deployment'>documentation.</a>" />
                         </div>
                         @if (count($parsedServices) > 0 && !$application->settings->is_raw_compose_deployment_enabled)
-                        <h3>Domains</h3>
+                            <h3>Domains</h3>
                             @foreach (data_get($parsedServices, 'services') as $serviceName => $service)
                                 @if (!isDatabaseImage(data_get($service, 'image')))
                                     <div class="flex items-end gap-2">
@@ -78,13 +78,13 @@
                     </x-forms.button>
                 </div>
             @endif
+
             @if ($application->build_pack !== 'dockercompose')
                 <div class="flex items-center gap-2 pt-8">
                     <h3>Docker Registry</h3>
                     @if ($application->build_pack !== 'dockerimage' && !$application->destination->server->isSwarm())
                         <x-helper
-                            helper='Push the built image to a docker registry. More info <a class="underline"
-                href="https://coolify.io/docs/docker/registry" target="_blank">here</a>' />
+                            helper="Push the built image to a docker registry. More info <a class='underline' href='https://coolify.io/docs/docker/registry' target='_blank'>here</a>." />
                     @endif
                 </div>
                 @if ($application->destination->server->isSwarm())
diff --git a/resources/views/livewire/project/application/rollback.blade.php b/resources/views/livewire/project/application/rollback.blade.php
index 82c8c6cac..0e92fd574 100644
--- a/resources/views/livewire/project/application/rollback.blade.php
+++ b/resources/views/livewire/project/application/rollback.blade.php
@@ -9,7 +9,7 @@
         <div class="flex flex-wrap">
             @forelse ($images as $image)
                 <div class="w-2/4 p-2">
-                    <div class="rounded shadow-lg bg-coolgray-100">
+                    <div class="bg-white border rounded dark:border-bg-black dark:bg-coolgray-100">
                         <div class="p-2">
                             <div class="">
                                 @if (data_get($image, 'is_current'))
diff --git a/resources/views/livewire/project/environment-edit.blade.php b/resources/views/livewire/project/environment-edit.blade.php
index 59dd922ea..58f5b7c5c 100644
--- a/resources/views/livewire/project/environment-edit.blade.php
+++ b/resources/views/livewire/project/environment-edit.blade.php
@@ -48,7 +48,7 @@
             <livewire:project.shared.environment-variable.add />
         </x-modal-input>
     </div>
-    <div class="flex items-center gap-2 pb-4">You can use these variables anywhere with <span class="dark:text-warning">@{{environment.VARIABLENAME}}</span><x-helper
+    <div class="flex items-center gap-2 pb-4">You can use these variables anywhere with <span class="dark:text-warning text-coollabs">@{{environment.VARIABLENAME}}</span><x-helper
             helper="More info <a class='underline dark:text-white' href='https://coolify.io/docs/environment-variables#shared-variables' target='_blank'>here</a>."></x-helper>
     </div>
     <div class="flex flex-col gap-2">
diff --git a/resources/views/livewire/project/index.blade.php b/resources/views/livewire/project/index.blade.php
index 14ae5ca78..76c453f5c 100644
--- a/resources/views/livewire/project/index.blade.php
+++ b/resources/views/livewire/project/index.blade.php
@@ -10,7 +10,7 @@
         @forelse ($projects as $project)
             <div class="box group" x-data
                 x-on:click="goto('{{ $project->uuid }}')">
-                <a class="flex flex-col flex-1 mx-6 hover:no-underline"
+                <a class="flex flex-col justify-center flex-1 mx-6"
                     href="{{ route('project.show', ['project_uuid' => data_get($project, 'uuid')]) }}">
                     <div class="box-title">{{ $project->name }}</div>
                     <div class="box-description ">
diff --git a/resources/views/livewire/project/new/docker-compose.blade.php b/resources/views/livewire/project/new/docker-compose.blade.php
index 57cc7466e..4a72315ef 100644
--- a/resources/views/livewire/project/new/docker-compose.blade.php
+++ b/resources/views/livewire/project/new/docker-compose.blade.php
@@ -6,16 +6,7 @@
             <h2>Docker Compose</h2>
             <x-forms.button type="submit">Save</x-forms.button>
         </div>
-        <x-forms.textarea label="Docker Compose file"
-            helper="
-    You can use these variables in your Docker Compose file and Coolify will generate default values or replace them with the values you set on the UI forms.<br>
-    <br>
-    - SERVICE_FQDN_*: FQDN - could be changeable from the UI. (example: SERVICE_FQDN_GHOST)<br>
-    - SERVICE_URL_*: URL parsed from FQDN - could be changeable from the UI. (example: SERVICE_URL_GHOST)<br>
-    - SERVICE_BASE64_64_*: Generated 'base64' string with length of '64' (example: SERVICE_BASE64_64_GHOST, to generate 32 bit: SERVICE_BASE64_32_GHOST)<br>
-    - SERVICE_USER_*: Generated user (example: SERVICE_USER_MYSQL)<br>
-    - SERVICE_PASSWORD_*: Generated password (example: SERVICE_PASSWORD_MYSQL)<br>"
-            rows="20" id="dockerComposeRaw"
+        <x-forms.textarea label="Docker Compose file" rows="20" id="dockerComposeRaw"
             placeholder='services:
   ghost:
     documentation: https://ghost.org/docs/config
@@ -44,6 +35,5 @@
       - MYSQL_DATABASE=${MYSQL_DATABASE}
       - MYSQL_ROOT_PASSWORD=${SERVICE_PASSWORD_MYSQL_ROOT}
 '></x-forms.textarea>
-        {{-- <x-forms.textarea label="Environment File" rows="20" id="envFile"></x-forms.textarea> --}}
     </form>
 </div>
diff --git a/resources/views/livewire/project/shared/destination.blade.php b/resources/views/livewire/project/shared/destination.blade.php
index 8da1cba43..6e494d3e7 100644
--- a/resources/views/livewire/project/shared/destination.blade.php
+++ b/resources/views/livewire/project/shared/destination.blade.php
@@ -3,7 +3,7 @@
     <div class="">Server related configurations.</div>
     <div class="grid grid-cols-1 gap-4 py-4">
         <div class="flex gap-2">
-            <div class="relative flex flex-col bg-white cursor-default dark:text-white box-without-bg dark:bg-coolgray-100 w-96">
+            <div class="relative flex flex-col bg-white border cursor-default dark:text-white box-without-bg dark:bg-coolgray-100 w-96 dark:border-black">
                 <div class="text-xl font-bold">Primary Server</div>
                 @if (str($resource->realStatus())->startsWith('running'))
                     <div title="{{ $resource->realStatus() }}" class="absolute bg-success -top-1 -left-1 badge ">
diff --git a/resources/views/livewire/project/shared/environment-variable/show.blade.php b/resources/views/livewire/project/shared/environment-variable/show.blade.php
index 2754a62bd..99c57b07b 100644
--- a/resources/views/livewire/project/shared/environment-variable/show.blade.php
+++ b/resources/views/livewire/project/shared/environment-variable/show.blade.php
@@ -1,5 +1,6 @@
 <div>
-    <form wire:submit='submit' class="flex flex-col items-center gap-4 p-4 border lg:items-start dark:border-coolgray-300">
+    <form wire:submit='submit'
+        class="flex flex-col items-center gap-4 p-4 bg-white border lg:items-start dark:border-coolgray-300">
         @if ($isLocked)
             <div class="flex flex-1 w-full gap-2">
                 <x-forms.input disabled id="env.key" />
@@ -12,7 +13,7 @@
                 </svg>
                 <x-modal-confirmation isErrorButton buttonTitle="Delete">
                     You will delete environment variable <span
-                        class="font-bold dark:text-warning">{{ $env->key }}</span>.
+                        class="font-bold dark:text-warning text-coollabs">{{ $env->key }}</span>.
                 </x-modal-confirmation>
             </div>
         @else
@@ -39,9 +40,15 @@
                 </div>
             @endif
             <div class="flex flex-col w-full gap-2 lg:flex-row">
-                @if ($type !== 'service' && !$isSharedVariable)
+                @if ($type === 'service')
+                    <x-forms.checkbox instantSave id="env.is_build_time" label="Build Variable?" />
+                @else
+                    @if ($env->is_shared)
+                        <x-forms.checkbox instantSave id="env.is_build_time" label="Build Variable?" />
+                    @else
                     <x-forms.checkbox instantSave id="env.is_multiline" label="Is Multiline?" />
                     <x-forms.checkbox instantSave id="env.is_build_time" label="Build Variable?" />
+                    @endif
                 @endif
                 <div class="flex-1"></div>
                 @if ($isDisabled)
diff --git a/resources/views/livewire/project/shared/resource-operations.blade.php b/resources/views/livewire/project/shared/resource-operations.blade.php
index aa4b42891..6419da632 100644
--- a/resources/views/livewire/project/shared/resource-operations.blade.php
+++ b/resources/views/livewire/project/shared/resource-operations.blade.php
@@ -14,9 +14,9 @@
                             <x-modal-confirmation action="cloneTo({{ data_get($destination, 'id') }})">
                                 <x:slot name="content">
                                     <div class="box">
-                                        <div class="flex flex-col gap-2 ">
-                                            <div class="font-bold dark:text-white">{{ $server->name }}</div>
-                                            <div>{{ $destination->name }}</div>
+                                        <div class="flex flex-col">
+                                            <div class="box-title">{{ $server->name }}</div>
+                                            <div class="box-description">{{ $destination->name }}</div>
                                         </div>
                                     </div>
                                 </x:slot>
@@ -35,16 +35,16 @@
                 class="font-bold dark:text-warning">{{ $resource->environment->project->name }} /
                 {{ $resource->environment->name }}</span> environment.
         </div>
-        <div class="grid gap-4">
+        <div class="flex flex-wrap gap-2">
             @forelse ($projects as $project)
-                <div class="flex flex-row flex-wrap gap-2">
+                <div class="flex flex-wrap gap-2">
                     @foreach ($project->environments as $environment)
                         <x-modal-confirmation action="moveTo({{ data_get($environment, 'id') }})">
                             <x:slot name="content">
                                 <div class="box">
-                                    <div class="flex flex-col gap-2 ">
-                                        <div class="font-bold dark:text-white">{{ $project->name }}</div>
-                                        <div><span class="dark:text-warning">{{ $environment->name }}</span> environment
+                                    <div class="flex flex-col">
+                                        <div class="box-title">{{ $project->name }}</div>
+                                        <div class="box-description">environment: {{ $environment->name }}
                                         </div>
                                     </div>
                                 </div>
diff --git a/resources/views/livewire/server/index.blade.php b/resources/views/livewire/server/index.blade.php
index 85e93213e..aa631f0ee 100644
--- a/resources/views/livewire/server/index.blade.php
+++ b/resources/views/livewire/server/index.blade.php
@@ -18,7 +18,7 @@
                     'border-red-500' =>
                         !$server->settings->is_reachable || $server->settings->force_disabled,
                 ])>
-                <div class="flex flex-col mx-6">
+                <div class="flex flex-col justify-center mx-6">
                     <div class="font-bold dark:text-white">
                         {{ $server->name }}
                     </div>
diff --git a/resources/views/livewire/team-shared-variables-index.blade.php b/resources/views/livewire/team-shared-variables-index.blade.php
index f12fa39f2..0a697c7d0 100644
--- a/resources/views/livewire/team-shared-variables-index.blade.php
+++ b/resources/views/livewire/team-shared-variables-index.blade.php
@@ -7,7 +7,7 @@
         </x-modal-input>
     </div>
     <div class="flex items-center gap-2 pb-4">You can use these variables anywhere with <span
-            class="dark:text-warning">@{{ team.VARIABLENAME }}</span> <x-helper
+            class="dark:text-warning text-coollabs">@{{ team.VARIABLENAME }}</span> <x-helper
             helper="More info <a class='underline dark:text-white' href='https://coolify.io/docs/environment-variables#shared-variables' target='_blank'>here</a>."></x-helper>
     </div>
 
diff --git a/resources/views/livewire/team/member.blade.php b/resources/views/livewire/team/member.blade.php
index e30862e19..654fd03e2 100644
--- a/resources/views/livewire/team/member.blade.php
+++ b/resources/views/livewire/team/member.blade.php
@@ -1,6 +1,6 @@
 <tr @class([
-    'dark:text-white bg-coolblack hover:bg-coolgray-100',
-    'bg-coolgray-100' => $member->id == auth()->user()->id,
+    'dark:text-white text-black dark:bg-coolblack dark:hover:bg-coolgray-100',
+    'dark:bg-coolgray-100 bg-neutral-200' => $member->id == auth()->user()->id,
 ])>
     <td class="px-5 py-4 text-sm whitespace-nowrap">
         {{ $member->name }}
diff --git a/resources/views/livewire/team/member/index.blade.php b/resources/views/livewire/team/member/index.blade.php
index bd7ba5964..6a6cc0fd2 100644
--- a/resources/views/livewire/team/member/index.blade.php
+++ b/resources/views/livewire/team/member/index.blade.php
@@ -7,7 +7,7 @@
             <div class="overflow-x-auto">
                 <div class="inline-block min-w-full">
                     <div class="overflow-hidden">
-                        <table class="min-w-full divide-y divide-coolgray-400">
+                        <table class="min-w-full divide-y dark:divide-coolgray-400 divide-neutral-400">
                             <thead>
                                 <tr>
                                     <th class="px-5 py-3 text-xs font-medium text-left uppercase">Name
@@ -17,7 +17,7 @@
                                     <th class="px-5 py-3 text-xs font-medium text-left uppercase">Actions</th>
                                 </tr>
                             </thead>
-                            <tbody class="divide-y divide-coolgray-400">
+                            <tbody class="divide-y dark:divide-coolgray-400 divide-neutral-200">
                                 @foreach (currentTeam()->members as $member)
                                     <livewire:team.member :member="$member" :wire:key="$member->id" />
                                 @endforeach