css and stuffs

resources/views/components/applications/navbar.blade.php

@@ -1,4 +1,4 @@
-<nav class="flex justify-center gap-4 py-2 border-b-2 border-solid border-coolgray-200 ">
+<nav class="flex justify-center gap-4 py-2 border-b-2 border-solid border-coolgray-200">
     <a
         href="{{ route('project.application.configuration', [
             'project_uuid' => Route::current()->parameters()['project_uuid'],
@@ -16,14 +16,16 @@
         Deployments
     </a>
     <a target="_blank" href="{{ $application->gitBranchLocation }}">
-        Open on Git <img class="inline-flex w-4 h-4" src="{{ asset('svgs/external-link.svg') }}">
+        Open on Git
+        <x-external-link />
     </a>
     @if (data_get($application, 'ports_mappings_array'))
         @foreach ($application->ports_mappings_array as $port)
             @if (config('app.env') === 'local')
                 <a target="_blank" href="http://localhost:{{ explode(':', $port)[0] }}">Open
-                    {{ explode(':', $port)[0] }} <img class="inline-flex w-4 h-4"
-                        src="{{ asset('svgs/external-link.svg') }}"></a>
+                    {{ explode(':', $port)[0] }}
+                    <x-external-link />
+                </a>
             @else
                 <a target="_blank"
                     href="http://{{ $application->destination->server->ip }}:{{ explode(':', $port)[0] }}">Open

resources/views/components/confirm-modal.blade.php

@@ -22,7 +22,7 @@
         <div class="flex flex-col items-center justify-center h-full">
             <div class="pb-5 text-white" x-text="message"></div>
             <div>
-                <x-inputs.button isWarning x-on:click='confirmed()'>Confirm</x-inputs.button>
+                <x-inputs.button x-on:click='confirmed()'>Confirm</x-inputs.button>
                 <x-inputs.button x-on:click="open = false">Cancel</x-inputs.button>
             </div>
         </div>

resources/views/components/external-link.blade.php

@@ -0,0 +1 @@
+<img class="inline-flex w-3 h-3 mb-1 ml-2" src="{{ asset('svgs/external-link.svg') }}">

resources/views/components/inputs/button.blade.php

@@ -1,17 +1,30 @@
 @props([
+    'type' => $attributes->get('type') ?? 'button',
     'disabled' => null,
     'confirm' => null,
     'confirmAction' => null,
 ])
-<button {{ $attributes }}
-    @if ($attributes->whereStartsWith('wire:click') && !$disabled) wire:target="{{ explode('(', $attributes->whereStartsWith('wire:click')->first())[0] }}"
-    wire:loading.delay.class='loading' wire:loading.delay.attr="disabled" @endif
-    @if ($disabled !== null) disabled title="{{ $disabled }}" @endif
-    @isset($confirm)
+@if ($type === 'submit')
+    <button type="submit" @if ($disabled !== null) disabled @endif wire:target="submit"
+        wire:loading.delay.shorter.class="loading"
+        @isset($confirm)
         x-on:click="toggleConfirmModal('{{ $confirm }}', '{{ explode('(', $confirmAction)[0] }}')"
     @endisset
-    @isset($confirmAction)
+        @isset($confirmAction)
         x-on:{{ explode('(', $confirmAction)[0] }}.window="$wire.{{ explode('(', $confirmAction)[0] }}"
     @endisset>
-    {{ $slot }}
-</button>
+        {{ $slot }}
+    </button>
+@elseif($type === 'button')
+    <button {{ $attributes }} @if ($disabled !== null) disabled @endif type="button"
+        wire:target="{{ explode('(', $attributes->whereStartsWith('wire:click')->first())[0] }}"
+        wire:loading.delay.shorter.class="loading"
+        @isset($confirm)
+        x-on:click="toggleConfirmModal('{{ $confirm }}', '{{ explode('(', $confirmAction)[0] }}')"
+    @endisset
+        @isset($confirmAction)
+        x-on:{{ explode('(', $confirmAction)[0] }}.window="$wire.{{ explode('(', $confirmAction)[0] }}"
+    @endisset>
+        {{ $slot }}
+    </button>
+@endif

