mirror of
https://github.com/coollabsio/coolify.git
synced 2026-11-06 13:10:37 -04:00
Refresh the dark dashboard around the coolLabs purple brand.
Dark mode keeps a black canvas, paints cards at #121212, and tints the sidebar purple-black. Active navigation, secondary buttons, and the view switcher use brand purple; warning yellow stays for real warnings. Co-authored-by: Andras Bacsai <andrasbacsai@users.noreply.github.com>
This commit is contained in:
Cursor Agent
co-authored by
Andras Bacsai
Andras Bacsai
parent
91ea7d851e
commit
8df39bc637
@@ -35,7 +35,7 @@
|
||||
@if ($context === 'service-schedule')
|
||||
<button type="button" @click="activeSection = '{{ $item['key'] }}'"
|
||||
:class="activeSection === '{{ $item['key'] }}'
|
||||
? 'bg-coollabs/10 text-coollabs ring-1 ring-coollabs/25 dark:bg-warning/15 dark:text-warning dark:ring-warning/25'
|
||||
? 'bg-coollabs/10 text-coollabs ring-1 ring-coollabs/25 dark:bg-brand/15 dark:text-brand-light dark:ring-brand-light/25'
|
||||
: 'text-neutral-500 hover:bg-black/5 hover:text-neutral-900 dark:text-fg-dim dark:hover:bg-white/[0.06] dark:hover:text-fg'"
|
||||
class="inline-flex h-8 shrink-0 cursor-pointer items-center rounded-md px-3 text-[13px] font-medium transition-colors">
|
||||
{{ $item['label'] }}
|
||||
@@ -43,7 +43,7 @@
|
||||
@else
|
||||
<a @class([
|
||||
'inline-flex h-8 shrink-0 items-center rounded-md px-3 text-[13px] font-medium transition-colors',
|
||||
'bg-coollabs/10 text-coollabs ring-1 ring-coollabs/25 dark:bg-warning/15 dark:text-warning dark:ring-warning/25' => $section === $item['key'],
|
||||
'bg-coollabs/10 text-coollabs ring-1 ring-coollabs/25 dark:bg-brand/15 dark:text-brand-light dark:ring-brand-light/25' => $section === $item['key'],
|
||||
'text-neutral-500 hover:bg-black/5 hover:text-neutral-900 dark:text-fg-dim dark:hover:bg-white/[0.06] dark:hover:text-fg' => $section !== $item['key'],
|
||||
])
|
||||
{{ wireNavigate() }} href="{{ route($routes[$item['key']], $parameters) }}">
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
@props(['listUrl' => null, 'canvasUrl' => null, 'onCanvas' => false, 'views' => null])
|
||||
@php
|
||||
$idle = 'text-neutral-400 hover:bg-neutral-100 hover:text-black dark:text-fg dark:hover:bg-white/[0.06] dark:hover:text-fg';
|
||||
$idle = 'text-neutral-400 hover:bg-neutral-100 hover:text-black dark:hover:text-white';
|
||||
$canvasItem = 'relative flex h-7.5 shrink-0 items-center gap-1.5 whitespace-nowrap rounded-md px-2.5 text-[12px] font-medium transition-colors';
|
||||
$views ??= ['table' => ['Table view', 'unordered-list'], 'grid' => ['Grid view', 'grid']];
|
||||
// One list view (no table / grid choice): nothing to switch to on the list page.
|
||||
@@ -22,11 +22,14 @@
|
||||
List view
|
||||
</a>
|
||||
@else
|
||||
{{-- Only the views you can switch to, with their names; the current one is not shown. --}}
|
||||
{{-- Every view stays visible. The current one is the selected pill. --}}
|
||||
@unless ($singleList)
|
||||
@foreach ($views as $mode => [$label, $icon])
|
||||
<button type="button" x-on:click="setViewMode(@js($mode))" x-show="viewMode !== @js($mode)" x-cloak
|
||||
class="{{ $canvasItem }} {{ $idle }}" title="{{ $label }}">
|
||||
<button type="button" x-on:click="setViewMode(@js($mode))"
|
||||
class="{{ $canvasItem }}"
|
||||
:class="viewMode === @js($mode) ? 'is-selected' : @js($idle)"
|
||||
:aria-pressed="(viewMode === @js($mode)).toString()"
|
||||
title="{{ $label }}">
|
||||
<x-reicon :name="$icon" class="size-3.5" />
|
||||
{{ $label }}
|
||||
</button>
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
'nextDisabled' => 'page >= totalPages',
|
||||
])
|
||||
|
||||
<footer {{ $attributes->class('flex min-h-11 items-center justify-between border-t border-neutral-200 px-4 text-[11px] text-neutral-500 dark:border-white/[0.08] dark:text-fg-faint') }}>
|
||||
<footer x-bind:hidden="Number(totalPages) <= 1" {{ $attributes->class('pager flex min-h-11 items-center justify-between border-t border-neutral-200 px-4 text-[11px] text-neutral-500 dark:border-white/[0.08] dark:text-fg-faint') }}>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="inline-flex h-7 items-center whitespace-nowrap tabular-nums" x-text="{{ $summary }}"></span>
|
||||
<x-page-size-select :model="$pageSizeModel" :storage-key="$storageKey" :options="$options" />
|
||||
|
||||
@@ -120,7 +120,7 @@
|
||||
@foreach ($items as $item)
|
||||
<a @class([
|
||||
'app-tab shrink-0',
|
||||
'bg-coollabs/10 text-coollabs shadow-sm ring-1 ring-coollabs/25 hover:bg-coollabs/15 dark:bg-warning/15 dark:text-warning dark:ring-warning/25 dark:hover:bg-warning/20' => $item['active'],
|
||||
'bg-coollabs/10 text-coollabs shadow-sm ring-1 ring-coollabs/25 hover:bg-coollabs/15 dark:bg-brand/15 dark:text-brand-light dark:ring-brand-light/25 dark:hover:bg-brand/20' => $item['active'],
|
||||
])
|
||||
{{ wireNavigate() }} href="{{ route($item['route'], $parameters) }}">
|
||||
@if ($item['icon'] ?? null)
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
// Persistent affordance shown while a deploy/start is running. Either re-opens
|
||||
// the in-page live-log dialog (services/databases, via $wire) or links to the
|
||||
// running deployment's log page (applications, via href) so the log is never lost.
|
||||
$deployingIndicatorClasses = 'inline-flex shrink-0 items-center gap-1.5 rounded-md px-2 py-1 text-[11px] font-medium ring-1 transition-colors bg-coollabs/10 text-coollabs ring-coollabs/25 hover:bg-coollabs/15 hover:no-underline dark:bg-warning/15 dark:text-warning dark:ring-warning/25 dark:hover:bg-warning/20';
|
||||
$deployingIndicatorClasses = 'inline-flex shrink-0 items-center gap-1.5 rounded-md px-2 py-1 text-[11px] font-medium ring-1 transition-colors bg-coollabs/10 text-coollabs ring-coollabs/25 hover:bg-coollabs/15 hover:no-underline dark:bg-brand/15 dark:text-brand-light dark:ring-brand-light/25 dark:hover:bg-brand/20';
|
||||
@endphp
|
||||
|
||||
@if ($href)
|
||||
|
||||
@@ -271,7 +271,7 @@
|
||||
:class="collapsed && 'lg:justify-center lg:px-0'">
|
||||
<x-reicon :name="$item['icon']" class="menu-item-icon" />
|
||||
<span class="menu-item-label flex-1 text-left" :class="collapsed && 'lg:hidden'">{{ $item['label'] }}</span>
|
||||
<x-reicon name="chevron-down" class="size-3 -rotate-90 text-coollabs dark:text-fg-faint" ::class="collapsed && 'lg:hidden'" />
|
||||
<x-reicon name="chevron-down" class="nav-chevron size-3 -rotate-90 text-coollabs dark:text-fg-faint" ::class="collapsed && 'lg:hidden'" />
|
||||
</button>
|
||||
@else
|
||||
<a title="{{ $item['label'] }}" href="{{ $item['href'] }}"
|
||||
@@ -294,9 +294,9 @@
|
||||
<li x-show="!submenu" @if ($activeSubmenu ?? null) x-cloak @endif @class(['xl:hidden' => $navContext ?? []])
|
||||
:class="{ 'xl:hidden': navLevel !== -1 }">
|
||||
<a title="Admin" {{ wireNavigate() }}
|
||||
class="{{ request()->is('admin') ? 'menu-item-active menu-item' : 'menu-item' }}"
|
||||
class="nav-admin {{ request()->is('admin') ? 'menu-item-active menu-item' : 'menu-item' }}"
|
||||
:class="collapsed && 'lg:justify-center lg:px-0'" href="{{ route('admin.index') }}">
|
||||
<x-reicon name="fire" class="menu-item-icon text-pink-500" />
|
||||
<x-reicon name="fire" class="menu-item-icon" />
|
||||
<span class="menu-item-label" :class="collapsed && 'lg:hidden'">Admin</span>
|
||||
</a>
|
||||
</li>
|
||||
@@ -324,7 +324,7 @@
|
||||
</ul>
|
||||
{{-- Sidebar footer (desktop only; mobile uses a temporary slide-over). It stays visible;
|
||||
only the menu above it scrolls on short or zoomed-in screens. --}}
|
||||
<div class="sidebar-footer shrink-0 -mx-2 hidden flex-col gap-1 bg-neutral-50 px-2 py-2 dark:bg-app lg:-mx-3 lg:flex lg:px-3">
|
||||
<div class="sidebar-footer shrink-0 -mx-2 hidden flex-col gap-1 bg-neutral-50 px-2 py-2 dark:bg-transparent lg:-mx-3 lg:flex lg:px-3">
|
||||
<div class="flex items-center gap-1" :class="collapsed ? 'flex-col justify-center' : 'justify-between'">
|
||||
<x-top-user-menu sidebar />
|
||||
<button type="button" @click="toggleSidebar()" title="Toggle sidebar" aria-label="Toggle sidebar"
|
||||
|
||||
@@ -13,12 +13,14 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{{-- Only the view you can switch to, with its name (as components/canvas-view-toggle.blade.php). --}}
|
||||
{{-- Every view stays visible. The current one is the selected pill. --}}
|
||||
<div class="view-toggle w-fit">
|
||||
@foreach (['list' => ['List view', 'unordered-list'], 'grid' => ['Grid view', 'grid']] as $mode => [$viewLabel, $icon])
|
||||
<button type="button" @click="viewMode = '{{ $mode }}'; localStorage.setItem('{{ $storageKey }}', '{{ $mode }}')"
|
||||
x-show="viewMode !== '{{ $mode }}'" x-cloak title="{{ $viewLabel }}"
|
||||
class="relative flex h-7.5 items-center gap-1.5 rounded-md px-2.5 text-[12px] font-medium text-neutral-400 transition-colors hover:bg-neutral-100 hover:text-black dark:text-fg dark:hover:bg-white/[0.06] dark:hover:text-fg">
|
||||
title="{{ $viewLabel }}"
|
||||
class="relative flex h-7.5 items-center gap-1.5 rounded-md px-2.5 text-[12px] font-medium transition-colors"
|
||||
:class="viewMode === '{{ $mode }}' ? 'is-selected' : 'text-neutral-400 hover:bg-neutral-100 hover:text-black dark:hover:text-white'"
|
||||
:aria-pressed="(viewMode === '{{ $mode }}').toString()">
|
||||
<x-reicon :name="$icon" class="size-3.5" />
|
||||
{{ $viewLabel }}
|
||||
</button>
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
$hasLoading = filled($wireTarget);
|
||||
@endphp
|
||||
|
||||
<footer {{ $attributes->class('flex min-h-11 items-center justify-between border-t border-neutral-200 px-4 text-[11px] text-neutral-500 dark:border-white/[0.08] dark:text-fg-faint') }}>
|
||||
<footer @if ((int) $lastPage <= 1) hidden @endif {{ $attributes->class('pager flex min-h-11 items-center justify-between border-t border-neutral-200 px-4 text-[11px] text-neutral-500 dark:border-white/[0.08] dark:text-fg-faint') }}>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="inline-flex h-7 items-center whitespace-nowrap tabular-nums">{{ $from }}–{{ $to }} of {{ $total }}</span>
|
||||
@isset($pageSize)
|
||||
|
||||
@@ -104,15 +104,27 @@
|
||||
default => null,
|
||||
};
|
||||
@endphp
|
||||
<div class="flex min-w-0 items-center gap-0.5 text-[13px]">
|
||||
<div class="flex min-w-0 items-center gap-0.5 text-[13px]" data-page-context="{{ $dashboardContext }}"
|
||||
x-data="{
|
||||
titleRepeats: false,
|
||||
syncTitle() {
|
||||
const expected = this.$el.dataset.pageContext || '';
|
||||
const heading = document.querySelector('.app-main h1');
|
||||
const title = heading && heading.offsetHeight > 0 && heading.getBoundingClientRect().top < 140
|
||||
? heading.textContent.trim()
|
||||
: '';
|
||||
this.titleRepeats = expected !== '' && title === expected;
|
||||
},
|
||||
}"
|
||||
x-init="syncTitle()" @livewire:navigated.window="$nextTick(() => syncTitle())">
|
||||
{{-- Team --}}
|
||||
<div class="shrink-0" x-data="{ collapsed: false }">
|
||||
<livewire:switch-team />
|
||||
</div>
|
||||
|
||||
@if (!$currentProject && $dashboardContext)
|
||||
<span class="shrink-0 px-0.5 text-neutral-300 dark:text-fg-faint">/</span>
|
||||
<span
|
||||
<span x-show="!titleRepeats" x-cloak class="shrink-0 px-0.5 text-neutral-300 dark:text-fg-faint">/</span>
|
||||
<span x-show="!titleRepeats" x-cloak
|
||||
class="flex h-8 min-w-0 items-center truncate px-2 font-semibold text-black opacity-70 dark:text-fg">{{ $dashboardContext }}</span>
|
||||
@endif
|
||||
|
||||
|
||||
@@ -19,6 +19,14 @@
|
||||
this.sidebarReady = true;
|
||||
});
|
||||
});
|
||||
if (!window.__coolifyMarkScrolled) {
|
||||
window.__coolifyMarkScrolled = () => {
|
||||
document.documentElement.classList.toggle('is-scrolled', window.scrollY > 2);
|
||||
};
|
||||
window.addEventListener('scroll', window.__coolifyMarkScrolled, { passive: true });
|
||||
document.addEventListener('livewire:navigated', () => requestAnimationFrame(window.__coolifyMarkScrolled));
|
||||
}
|
||||
window.__coolifyMarkScrolled();
|
||||
},
|
||||
toggleSidebar() {
|
||||
this.collapsed = !this.collapsed;
|
||||
|
||||
@@ -38,7 +38,7 @@
|
||||
default => ['Ready', 'success'],
|
||||
}];
|
||||
});
|
||||
$iconButton = 'flex size-6.5 items-center justify-center rounded-md text-neutral-400 transition-colors hover:bg-neutral-100 hover:text-black dark:text-fg-faint dark:hover:bg-white/[0.06] dark:hover:text-fg';
|
||||
$iconButton = 'card-icon-button flex size-6.5 items-center justify-center rounded-md text-neutral-400 transition-colors hover:bg-neutral-100 hover:text-black';
|
||||
// Same look as $iconButton, sized to the 20px section title it sits next to.
|
||||
$titleIconButton = 'flex size-5 items-center justify-center rounded-md text-neutral-400 transition-colors hover:bg-neutral-100 hover:text-black dark:text-fg-faint dark:hover:bg-white/[0.06] dark:hover:text-fg';
|
||||
$tableShell = 'overflow-x-auto rounded-xl border border-neutral-200 bg-white shadow-sm dark:border-white/[0.08] dark:bg-white/[0.05]';
|
||||
@@ -127,7 +127,7 @@
|
||||
|
||||
<div class="flex min-w-0 items-start gap-3">
|
||||
<div
|
||||
class="flex size-8 shrink-0 items-center justify-center rounded-lg border border-neutral-200 bg-neutral-50 text-neutral-500 dark:border-white/[0.08] dark:bg-white/[0.04] dark:text-fg-dim">
|
||||
class="resource-glyph flex size-8 shrink-0 items-center justify-center rounded-lg border border-neutral-200 bg-neutral-50 text-neutral-500">
|
||||
@if ($project->icon_path)
|
||||
<img src="{{ project_icon_url($project) }}"
|
||||
alt="{{ $project->name }} icon"
|
||||
@@ -150,18 +150,13 @@
|
||||
</div>
|
||||
|
||||
<div class="mt-auto flex items-center justify-between gap-3 border-t border-neutral-100 pt-2.5 dark:border-white/[0.06]">
|
||||
<div class="relative z-10 flex min-w-0 items-center gap-3 text-[11px] font-medium text-neutral-500 dark:text-fg-dim">
|
||||
<span class="inline-flex items-center gap-1" data-tooltip="Environments"
|
||||
aria-label="Environments">
|
||||
<x-reicon name="layers" class="size-3.5 text-neutral-400 dark:text-fg-faint" />
|
||||
{{ $project->environments->count() }}
|
||||
</span>
|
||||
<span class="inline-flex items-center gap-1" data-tooltip="Resources"
|
||||
aria-label="Resources">
|
||||
<x-reicon name="grid" class="size-3.5 text-neutral-400 dark:text-fg-faint" />
|
||||
{{ $resourceCount }}
|
||||
</span>
|
||||
</div>
|
||||
<p class="project-card-stats relative z-10 min-w-0">
|
||||
<b>{{ $project->environments->count() }}</b>
|
||||
{{ $project->environments->count() === 1 ? 'environment' : 'environments' }}
|
||||
<span class="project-card-stats-dot" aria-hidden="true">·</span>
|
||||
<b>{{ $resourceCount }}</b>
|
||||
{{ $resourceCount === 1 ? 'resource' : 'resources' }}
|
||||
</p>
|
||||
|
||||
<div class="relative z-10 flex shrink-0 items-center gap-0.5">
|
||||
@if ($firstEnvironment)
|
||||
@@ -210,7 +205,7 @@
|
||||
class="absolute inset-0" aria-label="Open {{ $project->name }}"></a>
|
||||
<div class="flex min-w-0 items-center gap-3">
|
||||
<div
|
||||
class="flex size-8 shrink-0 items-center justify-center rounded-lg border border-neutral-200 bg-neutral-50 text-neutral-500 dark:border-white/[0.08] dark:bg-white/[0.035] dark:text-fg-dim">
|
||||
class="resource-glyph flex size-8 shrink-0 items-center justify-center rounded-lg border border-neutral-200 bg-neutral-50 text-neutral-500">
|
||||
@if ($project->icon_path)
|
||||
<img src="{{ project_icon_url($project) }}" alt="{{ $project->name }} icon"
|
||||
class="h-full w-full rounded-lg object-cover">
|
||||
@@ -336,7 +331,7 @@
|
||||
|
||||
<div class="relative z-10 flex min-w-0 items-start gap-3">
|
||||
<div
|
||||
class="flex size-8 shrink-0 items-center justify-center rounded-lg border border-neutral-200 bg-neutral-50 text-neutral-500 dark:border-white/[0.1] dark:bg-white/[0.04] dark:text-fg-dim">
|
||||
class="resource-glyph flex size-8 shrink-0 items-center justify-center rounded-lg border border-neutral-200 bg-neutral-50 text-neutral-500">
|
||||
<x-reicon name="servers" class="size-4" />
|
||||
</div>
|
||||
<div class="min-w-0 flex-1 self-center">
|
||||
@@ -380,7 +375,7 @@
|
||||
class="grid grid-cols-[minmax(0,1fr)_9.5rem] gap-4 @2xl:min-w-[480px] @2xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_9.5rem] hover:no-underline {{ $tableRow }}">
|
||||
<div class="flex min-w-0 items-center gap-3">
|
||||
<div
|
||||
class="flex size-8 shrink-0 items-center justify-center rounded-lg border border-neutral-200 bg-neutral-50 text-neutral-500 dark:border-white/[0.1] dark:bg-white/[0.035] dark:text-fg-dim">
|
||||
class="resource-glyph flex size-8 shrink-0 items-center justify-center rounded-lg border border-neutral-200 bg-neutral-50 text-neutral-500">
|
||||
<x-reicon name="servers" class="size-4" />
|
||||
</div>
|
||||
<p class="truncate text-[13px] font-semibold text-black dark:text-fg">
|
||||
|
||||
@@ -89,7 +89,7 @@
|
||||
:aria-label="`Open ${project.name}`"></a>
|
||||
<div class="flex items-start gap-3">
|
||||
<div
|
||||
class="flex size-8 shrink-0 items-center justify-center rounded-lg border border-neutral-200 bg-neutral-50 text-neutral-500 dark:border-white/[0.08] dark:bg-white/[0.04] dark:text-fg-dim">
|
||||
class="resource-glyph flex size-8 shrink-0 items-center justify-center rounded-lg border border-neutral-200 bg-neutral-50 text-neutral-500">
|
||||
<template x-if="project.iconUrl">
|
||||
<img :src="project.iconUrl" :alt="`${project.name} icon`" class="h-full w-full rounded-lg object-cover">
|
||||
</template>
|
||||
@@ -108,28 +108,23 @@
|
||||
</div>
|
||||
|
||||
<div class="mt-auto flex items-center justify-between gap-3 border-t border-neutral-100 pt-2.5 dark:border-white/[0.06]">
|
||||
<div class="relative z-10 flex min-w-0 items-center gap-3 text-[11px] font-medium text-neutral-500 dark:text-fg-dim">
|
||||
<span class="inline-flex items-center gap-1" data-tooltip="Environments"
|
||||
aria-label="Environments">
|
||||
<x-reicon name="layers" class="size-3.5 text-neutral-400 dark:text-fg-faint" />
|
||||
<span x-text="project.environmentCount"></span>
|
||||
</span>
|
||||
<span class="inline-flex items-center gap-1" data-tooltip="Resources"
|
||||
aria-label="Resources">
|
||||
<x-reicon name="grid" class="size-3.5 text-neutral-400 dark:text-fg-faint" />
|
||||
<span x-text="project.resourceCount"></span>
|
||||
</span>
|
||||
</div>
|
||||
<p class="project-card-stats relative z-10 min-w-0">
|
||||
<b x-text="project.environmentCount"></b>
|
||||
<span x-text="Number(project.environmentCount) === 1 ? 'environment' : 'environments'"></span>
|
||||
<span class="project-card-stats-dot" aria-hidden="true">·</span>
|
||||
<b x-text="project.resourceCount"></b>
|
||||
<span x-text="Number(project.resourceCount) === 1 ? 'resource' : 'resources'"></span>
|
||||
</p>
|
||||
|
||||
<div class="relative z-10 flex shrink-0 items-center gap-0.5">
|
||||
<a x-show="project.addResourceHref" :href="project.addResourceHref"
|
||||
{{ wireNavigate() }}
|
||||
class="flex size-7.5 items-center justify-center rounded-md text-neutral-400 transition-colors hover:bg-neutral-100 hover:text-black dark:text-fg-faint dark:hover:bg-white/[0.06] dark:hover:text-fg"
|
||||
class="card-icon-button flex size-7.5 items-center justify-center rounded-md text-neutral-400 transition-colors hover:bg-neutral-100 hover:text-black"
|
||||
title="Add resource" :aria-label="`Add resource to ${project.name}`">
|
||||
<x-reicon name="plus" class="size-3" />
|
||||
</a>
|
||||
<a x-show="project.settingsHref" :href="project.settingsHref" {{ wireNavigate() }}
|
||||
class="flex size-7.5 items-center justify-center rounded-md text-neutral-400 transition-colors hover:bg-neutral-100 hover:text-black dark:text-fg-faint dark:hover:bg-white/[0.06] dark:hover:text-fg"
|
||||
class="card-icon-button flex size-7.5 items-center justify-center rounded-md text-neutral-400 transition-colors hover:bg-neutral-100 hover:text-black"
|
||||
title="Project settings" :aria-label="`Open settings for ${project.name}`">
|
||||
<x-reicon name="settings" class="size-3" />
|
||||
</a>
|
||||
@@ -159,7 +154,7 @@
|
||||
class="projects-table-grid group min-h-14 items-center border-b border-neutral-200 px-4 py-2.5 transition-colors last:border-b-0 hover:bg-neutral-50 dark:border-white/[0.07] dark:hover:bg-white/[0.025]">
|
||||
<div class="flex min-w-0 items-center gap-3">
|
||||
<div
|
||||
class="flex size-8 shrink-0 items-center justify-center rounded-lg border border-neutral-200 bg-neutral-50 text-neutral-500 dark:border-white/[0.08] dark:bg-white/[0.035] dark:text-fg-dim">
|
||||
class="resource-glyph flex size-8 shrink-0 items-center justify-center rounded-lg border border-neutral-200 bg-neutral-50 text-neutral-500">
|
||||
<template x-if="project.iconUrl">
|
||||
<img :src="project.iconUrl" :alt="`${project.name} icon`" class="h-full w-full rounded-lg object-cover">
|
||||
</template>
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
@foreach (['general' => 'General', 'executions' => 'Executions', ...(auth()->user()->can('update', $resource) ? ['danger' => 'Danger Zone'] : [])] as $sectionKey => $sectionLabel)
|
||||
<button type="button" @click="activeSection = '{{ $sectionKey }}'"
|
||||
:class="activeSection === '{{ $sectionKey }}'
|
||||
? 'bg-coollabs/10 text-coollabs ring-1 ring-coollabs/25 dark:bg-warning/15 dark:text-warning dark:ring-warning/25'
|
||||
? 'bg-coollabs/10 text-coollabs ring-1 ring-coollabs/25 dark:bg-brand/15 dark:text-brand-light dark:ring-brand-light/25'
|
||||
: 'text-neutral-500 hover:bg-black/5 hover:text-neutral-900 dark:text-fg-dim dark:hover:bg-white/[0.06] dark:hover:text-fg'"
|
||||
class="inline-flex h-8 shrink-0 cursor-pointer items-center rounded-md px-3 text-[13px] font-medium transition-colors">
|
||||
{{ $sectionLabel }}
|
||||
|
||||
@@ -137,7 +137,7 @@
|
||||
|
||||
<div class="relative z-10 flex items-start gap-3">
|
||||
<div
|
||||
class="flex size-8 shrink-0 items-center justify-center rounded-lg border border-neutral-200 bg-neutral-50 text-neutral-500 dark:border-white/[0.1] dark:bg-white/[0.04] dark:text-fg-dim">
|
||||
class="resource-glyph flex size-8 shrink-0 items-center justify-center rounded-lg border border-neutral-200 bg-neutral-50 text-neutral-500">
|
||||
<x-reicon name="servers" class="size-4" />
|
||||
</div>
|
||||
<div class="min-w-0 flex-1 self-center">
|
||||
@@ -199,7 +199,7 @@
|
||||
])>
|
||||
<div class="flex min-w-0 items-center gap-3">
|
||||
<div
|
||||
class="flex size-8 shrink-0 items-center justify-center rounded-lg border border-neutral-200 bg-neutral-50 text-neutral-500 dark:border-white/[0.1] dark:bg-white/[0.035] dark:text-fg-dim">
|
||||
class="resource-glyph flex size-8 shrink-0 items-center justify-center rounded-lg border border-neutral-200 bg-neutral-50 text-neutral-500">
|
||||
<x-reicon name="servers" class="size-4" />
|
||||
</div>
|
||||
<div class="min-w-0">
|
||||
|
||||
@@ -7,14 +7,14 @@
|
||||
<button type="button" x-on:click="selected = 'monthly'"
|
||||
class="app-tab h-6! px-2.5!"
|
||||
:class="selected === 'monthly'
|
||||
? 'bg-coollabs/10 text-coollabs ring-1 ring-coollabs/25 dark:bg-warning/15 dark:text-warning dark:ring-warning/25'
|
||||
? 'bg-coollabs/10 text-coollabs ring-1 ring-coollabs/25 dark:bg-brand/15 dark:text-brand-light dark:ring-brand-light/25'
|
||||
: ''">
|
||||
Monthly
|
||||
</button>
|
||||
<button type="button" x-on:click="selected = 'yearly'"
|
||||
class="app-tab h-6! px-2.5!"
|
||||
:class="selected === 'yearly'
|
||||
? 'bg-coollabs/10 text-coollabs ring-1 ring-coollabs/25 dark:bg-warning/15 dark:text-warning dark:ring-warning/25'
|
||||
? 'bg-coollabs/10 text-coollabs ring-1 ring-coollabs/25 dark:bg-brand/15 dark:text-brand-light dark:ring-brand-light/25'
|
||||
: ''">
|
||||
Yearly
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user