Update styles and classes in blade files

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

View File

@ -19,7 +19,7 @@ public function __construct(
public ?string $label = null,
public ?string $helper = null,
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"
) {
//
}

View File

@ -11,8 +11,28 @@ body {
@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 {
@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) {
@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;
}
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 {
@apply flex items-center gap-2 text-success;
}
@ -136,12 +144,10 @@ .menu-item-active {
}
.icon {
@apply w-6 h-6;
@apply w-6 h-6 hover:text-white;
}
.icon:hover {
@apply text-white;
}
.scrollbar {
@apply scrollbar-thumb-coollabs-100 scrollbar-track-coolgray-200 scrollbar-w-2;
@ -167,11 +173,12 @@ .kbd-custom {
@apply px-2 text-xs border border-dashed rounded border-neutral-700 text-warning;
}
.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 {
@ -223,7 +230,13 @@ .bg-coollabs-gradient {
}
.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 {

View File

@ -1,11 +1,11 @@
<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">
<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>
</svg>
</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">
{!! $helper !!}
</div>

View File

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

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 flex-col">
<div class="text-2xl font-bold tracking-wide dark:text-white">Coolify</div>
@ -6,7 +6,7 @@
</div>
{{-- <button onclick="changeTheme()">Dark/light</button> --}}
</div>
<div class="px-2 pt-2 pb-6">
<div class="px-2 pt-2 pb-7">
<livewire:switch-team />
</div>
<ul role="list" class="flex flex-col flex-1 gap-y-7">

View File

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

View File

@ -386,7 +386,7 @@ class="fixed block w-full group z-[9999] sm:max-w-xs"
class="absolute w-full duration-100 ease-out sm:max-w-xs "
:class="{ 'toast-no-description': !toast.description }">
<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 }">
<template x-if="!toast.html">
<div class="relative w-full">
@ -417,7 +417,7 @@ class="relative flex flex-col items-start shadow-[0_5px_15px_-3px_rgb(0_0_0_/_0.
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>
</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>
</div>
<div x-show="toast.description" :class="{ 'pl-5': toast.type!='default' }"
@ -438,7 +438,7 @@ class="mt-1.5 text-xs px-2 opacity-90 whitespace-pre-wrap w-full break-words"
Copied
</span>
<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="{
'top-1/2 -translate-y-1/2': !toast.description && !toast.html,
'top-0 mt-3': (toast
@ -455,7 +455,7 @@ class="absolute right-7 p-1.5 mr-2.5 text-neutral-400 duration-100 ease-in-out r
</svg>
</span>
<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="{
'top-1/2 -translate-y-1/2': !toast.description && !toast.html,
'top-0 mt-3.5': (toast

View File

@ -39,12 +39,12 @@
<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')]) }}">
<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>
</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')]) }}">
<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-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />

View File

@ -12,7 +12,7 @@
</div>
</form>
<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>
<x-forms.button type="submit" label="Save">Save</x-forms.button>
</div>

View File

@ -26,7 +26,7 @@
</x-slide-over>
</div>
<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>
</div>
<div class="flex flex-col gap-2">

View File

@ -1,14 +1,6 @@
<div>
<div class="flex gap-2">
<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">
<livewire:project.add-empty />
</x-modal-input>
@ -25,9 +17,9 @@
{{ $project->description }}</div>
</a>
<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')]) }}">
<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-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />

View File

@ -45,7 +45,7 @@ class="button">+
class="items-center justify-center box">+ Add New Resource</a>
@else
<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">
<template x-for="item in filteredApplications" :key="item.id">
<span>

View File

@ -23,9 +23,9 @@
{{ $environment->description }}</div>
</a>
<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]) }}">
<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-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />

View File

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

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 id="description" label="Description" />
<x-forms.button type="submit">