resources/views/components/inputs/checkbox.blade.php

@@ -8,17 +8,16 @@
     'noDirty' => $attributes->has('noDirty'),
     'disabled' => null,
 ])
-
-<label {{ $attributes->merge(['class' => 'flex items-center gap-16 cursor-pointer']) }}>
-    <span class="label-text">
+<label {{ $attributes->merge(['class' => 'flex cursor-pointer w-64 label']) }}>
+    <div class="label-text">
         @if ($label)
             {{ $label }}
         @else
             {{ $id }}
         @endif
-    </span>
-    <input type="checkbox" @if ($disabled !== null) disabled @endif class="toggle" name={{ $id }}
+    </div>
+    <div class="flex-1"></div>
+    <input type="checkbox" @if ($disabled !== null) disabled @endif name={{ $id }}
         @if (!$noDirty) wire:dirty.class="input-warning" @endif
         @if ($instantSave) wire:click='instantSave' wire:model.defer={{ $id }} @else wire:model.defer={{ $value ?? $id }} @endif />
 </label>
-</div>

resources/views/components/inputs/input.blade.php

@@ -1,14 +1,15 @@
 @props([
     'id' => $attributes->has('id') || $attributes->has('label'),
-    'required' => $attributes->has('required'),
+    'type' => $attributes->get('type') ?? 'text',
+    'required' => null,
     'label' => $attributes->has('label'),
     'helper' => $attributes->has('helper'),
-    'instantSave' => $attributes->has('instantSave'),
     'noLabel' => $attributes->has('noLabel'),
     'noDirty' => $attributes->has('noDirty'),
+    'disabled' => null,
 ])
 
-<div class="w-full max-w-xs form-control">
+<div {{ $attributes->merge(['class' => 'w-full form-control']) }}>
     @if (!$noLabel)
         <label class="label">
             <span class="label-text">
@@ -40,8 +41,8 @@
             </span>
         </label>
     @endif
-    <input {{ $attributes }} name={{ $id }}
-        @if ($instantSave) wire:click='instantSave' wire:model.defer={{ $id }} @else wire:model.defer={{ $value ?? $id }} @endif
+    <input {{ $attributes }} type={{ $type }} name={{ $id }} wire:model.defer={{ $id }}
+        @if ($disabled !== null) disabled @endif @if ($required !== null) required @endif
         @if (!$noDirty) wire:dirty.class="input-warning" @endif />
     @error($id)
         <label class="label">

resources/views/components/inputs/select.blade.php

@@ -4,7 +4,7 @@
     'required' => false,
 ])
 
-<span @class(['flex flex-col'])>
+<span {{ $attributes->merge(['class' => 'flex flex-col']) }}>
     <label for={{ $id }}>
         @if ($label)
             {{ $label }}

resources/views/components/inputs/textarea.blade.php

@@ -8,7 +8,7 @@
     'noDirty' => $attributes->has('noDirty'),
 ])
 
-<div class="w-full max-w-xs form-control">
+<div class=" form-control">
     @if (!$noLabel)
         <label class="label">
             <span class="label-text">
@@ -40,8 +40,7 @@
             </span>
         </label>
     @endif
-    <textarea {{ $attributes }} name={{ $id }}
-        @if ($instantSave) wire:click='instantSave' wire:model.defer={{ $id }} @else wire:model.defer={{ $value ?? $id }} @endif
+    <textarea {{ $attributes }} name={{ $id }} wire:model.defer={{ $value ?? $id }}
         @if (!$noDirty) wire:dirty.class="input-warning" @endif></textarea>
     @error($id)
         <label class="label">

resources/views/components/layout.blade.php

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html data-theme="coollabs" lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="h-full bg-coolgray-100">
+<html data-theme="coollabs" lang="{{ str_replace('_', '-', app()->getLocale()) }}">
 
 <head>
     <meta charset="utf-8">
@@ -24,14 +24,13 @@
     @livewireStyles
 </head>
 
