ui ui ui
This commit is contained in:
Andras Bacsai
parent
f661f23ee5
commit
b942f8c726
@ -41,7 +41,7 @@ option {
|
||||
}
|
||||
|
||||
.button {
|
||||
@apply flex items-center justify-center gap-2 px-3 py-1 text-sm font-bold text-white normal-case rounded cursor-pointer hover:bg-black/80 bg-coolgray-200 hover:bg-coolgray-100 hover:text-white disabled:bg-coolgray-100/10 disabled:cursor-not-allowed min-w-fit focus:outline-1 dark:disabled:text-neutral-600;
|
||||
@apply flex items-center justify-center gap-2 px-3 py-1 text-sm text-white normal-case rounded cursor-pointer hover:bg-black/80 bg-coolgray-200 hover:bg-coolgray-500 hover:text-white disabled:bg-coolgray-100/10 disabled:cursor-not-allowed min-w-fit focus:outline-1 dark:disabled:text-neutral-600;
|
||||
}
|
||||
|
||||
button[isError]:not(:disabled) {
|
||||
@ -118,7 +118,10 @@ .alert-error {
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
@apply relative flex cursor-pointer select-none dark:text-white hover:bg-neutral-300 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;
|
||||
@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 {
|
||||
@ -187,7 +190,10 @@ .kbd-custom {
|
||||
}
|
||||
|
||||
.box {
|
||||
@apply flex lg:flex-row flex-col p-2 transition-colors cursor-pointer min-h-[4rem] dark:bg-coolgray-100 bg-white border border-neutral-200 dark:border-black hover:bg-neutral-200 dark:hover:bg-coollabs-100 dark:hover:text-white hover:no-underline;
|
||||
@apply flex lg:flex-row flex-col p-2 transition-colors cursor-pointer min-h-[4rem] dark:bg-coolgray-100 bg-white border 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;
|
||||
}
|
||||
|
||||
.on-box {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<div class="grid grid-cols-1 gap-4 md:grid-cols-3">
|
||||
<div class="box-border col-span-2 lg:min-w-[24rem] min-h-[21rem]">
|
||||
<div class="box-border col-span-2 lg:min-w-[24rem] lg:min-h-[21rem]">
|
||||
<h1 class="text-2xl font-bold lg:text-5xl">{{ $title }}</h1>
|
||||
<div class="py-6">
|
||||
@isset($question)
|
||||
@ -16,7 +16,7 @@
|
||||
</div>
|
||||
@isset($explanation)
|
||||
<div class="col-span-1">
|
||||
<h1 class="pb-8 font-bold">Explanation</h1>
|
||||
<h3 class="pb-8 font-bold">Explanation</h3>
|
||||
<div class="space-y-4">
|
||||
{{ $explanation }}
|
||||
</div>
|
||||
|
||||
@ -2,11 +2,11 @@
|
||||
dropdownOpen: false
|
||||
}" class="relative" @click.outside="dropdownOpen = false">
|
||||
<button @click="dropdownOpen=true"
|
||||
class="inline-flex items-center justify-start pr-10 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-none disabled:opacity-50 disabled:pointer-events-none">
|
||||
<span class="flex flex-col items-start h-full leading-none">
|
||||
{{ $title }}
|
||||
</span>
|
||||
<svg class="absolute right-0 w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
||||
<svg class="absolute right-0 w-4 h-4 mr-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
||||
stroke-width="1.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9" />
|
||||
@ -16,7 +16,7 @@ class="inline-flex items-center justify-start pr-10 transition-colors focus:outl
|
||||
<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"
|
||||
class="absolute top-0 z-50 mt-6 min-w-max" x-cloak>
|
||||
<div class="p-1 mt-1 border dark:bg-coolgray-200 bg-neutral-200 dark:border-black border-neutral-300">
|
||||
<div class="p-1 mt-1 bg-white border rounded shadow dark:bg-coolgray-200 dark:border-black border-neutral-300">
|
||||
{{ $slot }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,20 +1,72 @@
|
||||
<nav class="flex flex-col flex-1 pl-2 bg-white border-r dark:border-coolgray-200 dark:bg-base">
|
||||
<nav class="flex flex-col flex-1 pl-2 bg-white border-r dark:border-coolgray-200 dark:bg-base" x-data="{
|
||||
init() {
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
const userSettings = localStorage.getItem('theme');
|
||||
if (userSettings !== 'system') {
|
||||
return;
|
||||
}
|
||||
if (e.matches) {
|
||||
document.documentElement.classList.add('dark');
|
||||
} else {
|
||||
document.documentElement.classList.remove('dark');
|
||||
}
|
||||
});
|
||||
this.queryTheme();
|
||||
},
|
||||
setTheme(type) {
|
||||
this.theme = type;
|
||||
localStorage.setItem('theme', type);
|
||||
this.queryTheme();
|
||||
},
|
||||
queryTheme() {
|
||||
const darkModePreference = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
const userSettings = localStorage.getItem('theme') || 'dark';
|
||||
localStorage.setItem('theme', userSettings);
|
||||
if (userSettings === 'dark') {
|
||||
document.documentElement.classList.add('dark');
|
||||
this.theme = 'dark';
|
||||
} else if (userSettings === 'light') {
|
||||
document.documentElement.classList.remove('dark');
|
||||
this.theme = 'light';
|
||||
} else if (darkModePreference) {
|
||||
this.theme = 'system';
|
||||
document.documentElement.classList.add('dark');
|
||||
} else if (!darkModePreference) {
|
||||
this.theme = 'system';
|
||||
document.documentElement.classList.remove('dark');
|
||||
}
|
||||
}
|
||||
}">
|
||||
<div class="flex pt-6 pb-4 pl-3">
|
||||
<div class="flex flex-col w-full">
|
||||
<div class="text-2xl font-bold tracking-wide dark:text-white">Coolify</div>
|
||||
<x-version />
|
||||
</div>
|
||||
<button class="flex items-start w-12 pt-1 transition-all duration-200" onclick="changeTheme()">
|
||||
<svg class="hidden w-5 h-5 rounded dark:block fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<div class="pt-1">
|
||||
<x-dropdown>
|
||||
<x-slot:title>
|
||||
<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"
|
||||
viewBox="0 0 24 24">
|
||||
<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" />
|
||||
</svg>
|
||||
|
||||
<svg class="block w-5 h-5 dark:hidden" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
</div>
|
||||
<div class="flex justify-end w-8" x-show="theme === 'light'">
|
||||
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</x-slot:title>
|
||||
<div class="flex flex-col gap-1">
|
||||
<button @click="setTheme('dark')" class="px-1 dropdown-item-no-padding">Dark</button>
|
||||
<button @click="setTheme('light')" class="px-1 dropdown-item-no-padding">Light</button>
|
||||
<button @click="setTheme('system')" class="px-1 dropdown-item-no-padding">System</button>
|
||||
</div>
|
||||
</x-dropdown>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="px-2 pt-2 pb-7">
|
||||
<livewire:switch-team />
|
||||
|
||||
@ -1,2 +1,2 @@
|
||||
<a {{ $attributes->merge(['class' => 'text-xs cursor-pointer opacity-90 hover:opacity-100 dark:hover:text-white hover:text-black z-[60]']) }}
|
||||
<a {{ $attributes->merge(['class' => 'text-xs cursor-pointer opacity-90 hover:opacity-100 dark:hover:text-white hover:text-black']) }}
|
||||
href="https://github.com/coollabsio/coolify/releases/tag/v{{ config('version') }}">v{{ config('version') }}</a>
|
||||
|
||||
@ -40,20 +40,15 @@
|
||||
<body>
|
||||
<x-toast />
|
||||
<script data-navigate-once>
|
||||
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia(
|
||||
'(prefers-color-scheme: dark)').matches)) {
|
||||
document.documentElement.classList.add('dark')
|
||||
} else {
|
||||
document.documentElement.classList.remove('dark')
|
||||
}
|
||||
|
||||
function changeTheme() {
|
||||
if (localStorage.theme === 'dark') {
|
||||
localStorage.theme = 'light'
|
||||
document.documentElement.classList.add('dark')
|
||||
} else if (localStorage.theme === 'light') {
|
||||
document.documentElement.classList.remove('dark')
|
||||
} else {
|
||||
localStorage.theme = 'dark'
|
||||
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
document.documentElement.classList.add('dark')
|
||||
} else {
|
||||
document.documentElement.classList.remove('dark')
|
||||
}
|
||||
}
|
||||
@auth
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
@extends('layouts.base')
|
||||
@section('body')
|
||||
<main class="h-full bg-gray-50 dark:bg-base">
|
||||
<main class="h-full">
|
||||
{{ $slot }}
|
||||
</main>
|
||||
@parent
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
@php use App\Enums\ProxyTypes; @endphp
|
||||
<section class="flex flex-col h-full lg:items-center lg:justify-center">
|
||||
<div class="flex flex-col items-center justify-center px-6 py-8 mx-auto max-w-7xl lg:py-0">
|
||||
<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 ">
|
||||
@if ($currentState === 'welcome')
|
||||
<h1 class="text-3xl font-bold lg:text-5xl">Welcome to Coolify</h1>
|
||||
<p class="py-6 text-base text-center lg:text-xl">Let me help you set up the basics.</p>
|
||||
<div class="py-6 text-center lg:text-xl">Let me help you set up the basics.</div>
|
||||
<div class="flex justify-center ">
|
||||
<x-forms.button class="justify-center w-64 box" wire:click="$set('currentState','explanation')">Get
|
||||
<x-forms.button class="justify-center w-64 box-boarding" wire:click="$set('currentState','explanation')">Get
|
||||
Started
|
||||
</x-forms.button>
|
||||
</div>
|
||||
@ -33,7 +33,7 @@
|
||||
Telegram, Email, etc.) when something goes wrong, or an action is needed from your side.</p>
|
||||
</x-slot:explanation>
|
||||
<x-slot:actions>
|
||||
<x-forms.button class="justify-center lg:w-64 box" wire:click="explanation">Next
|
||||
<x-forms.button class="justify-center lg:w-64 box-boarding" wire:click="explanation">Next
|
||||
</x-forms.button>
|
||||
</x-slot:actions>
|
||||
</x-boarding-step>
|
||||
@ -44,11 +44,11 @@
|
||||
or to a <x-highlighted text="Remote Server" />?
|
||||
</x-slot:question>
|
||||
<x-slot:actions>
|
||||
<x-forms.button class="justify-center w-64 box" wire:target="setServerType('localhost')"
|
||||
<x-forms.button class="justify-center w-64 box-boarding" wire:target="setServerType('localhost')"
|
||||
wire:click="setServerType('localhost')">Localhost
|
||||
</x-forms.button>
|
||||
|
||||
<x-forms.button class="justify-center w-64 box " wire:target="setServerType('remote')"
|
||||
<x-forms.button class="justify-center w-64 box-boarding " wire:target="setServerType('remote')"
|
||||
wire:click="setServerType('remote')">Remote Server
|
||||
</x-forms.button>
|
||||
@if (!$serverReachable)
|
||||
@ -62,7 +62,7 @@
|
||||
Check this <a target="_blank" class="underline"
|
||||
href="https://coolify.io/docs/server/openssh">documentation</a> for further help.
|
||||
<x-forms.input readonly id="serverPublicKey"></x-forms.input>
|
||||
<x-forms.button class="lg:w-64 box" wire:target="setServerType('localhost')"
|
||||
<x-forms.button class="lg:w-64 box-boarding" wire:target="setServerType('localhost')"
|
||||
wire:click="setServerType('localhost')">Check again
|
||||
</x-forms.button>
|
||||
@endif
|
||||
@ -85,10 +85,10 @@
|
||||
Do you have your own SSH Private Key?
|
||||
</x-slot:question>
|
||||
<x-slot:actions>
|
||||
<x-forms.button class="justify-center lg:w-64 box" wire:target="setPrivateKey('own')"
|
||||
<x-forms.button class="justify-center lg:w-64 box-boarding" wire:target="setPrivateKey('own')"
|
||||
wire:click="setPrivateKey('own')">Yes
|
||||
</x-forms.button>
|
||||
<x-forms.button class="justify-center lg:w-64 box" wire:target="setPrivateKey('create')"
|
||||
<x-forms.button class="justify-center lg:w-64 box-boarding" wire:target="setPrivateKey('create')"
|
||||
wire:click="setPrivateKey('create')">No (create one for me)
|
||||
</x-forms.button>
|
||||
@if (count($privateKeys) > 0)
|
||||
@ -120,7 +120,7 @@
|
||||
<x-slot:actions>
|
||||
<div class="flex flex-col gap-4">
|
||||
<div>
|
||||
<x-forms.button class="justify-center w-64 box" wire:click="createNewServer">No (create
|
||||
<x-forms.button class="justify-center w-64 box-boarding" wire:click="createNewServer">No (create
|
||||
one
|
||||
for
|
||||
me)
|
||||
@ -146,7 +146,7 @@
|
||||
'root' or skip the boarding process and add a new private key manually to Coolify and to the
|
||||
server.
|
||||
<x-forms.input readonly id="serverPublicKey"></x-forms.input>
|
||||
<x-forms.button class="w-64 box" wire:target="validateServer" wire:click="validateServer">Check
|
||||
<x-forms.button class="w-64 box-boarding" wire:target="validateServer" wire:click="validateServer">Check
|
||||
again
|
||||
</x-forms.button>
|
||||
@endif
|
||||
@ -236,7 +236,7 @@
|
||||
<x-slot:content>
|
||||
<livewire:server.validate-and-install :server="$this->createdServer" />
|
||||
</x-slot:content>
|
||||
<x-forms.button @click="slideOverOpen=true" class="w-full font-bold box lg:w-96"
|
||||
<x-forms.button @click="slideOverOpen=true" class="w-full font-bold box-boarding lg:w-96"
|
||||
wire:click.prevent='installServer' isHighlighted>
|
||||
Let's do it!
|
||||
</x-forms.button>
|
||||
@ -263,7 +263,7 @@
|
||||
@endif
|
||||
</x-slot:question>
|
||||
<x-slot:actions>
|
||||
<x-forms.button class="justify-center w-64 box" wire:click="createNewProject">Create new
|
||||
<x-forms.button class="justify-center w-64 box-boarding" wire:click="createNewProject">Create new
|
||||
project!</x-forms.button>
|
||||
<div>
|
||||
@if (count($projects) > 0)
|
||||
@ -292,7 +292,7 @@
|
||||
Let's go to the new resource page, where you can create your first resource.
|
||||
</x-slot:question>
|
||||
<x-slot:actions>
|
||||
<div class="items-center justify-center w-64 box" wire:click="showNewResource">Let's do
|
||||
<div class="items-center justify-center w-64 box-boarding" wire:click="showNewResource">Let's do
|
||||
it!</div>
|
||||
</x-slot:actions>
|
||||
<x-slot:explanation>
|
||||
|
||||
@ -20,8 +20,8 @@ class="w-8 h-8 sm:w-12 sm:h-12 lg:w-16 lg:h-16">
|
||||
<x-slot:description>
|
||||
<span>Please
|
||||
consider donating on <a href="https://github.com/sponsors/coollabsio"
|
||||
class="text-xs dark:text-white underline">GitHub</a> or <a href="https://opencollective.com/coollabsio"
|
||||
class="text-xs dark:text-white underline">OpenCollective</a>.<br><br></span>
|
||||
class="text-xs underline dark:text-white">GitHub</a> or <a href="https://opencollective.com/coollabsio"
|
||||
class="text-xs underline dark:text-white">OpenCollective</a>.<br><br></span>
|
||||
<span>It enables us to keep creating features without paywalls, ensuring our work remains free and
|
||||
open.</span>
|
||||
</x-slot:description>
|
||||
@ -35,7 +35,7 @@ class="text-xs dark:text-white underline">OpenCollective</a>.<br><br></span>
|
||||
<div><span class="font-bold text-red-500">WARNING:</span> The number of active servers exceeds the limit
|
||||
covered by your payment. If not resolved, some of your servers <span class="font-bold text-red-500">will
|
||||
be deactivated</span>. Visit <a href="{{ route('subscription.show') }}"
|
||||
class="dark:text-white underline">/subscription</a> to update your subscription or remove some servers.
|
||||
class="underline dark:text-white">/subscription</a> to update your subscription or remove some servers.
|
||||
</div>
|
||||
</x-banner>
|
||||
@endif
|
||||
@ -57,7 +57,7 @@ class="dark:text-white underline">/subscription</a> to update your subscription
|
||||
highly recommended to enable at least
|
||||
one
|
||||
notification channel to receive important alerts.<br>Visit <a
|
||||
href="{{ route('notifications.email') }}" class="dark:text-white underline">/notification</a> to
|
||||
href="{{ route('notifications.email') }}" class="underline dark:text-white">/notification</a> to
|
||||
enable notifications.</span>
|
||||
</x-slot:description>
|
||||
<x-slot:button-text @click="disableNotification()">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user