feat(ui): Upgrade to Tailwind v4 (#5710)

This commit is contained in:
0x4e32
2025-05-14 18:43:23 +08:00
committed by GitHub
parent 57c3647ce7
commit c728e6f2ba
76 changed files with 1051 additions and 1846 deletions

View File

@@ -21,7 +21,7 @@ class Checkbox extends Component
public string|bool|null $checked = false, public string|bool|null $checked = false,
public string|bool $instantSave = false, public string|bool $instantSave = false,
public bool $disabled = false, public bool $disabled = false,
public string $defaultClass = 'dark:border-neutral-700 text-coolgray-400 focus:ring-warning dark:bg-coolgray-100 rounded cursor-pointer dark:disabled:bg-base dark:disabled:cursor-not-allowed', public string $defaultClass = 'dark:border-neutral-700 text-coolgray-400 focus:ring-warning dark:bg-coolgray-100 rounded-sm cursor-pointer dark:disabled:bg-base dark:disabled:cursor-not-allowed',
) { ) {
if ($this->disabled) { if ($this->disabled) {
$this->defaultClass .= ' opacity-40'; $this->defaultClass .= ' opacity-40';

2021
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@@ -7,16 +7,16 @@
"build": "vite build" "build": "vite build"
}, },
"devDependencies": { "devDependencies": {
"@tailwindcss/postcss": "^4.1.4",
"@vitejs/plugin-vue": "5.2.3", "@vitejs/plugin-vue": "5.2.3",
"autoprefixer": "10.4.21",
"axios": "1.8.4", "axios": "1.8.4",
"laravel-echo": "2.0.2", "laravel-echo": "2.0.2",
"laravel-vite-plugin": "^1.2.0", "laravel-vite-plugin": "^1.2.0",
"postcss": "8.5.3", "postcss": "8.5.3",
"pusher-js": "8.4.0", "pusher-js": "8.4.0",
"tailwind-scrollbar": "^3.1.0", "tailwind-scrollbar": "^4.0.2",
"tailwindcss": "3.4.17", "tailwindcss": "^4.1.4",
"vite": "^6.3.4", "vite": "^6.2.6",
"vue": "3.5.13" "vue": "3.5.13"
}, },
"dependencies": { "dependencies": {

View File

@@ -1,6 +1,5 @@
module.exports = { module.exports = {
plugins: { plugins: {
tailwindcss: {}, '@tailwindcss/postcss': {},
autoprefixer: {},
}, },
} }

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -1,70 +1,94 @@
@import 'fonts'; @import "./fonts.css" layer(base);
@tailwind base; @import "tailwindcss";
@tailwind components;
@tailwind utilities;
@import "./utilities.css";
@plugin 'tailwind-scrollbar';
@plugin '@tailwindcss/typography';
@plugin '@tailwindcss/forms';
@source '../../storage/framework/views/*.php';
@custom-variant dark (&:where(.dark, .dark *));
@theme {
--font-sans: Inter, sans-serif;
--color-base: #101010;
--color-warning: #fcd452;
--color-success: #16a34a;
--color-error: #dc2626;
--color-coollabs: #6b16ed;
--color-coollabs-100: #7317ff;
--color-coolgray-100: #181818;
--color-coolgray-200: #202020;
--color-coolgray-300: #242424;
--color-coolgray-400: #282828;
--color-coolgray-500: #323232;
}
/*
The default border color has changed to `currentcolor` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
looks the same as it did with Tailwind CSS v3.
If we ever want to remove these styles, we need to add an explicit border
color utility to any element that depends on these defaults.
*/
@layer base {
*,
::after,
::before,
::backdrop,
::file-selector-button {
border-color: var(--color-gray-200, currentcolor);
}
}
@keyframes lds-heart {
0% {
transform: scale(1);
}
5% {
transform: scale(1.2);
}
39% {
transform: scale(0.85);
}
45% {
transform: scale(1);
}
60% {
transform: scale(0.95);
}
100% {
transform: scale(0.9);
}
}
/*
* Base styles
*/
html, html,
body { body {
@apply min-h-full bg-neutral-50 dark:bg-base dark:text-neutral-400 w-full; @apply w-full min-h-full bg-neutral-50 dark:bg-base dark:text-neutral-400;
} }
body { body {
@apply text-sm antialiased scrollbar min-h-screen; @apply min-h-screen text-sm antialiased scrollbar;
}
.apexcharts-tooltip {
@apply dark:text-white dark:border-coolgray-300 dark:bg-coolgray-200 shadow-none !important;
}
.apexcharts-tooltip-title {
@apply hidden !important;
}
.apexcharts-xaxistooltip {
@apply hidden !important;
}
.input-sticky {
@apply text-black dark:bg-coolgray-100 dark:text-white ring-neutral-200 dark:ring-coolgray-300 focus:ring-2 dark:focus:ring-coolgray-300 focus:ring-neutral-400 block w-full py-1.5 rounded border-0 text-sm ring-1 ring-inset;
}
.input-sticky-active {
@apply border-2 border-coollabs text-black dark:text-white focus:bg-neutral-200 dark:focus:bg-coolgray-400 focus:border-coollabs;
}
/* 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 read-only:text-neutral-500 read-only:bg-neutral-200;
}
/* Focus */
.input,
.select {
@apply focus:ring-2 dark:focus:ring-coolgray-300 focus:ring-neutral-400;
}
.input,
.select {
@apply text-black dark:bg-coolgray-100 dark:text-white ring-neutral-200 dark:ring-coolgray-300 block w-full py-1.5 rounded border-0 text-sm ring-1 ring-inset disabled:dark:bg-coolgray-100/40 disabled:dark:ring-transparent disabled:bg-neutral-200 disabled:text-neutral-500;
}
.select {
@apply w-full;
}
.input[type="password"] {
@apply pr-10;
} }
option { option {
@apply dark:text-white dark:bg-coolgray-100; @apply dark:text-white dark:bg-coolgray-100;
} }
.button {
@apply flex items-center justify-center gap-2 px-2 py-1 text-sm text-black normal-case border rounded 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 focus:outline-1 dark:disabled:text-neutral-600 disabled:border-none disabled:hover:bg-transparent disabled:bg-transparent disabled:text-neutral-300;
}
button[isError]:not(:disabled) { button[isError]:not(:disabled) {
@apply text-white bg-red-600 hover:bg-red-700; @apply text-white bg-red-600 hover:bg-red-700;
} }
@@ -97,7 +121,6 @@ label {
@apply dark:text-neutral-400; @apply dark:text-neutral-400;
} }
table { table {
@apply min-w-full divide-y dark:divide-coolgray-200 divide-neutral-300; @apply min-w-full divide-y dark:divide-coolgray-200 divide-neutral-300;
} }
@@ -119,7 +142,7 @@ tr th {
} }
tr th:first-child { tr th:first-child {
@apply py-3.5 pl-4 pr-3 sm:pl-6; @apply py-3.5 pr-3 pl-4 sm:pl-6;
} }
tr td { tr td {
@@ -127,203 +150,20 @@ tr td {
} }
tr td:first-child { tr td:first-child {
@apply pl-4 pr-3 font-bold sm:pl-6; @apply pr-3 pl-4 font-bold sm:pl-6;
} }
section { section {
@apply mb-12; @apply mb-12;
} }
.alert-success { /*
@apply flex items-center gap-2 text-success; * Utility classes
} */
.input[type="password"] {
.alert-error { padding-right: var(--padding-10);
@apply flex items-center gap-2 text-error;
}
.tag {
@apply px-2 py-1 cursor-pointer box-description dark:bg-coolgray-100 dark:hover:bg-coolgray-300 bg-neutral-100 hover:bg-neutral-200;
}
.add-tag {
@apply flex items-center px-2 text-xs cursor-pointer dark:text-neutral-500/20 text-neutral-500 group-hover:text-neutral-700 group-hover:dark:text-white dark:hover:bg-coolgray-300 hover:bg-neutral-200;
}
.dropdown-item {
@apply relative flex cursor-pointer select-none dark:text-white hover:bg-neutral-100 dark:hover:bg-coollabs items-center pr-4 pl-2 py-1 text-xs justify-start outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 gap-2 w-full;
}
.dropdown-item-no-padding {
@apply relative flex cursor-pointer select-none dark:text-white hover:bg-neutral-100 dark:hover:bg-coollabs items-center py-1 text-xs justify-start outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 gap-2 w-full;
}
.badge {
@apply inline-block w-3 h-3 text-xs font-bold leading-none border rounded-full border-neutral-200 dark:border-black;
}
.badge-absolute {
@apply absolute top-0 right-0 w-2 h-2 border-none rounded-t-none rounded-r-none;
}
.badge-success {
@apply bg-success;
}
.badge-warning {
@apply bg-warning;
}
.badge-error {
@apply bg-error;
}
.menu {
@apply flex items-center gap-1;
}
.menu-item {
@apply flex items-center w-full gap-3 px-2 py-1 text-sm sm:pr-0 dark:hover:bg-coolgray-100 dark:hover:text-white hover:bg-neutral-300 min-w-fit sm:min-w-64;
}
.menu-item-active {
@apply text-black rounded-none dark:bg-coolgray-200 dark:text-warning bg-neutral-200;
}
.heading-item-active {
@apply text-black rounded-none dark:bg-coolgray-200 dark:text-warning;
}
.icon {
@apply w-6 h-6 dark:hover:text-white;
}
.scrollbar {
@apply scrollbar-thumb-coollabs-100 dark:scrollbar-track-coolgray-200 scrollbar-track-neutral-200 scrollbar-thin;
}
.main {
@apply pt-4 pl-24 pr-10 lg:pr-32 lg:pl-44;
}
.custom-modal {
@apply z-50 flex flex-col gap-2 px-8 py-4 border dark:bg-coolgray-100 dark:border-coolgray-200;
}
.navbar-main {
@apply flex flex-col gap-4 pb-2 border-b-2 border-solid h-fit md:flex-row justify-items-start sm:justify-between dark:border-coolgray-200 md:items-center;
}
.loading {
@apply w-4 dark:text-warning text-coollabs;
}
.kbd-custom {
@apply px-2 text-xs border border-dashed rounded border-neutral-700 dark:text-warning;
}
.box {
@apply relative flex lg:flex-row flex-col p-2 transition-colors cursor-pointer min-h-[4rem] dark:bg-coolgray-100 shadow 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;
}
.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;
}
.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;
}
.box-without-bg-without-border {
@apply flex p-2 transition-colors dark:hover:text-white hover:no-underline min-h-[4rem];
}
.on-box {
@apply rounded hover:bg-neutral-300 dark:hover:bg-coolgray-500/20;
}
.box-title {
@apply font-bold text-black dark:text-white group-hover:dark:text-white;
}
.box-description {
@apply text-xs font-bold text-neutral-500 group-hover:dark:text-white group-hover:text-black;
}
.description {
@apply text-xs font-bold text-neutral-500 group-hover:dark:text-white group-hover:text-black;
} }
.lds-heart { .lds-heart {
animation: lds-heart 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1); animation: lds-heart 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
} }
@keyframes lds-heart {
0% {
transform: scale(1);
}
5% {
transform: scale(1.2);
}
39% {
transform: scale(0.85);
}
45% {
transform: scale(1);
}
60% {
transform: scale(0.95);
}
100% {
transform: scale(0.9);
}
}
.bg-coollabs-gradient {
@apply text-transparent text-white bg-gradient-to-r from-purple-500 via-pink-500 to-red-500;
}
.text-helper {
@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-200 dark:text-neutral-300;
}
.buyme {
@apply block px-3 py-2 mt-10 text-sm font-semibold leading-6 text-center text-white rounded-md shadow-sm hover:text-white bg-coolgray-200 hover:bg-coolgray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-coolgray-200 hover:no-underline;
}
.title {
@apply hidden pb-0 lg:block lg:pb-8;
}
.subtitle {
@apply pt-2 pb-9;
}
.fullscreen {
@apply fixed top-0 left-0 w-full h-full z-[9999] dark:bg-coolgray-100 bg-white overflow-y-auto scrollbar;
}
.toast {
z-index: 1;
}
.dz-button {
@apply w-full p-4 py-10 my-4 font-bold bg-white border dark:border-coolgray-400 dark:text-white dark:bg-transparent hover:dark:bg-coolgray-400;
}
.xterm {
@apply p-2;
}

210
resources/css/utilities.css Normal file
View File