-<body class="antialiased">
+<body>
 
     @livewireScripts
-
     @auth
         <x-navbar />
     @endauth
-    <main class="max-w-6xl px-8 pt-10 mx-auto">
+    <main class="min-h-full px-8 pt-10 mx-auto max-w-7xl">
         {{ $slot }}
     </main>
     <a

resources/views/components/naked-modal.blade.php

@@ -3,17 +3,14 @@
     'message' => 'Are you sure you want to delete this?',
     'action' => 'delete',
 ])
-<div x-cloak x-show="{{ $show }}" x-transition.opacity class="fixed inset-0 bg-coolgray-100/75"></div>
-<div x-cloak x-show="{{ $show }}" x-transition class="fixed inset-0 z-50 top-20">
-    <div @click.away="{{ $show }} = false" class="w-screen max-w-xl mx-auto rounded-lg shadow-xl bg-coolgray-200">
-        <div class="flex flex-col items-center justify-center h-full p-4">
-            <div class="pb-5 text-xs text-white">{{ $message }}</div>
-            <div class="text-xs">
-                <x-inputs.button isWarning wire:click='{{ $action }}' x-on:click="{{ $show }} = false">
-                    Yes
-                </x-inputs.button>
-                <x-inputs.button x-on:click="{{ $show }} = false">No</x-inputs.button>
-            </div>
+<div x-cloak x-show="{{ $show }}" x-transition class="modal modal-open">
+    <div class="relative modal-box">
+        <div class="pb-8 text-base font-bold">{{ $message }}</div>
+        <div class="flex justify-end gap-4 text-xs">
+            <x-inputs.button isWarning wire:click='{{ $action }}' x-on:click="{{ $show }} = false">
+                Yes
+            </x-inputs.button>
+            <x-inputs.button x-on:click="{{ $show }} = false">No</x-inputs.button>
         </div>
     </div>
 </div>

resources/views/components/navbar.blade.php

@@ -10,29 +10,29 @@
                 </label>
                 <ul tabindex="0" class="p-2 mt-3 shadow menu menu-compact dropdown-content bg-base-100 rounded-box w-52">
                     <li>
-                        <a href="/" class="justify-between">
+                        <a href="/">
                             Home
                         </a>
                     </li>
                     @if (auth()->user()->isRoot())
                         <li>
-                            <a href="/settings" class="justify-between">
+                            <a href="/settings">
                                 Settings
                             </a>
                         </li>
                     @endif
                     <li>
-                        <a href="/profile" class="justify-between">
+                        <a href="/profile">
                             Profile
                         </a>
                     </li>
                     <li>
-                        <a href="/profile/team" class="justify-between">
+                        <a href="/profile/team">
                             Team
                         </a>
                     </li>
                     <li>
-                        <a href="/command-center" class="justify-between">
+                        <a href="/command-center">
                             Command Center
                         </a>
                     </li>
@@ -49,7 +49,7 @@
                     </li>
                 </ul>
             </div>
-            <a href="/" class="text-xl normal-case btn btn-ghost">Coolify</a>
+            <a href="/" class="text-xl no-underline normal-case btn btn-ghost">Coolify</a>
             <div class="form-control">
                 <x-magic-bar />
             </div>
@@ -58,23 +58,23 @@
             <ul class="px-1 menu menu-horizontal text-neutral-400">
                 @if (auth()->user()->isRoot())
                     <li>
-                        <a href="/settings" class="justify-between link link-hover hover:bg-transparent">
+                        <a href="/settings">
                             Settings
                         </a>
                     </li>
                 @endif
                 <li>
-                    <a href="/profile" class="justify-between link link-hover hover:bg-transparent">
+                    <a href="/profile">
                         Profile
                     </a>
                 </li>
                 <li>
-                    <a href="/profile/team" class="justify-between link link-hover hover:bg-transparent">
+                    <a href="/profile/team">
                         Team
                     </a>
                 </li>
                 <li>
-                    <a class="justify-between link link-hover hover:bg-transparent" href="/command-center">
+                    <a href="/command-center">
                         Command Center
                     </a>
                 </li>