mirror of
https://github.com/tiennm99/coolify.git
synced 2026-05-12 20:58:05 +00:00
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.
This commit is contained in:
Andras Bacsai
@@ -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">
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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'))
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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]) }}">
|
||||
|
||||
@@ -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)
|
||||
|
||||
Reference in New Issue
Block a user