@@ -0,0 +1,210 @@
@utility apexcharts-tooltip {
@apply dark:text-white! dark:border-coolgray-300! dark:bg-coolgray-200! shadow-none!;
}
@utility apexcharts-tooltip-title {
@apply hidden!;
}
@utility apexcharts-xaxistooltip {
@apply hidden!;
}
@utility input-sticky {
@apply block py-1.5 w-full text-sm text-black rounded-sm border-0 ring-1 ring-inset dark:bg-coolgray-100 dark:text-white ring-neutral-200 dark:ring-coolgray-300 focus:ring-2 dark:focus:ring-coolgray-300 focus:ring-neutral-400;
}
@utility input-sticky-active {
@apply text-black border-2 border-coollabs dark:text-white focus:bg-neutral-200 dark:focus:bg-coolgray-400 focus:border-coollabs;
}
/* Focus */
@utility input-focus {
@apply focus:ring-2 dark:focus:ring-coolgray-300 focus:ring-neutral-400;
}
/* input, select before */
@utility input-select {
@apply block py-1.5 w-full text-sm text-black rounded-sm border-0 ring-1 ring-inset dark:bg-coolgray-100 dark:text-white ring-neutral-200 dark:ring-coolgray-300 dark:disabled:bg-coolgray-100/40 dark:disabled:ring-transparent disabled:bg-neutral-200 disabled:text-neutral-500;
}
/* Readonly */
@utility 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 read-only:text-neutral-500 read-only:bg-neutral-200;
@apply input-focus;
@apply input-select;
}
@utility select {
@apply w-full;
@apply input-focus;
@apply input-select;
}
@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-none disabled:hover:bg-transparent disabled:bg-transparent disabled:text-neutral-300;
}
@utility alert-success {
@apply flex gap-2 items-center text-success;
}
@utility alert-error {
@apply flex gap-2 items-center text-error;
}
@utility tag {
@apply px-2 py-1 cursor-pointer box-description dark:bg-coolgray-100 dark:hover:bg-coolgray-300 bg-neutral-100 hover:bg-neutral-200;
}
@utility add-tag {
@apply flex items-center px-2 text-xs cursor-pointer dark:text-neutral-500/20 text-neutral-500 group-hover:text-neutral-700 dark:group-hover:text-white dark:hover:bg-coolgray-300 hover:bg-neutral-200;
}
@utility dropdown-item {
@apply flex relative gap-2 justify-start items-center py-1 pr-4 pl-2 w-full text-xs transition-colors cursor-pointer select-none dark:text-white hover:bg-neutral-100 dark:hover:bg-coollabs outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50;
}
@utility dropdown-item-no-padding {
@apply flex relative gap-2 justify-start items-center py-1 w-full text-xs transition-colors cursor-pointer select-none dark:text-white hover:bg-neutral-100 dark:hover:bg-coollabs outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50;
}
@utility badge {
@apply inline-block w-3 h-3 text-xs font-bold leading-none rounded-full border border-neutral-200 dark:border-black;
}
@utility badge-absolute {
@apply absolute top-0 right-0 w-2 h-2 rounded-t-none rounded-r-none border-none;
}
@utility badge-success {
@apply bg-success;
}
@utility badge-warning {
@apply bg-warning;
}
@utility badge-error {
@apply bg-error;
}
@utility menu {
@apply flex gap-1 items-center;
}
@utility menu-item {
@apply flex gap-3 items-center px-2 py-1 w-full text-sm sm:pr-0 dark:hover:bg-coolgray-100 dark:hover:text-white hover:bg-neutral-300 min-w-fit sm:min-w-64;
}
@utility menu-item-active {
@apply text-black rounded-none dark:bg-coolgray-200 dark:text-warning bg-neutral-200;
}
@utility heading-item-active {
@apply text-black rounded-none dark:bg-coolgray-200 dark:text-warning;
}
@utility icon {
@apply w-6 h-6 dark:hover:text-white;
}
@utility scrollbar {
@apply scrollbar-thumb-coollabs-100 dark:scrollbar-track-coolgray-200 scrollbar-track-neutral-200 scrollbar-thin;
}
@utility main {
@apply pt-4 pr-10 pl-24 lg:pr-32 lg:pl-44;
}
@utility custom-modal {
@apply flex z-50 flex-col gap-2 px-8 py-4 border dark:bg-coolgray-100 dark:border-coolgray-200;
}
@utility navbar-main {
@apply flex flex-col gap-4 justify-items-start pb-2 border-b-2 border-solid h-fit md:flex-row sm:justify-between dark:border-coolgray-200 md:items-center;
}
@utility loading {
@apply w-4 dark:text-warning text-coollabs;
}
@utility kbd-custom {
@apply px-2 text-xs rounded-sm border border-dashed border-neutral-700 dark:text-warning;
}
@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;
}
@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;
}
@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;
}
@utility box-without-bg-without-border {
@apply flex p-2 transition-colors dark:hover:text-white hover:no-underline min-h-[4rem];
}
@utility on-box {
@apply rounded-sm hover:bg-neutral-300 dark:hover:bg-coolgray-500/20;
}
@utility box-title {
@apply font-bold text-black dark:text-white dark:group-hover:text-white;
}
@utility box-description {
@apply text-xs font-bold text-neutral-500 dark:group-hover:text-white group-hover:text-black;
}
@utility description {
@apply text-xs font-bold text-neutral-500 dark:group-hover:text-white group-hover:text-black;
}
@utility bg-coollabs-gradient {
@apply text-transparent text-white from-purple-500 via-pink-500 to-red-500 bg-linear-to-r;
}
@utility text-helper {
@apply inline-block font-bold text-coollabs dark:text-warning;
}
@utility info-helper {
@apply cursor-pointer text-coollabs dark:text-warning;
}
@utility info-helper-popup {
@apply hidden absolute z-40 text-xs rounded-sm text-neutral-700 group-hover:block dark:border-coolgray-500 border-neutral-900 dark:bg-coolgray-400 bg-neutral-200 dark:text-neutral-300;
}
@utility buyme {
@apply block px-3 py-2 mt-10 text-sm font-semibold leading-6 text-center text-white rounded-md shadow-xs hover:text-white bg-coolgray-200 hover:bg-coolgray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-coolgray-200 hover:no-underline;
}
@utility title {
@apply hidden pb-0 lg:block lg:pb-8;
}
@utility subtitle {
@apply pt-2 pb-9;
}
@utility fullscreen {
@apply overflow-y-auto fixed top-0 left-0 w-full h-full bg-white z-9999 dark:bg-coolgray-100 scrollbar;
}
@utility toast {
@apply z-1;
}
@utility dz-button {
@apply p-4 py-10 my-4 w-full font-bold bg-white border dark:border-coolgray-400 dark:text-white dark:bg-transparent dark:hover:bg-coolgray-400;
}
@utility xterm {
@apply p-2;
}

View File

@@ -166,7 +166,7 @@ export function initializeTerminalComponent() {
} }
this.terminalActive = true; this.terminalActive = true;
this.term.focus(); this.term.focus();
document.querySelector('.xterm-viewport').classList.add('scrollbar', 'rounded'); document.querySelector('.xterm-viewport').classList.add('scrollbar', 'rounded-sm');
this.resizeTerminal(); this.resizeTerminal();
} else if (event.data === 'unprocessable') { } else if (event.data === 'unprocessable') {
if (this.term) this.term.reset(); if (this.term) this.term.reset();

View File

@@ -7,7 +7,7 @@
{{ __('auth.forgot_password') }} {{ __('auth.forgot_password') }}
</div> </div>
<div <div
class="w-full bg-white shadow md:mt-0 sm:max-w-md xl:p-0 dark:bg-base "> class="w-full bg-white shadow-sm md:mt-0 sm:max-w-md xl:p-0 dark:bg-base ">
<div class="p-6 space-y-4 md:space-y-6 sm:p-8"> <div class="p-6 space-y-4 md:space-y-6 sm:p-8">
@if (is_transactional_emails_enabled()) @if (is_transactional_emails_enabled())
<form action="/forgot-password" method="POST" class="flex flex-col gap-2"> <form action="/forgot-password" method="POST" class="flex flex-col gap-2">

View File

@@ -4,7 +4,7 @@
<a class="flex items-center mb-6 text-5xl font-extrabold tracking-tight text-gray-900 dark:text-white"> <a class="flex items-center mb-6 text-5xl font-extrabold tracking-tight text-gray-900 dark:text-white">
Coolify Coolify
</a> </a>
<div class="w-full bg-white shadow md:mt-0 sm:max-w-md xl:p-0 dark:bg-base "> <div class="w-full bg-white shadow-sm md:mt-0 sm:max-w-md xl:p-0 dark:bg-base ">
@if ($errors->any()) @if ($errors->any())
<div class="text-center text-error"> <div class="text-center text-error">
@foreach ($errors->all() as $error) @foreach ($errors->all() as $error)

View File

@@ -14,7 +14,7 @@ $email = getOldOrLocal('email', 'test3@example.com');
<a class="flex items-center mb-6 text-5xl font-extrabold tracking-tight text-gray-900 dark:text-white"> <a class="flex items-center mb-6 text-5xl font-extrabold tracking-tight text-gray-900 dark:text-white">
Coolify Coolify
</a> </a>
<div class="w-full bg-white rounded-lg shadow md:mt-0 sm:max-w-md xl:p-0 dark:bg-base"> <div class="w-full bg-white rounded-lg shadow-sm md:mt-0 sm:max-w-md xl:p-0 dark:bg-base">
<div class="p-6 space-y-4 md:space-y-6 sm:p-8"> <div class="p-6 space-y-4 md:space-y-6 sm:p-8">
<div> <div>
<h1 <h1

View File

@@ -7,7 +7,7 @@
<div class="flex items-center justify-center pb-6 text-center"> <div class="flex items-center justify-center pb-6 text-center">
{{ __('auth.reset_password') }} {{ __('auth.reset_password') }}
</div> </div>
<div class="w-full bg-white shadow md:mt-0 sm:max-w-md xl:p-0 dark:bg-base "> <div class="w-full bg-white shadow-sm md:mt-0 sm:max-w-md xl:p-0 dark:bg-base ">
<div class="p-6 space-y-4 md:space-y-6 sm:p-8"> <div class="p-6 space-y-4 md:space-y-6 sm:p-8">
<form action="/reset-password" method="POST" class="flex flex-col gap-2"> <form action="/reset-password" method="POST" class="flex flex-col gap-2">
@csrf @csrf

View File

@@ -4,14 +4,14 @@
<a class="flex items-center mb-6 text-5xl font-extrabold tracking-tight text-gray-900 dark:text-white"> <a class="flex items-center mb-6 text-5xl font-extrabold tracking-tight text-gray-900 dark:text-white">
Coolify Coolify
</a> </a>
<div class="w-full bg-white shadow md:mt-0 sm:max-w-md xl:p-0 dark:bg-base "> <div class="w-full bg-white shadow-sm md:mt-0 sm:max-w-md xl:p-0 dark:bg-base ">
<div class="p-6 space-y-4 md:space-y-6 sm:p-8"> <div class="p-6 space-y-4 md:space-y-6 sm:p-8">
<form action="/two-factor-challenge" method="POST" class="flex flex-col gap-2"> <form action="/two-factor-challenge" method="POST" class="flex flex-col gap-2">
@csrf @csrf
<div> <div>
<x-forms.input type="number" name="code" autocomplete="one-time-code" label="{{ __('input.code') }}" /> <x-forms.input type="number" name="code" autocomplete="one-time-code" label="{{ __('input.code') }}" />
<div x-show="!showRecovery" <div x-show="!showRecovery"
class="pt-2 text-xs cursor-pointer hover:underline hover:dark:text-white" class="pt-2 text-xs cursor-pointer hover:underline dark:hover:text-white"
x-on:click="showRecovery = !showRecovery">Enter x-on:click="showRecovery = !showRecovery">Enter
Recovery Code Recovery Code
</div> </div>

View File

@@ -6,12 +6,12 @@
x-transition:enter-start="-translate-y-10" x-transition:enter-end="translate-y-0" x-transition:enter-start="-translate-y-10" x-transition:enter-end="translate-y-0"
x-transition:leave="transition ease-in duration-100" x-transition:leave-start="translate-y-0" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="translate-y-0"
x-transition:leave-end="-translate-y-10" x-init="setTimeout(() => { bannerVisible = true }, bannerVisibleAfter);" x-transition:leave-end="-translate-y-10" x-init="setTimeout(() => { bannerVisible = true }, bannerVisibleAfter);"
class="relative z-[999] w-full py-2 mx-auto duration-100 ease-out shadow-sm bg-coolgray-100 sm:py-0 sm:h-14" x-cloak> class="relative z-999 w-full py-2 mx-auto duration-100 ease-out shadow-xs bg-coolgray-100 sm:py-0 sm:h-14" x-cloak>
<div class="flex items-center justify-between h-full px-3"> <div class="flex items-center justify-between h-full px-3">
{{ $slot }} {{ $slot }}
@if ($closable) @if ($closable)
<button @click="bannerVisible=false" <button @click="bannerVisible=false"
class="flex items-center flex-shrink-0 translate-x-1 ease-out duration-150 justify-center w-6 h-6 p-1.5 text-neutral-200 rounded-full hover:bg-coolgray-500"> class="flex items-center shrink-0 translate-x-1 ease-out duration-150 justify-center w-6 h-6 p-1.5 text-neutral-200 rounded-full hover:bg-coolgray-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-full h-full"> stroke="currentColor" class="w-full h-full">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /> <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />

View File

@@ -2,7 +2,7 @@
dropdownOpen: false dropdownOpen: false
}" class="relative" @click.outside="dropdownOpen = false"> }" class="relative" @click.outside="dropdownOpen = false">
<button @click="dropdownOpen=true" <button @click="dropdownOpen=true"
class="inline-flex items-center justify-start pr-8 transition-colors focus:outline-none disabled:opacity-50 disabled:pointer-events-none"> class="inline-flex items-center justify-start pr-8 transition-colors focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none">
<span class="flex flex-col items-start h-full leading-none"> <span class="flex flex-col items-start h-full leading-none">
{{ $title }} {{ $title }}
</span> </span>
@@ -16,7 +16,7 @@
<div x-show="dropdownOpen" @click.away="dropdownOpen=false" x-transition:enter="ease-out duration-200" <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" 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> class="absolute top-0 z-50 mt-6 min-w-max" x-cloak>
<div class="p-1 mt-1 bg-white border rounded shadow 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-black border-neutral-300">
{{ $slot }} {{ $slot }}
</div> </div>
</div> </div>

