ui(core): update projects property type and enhance UI styling

- Changed the projects property in the Dashboard component from an array to a Collection for improved data handling.
- Added new color variables in CSS for better theming options.
- Updated button styles across various components for consistency and improved user experience.
- Refined dropdown and notification components for better visual alignment and usability.

app/Livewire/Dashboard.php

@@ -10,7 +10,7 @@
 
 class Dashboard extends Component
 {
-    public $projects = [];
+    public Collection $projects;
 
     public Collection $servers;
 

resources/css/app.css

@@ -20,8 +20,11 @@ @theme {
     --color-warning: #fcd452;
     --color-success: #16a34a;
     --color-error: #dc2626;
+    --color-coollabs-50: #f5f0ff;
     --color-coollabs: #6b16ed;
     --color-coollabs-100: #7317ff;
+    --color-coollabs-200: #5a12c7;
+    --color-coollabs-300: #4a0fa3;
     --color-coolgray-100: #181818;
     --color-coolgray-200: #202020;
     --color-coolgray-300: #242424;
@@ -91,11 +94,11 @@ option {
 }
 
 button[isError]:not(:disabled) {
-    @apply text-white bg-red-600 hover:bg-red-700;
+    @apply text-red-800 dark:text-red-300 bg-red-50 dark:bg-red-900/30 border-red-300 dark:border-red-800 hover:bg-red-300 hover:text-white dark:hover:bg-red-800 dark:hover:text-white;
 }
 
 button[isHighlighted]:not(:disabled) {
-    @apply text-white bg-coollabs hover:bg-coollabs-100;
+    @apply text-coollabs-200 dark:text-white bg-coollabs-50 dark:bg-coollabs/20 border-coollabs dark:border-coollabs-100 hover:bg-coollabs hover:text-white dark:hover:bg-coollabs-100 dark:hover:text-white;
 }
 
 h1 {

resources/css/utilities.css

@@ -63,7 +63,7 @@ @utility select {
 }
 
 @utility button {
-    @apply flex gap-2 justify-center items-center px-2 py-1 text-sm text-black normal-case rounded-sm border outline-0 cursor-pointer bg-neutral-200/50 border-neutral-300 hover:bg-neutral-300 dark:bg-coolgray-200 dark:text-white dark:hover:text-white dark:hover:bg-coolgray-500 dark:border-coolgray-300 hover:text-black disabled:cursor-not-allowed min-w-fit dark:disabled:text-neutral-600 disabled:border-transparent disabled:hover:bg-transparent disabled:bg-transparent disabled:text-neutral-300;
+    @apply flex gap-2 justify-center items-center px-2 h-8 text-sm text-black normal-case rounded-sm border-2 outline-0 cursor-pointer font-medium bg-white border-neutral-200 hover:bg-neutral-100 dark:bg-coolgray-100 dark:text-white dark:hover:text-white dark:hover:bg-coolgray-200 dark:border-coolgray-300 hover:text-black disabled:cursor-not-allowed min-w-fit dark:disabled:text-neutral-600 disabled:border-transparent disabled:hover:bg-transparent disabled:bg-transparent disabled:text-neutral-300;
 }
 
 @utility alert-success {
@@ -155,15 +155,15 @@ @utility kbd-custom {
 }
 
 @utility box {
-    @apply relative flex lg:flex-row flex-col p-2 transition-colors cursor-pointer min-h-[4rem] dark:bg-coolgray-100 shadow-sm 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-sm bg-white border text-black dark:text-white hover:text-black border-neutral-200 dark:border-coolgray-300 hover:bg-neutral-100 dark:hover:bg-coollabs-100 dark:hover:text-white hover:no-underline rounded-sm;
 }
 
 @utility box-boarding {
-    @apply flex lg:flex-row flex-col p-2 transition-colors cursor-pointer min-h-[4rem] dark:bg-coolgray-100 dark:text-white bg-neutral-50 border border-neutral-200 dark:border-black hover:bg-neutral-100 dark:hover:bg-coollabs-100 dark:hover:text-white hover:text-black hover:no-underline text-black;
+    @apply flex lg:flex-row flex-col p-2 transition-colors cursor-pointer min-h-[4rem] dark:bg-coolgray-100 dark:text-white bg-neutral-50 border border-neutral-200 dark:border-coolgray-300 hover:bg-neutral-100 dark:hover:bg-coollabs-100 dark:hover:text-white hover:text-black hover:no-underline text-black rounded-sm;
 }
 
 @utility box-without-bg {
-    @apply flex p-2 transition-colors dark:hover:text-white hover:no-underline min-h-[4rem] border border-neutral-200 dark:border-black;
+    @apply flex p-2 transition-colors dark:hover:text-white hover:no-underline min-h-[4rem] border border-neutral-200 dark:border-coolgray-300 rounded-sm;
 }
 
 @utility box-without-bg-without-border {

resources/views/components/dropdown.blade.php

@@ -16,7 +16,8 @@ class="inline-flex items-center justify-start pr-8 transition-colors focus:outli
     <div x-show="dropdownOpen" @click.away="dropdownOpen=false" x-transition:enter="ease-out duration-200"
         x-transition:enter-start="-translate-y-2" x-transition:enter-end="translate-y-0"
         class="absolute top-0 z-50 mt-6 min-w-max" x-cloak>
-        <div class="p-1 mt-1 bg-white border rounded-sm shadow-sm dark:bg-coolgray-200 dark:border-black border-neutral-300">
+        <div
+            class="p-1 mt-1 bg-white border rounded-sm shadow-sm dark:bg-coolgray-200 dark:border-coolgray-300 border-neutral-300">
             {{ $slot }}
         </div>
     </div>

resources/views/livewire/dashboard.blade.php

@@ -19,7 +19,7 @@
         @if ($projects->count() > 0)
             <div class="grid grid-cols-1 gap-4 xl:grid-cols-2">
                 @foreach ($projects as $project)
-                    <div class="relative gap-2 border border-transparent cursor-pointer box group">
+                    <div class="relative gap-2 cursor-pointer box group">
                         <a href="{{ $project->navigateTo() }}" class="absolute inset-0"></a>
                         <div class="flex flex-1 mx-6">
                             <div class="flex flex-col justify-center flex-1">

resources/views/livewire/global-search.blade.php

@@ -102,7 +102,7 @@ class="fixed top-0 left-0 z-99 flex items-start justify-center w-screen h-screen
                     <input type="text" wire:model.live.debounce.500ms="searchQuery"
                         placeholder="Search for resources, servers, projects, and environments" x-ref="searchInput"
                         x-init="$watch('modalOpen', value => { if (value) setTimeout(() => $refs.searchInput.focus(), 100) })"
-                        class="w-full pl-12 pr-12 py-4 text-base bg-white dark:bg-coolgray-100 border-none rounded-lg shadow-xl ring-1 ring-neutral-200 dark:ring-coolgray-300 focus:ring-2 focus:ring-coollabs dark:text-white placeholder-neutral-400 dark:placeholder-neutral-500" />
+                        class="w-full pl-12 pr-12 py-4 text-base bg-white dark:bg-coolgray-100 border-none rounded-lg shadow-xl ring-1 ring-neutral-200 dark:ring-coolgray-300 focus:ring-2 focus:ring-neutral-400 dark:focus:ring-coolgray-300 dark:text-white placeholder-neutral-400 dark:placeholder-neutral-500" />
                     <button @click="closeModal()"
                         class="absolute inset-y-0 right-2 flex items-center justify-center px-2 text-xs font-medium text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-200 rounded">
                         ESC

resources/views/livewire/notifications/email.blade.php

@@ -57,7 +57,7 @@
     @if (!$useInstanceEmailSettings)
         <div class="flex flex-col gap-4">
             <form wire:submit='submitSmtp'
-                class="p-4 border dark:border-coolgray-300 border-neutral-200 flex flex-col gap-2">
+                class="p-4 border dark:border-coolgray-300 border-neutral-200 rounded-lg flex flex-col gap-2">
                 <div class="flex items-center gap-2">
                     <h3>SMTP Server</h3>
                     <x-forms.button canGate="update" :canResource="$settings" type="submit">
@@ -89,7 +89,7 @@ class="p-4 border dark:border-coolgray-300 border-neutral-200 flex flex-col gap-
                 </div>
             </form>
             <form wire:submit='submitResend'
-                class="p-4 border dark:border-coolgray-300 border-neutral-200 flex flex-col gap-2">
+                class="p-4 border dark:border-coolgray-300 border-neutral-200 rounded-lg flex flex-col gap-2">
                 <div class="flex items-center gap-2">
                     <h3>Resend</h3>
                     <x-forms.button canGate="update" :canResource="$settings" type="submit">

resources/views/livewire/project/application/rollback.blade.php

@@ -11,7 +11,7 @@
         <div class="flex flex-wrap">
             @forelse ($images as $image)
                 <div class="w-2/4 p-2">
-                    <div class="bg-white border rounded-sm dark:border-black dark:bg-coolgray-100 border-neutral-200">
+                    <div class="bg-white border rounded-sm dark:border-coolgray-300 dark:bg-coolgray-100 border-neutral-200">
                         <div class="p-2">
                             <div class="">
                                 @if (data_get($image, 'is_current'))

resources/views/livewire/project/index.blade.php

@@ -11,7 +11,7 @@
         @endcan
     </div>
     <div class="subtitle">All your projects are here.</div>
-    <div x-data="searchComponent()">
+    <div x-data="searchComponent()" class="-mt-1">
         <x-forms.input placeholder="Search for name, description..." x-model="search" id="null" />
         <div class="grid grid-cols-2 gap-4 pt-4">
             <template x-if="filteredProjects.length === 0">

resources/views/livewire/project/shared/destination.blade.php

@@ -5,7 +5,7 @@
         <div class="flex flex-col gap-2">
             <h3>Primary Server</h3>
             <div
-                class="relative flex flex-col bg-white border cursor-default dark:text-white box-without-bg dark:bg-coolgray-100 dark:border-black">
+                class="relative flex flex-col bg-white border cursor-default dark:text-white box-without-bg dark:bg-coolgray-100 dark:border-coolgray-300">
                 @if (str($resource->realStatus())->startsWith('running'))
                     <div title="{{ $resource->realStatus() }}" class="absolute bg-success -top-1 -left-1 badge ">
                     </div>
@@ -36,7 +36,7 @@ class="relative flex flex-col bg-white border cursor-default dark:text-white box
             @foreach ($resource->additional_networks as $destination)
                 <div class="flex flex-col gap-2" wire:key="destination-{{ $destination->id }}">
                     <div
-                        class="relative flex flex-col bg-white border cursor-default dark:text-white box-without-bg dark:bg-coolgray-100 dark:border-black">
+                        class="relative flex flex-col bg-white border cursor-default dark:text-white box-without-bg dark:bg-coolgray-100 dark:border-coolgray-300">
                         @if (str(data_get($destination, 'pivot.status'))->startsWith('running'))
                             <div title="{{ data_get($destination, 'pivot.status') }}"
                                 class="absolute bg-success -top-1 -left-1 badge "></div>

resources/views/livewire/project/show.blade.php

@@ -21,7 +21,7 @@
     <div class="text-xs truncate subtitle lg:text-sm">{{ $project->name }}.</div>
     <div class="grid gap-2 lg:grid-cols-2">
         @forelse ($project->environments->sortBy('created_at') as $environment)
-            <div class="gap-2 border border-transparent box group">
+            <div class="gap-2 box group">
                 <div class="flex flex-1 mx-6">
                     <a class="flex flex-col justify-center flex-1"
                         href="{{ route('project.resource.index', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid]) }}">

resources/views/livewire/settings-dropdown.blade.php

@@ -123,7 +123,7 @@ class="absolute -top-1 -right-1 bg-error text-white text-xs rounded-full w-4.5 h
             x-transition:leave="ease-in duration-150" x-transition:leave-start="opacity-100 translate-y-0"
             x-transition:leave-end="opacity-0 -translate-y-2" class="absolute right-0 top-full mt-1 z-50 w-48" x-cloak>
             <div
-                class="p-1 bg-white border rounded-sm shadow-lg dark:bg-coolgray-200 dark:border-black border-neutral-300">
+                class="p-1 bg-white border rounded-sm shadow-lg dark:bg-coolgray-200 dark:border-coolgray-300 border-neutral-300">
                 <div class="flex flex-col gap-1">
                     <!-- What's New Section -->
                     @if ($unreadCount > 0)