tiennm99/coolify
1
0
Fork 0
mirror of https://github.com/tiennm99/coolify.git synced 2026-05-26 12:00:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
- 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.
This commit is contained in:
Andras Bacsai
2025-10-01 08:23:35 +02:00
parent 25a7be23a9
commit bed7ad833e
12 changed files with 22 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/Livewire/Dashboard.php
+1 -1
View File
@@ -10,7 +10,7 @@ use Livewire\Component;
class Dashboard extends Component
{
public $projects = [];
public Collection $projects;
public Collection $servers;
resources/css/app.css
+5 -2
View File
@@ -20,8 +20,11 @@
--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
+4 -4
View File
@@ -63,7 +63,7 @@
}
@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 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
+2 -1
View File
@@ -16,7 +16,8 @@
<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
+1 -1
View File
@@ -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
+1 -1
View File
@@ -102,7 +102,7 @@
<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
+2 -2
View File
@@ -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 @@
</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
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
+2 -2
View File
@@ -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 @@
@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
+1 -1
View File
@@ -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
+1 -1
View File
@@ -123,7 +123,7 @@
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)