dave/coolify
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Update styles and classes in blade files

Browse Source
This commit is contained in:
Andras Bacsai
2024-03-22 16:52:20 +01:00
parent c9e2f4244d
commit 54834891fb
15 changed files with 60 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/View/Components/Forms/Select.php
View File

@@ -19,7 +19,7 @@ class Select extends Component
public ?string $label = null, public ?string $label = null,
public ?string $helper = null, public ?string $helper = null,
public bool $required = false, public bool $required = false,
public string $defaultClass = "block w-full py-1.5 rounded border-0 text-sm ring-inset ring-1 dark:ring-coolgray-300 dark:placeholder:text-neutral-700 focus:ring-2 focus:ring-inset dark:focus:ring-coolgray-500 dark:bg-coolgray-100 dark:text-white text-black " public string $defaultClass = "select"
) { ) {
// //
} }

57
resources/css/app.css
View File

@@ -11,8 +11,28 @@ body {
@apply text-sm antialiased scrollbar; @apply text-sm antialiased scrollbar;
} }
.input, .select {
@apply text-black dark:bg-coolgray-100 dark:text-white ring-neutral-300 dark:ring-coolgray-300 ;
}
/* Readonly */
.input {
@apply dark:read-only:text-neutral-500 dark:read-only:ring-0 dark:read-only:bg-coolgray-100/40 placeholder:text-neutral-300 dark:placeholder:text-neutral-700;
}
/* Focus */
.input, .select {
@apply focus:ring-2 dark:focus:ring-coolgray-300 focus:ring-neutral-400;
}
.input, .select {
@apply block w-full py-1.5 rounded border-0 text-sm pr-10 ring-1 ring-inset;
}
option {
@apply text-white dark:bg-coolgray-100;
}
.button { .button {
@apply flex items-center justify-center px-3 py-1 text-sm font-normal normal-case rounded bg-neutral-200 hover:bg-neutral-300 dark:bg-coolgray-200 dark:text-white dark:hover:bg-coolgray-100 dark:disabled:bg-coolgray-100/40 dark:disabled:text-neutral-800 min-w-fit; @apply flex items-center justify-center px-3 py-1 text-sm font-normal normal-case rounded bg-neutral-200 hover:bg-neutral-300 dark:bg-coolgray-200 dark:text-white dark:hover:bg-coolgray-100 hover:text-black dark:hover:text-white dark:disabled:bg-coolgray-100/40 dark:disabled:text-neutral-800 min-w-fit;
} }
button[isError]:not(:disabled) { button[isError]:not(:disabled) {
@apply bg-red-600 hover:bg-red-700; @apply bg-red-600 hover:bg-red-700;
@@ -79,18 +99,6 @@ tr td:first-child {
@apply pl-4 pr-3 font-bold sm:pl-6; @apply pl-4 pr-3 font-bold sm:pl-6;
} }
input {
@apply pr-10;
}
.input {
@apply block w-full py-1.5 rounded border-0 text-sm ring-inset ring-1 dark:bg-coolgray-100 dark:text-white text-black focus:ring-2 dark:focus:ring-coolgray-300 dark:ring-coolgray-300 dark:read-only:text-neutral-500 dark:read-only:ring-0 dark:read-only:bg-coolgray-100/40 dark:placeholder:text-neutral-700;
}
option {
@apply text-white;
}
.alert-success { .alert-success {
@apply flex items-center gap-2 text-success; @apply flex items-center gap-2 text-success;
} }
@@ -136,12 +144,10 @@ option {
} }
.icon { .icon {
@apply w-6 h-6; @apply w-6 h-6 hover:text-white;
} }
.icon:hover {
@apply text-white;
}
.scrollbar { .scrollbar {
@apply scrollbar-thumb-coollabs-100 scrollbar-track-coolgray-200 scrollbar-w-2; @apply scrollbar-thumb-coollabs-100 scrollbar-track-coolgray-200 scrollbar-w-2;
@@ -167,11 +173,12 @@ option {
@apply px-2 text-xs border border-dashed rounded border-neutral-700 text-warning; @apply px-2 text-xs border border-dashed rounded border-neutral-700 text-warning;
} }
.box { .box {
@apply flex p-2 transition-colors cursor-pointer min-h-[4rem] dark:bg-coolgray-100 bg-neutral-50 hover:bg-neutral-200 dark:hover:bg-coollabs-100 dark:hover:text-white hover:no-underline; @apply flex p-2 transition-colors cursor-pointer min-h-[4rem] dark:bg-coolgray-100 bg-neutral-100 hover:bg-neutral-200 dark:hover:bg-coollabs-100 dark:hover:text-white hover:no-underline;
}
.on-box {
@apply rounded hover:bg-neutral-300 dark:hover:bg-coolgray-500/20;
} }
.box-without-bg { .box-without-bg {
@@ -223,7 +230,13 @@ option {
} }
.text-helper { .text-helper {
@apply inline-block font-bold text-warning; @apply inline-block font-bold text-coollabs dark:text-warning;
}
.info-helper {
@apply cursor-pointer text-coollabs dark:text-warning;
}
.info-helper-popup {
@apply absolute z-40 hidden text-xs rounded text-neutral-700 group-hover:block dark:border-coolgray-500 border-neutral-900 dark:bg-coolgray-400 bg-neutral-100 dark:text-neutral-300;
} }
.buyme { .buyme {

4
resources/views/components/helper.blade.php
View File

@@ -1,11 +1,11 @@
<div class="group"> <div class="group">
<div class="cursor-pointer text-warning"> <div class="info-helper">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-4 h-4 stroke-current"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-4 h-4 stroke-current">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path> d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg> </svg>
</div> </div>
<div class="absolute z-40 hidden text-xs rounded group-hover:block border-coolgray-400 bg-coolgray-500"> <div class="info-helper-popup">
<div class="p-4"> <div class="p-4">
{!! $helper !!} {!! $helper !!}
</div> </div>

2
resources/views/components/highlighted.blade.php
View File

@@ -1 +1 @@
<span class="inline-block font-bold text-warning">{{ $text }}</span> <span class="text-helper">{{ $text }}</span>

4
resources/views/components/navbar.blade.php
View File

@@ -1,4 +1,4 @@
<nav class="flex flex-col flex-1 pl-4 border-r dark:border-coolgray-200 dark:bg-base bg-neutral-50"> <nav class="flex flex-col flex-1 pl-4 bg-white border-r dark:border-coolgray-200 dark:bg-base">
<div class="flex w-full px-2 pt-6 pb-4"> <div class="flex w-full px-2 pt-6 pb-4">
<div class="flex flex-col"> <div class="flex flex-col">
<div class="text-2xl font-bold tracking-wide dark:text-white">Coolify</div> <div class="text-2xl font-bold tracking-wide dark:text-white">Coolify</div>
@@ -6,7 +6,7 @@
</div> </div>
{{-- <button onclick="changeTheme()">Dark/light</button> --}} {{-- <button onclick="changeTheme()">Dark/light</button> --}}
</div> </div>
<div class="px-2 pt-2 pb-6"> <div class="px-2 pt-2 pb-7">
<livewire:switch-team /> <livewire:switch-team />
</div> </div>
<ul role="list" class="flex flex-col flex-1 gap-y-7"> <ul role="list" class="flex flex-col flex-1 gap-y-7">

11
resources/views/components/team/navbar.blade.php
View File

@@ -1,14 +1,9 @@
<div class="pb-6"> <div class="pb-6">
<div class="flex items-end gap-2"> <div class="flex items-end gap-2">
<h1>Team</h1> <h1>Team</h1>
<x-slide-over> <x-modal-input buttonTitle="+ Add" title="New Team">
<x-slot:title>New Team</x-slot:title> <livewire:team.create/>
<x-slot:content> </x-modal-input>
<livewire:team.create/>
</x-slot:content>
<button @click="slideOverOpen=true" class="button">+
Add</button>
</x-slide-over>
</div> </div>
<div class="subtitle">Team settings & shared environment variables.</div> <div class="subtitle">Team settings & shared environment variables.</div>
<nav class="navbar-main"> <nav class="navbar-main">

8
resources/views/components/toast.blade.php
View File

@@ -386,7 +386,7 @@
class="absolute w-full duration-100 ease-out sm:max-w-xs " class="absolute w-full duration-100 ease-out sm:max-w-xs "
:class="{ 'toast-no-description': !toast.description }"> :class="{ 'toast-no-description': !toast.description }">
<span <span
class="relative flex flex-col items-start shadow-[0_5px_15px_-3px_rgb(0_0_0_/_0.08)] w-full transition-all duration-100 ease-out bg-coolgray-100 border border-coolgray-200 rounded sm:max-w-xs group" class="relative flex flex-col items-start shadow-[0_5px_15px_-3px_rgb(0_0_0_/_0.08)] w-full transition-all duration-100 ease-out dark:bg-coolgray-100 bg-neutral-100 dark:border dark:border-coolgray-200 rounded sm:max-w-xs group"
:class="{ 'p-4': !toast.html, 'p-0': toast.html }"> :class="{ 'p-4': !toast.html, 'p-0': toast.html }">
<template x-if="!toast.html"> <template x-if="!toast.html">
<div class="relative w-full"> <div class="relative w-full">
@@ -417,7 +417,7 @@
d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12ZM11.9996 7C12.5519 7 12.9996 7.44772 12.9996 8V12C12.9996 12.5523 12.5519 13 11.9996 13C11.4474 13 10.9996 12.5523 10.9996 12V8C10.9996 7.44772 11.4474 7 11.9996 7ZM12.001 14.99C11.4488 14.9892 11.0004 15.4363 10.9997 15.9886L10.9996 15.9986C10.9989 16.5509 11.446 16.9992 11.9982 17C12.5505 17.0008 12.9989 16.5537 12.9996 16.0014L12.9996 15.9914C13.0004 15.4391 12.5533 14.9908 12.001 14.99Z" d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12ZM11.9996 7C12.5519 7 12.9996 7.44772 12.9996 8V12C12.9996 12.5523 12.5519 13 11.9996 13C11.4474 13 10.9996 12.5523 10.9996 12V8C10.9996 7.44772 11.4474 7 11.9996 7ZM12.001 14.99C11.4488 14.9892 11.0004 15.4363 10.9997 15.9886L10.9996 15.9986C10.9989 16.5509 11.446 16.9992 11.9982 17C12.5505 17.0008 12.9989 16.5537 12.9996 16.0014L12.9996 15.9914C13.0004 15.4391 12.5533 14.9908 12.001 14.99Z"
fill="currentColor"></path> fill="currentColor"></path>
</svg> </svg>
<p class="leading-2 text-neutral-200" x-html="toast.message"> <p class="text-black leading-2 dark:text-neutral-200" x-html="toast.message">
</p> </p>
</div> </div>
<div x-show="toast.description" :class="{ 'pl-5': toast.type!='default' }" <div x-show="toast.description" :class="{ 'pl-5': toast.type!='default' }"
@@ -438,7 +438,7 @@
Copied Copied
</span> </span>
<span @click="copyToClipboard()" <span @click="copyToClipboard()"
class="absolute right-7 p-1.5 mr-2.5 text-neutral-400 duration-100 ease-in-out rounded-full opacity-0 cursor-pointer hover:bg-coolgray-400 hover:text-neutral-300" class="absolute right-7 p-1.5 mr-2.5 text-neutral-700 hover:text-neutral-900 dark:text-neutral-400 hover:bg-neutral-300 duration-100 ease-in-out rounded-full opacity-0 cursor-pointer dark:hover:bg-coolgray-400 dark:hover:text-neutral-300"
:class="{ :class="{
'top-1/2 -translate-y-1/2': !toast.description && !toast.html, 'top-1/2 -translate-y-1/2': !toast.description && !toast.html,
'top-0 mt-3': (toast 'top-0 mt-3': (toast
@@ -455,7 +455,7 @@
</svg> </svg>
</span> </span>
<span @click="burnToast(toast.id)" <span @click="burnToast(toast.id)"
class="absolute right-0 p-1.5 mr-2.5 text-neutral-400 duration-100 ease-in-out rounded-full opacity-0 cursor-pointer hover:bg-coolgray-400 hover:text-neutral-300" class="absolute right-0 p-1.5 mr-2.5 text-neutral-700 hover:text-neutral-900 dark:text-neutral-400 duration-100 ease-in-out rounded-full opacity-0 cursor-pointer hover:bg-neutral-300 dark:hover:bg-coolgray-400 dark:hover:text-neutral-300"
:class="{ :class="{
'top-1/2 -translate-y-1/2': !toast.description && !toast.html, 'top-1/2 -translate-y-1/2': !toast.description && !toast.html,
'top-0 mt-3.5': (toast 'top-0 mt-3.5': (toast

6
resources/views/livewire/dashboard.blade.php
View File

@@ -39,12 +39,12 @@
<a class="mx-4 rounded hover:no-underline" <a class="mx-4 rounded hover:no-underline"
href="{{ route('project.resource.create', ['project_uuid' => data_get($project, 'uuid'), 'environment_name' => data_get($project, 'environments.0.name', 'production')]) }}"> href="{{ route('project.resource.create', ['project_uuid' => data_get($project, 'uuid'), 'environment_name' => data_get($project, 'environments.0.name', 'production')]) }}">
<span <span
class="p-2 font-bold group-hover:dark:text-white group-hover:text-black dark:hover:bg-coollabs hover:bg-neutral-300">+ class="p-2 font-bold on-box">+
Add Resource</span> Add Resource</span>
</a> </a>
<a class="mx-4 rounded group-hover:dark:text-white group-hover:text-black" <a class="mx-4"
href="{{ route('project.edit', ['project_uuid' => data_get($project, 'uuid')]) }}"> href="{{ route('project.edit', ['project_uuid' => data_get($project, 'uuid')]) }}">
<svg xmlns="http://www.w3.org/2000/svg" class="icon hover:bg-coollabs" viewBox="0 0 24 24" <svg xmlns="http://www.w3.org/2000/svg" class="icon on-box" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
stroke-linejoin="round"> stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path stroke="none" d="M0 0h24v24H0z" fill="none" />

2
resources/views/livewire/profile/index.blade.php
View File

@@ -12,7 +12,7 @@
</div> </div>
</form> </form>
<form wire:submit='resetPassword' class="flex flex-col max-w-xl pt-4"> <form wire:submit='resetPassword' class="flex flex-col max-w-xl pt-4">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2 pb-2">
<h2>Change Password</h2> <h2>Change Password</h2>
<x-forms.button type="submit" label="Save">Save</x-forms.button> <x-forms.button type="submit" label="Save">Save</x-forms.button>
</div> </div>

2
resources/views/livewire/project/edit.blade.php
View File

@@ -26,7 +26,7 @@
</x-slide-over> </x-slide-over>
</div> </div>
<div class="flex items-center gap-2 pb-4">You can use these variables anywhere with <span <div class="flex items-center gap-2 pb-4">You can use these variables anywhere with <span
class="text-warning">@{{ project.VARIABLENAME }}</span><x-helper class="dark:text-warning text-coollabs">@{{ project.VARIABLENAME }}</span><x-helper
helper="More info <a class='text-white underline' href='https://coolify.io/docs/environment-variables#shared-variables' target='_blank'>here</a>."></x-helper> helper="More info <a class='text-white underline' href='https://coolify.io/docs/environment-variables#shared-variables' target='_blank'>here</a>."></x-helper>
</div> </div>
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">

12
resources/views/livewire/project/index.blade.php
View File

@@ -1,14 +1,6 @@
<div> <div>
<div class="flex gap-2"> <div class="flex gap-2">
<h1>Projects</h1> <h1>Projects</h1>
<x-slide-over>
<x-slot:title>New Project</x-slot:title>
<x-slot:content>
<livewire:project.add-empty />
</x-slot:content>
<button @click="slideOverOpen=true" class="button">+
Add</button>
</x-slide-over>
<x-modal-input buttonTitle="+ Add" title="New Project"> <x-modal-input buttonTitle="+ Add" title="New Project">
<livewire:project.add-empty /> <livewire:project.add-empty />
</x-modal-input> </x-modal-input>
@@ -25,9 +17,9 @@
{{ $project->description }}</div> {{ $project->description }}</div>
</a> </a>
<div class="flex items-center"> <div class="flex items-center">
<a class="mx-4 rounded group-hover:text-white" <a class="mx-4 on-box"
href="{{ route('project.edit', ['project_uuid' => data_get($project, 'uuid')]) }}"> href="{{ route('project.edit', ['project_uuid' => data_get($project, 'uuid')]) }}">
<svg xmlns="http://www.w3.org/2000/svg" class="icon hover:text-warning" viewBox="0 0 24 24" <svg xmlns="http://www.w3.org/2000/svg" class="icon on-box" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
stroke-linejoin="round"> stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path stroke="none" d="M0 0h24v24H0z" fill="none" />

2
resources/views/livewire/project/resource/index.blade.php
View File

@@ -45,7 +45,7 @@
class="items-center justify-center box">+ Add New Resource</a> class="items-center justify-center box">+ Add New Resource</a>
@else @else
<div x-data="searchComponent()"> <div x-data="searchComponent()">
<x-forms.input autofocus placeholder="Search for name, fqdn..." class="w-full" x-model="search" /> <x-forms.input autofocus placeholder="Search for name, fqdn..." x-model="search" />
<div class="grid grid-cols-1 gap-4 pt-4 lg:grid-cols-2 xl:grid-cols-3"> <div class="grid grid-cols-1 gap-4 pt-4 lg:grid-cols-2 xl:grid-cols-3">
<template x-for="item in filteredApplications" :key="item.id"> <template x-for="item in filteredApplications" :key="item.id">
<span> <span>

4
resources/views/livewire/project/show.blade.php
View File

@@ -23,9 +23,9 @@
{{ $environment->description }}</div> {{ $environment->description }}</div>
</a> </a>
<div class="flex items-center"> <div class="flex items-center">
<a class="mx-4 rounded group-hover:text-white" <a class="mx-4"
href="{{ route('project.environment.edit', ['project_uuid' => data_get($project, 'uuid'), 'environment_name' => $environment->name]) }}"> href="{{ route('project.environment.edit', ['project_uuid' => data_get($project, 'uuid'), 'environment_name' => $environment->name]) }}">
<svg xmlns="http://www.w3.org/2000/svg" class="icon hover:text-warning" viewBox="0 0 24 24" <svg xmlns="http://www.w3.org/2000/svg" class="icon on-box" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
stroke-linejoin="round"> stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path stroke="none" d="M0 0h24v24H0z" fill="none" />

2
resources/views/livewire/switch-team.blade.php
View File

@@ -1,6 +1,6 @@
<x-forms.select wire:model.live="selectedTeamId" label="Current Team"> <x-forms.select wire:model.live="selectedTeamId" label="Current Team">
<option value="default" disabled selected>Switch team</option> <option value="default" disabled selected>Switch team</option>
@foreach (auth()->user()->teams as $team) @foreach (auth()->user()->teams as $team)
<option value="{{ $team->id }}">{{ $team->name }}</option> <option value="{{ $team->id }}">{{ $team->name }}</option>
@endforeach @endforeach
</x-forms.select> </x-forms.select>

2
resources/views/livewire/team/create.blade.php
View File

@@ -1,4 +1,4 @@
<form class="flex flex-col gap-2" wire:submit='submit'> <form class="flex flex-col w-full gap-2" wire:submit='submit'>
<x-forms.input autofocus id="name" label="Name" required /> <x-forms.input autofocus id="name" label="Name" required />
<x-forms.input id="description" label="Description" /> <x-forms.input id="description" label="Description" />
<x-forms.button type="submit"> <x-forms.button type="submit">