View File

@@ -16,7 +16,7 @@
'dark:hover:bg-coolgray-100 cursor-pointer' => !$disabled, 'dark:hover:bg-coolgray-100 cursor-pointer' => !$disabled,
])> ])>
<label @class(['flex gap-4 items-center px-0 min-w-fit label w-full'])> <label @class(['flex gap-4 items-center px-0 min-w-fit label w-full'])>
<span class="flex flex-grow gap-2"> <span class="flex grow gap-2">
@if ($label) @if ($label)
@if ($disabled) @if ($disabled)
<span class="opacity-60">{!! $label !!}</span> <span class="opacity-60">{!! $label !!}</span>

View File

@@ -16,7 +16,7 @@
<div class="relative" x-data="{ type: 'password' }"> <div class="relative" x-data="{ type: 'password' }">
@if ($allowToPeak) @if ($allowToPeak)
<div x-on:click="changePasswordFieldType" <div x-on:click="changePasswordFieldType"
class="flex absolute inset-y-0 right-0 items-center pr-2 cursor-pointer hover:dark:text-white"> class="flex absolute inset-y-0 right-0 items-center pr-2 cursor-pointer dark:hover:text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" stroke-width="1.5" <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path stroke="none" d="M0 0h24v24H0z" fill="none" />

View File

@@ -33,7 +33,7 @@
<div class="relative" x-data="{ type: 'password' }"> <div class="relative" x-data="{ type: 'password' }">
@if ($allowToPeak) @if ($allowToPeak)
<div x-on:click="changePasswordFieldType" <div x-on:click="changePasswordFieldType"
class="absolute inset-y-0 right-0 flex items-center h-6 pt-2 pr-2 cursor-pointer hover:dark:text-white"> class="absolute inset-y-0 right-0 flex items-center h-6 pt-2 pr-2 cursor-pointer dark:hover:text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" stroke-width="1.5" <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path stroke="none" d="M0 0h24v24H0z" fill="none" />

View File

@@ -163,8 +163,8 @@
@endif @endif
<template x-teleport="body"> <template x-teleport="body">
<div x-show="modalOpen" <div x-show="modalOpen"
class="fixed top-0 lg:pt-10 left-0 z-[99] flex items-start justify-center w-screen h-screen" x-cloak> class="fixed top-0 lg:pt-10 left-0 z-99 flex items-start justify-center w-screen h-screen" x-cloak>
<div x-show="modalOpen" class="absolute inset-0 w-full h-full bg-black bg-opacity-20 backdrop-blur-sm"> <div x-show="modalOpen" class="absolute inset-0 w-full h-full bg-black/20 backdrop-blur-xs">
</div> </div>
<div x-show="modalOpen" x-trap.inert.noscroll="modalOpen" x-transition:enter="ease-out duration-100" <div x-show="modalOpen" x-trap.inert.noscroll="modalOpen" x-transition:enter="ease-out duration-100"
x-transition:enter-start="opacity-0 -translate-y-2 sm:scale-95" x-transition:enter-start="opacity-0 -translate-y-2 sm:scale-95"
@@ -172,7 +172,7 @@
x-transition:leave="ease-in duration-100" x-transition:leave="ease-in duration-100"
x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100" x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
x-transition:leave-end="opacity-0 -translate-y-2 sm:scale-95" x-transition:leave-end="opacity-0 -translate-y-2 sm:scale-95"
class="relative w-full py-6 border rounded min-w-full lg:min-w-[36rem] max-w-[48rem] bg-neutral-100 border-neutral-400 dark:bg-base px-7 dark:border-coolgray-300"> class="relative w-full py-6 border rounded-sm min-w-full lg:min-w-[36rem] max-w-[48rem] bg-neutral-100 border-neutral-400 dark:bg-base px-7 dark:border-coolgray-300">
<div class="flex justify-between items-center pb-3"> <div class="flex justify-between items-center pb-3">
<h3 class="pr-8 text-2xl font-bold">{{ $title }}</h3> <h3 class="pr-8 text-2xl font-bold">{{ $title }}</h3>
<button @click="modalOpen = false; resetModal()" <button @click="modalOpen = false; resetModal()"
@@ -222,7 +222,7 @@
<ul class="mb-4 space-y-2"> <ul class="mb-4 space-y-2">
@foreach ($actions as $action) @foreach ($actions as $action)
<li class="flex items-center text-red-500"> <li class="flex items-center text-red-500">
<svg class="flex-shrink-0 mr-2 w-5 h-5" fill="none" stroke="currentColor" <svg class="shrink-0 mr-2 w-5 h-5" fill="none" stroke="currentColor"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M6 18L18 6M6 6l12 12"></path> d="M6 18L18 6M6 6l12 12"></path>
@@ -233,7 +233,7 @@
@foreach ($checkboxes as $checkbox) @foreach ($checkboxes as $checkbox)
<template x-if="selectedActions.includes('{{ $checkbox['id'] }}')"> <template x-if="selectedActions.includes('{{ $checkbox['id'] }}')">
<li class="flex items-center text-red-500"> <li class="flex items-center text-red-500">
<svg class="flex-shrink-0 mr-2 w-5 h-5" fill="none" stroke="currentColor" <svg class="shrink-0 mr-2 w-5 h-5" fill="none" stroke="currentColor"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M6 18L18 6M6 6l12 12"></path> d="M6 18L18 6M6 6l12 12"></path>
@@ -257,7 +257,7 @@
{{ $shortConfirmationLabel }} {{ $shortConfirmationLabel }}
</label> </label>
<input type="text" x-model="userConfirmationText" <input type="text" x-model="userConfirmationText"
class="p-2 mt-1 w-full text-black rounded input"> class="p-2 mt-1 w-full text-black rounded-sm input">
</div> </div>
@endif @endif
@endif @endif

View File

@@ -28,12 +28,12 @@
@endif @endif
<template x-teleport="body"> <template x-teleport="body">
<div x-show="modalOpen" <div x-show="modalOpen"
class="fixed top-0 left-0 lg:px-0 px-4 z-[99] flex items-center justify-center w-screen h-screen"> class="fixed top-0 left-0 lg:px-0 px-4 z-99 flex items-center justify-center w-screen h-screen">
<div x-show="modalOpen" x-transition:enter="ease-out duration-100" x-transition:enter-start="opacity-0" <div x-show="modalOpen" x-transition:enter="ease-out duration-100" x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-100" x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-100"
x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
@if ($closeOutside) @click="modalOpen=false" @endif @if ($closeOutside) @click="modalOpen=false" @endif
class="absolute inset-0 w-full h-full bg-black bg-opacity-20 backdrop-blur-sm"></div> class="absolute inset-0 w-full h-full bg-black/20 backdrop-blur-xs"></div>
<div x-show="modalOpen" x-trap.inert.noscroll="modalOpen" <div x-show="modalOpen" x-trap.inert.noscroll="modalOpen"
x-transition:enter="ease-out duration-100" x-transition:enter="ease-out duration-100"
x-transition:enter-start="opacity-0 -translate-y-2 sm:scale-95" x-transition:enter-start="opacity-0 -translate-y-2 sm:scale-95"
@@ -41,11 +41,11 @@
x-transition:leave="ease-in duration-100" x-transition:leave="ease-in duration-100"
x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100" x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
x-transition:leave-end="opacity-0 -translate-y-2 sm:scale-95" x-transition:leave-end="opacity-0 -translate-y-2 sm:scale-95"
class="relative w-full py-6 border rounded drop-shadow min-w-full lg:min-w-[{{ $minWidth }}] max-w-fit bg-white border-neutral-200 dark:bg-base px-6 dark:border-coolgray-300"> class="relative w-full py-6 border rounded-sm drop-shadow-sm min-w-full lg:min-w-[{{ $minWidth }}] max-w-fit bg-white border-neutral-200 dark:bg-base px-6 dark:border-coolgray-300">
<div class="flex items-center justify-between pb-3"> <div class="flex items-center justify-between pb-3">
<h3 class="text-2xl font-bold">{{ $title }}</h3> <h3 class="text-2xl font-bold">{{ $title }}</h3>
<button @click="modalOpen=false" <button @click="modalOpen=false"
class="absolute top-0 right-0 flex items-center justify-center w-8 h-8 mt-5 mr-5 rounded-full dark:text-white hover:bg-neutral-100 dark:hover:bg-coolgray-300"> class="absolute top-0 right-0 flex items-center justify-center w-8 h-8 mt-5 mr-5 rounded-full dark:text-white hover:bg-neutral-100 dark:hover:bg-coolgray-300 outline-0">
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor"> stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /> <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />

View File

@@ -1,8 +1,8 @@
<dialog id="{{ $modalId }}" class="modal"> <dialog id="{{ $modalId }}" class="modal">
@if ($yesOrNo) @if ($yesOrNo)
<form method="dialog" class="rounded modal-box" @if (!$noSubmit) wire:submit='submit' @endif> <form method="dialog" class="rounded-sm modal-box" @if (!$noSubmit) wire:submit='submit' @endif>
<div class="flex items-start"> <div class="flex items-start">
<div class="flex items-center justify-center flex-shrink-0 w-10 h-10 mr-4 rounded-full"> <div class="flex items-center justify-center shrink-0 w-10 h-10 mr-4 rounded-full">
<svg class="w-8 h-8 text-error" fill="none" viewBox="0 0 24 24" stroke-width="1.5" <svg class="w-8 h-8 text-error" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" aria-hidden="true"> stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" <path stroke-linecap="round" stroke-linejoin="round"
@@ -33,7 +33,7 @@
</div> </div>
</form> </form>
@else @else
<form method="dialog" class="flex flex-col w-11/12 max-w-5xl gap-2 rounded modal-box" <form method="dialog" class="flex flex-col w-11/12 max-w-5xl gap-2 rounded-sm modal-box"
@if ($submitWireAction) wire:submit={{ $submitWireAction }} @endif @if ($submitWireAction) wire:submit={{ $submitWireAction }} @endif
@if (!$noSubmit && !$submitWireAction) wire:submit='submit' @endif> @if (!$noSubmit && !$submitWireAction) wire:submit='submit' @endif>
@isset($modalTitle) @isset($modalTitle)

View File

@@ -85,7 +85,7 @@
<x-dropdown> <x-dropdown>
<x-slot:title> <x-slot:title>
<div class="flex justify-end w-8" x-show="theme === 'dark' || theme === 'system'"> <div class="flex justify-end w-8" x-show="theme === 'dark' || theme === 'system'">
<svg class="w-5 h-5 rounded dark:fill-white" xmlns="http://www.w3.org/2000/svg" <svg class="w-5 h-5 rounded-sm dark:fill-white" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"> viewBox="0 0 24 24">
<path <path
d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z" /> d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z" />

View File

@@ -6,9 +6,9 @@
x-transition:enter-start="translate-y-full" x-transition:enter-end="translate-y-0" x-transition:enter-start="translate-y-full" x-transition:enter-end="translate-y-0"
x-transition:leave="transition ease-in duration-300" x-transition:leave-start="translate-y-0" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="translate-y-0"
x-transition:leave-end="translate-y-full" x-init="setTimeout(() => { bannerVisible = true }, bannerVisibleAfter);" x-transition:leave-end="translate-y-full" x-init="setTimeout(() => { bannerVisible = true }, bannerVisibleAfter);"
class="fixed bottom-0 right-0 h-auto duration-300 ease-out px-5 pb-5 max-w-[46rem] z-[999]" x-cloak> class="fixed bottom-0 right-0 h-auto duration-300 ease-out px-5 pb-5 max-w-[46rem] z-999" x-cloak>
<div <div
class="flex flex-row items-center justify-between w-full h-full max-w-4xl p-6 mx-auto bg-white border shadow-lg lg:border-t dark:border-coolgray-300 dark:bg-coolgray-100 hover:dark:bg-coolgray-100 lg:p-8 sm:rounded"> class="flex flex-row items-center justify-between w-full h-full max-w-4xl p-6 mx-auto bg-white border shadow-lg lg:border-t dark:border-coolgray-300 dark:bg-coolgray-100 dark:hover:bg-coolgray-100 lg:p-8 sm:rounded-sm">
<div <div
class="flex flex-col items-start h-full pb-0 text-xs lg:items-center lg:flex-row lg:pr-6 lg:space-x-5 dark:text-neutral-300 "> class="flex flex-col items-start h-full pb-0 text-xs lg:items-center lg:flex-row lg:pr-6 lg:space-x-5 dark:text-neutral-300 ">
@if (isset($icon)) @if (isset($icon))

View File

@@ -6,10 +6,10 @@
x-transition:enter-start="translate-y-full" x-transition:enter-end="translate-y-0" x-transition:enter-start="translate-y-full" x-transition:enter-end="translate-y-0"
x-transition:leave="transition ease-in duration-300" x-transition:leave-start="translate-y-0" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="translate-y-0"
x-transition:leave-end="translate-y-full" x-init="setTimeout(() => { bannerVisible = true }, bannerVisibleAfter);" x-transition:leave-end="translate-y-full" x-init="setTimeout(() => { bannerVisible = true }, bannerVisibleAfter);"
class="fixed bottom-0 right-0 w-full h-auto duration-300 ease-out sm:px-5 sm:pb-5 w-full z-[999]" class="fixed bottom-0 right-0 w-full h-auto duration-300 ease-out sm:px-5 sm:pb-5 w-full z-999"
x-cloak> x-cloak>
<div <div
class="flex items-center flex-col justify-between w-full h-full max-w-4xl p-6 mx-auto bg-white border shadow-lg lg:border-t dark:border-coolgray-300 dark:bg-coolgray-100 lg:p-8 lg:flex-row sm:rounded"> class="flex items-center flex-col justify-between w-full h-full max-w-4xl p-6 mx-auto bg-white border shadow-lg lg:border-t dark:border-coolgray-300 dark:bg-coolgray-100 lg:p-8 lg:flex-row sm:rounded-sm">
<div <div
class="flex flex-col items-start h-full pb-6 text-xs lg:items-center lg:flex-row lg:pb-0 lg:pr-6 lg:space-x-5 dark:text-neutral-300"> class="flex flex-col items-start h-full pb-6 text-xs lg:items-center lg:flex-row lg:pb-0 lg:pr-6 lg:space-x-5 dark:text-neutral-300">
@if (isset($icon)) @if (isset($icon))
@@ -27,7 +27,7 @@
@if ($buttonText->attributes->whereStartsWith('@click')->first()) @click="bannerVisible=false;{{ $buttonText->attributes->get('@click') }}" @if ($buttonText->attributes->whereStartsWith('@click')->first()) @click="bannerVisible=false;{{ $buttonText->attributes->get('@click') }}"
@else @else
@click="bannerVisible=false;" @endif @click="bannerVisible=false;" @endif
class="w-full px-4 py-2 text-sm font-medium tracking-wide transition-colors duration-200 rounded-md bg-neutral-100 hover:bg-neutral-200 dark:bg-coolgray-200 lg:w-auto dark:text-neutral-200 dark:hover:bg-coolgray-300 focus:shadow-outline focus:outline-none"> class="w-full px-4 py-2 text-sm font-medium tracking-wide transition-colors duration-200 rounded-md bg-neutral-100 hover:bg-neutral-200 dark:bg-coolgray-200 lg:w-auto dark:text-neutral-200 dark:hover:bg-coolgray-300 focus:shadow-outline focus:outline-hidden">
{{ $buttonText }} {{ $buttonText }}
</button> </button>
</div> </div>

View File

@@ -5,15 +5,15 @@
<div class="px-6 mx-auto lg:px-8"> <div class="px-6 mx-auto lg:px-8">
<div class="flex justify-center"> <div class="flex justify-center">
<fieldset <fieldset
class="grid grid-cols-2 p-1 text-xs font-semibold leading-5 text-center rounded dark:text-white gap-x-1 bg-white/5"> class="grid grid-cols-2 p-1 text-xs font-semibold leading-5 text-center rounded-sm dark:text-white gap-x-1 bg-white/5">
<legend class="sr-only">Payment frequency</legend> <legend class="sr-only">Payment frequency</legend>
<label class="cursor-pointer rounded px-2.5 py-1" <label class="cursor-pointer rounded-sm px-2.5 py-1"
:class="selected === 'monthly' ? 'bg-coollabs-100 text-white' : ''"> :class="selected === 'monthly' ? 'bg-coollabs-100 text-white' : ''">
<input type="radio" x-on:click="selected = 'monthly'" name="frequency" value="monthly" <input type="radio" x-on:click="selected = 'monthly'" name="frequency" value="monthly"
class="sr-only"> class="sr-only">
<span>Monthly</span> <span>Monthly</span>
</label> </label>
<label class="cursor-pointer rounded px-2.5 py-1" <label class="cursor-pointer rounded-sm px-2.5 py-1"
:class="selected === 'yearly' ? 'bg-coollabs-100 text-white' : ''"> :class="selected === 'yearly' ? 'bg-coollabs-100 text-white' : ''">
<input type="radio" x-on:click="selected = 'yearly'" name="frequency" value="annually" <input type="radio" x-on:click="selected = 'yearly'" name="frequency" value="annually"
class="sr-only"> class="sr-only">
@@ -34,7 +34,7 @@
<div> <div>
</div> </div>
</div> </div>
<div class="p-4 rounded bg-coolgray-400"> <div class="p-4 rounded-sm bg-coolgray-400">
<h2 id="tier-hobby" class="flex items-start gap-4 text-4xl font-bold tracking-tight">Unlimited Trial <h2 id="tier-hobby" class="flex items-start gap-4 text-4xl font-bold tracking-tight">Unlimited Trial
<x-forms.button><a class="font-bold dark:text-white hover:no-underline" <x-forms.button><a class="font-bold dark:text-white hover:no-underline"
href="https://github.com/coollabsio/coolify">Get Started</a></x-forms.button> href="https://github.com/coollabsio/coolify">Get Started</a></x-forms.button>
@@ -257,7 +257,7 @@
</ul> </ul>
</div> </div>
</div> </div>
{{-- <div class="p-4 mt-10 rounded"> {{-- <div class="p-4 mt-10 rounded-sm">
<div class="flex items-start gap-4 text-xl tracking-tight">Need official support for <div class="flex items-start gap-4 text-xl tracking-tight">Need official support for
your self-hosted instance? your self-hosted instance?
<x-forms.button> <x-forms.button>

View File

@@ -12,7 +12,7 @@
@if ($upgrade) @if ($upgrade)
<div>{{ $upgrade }}</div> <div>{{ $upgrade }}</div>
@else @else
<div class="text-xs font-bold dark:text-neutral-500 group-hover:dark:text-neutral-300"> <div class="text-xs font-bold dark:text-neutral-500 dark:group-hover:text-neutral-300">
{{ $description }} {{ $description }}
</div> </div>
@endif @endif

View File

@@ -6,9 +6,9 @@
{{ $slot }} {{ $slot }}
<template x-teleport="body"> <template x-teleport="body">
<div x-show="slideOverOpen" @if (!$closeWithX) @keydown.window.escape="slideOverOpen=false" @endif <div x-show="slideOverOpen" @if (!$closeWithX) @keydown.window.escape="slideOverOpen=false" @endif
class="relative z-[99] "> class="relative z-99 ">
<div x-show="slideOverOpen" @if (!$closeWithX) @click="slideOverOpen = false" @endif <div x-show="slideOverOpen" @if (!$closeWithX) @click="slideOverOpen = false" @endif
class="fixed inset-0 dark:bg-black/60 backdrop-blur-sm"></div> class="fixed inset-0 dark:bg-black/60 backdrop-blur-xs"></div>
<div class="fixed inset-0 overflow-hidden"> <div class="fixed inset-0 overflow-hidden">
<div class="absolute inset-0 overflow-hidden "> <div class="absolute inset-0 overflow-hidden ">
<div class="fixed inset-y-0 right-0 flex max-w-full pl-10"> <div class="fixed inset-y-0 right-0 flex max-w-full pl-10">
@@ -30,7 +30,7 @@
{{ $title }}</h2> {{ $title }}</h2>
<div class="flex items-center h-auto ml-3"> <div class="flex items-center h-auto ml-3">
<button class="icon" @click="slideOverOpen=false" <button class="icon" @click="slideOverOpen=false"
class="absolute top-0 right-0 z-30 flex items-center justify-center px-3 py-2 mt-4 mr-2 space-x-1 text-xs font-normal border-none rounded"> class="absolute top-0 right-0 z-30 flex items-center justify-center px-3 py-2 mt-4 mr-2 space-x-1 text-xs font-normal border-none rounded-sm">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none"
viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" <path stroke-linecap="round" stroke-linejoin="round"

View File

@@ -315,7 +315,7 @@
} }
} }
});" });"
class="fixed block w-full group z-[9999] sm:max-w-xs" class="fixed block w-full group z-9999 sm:max-w-xs"
:class="{ 'right-0 top-0 sm:mt-6 sm:mr-6': position=='top-right', 'left-0 top-0 sm:mt-6 sm:ml-6': position=='top-left', 'left-1/2 -translate-x-1/2 top-0 sm:mt-6': position=='top-center', 'right-0 bottom-0 sm:mr-6 sm:mb-6': position=='bottom-right', 'left-0 bottom-0 sm:ml-6 sm:mb-6': position=='bottom-left', 'left-1/2 -translate-x-1/2 bottom-0 sm:mb-6': position=='bottom-center' }" :class="{ 'right-0 top-0 sm:mt-6 sm:mr-6': position=='top-right', 'left-0 top-0 sm:mt-6 sm:ml-6': position=='top-left', 'left-1/2 -translate-x-1/2 top-0 sm:mt-6': position=='top-center', 'right-0 bottom-0 sm:mr-6 sm:mb-6': position=='bottom-right', 'left-0 bottom-0 sm:ml-6 sm:mb-6': position=='bottom-left', 'left-1/2 -translate-x-1/2 bottom-0 sm:mb-6': position=='bottom-center' }"
x-cloak> x-cloak>
@@ -390,7 +390,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 dark:bg-coolgray-100 bg-white dark:border dark: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-white dark:border dark:border-coolgray-200 rounded-sm 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">

View File

@@ -10,7 +10,7 @@
</div> </div>
@endif @endif
<div @class([ <div @class([
'flex flex-col-reverse w-full px-4 py-2 overflow-y-auto bg-white border border-solid rounded dark:text-white dark:bg-coolgray-100 scrollbar border-neutral-300 dark:border-coolgray-300', 'flex flex-col-reverse w-full px-4 py-2 overflow-y-auto bg-white border border-solid rounded-sm dark:text-white dark:bg-coolgray-100 scrollbar border-neutral-300 dark:border-coolgray-300',
'max-h-[48rem]' => $fullHeight, 'max-h-[48rem]' => $fullHeight,
'max-h-96' => !$fullHeight, 'max-h-96' => !$fullHeight,
])> ])>

View File

@@ -4,7 +4,7 @@
</x-slot> </x-slot>
<section class="flex flex-col h-full lg:items-center lg:justify-center"> <section class="flex flex-col h-full lg:items-center lg:justify-center">
<div <div
class="flex flex-col items-center justify-center p-10 mx-2 mt-10 bg-white border rounded-lg shadow lg:p-20 dark:bg-transparent dark:border-none max-w-7xl "> class="flex flex-col items-center justify-center p-10 mx-2 mt-10 bg-white border rounded-lg shadow-sm lg:p-20 dark:bg-transparent dark:border-none max-w-7xl ">
@if ($currentState === 'welcome') @if ($currentState === 'welcome')
<h1 class="text-3xl font-bold lg:text-5xl">Welcome to Coolify</h1> <h1 class="text-3xl font-bold lg:text-5xl">Welcome to Coolify</h1>
<div class="py-6 text-center lg:text-xl">Let me help you set up the basics.</div> <div class="py-6 text-center lg:text-xl">Let me help you set up the basics.</div>
@@ -89,7 +89,7 @@
<p class="mb-2">If the connection details are correct, please ensure:</p> <p class="mb-2">If the connection details are correct, please ensure:</p>
<ul class="list-disc list-inside"> <ul class="list-disc list-inside">
<li>The correct public key is in your <code <li>The correct public key is in your <code
class="bg-red-200 dark:bg-red-900 px-1 rounded">~/.ssh/authorized_keys</code> class="bg-red-200 dark:bg-red-900 px-1 rounded-sm">~/.ssh/authorized_keys</code>
file for the specified user</li> file for the specified user</li>
<li>Or skip the boarding process and manually add a new private key to Coolify and <li>Or skip the boarding process and manually add a new private key to Coolify and
the server</li> the server</li>
@@ -207,7 +207,7 @@
<p class="mb-2">If the connection details are correct, please ensure:</p> <p class="mb-2">If the connection details are correct, please ensure:</p>
<ul class="list-disc list-inside"> <ul class="list-disc list-inside">
<li>The correct public key is in your <code <li>The correct public key is in your <code
class="bg-red-200 dark:bg-red-900 px-1 rounded">~/.ssh/authorized_keys</code> class="bg-red-200 dark:bg-red-900 px-1 rounded-sm">~/.ssh/authorized_keys</code>
file for the specified user</li> file for the specified user</li>
<li>Or skip the boarding process and manually add a new private key to Coolify and <li>Or skip the boarding process and manually add a new private key to Coolify and
the server</li> the server</li>

View File

@@ -3,7 +3,7 @@
<a class="flex items-center mb-6 text-5xl font-extrabold tracking-tight text-gray-900 dark:text-white"> <a class="flex items-center mb-6 text-5xl font-extrabold tracking-tight text-gray-900 dark:text-white">
Coolify Coolify
</a> </a>
<div class="w-full bg-white shadow md:mt-0 sm:max-w-md xl:p-0 dark:bg-base "> <div class="w-full bg-white shadow-sm md:mt-0 sm:max-w-md xl:p-0 dark:bg-base ">
<div class="p-6 space-y-4 md:space-y-6 sm:p-8"> <div class="p-6 space-y-4 md:space-y-6 sm:p-8">
<form class="flex flex-col gap-2" wire:submit='submit'> <form class="flex flex-col gap-2" wire:submit='submit'>
<x-forms.input id="email" type="email" placeholder="Email" readonly label="Email" /> <x-forms.input id="email" type="email" placeholder="Email" readonly label="Email" />

View File

@@ -10,7 +10,7 @@
</div> </div>
@endif @endif
<div <div
class="scrollbar flex flex-col-reverse w-full overflow-y-auto border border-solid rounded border-coolgray-300 max-h-[32rem] p-4 pt-6 text-xs dark:text-white"> class="scrollbar flex flex-col-reverse w-full overflow-y-auto border border-solid rounded-sm border-coolgray-300 max-h-[32rem] p-4 pt-6 text-xs dark:text-white">
<pre class="font-mono whitespace-pre-wrap" @if ($isPollingActive) wire:poll.1000ms="polling" @endif>{{ RunRemoteProcess::decodeOutput($this->activity) }}</pre> <pre class="font-mono whitespace-pre-wrap" @if ($isPollingActive) wire:poll.1000ms="polling" @endif>{{ RunRemoteProcess::decodeOutput($this->activity) }}</pre>
</div> </div>

View File

@@ -1,4 +1,4 @@
<form class="flex flex-col w-full gap-2 rounded" wire:submit='submit'> <form class="flex flex-col w-full gap-2 rounded-sm" wire:submit='submit'>
<x-forms.input placeholder="Your Cool Project" id="name" label="Name" required /> <x-forms.input placeholder="Your Cool Project" id="name" label="Name" required />
<x-forms.input placeholder="This is my cool project everyone knows about" id="description" label="Description" /> <x-forms.input placeholder="This is my cool project everyone knows about" id="description" label="Description" />
<div class="subtitle">New project will have a default <span class="dark:text-warning font-bold">production</span> <div class="subtitle">New project will have a default <span class="dark:text-warning font-bold">production</span>

View File

@@ -44,17 +44,12 @@
<div class="flex flex-col"> <div class="flex flex-col">
<div class="flex items-center gap-2 mb-2"> <div class="flex items-center gap-2 mb-2">
<span @class([ <span @class([
'px-3 py-1 rounded-md text-xs font-medium shadow-sm', 'px-3 py-1 rounded-md text-xs font-medium shadow-xs',
'bg-blue-100/80 text-blue-700 dark:bg-blue-500/20 dark:text-blue-300' => 'bg-blue-100/80 text-blue-700 dark:bg-blue-500/20 dark:text-blue-300' => data_get($deployment, 'status') === 'in_progress',
data_get($deployment, 'status') === 'in_progress', 'bg-purple-100/80 text-purple-700 dark:bg-purple-500/20 dark:text-purple-300' => data_get($deployment, 'status') === 'queued',
'bg-purple-100/80 text-purple-700 dark:bg-purple-500/20 dark:text-purple-300' => 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-200' => data_get($deployment, 'status') === 'failed',
data_get($deployment, 'status') === 'queued', 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-200' => data_get($deployment, 'status') === 'finished',
'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-200' => 'bg-gray-100 text-gray-700 dark:bg-gray-600/30 dark:text-gray-300' => data_get($deployment, 'status') === 'cancelled-by-user',
data_get($deployment, 'status') === 'failed',
'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-200' =>
data_get($deployment, 'status') === 'finished',
'bg-gray-100 text-gray-700 dark:bg-gray-600/30 dark:text-gray-300' =>
data_get($deployment, 'status') === 'cancelled-by-user',
])> ])>
@php @php
$statusText = match (data_get($deployment, 'status')) { $statusText = match (data_get($deployment, 'status')) {

View File

@@ -57,7 +57,7 @@
<div id="screen" :class="fullscreen ? 'fullscreen' : 'relative'"> <div id="screen" :class="fullscreen ? 'fullscreen' : 'relative'">
<div @if ($isKeepAliveOn) wire:poll.2000ms="polling" @endif <div @if ($isKeepAliveOn) wire:poll.2000ms="polling" @endif
class="flex flex-col-reverse w-full p-2 px-4 mt-4 overflow-y-auto bg-white dark:text-white dark:bg-coolgray-100 scrollbar dark:border-coolgray-300" class="flex flex-col-reverse w-full p-2 px-4 mt-4 overflow-y-auto bg-white dark:text-white dark:bg-coolgray-100 scrollbar dark:border-coolgray-300"
:class="fullscreen ? '' : 'min-h-14 max-h-[40rem] border border-dotted rounded'"> :class="fullscreen ? '' : 'min-h-14 max-h-[40rem] border border-dotted rounded-sm'">
<div :class="fullscreen ? 'fixed' : 'absolute'" class="top-2 right-5"> <div :class="fullscreen ? 'fixed' : 'absolute'" class="top-2 right-5">
<div class="flex justify-end gap-4 fixed -translate-x-full"> <div class="flex justify-end gap-4 fixed -translate-x-full">
<button title="Toggle timestamps" x-on:click="showTimestamps = !showTimestamps"> <button title="Toggle timestamps" x-on:click="showTimestamps = !showTimestamps">

View File

@@ -83,11 +83,11 @@
@if ($application->build_pack !== 'dockercompose') @if ($application->build_pack !== 'dockercompose')
<div class="flex items-end gap-2"> <div class="flex items-end gap-2">
@if ($application->settings->is_container_label_readonly_enabled == false) @if ($application->settings->is_container_label_readonly_enabled == false)
<x-forms.input placeholder="https://coolify.io" wire:model.blur="application.fqdn" <x-forms.input placeholder="https://coolify.io" wire:model.blur-sm="application.fqdn"
label="Domains" readonly label="Domains" readonly
helper="Readonly labels are disabled. You can set the domains in the labels section." /> helper="Readonly labels are disabled. You can set the domains in the labels section." />
@else @else
<x-forms.input placeholder="https://coolify.io" wire:model.blur="application.fqdn" <x-forms.input placeholder="https://coolify.io" wire:model.blur-sm="application.fqdn"
label="Domains" label="Domains"
helper="You can specify one domain with path or more with comma. You can specify a port to bind the domain to.<br><br><span class='text-helper'>Example</span><br>- http://app.coolify.io,https://cloud.coolify.io/dashboard<br>- http://app.coolify.io/api/v3<br>- http://app.coolify.io:3000 -> app.coolify.io will point to port 3000 inside the container. " /> helper="You can specify one domain with path or more with comma. You can specify a port to bind the domain to.<br><br><span class='text-helper'>Example</span><br>- http://app.coolify.io,https://cloud.coolify.io/dashboard<br>- http://app.coolify.io/api/v3<br>- http://app.coolify.io:3000 -> app.coolify.io will point to port 3000 inside the container. " />
<x-forms.button wire:click="getWildcardDomain">Generate Domain <x-forms.button wire:click="getWildcardDomain">Generate Domain

View File

@@ -1,7 +1,7 @@
<nav wire:poll.10000ms="check_status"> <nav wire:poll.10000ms="check_status">
<x-resources.breadcrumbs :resource="$application" :parameters="$parameters" :title="$lastDeploymentInfo" :lastDeploymentLink="$lastDeploymentLink" /> <x-resources.breadcrumbs :resource="$application" :parameters="$parameters" :title="$lastDeploymentInfo" :lastDeploymentLink="$lastDeploymentLink" />
<div class="navbar-main"> <div class="navbar-main">
<nav class="flex flex-shrink-0 gap-6 items-center whitespace-nowrap scrollbar min-h-10"> <nav class="flex shrink-0 gap-6 items-center whitespace-nowrap scrollbar min-h-10">
<a class="{{ request()->routeIs('project.application.configuration') ? 'dark:text-white' : '' }}" <a class="{{ request()->routeIs('project.application.configuration') ? 'dark:text-white' : '' }}"
href="{{ route('project.application.configuration', $parameters) }}"> href="{{ route('project.application.configuration', $parameters) }}">
Configuration Configuration

View File

@@ -9,7 +9,7 @@
<div class="flex flex-wrap"> <div class="flex flex-wrap">
@forelse ($images as $image) @forelse ($images as $image)
<div class="w-2/4 p-2"> <div class="w-2/4 p-2">
<div class="bg-white border rounded dark:border-black dark:bg-coolgray-100"> <div class="bg-white border rounded-sm dark:border-black dark:bg-coolgray-100">
<div class="p-2"> <div class="p-2">
<div class=""> <div class="">
@if (data_get($image, 'is_current')) @if (data_get($image, 'is_current'))

View File

@@ -19,7 +19,7 @@
@endif @endif
<div class="flex items-center gap-2 mb-2"> <div class="flex items-center gap-2 mb-2">
<span @class([ <span @class([
'px-3 py-1 rounded-md text-xs font-medium tracking-wide shadow-sm', 'px-3 py-1 rounded-md text-xs font-medium tracking-wide shadow-xs',
'bg-blue-100/80 text-blue-700 dark:bg-blue-500/20 dark:text-blue-300 dark:shadow-blue-900/5' => data_get($execution, 'status') === 'running', 'bg-blue-100/80 text-blue-700 dark:bg-blue-500/20 dark:text-blue-300 dark:shadow-blue-900/5' => data_get($execution, 'status') === 'running',
'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-200 dark:shadow-red-900/5' => data_get($execution, 'status') === 'failed', 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-200 dark:shadow-red-900/5' => data_get($execution, 'status') === 'failed',
'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-200 dark:shadow-green-900/5' => data_get($execution, 'status') === 'success', 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-200 dark:shadow-green-900/5' => data_get($execution, 'status') === 'success',
@@ -59,7 +59,7 @@
Backup Availability: Backup Availability:
</div> </div>
<span @class([ <span @class([
'px-2 py-1 rounded text-xs font-medium', 'px-2 py-1 rounded-sm text-xs font-medium',
'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-200' => !data_get($execution, 'local_storage_deleted', false), 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-200' => !data_get($execution, 'local_storage_deleted', false),
'bg-gray-100 text-gray-600 dark:bg-gray-800/50 dark:text-gray-400' => data_get($execution, 'local_storage_deleted', false), 'bg-gray-100 text-gray-600 dark:bg-gray-800/50 dark:text-gray-400' => data_get($execution, 'local_storage_deleted', false),
])> ])>
@@ -78,7 +78,7 @@
</span> </span>
@if($backup->save_s3) @if($backup->save_s3)
<span @class([ <span @class([
'px-2 py-1 rounded text-xs font-medium', 'px-2 py-1 rounded-sm text-xs font-medium',
'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-200' => !data_get($execution, 's3_storage_deleted', false), 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-200' => !data_get($execution, 's3_storage_deleted', false),
'bg-gray-100 text-gray-600 dark:bg-gray-800/50 dark:text-gray-400' => data_get($execution, 's3_storage_deleted', false), 'bg-gray-100 text-gray-600 dark:bg-gray-800/50 dark:text-gray-400' => data_get($execution, 's3_storage_deleted', false),
])> ])>
@@ -98,7 +98,7 @@
@endif @endif
</div> </div>
@if (data_get($execution, 'message')) @if (data_get($execution, 'message'))
<div class="mt-2 p-2 bg-gray-100 dark:bg-coolgray-200 rounded"> <div class="mt-2 p-2 bg-gray-100 dark:bg-coolgray-200 rounded-sm">
<pre class="whitespace-pre-wrap text-sm">{{ data_get($execution, 'message') }}</pre> <pre class="whitespace-pre-wrap text-sm">{{ data_get($execution, 'message') }}</pre>
</div> </div>
@endif @endif
@@ -116,7 +116,7 @@
</div> </div>
</div> </div>
@empty @empty
<div class="p-4 bg-gray-100 dark:bg-coolgray-100 rounded">No executions found.</div> <div class="p-4 bg-gray-100 dark:bg-coolgray-100 rounded-sm">No executions found.</div>
@endforelse @endforelse
</div> </div>
<script> <script>

View File

@@ -1,4 +1,4 @@
<form class="flex flex-col w-full gap-2 rounded" wire:submit='submit'> <form class="flex flex-col w-full gap-2 rounded-sm" wire:submit='submit'>
<x-forms.input placeholder="0 0 * * * or daily" id="frequency" <x-forms.input placeholder="0 0 * * * or daily" id="frequency"
helper="You can use every_minute, hourly, daily, weekly, monthly, yearly or a cron expression." label="Frequency" helper="You can use every_minute, hourly, daily, weekly, monthly, yearly or a cron expression." label="Frequency"
required /> required />

View File

@@ -8,8 +8,8 @@
</x-slide-over> </x-slide-over>
<div class="navbar-main"> <div class="navbar-main">
<nav <nav
class="flex overflow-x-scroll flex-shrink-0 gap-6 items-center whitespace-nowrap sm:overflow-x-hidden scrollbar min-h-10"> class="flex overflow-x-scroll shrink-0 gap-6 items-center whitespace-nowrap sm:overflow-x-hidden scrollbar min-h-10">
<a class="{{ request()->routeIs('project.database.configuration') ? 'dark:text-white' : '' }}" <a wire:navigate class="{{ request()->routeIs('project.database.configuration') ? 'dark:text-white' : '' }}"
href="{{ route('project.database.configuration', $parameters) }}"> href="{{ route('project.database.configuration', $parameters) }}">
<button>Configuration</button> <button>Configuration</button>
</a> </a>

View File

@@ -40,7 +40,7 @@
@if ($unsupported) @if ($unsupported)
<div>Database restore is not supported.</div> <div>Database restore is not supported.</div>
@else @else
<div class="pt-2 rounded alert-error"> <div class="pt-2 rounded-sm alert-error">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 stroke-current shrink-0" fill="none" <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 stroke-current shrink-0" fill="none"
viewBox="0 0 24 24"> viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"

View File

@@ -1,6 +1,6 @@
<div> <div>
<dialog id="newInitScript" class="modal"> <dialog id="newInitScript" class="modal">
<form method="dialog" class="flex flex-col gap-2 rounded modal-box" wire:submit='save_new_init_script'> <form method="dialog" class="flex flex-col gap-2 rounded-sm modal-box" wire:submit='save_new_init_script'>
<h3 class="text-lg font-bold">Add Init Script</h3> <h3 class="text-lg font-bold">Add Init Script</h3>
<x-forms.input placeholder="create_test_db.sql" id="new_filename" label="Filename" required /> <x-forms.input placeholder="create_test_db.sql" id="new_filename" label="Filename" required />
<x-forms.textarea placeholder="CREATE DATABASE test;" id="new_content" label="Content" required /> <x-forms.textarea placeholder="CREATE DATABASE test;" id="new_content" label="Content" required />
@@ -181,7 +181,7 @@
<div class="flex items-center gap-2 pb-2"> <div class="flex items-center gap-2 pb-2">
<h3>Initialization scripts</h3> <h3>Initialization scripts</h3>
<x-modal-input buttonTitle="+ Add" title="New Init Script"> <x-modal-input buttonTitle="+ Add" title="New Init Script">
<form class="flex flex-col w-full gap-2 rounded" wire:submit='save_new_init_script'> <form class="flex flex-col w-full gap-2 rounded-sm" wire:submit='save_new_init_script'>
<x-forms.input placeholder="create_test_db.sql" id="new_filename" label="Filename" <x-forms.input placeholder="create_test_db.sql" id="new_filename" label="Filename"
required /> required />
<x-forms.textarea rows="20" placeholder="CREATE DATABASE test;" id="new_content" <x-forms.textarea rows="20" placeholder="CREATE DATABASE test;" id="new_content"

View File

@@ -62,7 +62,7 @@
@endif @endif
</div> </div>
@if ($build_pack === 'dockercompose') @if ($build_pack === 'dockercompose')
<x-forms.input placeholder="/" wire:model.blur="base_directory" label="Base Directory" <x-forms.input placeholder="/" wire:model.blur-sm="base_directory" label="Base Directory"
helper="Directory to use as root. Useful for monorepos." /> helper="Directory to use as root. Useful for monorepos." />
<x-forms.input placeholder="/docker-compose.yaml" id="docker_compose_location" <x-forms.input placeholder="/docker-compose.yaml" id="docker_compose_location"
label="Docker Compose Location" label="Docker Compose Location"

View File

@@ -95,7 +95,7 @@
@endif @endif
</div> </div>
@if ($build_pack === 'dockercompose') @if ($build_pack === 'dockercompose')
<x-forms.input placeholder="/" wire:model.blur="base_directory" <x-forms.input placeholder="/" wire:model.blur-sm="base_directory"
label="Base Directory" label="Base Directory"
helper="Directory to use as root. Useful for monorepos." /> helper="Directory to use as root. Useful for monorepos." />
<x-forms.input placeholder="/docker-compose.yaml" id="docker_compose_location" <x-forms.input placeholder="/docker-compose.yaml" id="docker_compose_location"

View File

@@ -45,9 +45,9 @@
@endif @endif
</div> </div>
@if ($build_pack === 'dockercompose') @if ($build_pack === 'dockercompose')
<x-forms.input placeholder="/" wire:model.blur="base_directory" label="Base Directory" <x-forms.input placeholder="/" wire:model.blur-sm="base_directory" label="Base Directory"
helper="Directory to use as root. Useful for monorepos." /> helper="Directory to use as root. Useful for monorepos." />
<x-forms.input placeholder="/docker-compose.yaml" wire:model.blur="docker_compose_location" <x-forms.input placeholder="/docker-compose.yaml" wire:model.blur-sm="docker_compose_location"
label="Docker Compose Location" label="Docker Compose Location"
helper="It is calculated together with the Base Directory:<br><span class='dark:text-warning'>{{ Str::start($base_directory . $docker_compose_location, '/') }}</span>" /> helper="It is calculated together with the Base Directory:<br><span class='dark:text-warning'>{{ Str::start($base_directory . $docker_compose_location, '/') }}</span>" />
Compose file location in your repository:<span Compose file location in your repository:<span

View File

@@ -110,7 +110,7 @@
<x-slot:documentation> <x-slot:documentation>
<template x-if="service.documentation"> <template x-if="service.documentation">
<div class="flex items-center px-2" title="Read the documentation."> <div class="flex items-center px-2" title="Read the documentation.">
<a class="p-2 rounded hover:bg-gray-100 dark:hover:bg-coolgray-200 hover:no-underline group-hover:dark:text-white text-neutral-600" <a class="p-2 rounded-sm hover:bg-gray-100 dark:hover:bg-coolgray-200 hover:no-underline dark:group-hover:text-white text-neutral-600"
onclick="event.stopPropagation()" :href="service.documentation" onclick="event.stopPropagation()" :href="service.documentation"
target="_blank"> target="_blank">
Docs Docs
@@ -253,7 +253,7 @@
@foreach ($swarmDockers as $swarmDocker) @foreach ($swarmDockers as $swarmDocker)
<div class="w-full box group" wire:click="setDestination('{{ $swarmDocker->uuid }}')"> <div class="w-full box group" wire:click="setDestination('{{ $swarmDocker->uuid }}')">
<div class="flex flex-col mx-6"> <div class="flex flex-col mx-6">
<div class="font-bold group-hover:dark:text-white"> <div class="font-bold dark:group-hover:text-white">
Swarm Docker <span class="text-xs">({{ $swarmDocker->name }})</span> Swarm Docker <span class="text-xs">({{ $swarmDocker->name }})</span>
</div> </div>
</div> </div>
@@ -290,7 +290,7 @@
<div class="flex-1"></div> <div class="flex-1"></div>
<div class="flex items-center px-2" title="Read the documentation."> <div class="flex items-center px-2" title="Read the documentation.">
<a class="p-2 hover:underline group-hover:dark:text-white dark:text-white text-neutral-6000" <a class="p-2 hover:underline dark:group-hover:text-white dark:text-white text-neutral-6000"
onclick="event.stopPropagation()" href="https://hub.docker.com/_/postgres/" target="_blank"> onclick="event.stopPropagation()" href="https://hub.docker.com/_/postgres/" target="_blank">
Documentation Documentation
</a> </a>
@@ -306,7 +306,7 @@
</div> </div>
<div class="flex-1"></div> <div class="flex-1"></div>
<div class="flex items-center px-2" title="Read the documentation."> <div class="flex items-center px-2" title="Read the documentation.">
<a class="p-2 hover:underline group-hover:dark:text-white dark:text-white text-neutral-600" <a class="p-2 hover:underline dark:group-hover:text-white dark:text-white text-neutral-600"
onclick="event.stopPropagation()" href="https://github.com/supabase/postgres" onclick="event.stopPropagation()" href="https://github.com/supabase/postgres"
target="_blank"> target="_blank">
Documentation Documentation
@@ -323,7 +323,7 @@
</div> </div>
<div class="flex-1"></div> <div class="flex-1"></div>
<div class="flex items-center px-2" title="Read the documentation."> <div class="flex items-center px-2" title="Read the documentation.">
<a class="p-2 hover:underline group-hover:dark:text-white dark:text-white text-neutral-600" <a class="p-2 hover:underline dark:group-hover:text-white dark:text-white text-neutral-600"
onclick="event.stopPropagation()" href="https://github.com/postgis/docker-postgis" onclick="event.stopPropagation()" href="https://github.com/postgis/docker-postgis"
target="_blank"> target="_blank">
Documentation Documentation
@@ -341,7 +341,7 @@
<div class="flex-1"></div> <div class="flex-1"></div>
<div class="flex items-center px-2" title="Read the documentation."> <div class="flex items-center px-2" title="Read the documentation.">
<a class="p-2 hover:underline group-hover:dark:text-white dark:text-white text-neutral-600" <a class="p-2 hover:underline dark:group-hover:text-white dark:text-white text-neutral-600"
onclick="event.stopPropagation()" href="https://github.com/pgvector/pgvector" onclick="event.stopPropagation()" href="https://github.com/pgvector/pgvector"
target="_blank"> target="_blank">
Documentation Documentation

View File

@@ -88,7 +88,7 @@
</div> </div>
</a> </a>
<div <div
class="flex flex-wrap gap-1 pt-1 group-hover:dark:text-white group-hover:text-black group min-h-6"> class="flex flex-wrap gap-1 pt-1 dark:group-hover:text-white group-hover:text-black group min-h-6">
<template x-for="tag in item.tags"> <template x-for="tag in item.tags">
<a :href="`/tags/${tag.name}`" class="tag" x-text="tag.name"> <a :href="`/tags/${tag.name}`" class="tag" x-text="tag.name">
</a> </a>
@@ -134,7 +134,7 @@
</div> </div>
</a> </a>
<div <div
class="flex flex-wrap gap-1 pt-1 group-hover:dark:text-white group-hover:text-black group min-h-6"> class="flex flex-wrap gap-1 pt-1 dark:group-hover:text-white group-hover:text-black group min-h-6">
<template x-for="tag in item.tags"> <template x-for="tag in item.tags">
<a :href="`/tags/${tag.name}`" class="tag" x-text="tag.name"> <a :href="`/tags/${tag.name}`" class="tag" x-text="tag.name">
</a> </a>
@@ -180,7 +180,7 @@
</div> </div>
</a> </a>
<div <div
class="flex flex-wrap gap-1 pt-1 group-hover:dark:text-white group-hover:text-black group min-h-6"> class="flex flex-wrap gap-1 pt-1 dark:group-hover:text-white group-hover:text-black group min-h-6">
<template x-for="tag in item.tags"> <template x-for="tag in item.tags">
<a :href="`/tags/${tag.name}`" class="tag" x-text="tag.name"> <a :href="`/tags/${tag.name}`" class="tag" x-text="tag.name">
</a> </a>

View File

@@ -9,8 +9,8 @@
<h1>{{ $title }}</h1> <h1>{{ $title }}</h1>
<x-resources.breadcrumbs :resource="$service" :parameters="$parameters" /> <x-resources.breadcrumbs :resource="$service" :parameters="$parameters" />
<div class="navbar-main" x-data"> <div class="navbar-main" x-data">
<nav class="flex flex-shrink-0 gap-6 items-center whitespace-nowrap scrollbar min-h-10"> <nav class="flex shrink-0 gap-6 items-center whitespace-nowrap scrollbar min-h-10">
<a class="{{ request()->routeIs('project.service.configuration') ? 'dark:text-white' : '' }}" <a wire:navigate class="{{ request()->routeIs('project.service.configuration') ? 'dark:text-white' : '' }}"
href="{{ route('project.service.configuration', $parameters) }}"> href="{{ route('project.service.configuration', $parameters) }}">
<button>Configuration</button> <button>Configuration</button>
</a> </a>

View File

@@ -1,4 +1,4 @@
<form class="flex flex-col w-full gap-2 rounded" wire:submit='submit'> <form class="flex flex-col w-full gap-2 rounded-sm" wire:submit='submit'>
<x-forms.input placeholder="NODE_ENV" id="key" label="Name" required /> <x-forms.input placeholder="NODE_ENV" id="key" label="Name" required />
<x-forms.textarea x-show="$wire.is_multiline === true" x-cloak id="value" label="Value" required /> <x-forms.textarea x-show="$wire.is_multiline === true" x-cloak id="value" label="Value" required />
<x-forms.input x-show="$wire.is_multiline === false" x-cloak placeholder="production" id="value" <x-forms.input x-show="$wire.is_multiline === false" x-cloak placeholder="production" id="value"

View File

@@ -19,7 +19,7 @@
@if(!$hasShell) @if(!$hasShell)
<div class="flex items-center justify-center w-full py-4 mx-auto"> <div class="flex items-center justify-center w-full py-4 mx-auto">
<div class="p-4 w-full rounded border dark:bg-coolgray-100 dark:border-coolgray-300"> <div class="p-4 w-full rounded-sm border dark:bg-coolgray-100 dark:border-coolgray-300">
<div class="flex flex-col items-center justify-center space-y-4"> <div class="flex flex-col items-center justify-center space-y-4">
<svg class="w-12 h-12 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-12 h-12 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>

View File

@@ -57,7 +57,7 @@
</form> </form>
<div :class="fullscreen ? 'fullscreen' : 'relative w-full py-4 mx-auto'"> <div :class="fullscreen ? 'fullscreen' : 'relative w-full py-4 mx-auto'">
<div class="flex overflow-y-auto flex-col-reverse px-4 py-2 w-full bg-white dark:text-white dark:bg-coolgray-100 scrollbar dark:border-coolgray-300" <div class="flex overflow-y-auto flex-col-reverse px-4 py-2 w-full bg-white dark:text-white dark:bg-coolgray-100 scrollbar dark:border-coolgray-300"
:class="fullscreen ? '' : 'max-h-96 border border-solid rounded'"> :class="fullscreen ? '' : 'max-h-96 border border-solid rounded-sm'">
<div :class="fullscreen ? 'fixed top-4 right-4' : 'absolute top-6 right-0'"> <div :class="fullscreen ? 'fixed top-4 right-4' : 'absolute top-6 right-0'">
<div class="flex justify-end gap-4" :class="fullscreen ? 'fixed' : ''" <div class="flex justify-end gap-4" :class="fullscreen ? 'fixed' : ''"
style="transform: translateX(-100%)"> style="transform: translateX(-100%)">

View File

@@ -1,4 +1,4 @@
<form class="flex flex-col w-full gap-2 rounded" wire:submit='submit'> <form class="flex flex-col w-full gap-2 rounded-sm" wire:submit='submit'>
<x-forms.input placeholder="Run cron" id="name" label="Name" /> <x-forms.input placeholder="Run cron" id="name" label="Name" />
<x-forms.input placeholder="php artisan schedule:run" id="command" label="Command" /> <x-forms.input placeholder="php artisan schedule:run" id="command" label="Command" />
<x-forms.input placeholder="0 0 * * * or daily" <x-forms.input placeholder="0 0 * * * or daily"

View File

@@ -27,7 +27,7 @@
@endif @endif
<div class="flex items-center gap-2 mb-2"> <div class="flex items-center gap-2 mb-2">
<span @class([ <span @class([
'px-3 py-1 rounded-md text-xs font-medium tracking-wide shadow-sm', 'px-3 py-1 rounded-md text-xs font-medium tracking-wide shadow-xs',
'bg-blue-100/80 text-blue-700 dark:bg-blue-500/20 dark:text-blue-300 dark:shadow-blue-900/5' => data_get($execution, 'status') === 'running', 'bg-blue-100/80 text-blue-700 dark:bg-blue-500/20 dark:text-blue-300 dark:shadow-blue-900/5' => data_get($execution, 'status') === 'running',
'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-200 dark:shadow-red-900/5' => data_get($execution, 'status') === 'failed', 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-200 dark:shadow-red-900/5' => data_get($execution, 'status') === 'failed',
'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-200 dark:shadow-green-900/5' => data_get($execution, 'status') === 'success', 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-200 dark:shadow-green-900/5' => data_get($execution, 'status') === 'success',
@@ -58,7 +58,7 @@
</x-forms.button> </x-forms.button>
@endif @endif
@if (data_get($execution, 'id') == $selectedKey) @if (data_get($execution, 'id') == $selectedKey)
<div class="p-4 mb-2 bg-gray-100 dark:bg-coolgray-200 rounded"> <div class="p-4 mb-2 bg-gray-100 dark:bg-coolgray-200 rounded-sm">
@if (data_get($execution, 'status') === 'running') @if (data_get($execution, 'status') === 'running')
<div class="flex items-center gap-2 mb-2"> <div class="flex items-center gap-2 mb-2">
<span>Task is running...</span> <span>Task is running...</span>
@@ -87,6 +87,6 @@
</div> </div>
@endif @endif
@empty @empty
<div class="p-4 bg-gray-100 dark:bg-coolgray-100 rounded">No executions found.</div> <div class="p-4 bg-gray-100 dark:bg-coolgray-100 rounded-sm">No executions found.</div>
@endforelse @endforelse
</div> </div>

View File

@@ -1,5 +1,5 @@
<div class="flex flex-col w-full gap-2 max-h-[80vh] overflow-y-auto scrollbar"> <div class="flex flex-col w-full gap-2 max-h-[80vh] overflow-y-auto scrollbar">
<form class="flex flex-col w-full gap-2 rounded " wire:submit='submitPersistentVolume'> <form class="flex flex-col w-full gap-2 rounded-sm " wire:submit='submitPersistentVolume'>
<div class="flex flex-col"> <div class="flex flex-col">
<h3>Volume Mount</h3> <h3>Volume Mount</h3>
<div>Docker Volumes mounted to the container.</div> <div>Docker Volumes mounted to the container.</div>
@@ -26,7 +26,7 @@
</div> </div>
</form> </form>
<form class="flex flex-col w-full gap-2 rounded py-4" wire:submit='submitFileStorage'> <form class="flex flex-col w-full gap-2 rounded-sm py-4" wire:submit='submitFileStorage'>
<div class="flex flex-col"> <div class="flex flex-col">
<h3>File Mount</h3> <h3>File Mount</h3>
<div>Actual file mounted from the host system to the container.</div> <div>Actual file mounted from the host system to the container.</div>
@@ -40,7 +40,7 @@
</x-forms.button> </x-forms.button>
</div> </div>
</form> </form>
<form class="flex flex-col w-full gap-2 rounded" wire:submit='submitFileStorageDirectory'> <form class="flex flex-col w-full gap-2 rounded-sm" wire:submit='submitFileStorageDirectory'>
<div class="flex flex-col"> <div class="flex flex-col">
<h3>Directory Mount</h3> <h3>Directory Mount</h3>
<div>Directory mounted from the host system to the container.</div> <div>Directory mounted from the host system to the container.</div>

View File

@@ -16,7 +16,7 @@
{{ $tag->name }} {{ $tag->name }}
<svg wire:click="deleteTag('{{ $tag->id }}')" xmlns="http://www.w3.org/2000/svg" fill="none" <svg wire:click="deleteTag('{{ $tag->id }}')" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"
class="inline-block w-3 h-3 rounded cursor-pointer stroke-current hover:bg-red-500"> class="inline-block w-3 h-3 rounded-sm cursor-pointer stroke-current hover:bg-red-500">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12">
</path> </path>
</svg> </svg>

View File

@@ -1,7 +1,7 @@
<div id="terminal-container" x-data="terminalData()"> <div id="terminal-container" x-data="terminalData()">
@if(!$hasShell) @if(!$hasShell)
<div class="flex pt-4 items-center justify-center w-full py-4 mx-auto"> <div class="flex pt-4 items-center justify-center w-full py-4 mx-auto">
<div class="p-4 w-full rounded border dark:bg-coolgray-100 dark:border-coolgray-300"> <div class="p-4 w-full rounded-sm border dark:bg-coolgray-100 dark:border-coolgray-300">
<div class="flex flex-col items-center justify-center space-y-4"> <div class="flex flex-col items-center justify-center space-y-4">
<svg class="w-12 h-12 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-12 h-12 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>

View File

@@ -5,7 +5,7 @@
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<h1>Environments</h1> <h1>Environments</h1>
<x-modal-input buttonTitle="+ Add" title="New Environment"> <x-modal-input buttonTitle="+ Add" title="New Environment">
<form class="flex flex-col w-full gap-2 rounded" wire:submit='submit'> <form class="flex flex-col w-full gap-2 rounded-sm" wire:submit='submit'>
<x-forms.input placeholder="production" id="name" label="Name" required /> <x-forms.input placeholder="production" id="name" label="Name" required />
<x-forms.button type="submit"> <x-forms.button type="submit">
Save Save

View File

@@ -19,9 +19,8 @@
</div> </div>
<div class="box-description"> <div class="box-description">
{{ $key->description }} {{ $key->description }}
@if (!$key->isInUse()) @if (!$key->isInUse())
<span <span class="inline-flex items-center px-2 py-0.5 rounded-sm text-xs font-medium bg-yellow-400 text-black">Unused</span>
class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-yellow-400 text-black">Unused</span>
@endif @endif
</div> </div>

View File

@@ -104,7 +104,7 @@
<x-forms.button <x-forms.button
wire:click="toggleCertificate" wire:click="toggleCertificate"
type="button" type="button"
class="!py-1 !px-2 text-sm"> class="py-1! px-2! text-sm">
{{ $showCertificate ? 'Hide' : 'Show' }} {{ $showCertificate ? 'Hide' : 'Show' }}
</x-forms.button> </x-forms.button>
</div> </div>

View File

@@ -21,7 +21,7 @@
</div> </div>
@elseif (!$server->isFunctional()) @elseif (!$server->isFunctional())
<div <div
class="p-4 mb-4 w-full text-sm text-yellow-800 bg-yellow-100 rounded dark:bg-yellow-900 dark:text-yellow-300"> class="p-4 mb-4 w-full text-sm text-yellow-800 bg-yellow-100 rounded-sm dark:bg-yellow-900 dark:text-yellow-300">
To <span class="font-semibold">automatically</span> configure Cloudflare Tunnels, please To <span class="font-semibold">automatically</span> configure Cloudflare Tunnels, please
validate your server first.</span> Then you will need a Cloudflare token and an SSH validate your server first.</span> Then you will need a Cloudflare token and an SSH
domain configured. domain configured.

View File

@@ -27,7 +27,7 @@
@endif @endif
<div class="flex items-center gap-2 mb-2"> <div class="flex items-center gap-2 mb-2">
<span @class([ <span @class([
'px-3 py-1 rounded-md text-xs font-medium tracking-wide shadow-sm', 'px-3 py-1 rounded-md text-xs font-medium tracking-wide shadow-xs',
'bg-blue-100/80 text-blue-700 dark:bg-blue-500/20 dark:text-blue-300 dark:shadow-blue-900/5' => data_get($execution, 'status') === 'running', 'bg-blue-100/80 text-blue-700 dark:bg-blue-500/20 dark:text-blue-300 dark:shadow-blue-900/5' => data_get($execution, 'status') === 'running',
'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-200 dark:shadow-red-900/5' => data_get($execution, 'status') === 'failed', 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-200 dark:shadow-red-900/5' => data_get($execution, 'status') === 'failed',
'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-200 dark:shadow-green-900/5' => data_get($execution, 'status') === 'success', 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-200 dark:shadow-green-900/5' => data_get($execution, 'status') === 'success',
@@ -61,7 +61,7 @@
@endif @endif
@if (data_get($execution, 'id') == $selectedKey) @if (data_get($execution, 'id') == $selectedKey)
<div class="flex flex-col"> <div class="flex flex-col">
<div class="p-4 mb-2 bg-gray-100 dark:bg-coolgray-200 rounded"> <div class="p-4 mb-2 bg-gray-100 dark:bg-coolgray-200 rounded-sm">
@if (data_get($execution, 'status') === 'running') @if (data_get($execution, 'status') === 'running')
<div class="flex items-center gap-2 mb-2"> <div class="flex items-center gap-2 mb-2">
<span>Execution is running...</span> <span>Execution is running...</span>
@@ -95,9 +95,9 @@
<div class="mt-6 space-y-6"> <div class="mt-6 space-y-6">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Cleanup Log:</h3> <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Cleanup Log:</h3>
@foreach(json_decode(data_get($execution, 'cleanup_log'), true) as $result) @foreach(json_decode(data_get($execution, 'cleanup_log'), true) as $result)
<div class="overflow-hidden rounded-lg border border-gray-200 dark:border-coolgray-400 bg-white dark:bg-coolgray-100 shadow-sm"> <div class="overflow-hidden rounded-lg border border-gray-200 dark:border-coolgray-400 bg-white dark:bg-coolgray-100 shadow-xs">
<div class="flex items-center gap-2 px-4 py-3 bg-gray-50 dark:bg-coolgray-200 border-b border-gray-200 dark:border-coolgray-400"> <div class="flex items-center gap-2 px-4 py-3 bg-gray-50 dark:bg-coolgray-200 border-b border-gray-200 dark:border-coolgray-400">
<svg class="h-5 w-5 flex-shrink-0 text-gray-500 dark:text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"> <svg class="h-5 w-5 shrink-0 text-gray-500 dark:text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg> </svg>
<code class="flex-1 text-sm font-mono text-gray-700 dark:text-gray-300">{{ data_get($result, 'command') }}</code> <code class="flex-1 text-sm font-mono text-gray-700 dark:text-gray-300">{{ data_get($result, 'command') }}</code>
@@ -123,6 +123,6 @@
</div> </div>
@endif @endif
@empty @empty
<div class="p-4 bg-gray-100 dark:bg-coolgray-100 rounded">No executions found.</div> <div class="p-4 bg-gray-100 dark:bg-coolgray-100 rounded-sm">No executions found.</div>
@endforelse @endforelse
</div> </div>

View File

@@ -146,7 +146,7 @@
confirmationLabel="Please type the confirmation text to disable two step confirmation." confirmationLabel="Please type the confirmation text to disable two step confirmation."
shortConfirmationLabel="Confirmation text" step3ButtonText="Disable Two Step Confirmation" /> shortConfirmationLabel="Confirmation text" step3ButtonText="Disable Two Step Confirmation" />
</div> </div>
<div class="w-full px-4 py-2 mb-4 text-white rounded-sm border-l-4 border-red-500 bg-error"> <div class="w-full px-4 py-2 mb-4 text-white rounded-xs border-l-4 border-red-500 bg-error">
<p class="font-bold">Warning!</p> <p class="font-bold">Warning!</p>
<p>Disabling two step confirmation reduces security (as anyone can easily delete anything) and <p>Disabling two step confirmation reduces security (as anyone can easily delete anything) and
increases increases

View File

@@ -32,7 +32,7 @@
</div> </div>
<div class="subtitle">Your Private GitHub App for private repositories.</div> <div class="subtitle">Your Private GitHub App for private repositories.</div>
@if (!data_get($github_app, 'installation_id')) @if (!data_get($github_app, 'installation_id'))
<div class="mb-10 rounded alert-error"> <div class="mb-10 rounded-sm alert-error">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 stroke-current shrink-0" fill="none" <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 stroke-current shrink-0" fill="none"
viewBox="0 0 24 24"> viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
@@ -197,7 +197,7 @@
</x-forms.button> </x-forms.button>
</div> </div>
<h3>Automated Installation</h3> <h3>Automated Installation</h3>
<div class=" pb-5 rounded alert-error"> <div class=" pb-5 rounded-sm alert-error">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 stroke-current shrink-0" fill="none" <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 stroke-current shrink-0" fill="none"
viewBox="0 0 24 24"> viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"

View File

@@ -21,7 +21,7 @@
}" class="relative w-full py-2 mx-auto overflow-hidden text-sm font-normal rounded-md"> }" class="relative w-full py-2 mx-auto overflow-hidden text-sm font-normal rounded-md">
<div x-data="{ id: $id('accordion') }" class="cursor-pointer"> <div x-data="{ id: $id('accordion') }" class="cursor-pointer">
<button @click="setActiveAccordion(id)" <button @click="setActiveAccordion(id)"
class="flex items-center justify-between w-full px-1 py-2 text-left select-none hover:dark:text-white hover:bg-white/5" class="flex items-center justify-between w-full px-1 py-2 text-left select-none dark:hover:text-white hover:bg-white/5"
type="button"> type="button">
<h4>Self-hosted / Enterprise GitHub</h4> <h4>Self-hosted / Enterprise GitHub</h4>
<svg class="w-4 h-4 duration-200 ease-out" :class="{ 'rotate-180': activeAccordion == id }" <svg class="w-4 h-4 duration-200 ease-out" :class="{ 'rotate-180': activeAccordion == id }"

View File

@@ -6,7 +6,7 @@
<x-forms.input required label="Name" id="name" /> <x-forms.input required label="Name" id="name" />
<x-forms.input label="Description" id="description" /> <x-forms.input label="Description" id="description" />
</div> </div>
<x-forms.input required type="url" label="Endpoint" wire:model.blur="endpoint" /> <x-forms.input required type="url" label="Endpoint" wire:model.blur-sm="endpoint" />
<div class="flex gap-2"> <div class="flex gap-2">
<x-forms.input required label="Bucket" id="bucket" /> <x-forms.input required label="Bucket" id="bucket" />
<x-forms.input required helper="Region only required for AWS. Leave it as-is for other providers." <x-forms.input required helper="Region only required for AWS. Leave it as-is for other providers."

View File

@@ -4,7 +4,7 @@
</x-slot> </x-slot>
@if (auth()->user()->isAdminFromSession()) @if (auth()->user()->isAdminFromSession())
@if (request()->query->get('cancelled')) @if (request()->query->get('cancelled'))
<div class="mb-6 rounded alert-error"> <div class="mb-6 rounded-sm alert-error">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 stroke-current shrink-0" fill="none" <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 stroke-current shrink-0" fill="none"
viewBox="0 0 24 24"> viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
@@ -23,7 +23,7 @@
</div> </div>
@else @else
@if ($isUnpaid) @if ($isUnpaid)
<div class="mb-6 rounded alert-error"> <div class="mb-6 rounded-sm alert-error">
<span>Your last payment was failed for Coolify Cloud.</span> <span>Your last payment was failed for Coolify Cloud.</span>
</div> </div>
<div> <div>

View File

@@ -2,15 +2,15 @@
<div class="px-6 mx-auto lg:px-8"> <div class="px-6 mx-auto lg:px-8">
<div class="flex justify-center"> <div class="flex justify-center">
<fieldset <fieldset
class="grid grid-cols-2 p-1 text-xs font-semibold leading-5 text-center rounded dark:text-white gap-x-1 dark:bg-white/5 bg-black/5"> class="grid grid-cols-2 p-1 text-xs font-semibold leading-5 text-center rounded-sm dark:text-white gap-x-1 dark:bg-white/5 bg-black/5">
<legend class="sr-only">Payment frequency</legend> <legend class="sr-only">Payment frequency</legend>
<label class="cursor-pointer rounded px-2.5 py-1" <label class="cursor-pointer rounded-sm px-2.5 py-1"
:class="selected === 'monthly' ? 'dark:bg-coollabs-100 bg-warning dark:text-white' : ''"> :class="selected === 'monthly' ? 'dark:bg-coollabs-100 bg-warning dark:text-white' : ''">
<input type="radio" x-on:click="selected = 'monthly'" name="frequency" value="monthly" <input type="radio" x-on:click="selected = 'monthly'" name="frequency" value="monthly"
class="sr-only"> class="sr-only">
<span>Monthly</span> <span>Monthly</span>
</label> </label>
<label class="cursor-pointer rounded px-2.5 py-1" <label class="cursor-pointer rounded-sm px-2.5 py-1"
:class="selected === 'yearly' ? 'dark:bg-coollabs-100 bg-warning dark:text-white' : ''"> :class="selected === 'yearly' ? 'dark:bg-coollabs-100 bg-warning dark:text-white' : ''">
<input type="radio" x-on:click="selected = 'yearly'" name="frequency" value="annually" <input type="radio" x-on:click="selected = 'yearly'" name="frequency" value="annually"
class="sr-only"> class="sr-only">

View File

@@ -27,20 +27,20 @@
</button> </button>
<template x-teleport="body"> <template x-teleport="body">
<div x-show="modalOpen" <div x-show="modalOpen"
class="fixed top-0 lg:pt-10 left-0 z-[99] flex items-start justify-center w-screen h-screen" class="fixed top-0 lg:pt-10 left-0 z-99 flex items-start justify-center w-screen h-screen"
x-cloak> x-cloak>
<div x-show="modalOpen" x-transition:enter="ease-out duration-100" <div x-show="modalOpen" x-transition:enter="ease-out duration-100"
x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
x-transition:leave="ease-in duration-100" x-transition:leave-start="opacity-100" x-transition:leave="ease-in duration-100" x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0" x-transition:leave-end="opacity-0"
class="absolute inset-0 w-full h-full bg-black bg-opacity-20 backdrop-blur-sm"></div> class="absolute inset-0 w-full h-full bg-black/20 backdrop-blur-xs"></div>
<div x-show="modalOpen" x-trap.inert.noscroll="modalOpen" x-transition:enter="ease-out duration-100" <div x-show="modalOpen" x-trap.inert.noscroll="modalOpen" x-transition:enter="ease-out duration-100"
x-transition:enter-start="opacity-0 -translate-y-2 sm:scale-95" x-transition:enter-start="opacity-0 -translate-y-2 sm:scale-95"
x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100" x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
x-transition:leave="ease-in duration-100" x-transition:leave="ease-in duration-100"
x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100" x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
x-transition:leave-end="opacity-0 -translate-y-2 sm:scale-95" x-transition:leave-end="opacity-0 -translate-y-2 sm:scale-95"
class="relative w-full py-6 border rounded min-w-full lg:min-w-[36rem] max-w-fit bg-neutral-100 border-neutral-400 dark:bg-base px-7 dark:border-coolgray-300"> class="relative w-full py-6 border rounded-sm min-w-full lg:min-w-[36rem] max-w-fit bg-neutral-100 border-neutral-400 dark:bg-base px-7 dark:border-coolgray-300">
<div class="flex items-center justify-between pb-3"> <div class="flex items-center justify-between pb-3">
<h3 class="text-lg font-semibold">Upgrade confirmation</h3> <h3 class="text-lg font-semibold">Upgrade confirmation</h3>
<button x-show="!showProgress" @click="modalOpen=false" <button x-show="!showProgress" @click="modalOpen=false"
@@ -54,7 +54,7 @@
<div class="relative w-auto pb-8"> <div class="relative w-auto pb-8">
<p>Are you sure you would like to upgrade your instance to {{ $latestVersion }}?</p> <p>Are you sure you would like to upgrade your instance to {{ $latestVersion }}?</p>
<br /> <br />
<div class="p-4 mb-4 text-yellow-800 border border-yellow-300 rounded-lg bg-yellow-50 dark:bg-yellow-900/30 dark:text-yellow-300 dark:border-yellow-800"> <div class="p-4 mb-4 text-yellow-800 border border-yellow-300 rounded-lg bg-yellow-50 dark:bg-yellow-900/30 dark:text-yellow-300 dark:border-yellow-800">
<p class="font-medium">Warning: Any deployments running during the update process will fail. Please ensure no deployments are in progress on any server before continuing.</p> <p class="font-medium">Warning: Any deployments running during the update process will fail. Please ensure no deployments are in progress on any server before continuing.</p>
</div> </div>

View File

@@ -1,7 +1,7 @@
<x-layout> <x-layout>
<x-security.navbar /> <x-security.navbar />
<a class="text-center hover:no-underline group" href="{{ route('security.private-key.index') }}"> <a class="text-center hover:no-underline group" href="{{ route('security.private-key.index') }}">
<div class="group-hover:dark:text-white"> <div class="dark:group-hover:text-white">
<div>Private Keys</div> <div>Private Keys</div>
</div> </div>
</a> </a>

View File

@@ -15,10 +15,10 @@
<a class="flex gap-4 text-center hover:no-underline box group" <a class="flex gap-4 text-center hover:no-underline box group"
href="{{ route('source.github.show', ['github_app_uuid' => data_get($source, 'uuid')]) }}"> href="{{ route('source.github.show', ['github_app_uuid' => data_get($source, 'uuid')]) }}">
<x-git-icon class="dark:text-white w-9 h-9" git="{{ $source->getMorphClass() }}" /> <x-git-icon class="dark:text-white w-9 h-9" git="{{ $source->getMorphClass() }}" />
<div class="text-left group-hover:dark:text-white"> <div class="text-left dark:group-hover:text-white">
<div class="box-title">{{ $source->name }}</div> <div class="box-title">{{ $source->name }}</div>
@if (is_null($source->app_id)) @if (is_null($source->app_id))
<span class="box-description !text-error ">Configuration is not finished.</span> <span class="box-description text-error! ">Configuration is not finished.</span>
@endif @endif
</div> </div>
</a> </a>
@@ -27,7 +27,7 @@
<a class="flex gap-4 text-center hover:no-underline box group" <a class="flex gap-4 text-center hover:no-underline box group"
href="{{ route('source.gitlab.show', ['gitlab_app_uuid' => data_get($source, 'uuid')]) }}"> href="{{ route('source.gitlab.show', ['gitlab_app_uuid' => data_get($source, 'uuid')]) }}">
<x-git-icon class="dark:text-white w-9 h-9" git="{{ $source->getMorphClass() }}" /> <x-git-icon class="dark:text-white w-9 h-9" git="{{ $source->getMorphClass() }}" />
<div class="text-left group-hover:dark:text-white"> <div class="text-left dark:group-hover:text-white">
<div>{{ $source->name }}</div> <div>{{ $source->name }}</div>
@if (is_null($source->app_id)) @if (is_null($source->app_id))
<span class="text-error">Configuration is not finished</span> <span class="text-error">Configuration is not finished</span>

View File

@@ -1,38 +0,0 @@
/** @type {import('tailwindcss').Config} */
const colors = {
"base": "#101010",
"warning": "#FCD452",
"success": "#16A34A",
"error": "#DC2626",
"coollabs": "#6B16ED",
"coollabs-100": "#7317FF",
"coolgray-100": "#181818",
"coolgray-200": "#202020",
"coolgray-300": "#242424",
"coolgray-400": "#282828",
"coolgray-500": "#323232",
}
export default {
darkMode: "selector",
content: [
'./storage/framework/views/*.php',
"./resources/**/*.blade.php",
"./app/**/*.php",
"./resources/**/*.js",
"./resources/**/*.vue",
],
theme: {
extend: {
fontFamily: {
sans: ["Inter", "sans-serif"],
},
colors
},
},
plugins: [
require("tailwind-scrollbar"),
require("@tailwindcss/typography"),
require("@tailwindcss/forms")
],
};