Update CSS styles and fix SVG icons
This commit is contained in:
parent
87e56c2f66
commit
66fe124dd1
@ -128,7 +128,7 @@ .menu {
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
@apply flex items-center w-full gap-2 py-1 pl-2 dark:hover:bg-coolgray-100 dark:hover:text-white hover:bg-neutral-300;
|
||||
@apply flex items-center w-full gap-3 py-1 pl-2 dark:hover:bg-coolgray-100 dark:hover:text-white hover:bg-neutral-300;
|
||||
}
|
||||
|
||||
.menu-item-active {
|
||||
@ -136,7 +136,11 @@ .menu-item-active {
|
||||
}
|
||||
|
||||
.icon {
|
||||
@apply w-4 h-4;
|
||||
@apply w-6 h-6;
|
||||
}
|
||||
|
||||
.icon:hover {
|
||||
@apply text-white;
|
||||
}
|
||||
|
||||
.scrollbar {
|
||||
@ -163,13 +167,8 @@ .kbd-custom {
|
||||
@apply px-2 text-xs border border-dashed rounded border-neutral-700 text-warning;
|
||||
}
|
||||
|
||||
.icon {
|
||||
@apply w-6 h-6;
|
||||
}
|
||||
|
||||
.icon:hover {
|
||||
@apply text-white;
|
||||
}
|
||||
|
||||
|
||||
.box {
|
||||
@apply flex p-2 transition-colors cursor-pointer min-h-[4rem] dark:bg-coolgray-100 bg-neutral-50 hover:bg-neutral-200 dark:hover:bg-coollabs-100 dark:hover:text-white hover:no-underline;
|
||||
|
@ -85,8 +85,10 @@ class="{{ request()->is('source*') ? 'menu-item-active menu-item' : 'menu-item'
|
||||
class="{{ request()->is('destination*') ? 'menu-item-active menu-item' : 'menu-item' }}"
|
||||
href="{{ route('destination.all') }}">
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24">
|
||||
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 4L3 8v12l6-3l6 3l6-4V4l-6 3l-6-3zm-2 8.001V12m4 .001V12m3-2l2 2m2 2l-2-2m0 0l2-2m-2 2l-2 2"/>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24">
|
||||
<path fill="none" stroke="currentColor" stroke-linecap="round"
|
||||
stroke-linejoin="round" stroke-width="2"
|
||||
d="M9 4L3 8v12l6-3l6 3l6-4V4l-6 3l-6-3zm-2 8.001V12m4 .001V12m3-2l2 2m2 2l-2-2m0 0l2-2m-2 2l-2 2" />
|
||||
</svg>
|
||||
Destinations
|
||||
</a>
|
||||
@ -233,8 +235,7 @@ class="{{ request()->is('onboarding*') ? 'menu-item-active menu-item' : 'menu-it
|
||||
<li>
|
||||
<a title="Sponsor us" class="menu-item" href="https://coolify.io/sponsorships"
|
||||
target="_blank">
|
||||
<svg class="text-pink-500 icon" viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<svg class="text-pink-500 icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill="none" stroke="currentColor" stroke-linecap="round"
|
||||
stroke-linejoin="round" stroke-width="2">
|
||||
<path d="M19.5 12.572L12 20l-7.5-7.428A5 5 0 1 1 12 6.006a5 5 0 1 1 7.5 6.572" />
|
||||
|
@ -1,18 +1,18 @@
|
||||
<div @class([
|
||||
'h-20 transition-all duration-150 box-without-bg bg-coolgray-100 group border-l-2 border-transparent',
|
||||
'hover:border-coollabs cursor-pointer' => !$upgrade,
|
||||
'hover:border-red-500 cursor-not-allowed ' => $upgrade,
|
||||
'hover:border-red-500 cursor-not-allowed' => $upgrade,
|
||||
]) @if (!$upgrade) wire:click={{ $wire }} @endif>
|
||||
<div class="flex items-center">
|
||||
{{ $logo }}
|
||||
<div class="flex flex-col pl-2 ">
|
||||
<div class="text-white text-md">
|
||||
<div class="dark:text-white text-md">
|
||||
{{ $title }}
|
||||
</div>
|
||||
@if($upgrade)
|
||||
<div>{{ $upgrade }}</div>
|
||||
@else
|
||||
<div class="hidden text-xs font-bold text-neutral-500 group-hover:flex">
|
||||
<div class="text-xs dark:text-neutral-500 group-hover:dark:text-neutral-300">
|
||||
{{ $description }}
|
||||
</div>
|
||||
@endif
|
||||
@ -27,5 +27,4 @@
|
||||
</a>
|
||||
</div>
|
||||
@endisset
|
||||
|
||||
</div>
|
||||
|
@ -10,10 +10,11 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="pb-4 ">Deploy resources, like Applications, Databases, Services...</div>
|
||||
<div class="flex flex-col gap-4 pt-10">
|
||||
<div class="flex flex-col gap-4 pt-4">
|
||||
@if ($current_step === 'type')
|
||||
<h2>Applications</h2>
|
||||
<div class="grid justify-start grid-cols-1 gap-4 text-left xl:grid-cols-3">
|
||||
<h4>Git Based</h4>
|
||||
<div class="grid justify-start grid-cols-1 gap-4 text-left xl:grid-cols-1">
|
||||
<x-resource-view wire="setType('public')">
|
||||
<x-slot:title>Public Repository</x-slot>
|
||||
<x-slot:description>
|
||||
@ -49,9 +50,10 @@
|
||||
</x-slot:logo>
|
||||
</x-resource-view>
|
||||
</div>
|
||||
<h4>Docker Based</h4>
|
||||
<div class="grid justify-start grid-cols-1 gap-4 text-left xl:grid-cols-3">
|
||||
<x-resource-view wire="setType('dockerfile')">
|
||||
<x-slot:title>Based on a Dockerfile</x-slot>
|
||||
<x-slot:title>Dockerfile</x-slot>
|
||||
<x-slot:description>
|
||||
You can deploy a simple Dockerfile, without Git.
|
||||
</x-slot>
|
||||
@ -62,7 +64,7 @@
|
||||
</x-slot:logo>
|
||||
</x-resource-view>
|
||||
<x-resource-view wire="setType('docker-compose-empty')">
|
||||
<x-slot:title>Based on a Docker Compose</x-slot>
|
||||
<x-slot:title>Docker Compose</x-slot>
|
||||
<x-slot:description>
|
||||
You can deploy complex application easily with Docker Compose, without Git.
|
||||
</x-slot>
|
||||
@ -73,7 +75,7 @@
|
||||
</x-slot:logo>
|
||||
</x-resource-view>
|
||||
<x-resource-view wire="setType('docker-image')">
|
||||
<x-slot:title>Based on an existing Docker Image</x-slot>
|
||||
<x-slot:title>Existing Docker Image</x-slot>
|
||||
<x-slot:description>
|
||||
You can deploy an existing Docker Image from any Registry, without Git.
|
||||
</x-slot>
|
||||
@ -85,9 +87,9 @@
|
||||
</x-resource-view>
|
||||
</div>
|
||||
<h2 class="py-4">Databases</h2>
|
||||
<div class="grid justify-start grid-cols-1 gap-4 text-left xl:grid-cols-3">
|
||||
<div class="grid justify-start grid-cols-1 gap-4 text-left xl:grid-cols-2">
|
||||
<x-resource-view wire="setType('postgresql')">
|
||||
<x-slot:title> New PostgreSQL</x-slot>
|
||||
<x-slot:title>PostgreSQL</x-slot>
|
||||
<x-slot:description>
|
||||
PostgreSQL is an object-relational database known for its
|
||||
robustness, advanced features, and strong standards compliance.
|
||||
@ -99,7 +101,7 @@
|
||||
</x-slot:logo>
|
||||
</x-resource-view>
|
||||
<x-resource-view wire="setType('redis')">
|
||||
<x-slot:title> New Redis</x-slot>
|
||||
<x-slot:title>Redis</x-slot>
|
||||
<x-slot:description>
|
||||
Redis is an open-source, in-memory data structure store, used as a database, cache, and message
|
||||
broker.
|
||||
@ -111,7 +113,7 @@
|
||||
</x-slot:logo>
|
||||
</x-resource-view>
|
||||
<x-resource-view wire="setType('mongodb')">
|
||||
<x-slot:title> New MongoDB</x-slot>
|
||||
<x-slot:title>MongoDB</x-slot>
|
||||
<x-slot:description>
|
||||
MongoDB is a source-available, NoSQL database that uses JSON-like documents with
|
||||
optional schemas.
|
||||
@ -123,7 +125,7 @@
|
||||
</x-slot:logo>
|
||||
</x-resource-view>
|
||||
<x-resource-view wire="setType('mysql')">
|
||||
<x-slot:title>New MySQL</x-slot>
|
||||
<x-slot:title>MySQL</x-slot>
|
||||
<x-slot:description>
|
||||
MySQL is a relational database known for its speed, reliability, and
|
||||
flexibility.
|
||||
@ -135,7 +137,7 @@
|
||||
</x-slot:logo>
|
||||
</x-resource-view>
|
||||
<x-resource-view wire="setType('mariadb')">
|
||||
<x-slot:title> New Mariadb</x-slot>
|
||||
<x-slot:title>Mariadb</x-slot>
|
||||
<x-slot:description>
|
||||
MariaDB is a relational database that serves as a drop-in
|
||||
replacement for MySQL.
|
||||
@ -161,9 +163,12 @@
|
||||
<div class="flex items-center gap-4" wire:init='loadServices'>
|
||||
<h2 class="py-4">Services</h2>
|
||||
<x-forms.button wire:click="loadServices('force')">Reload List</x-forms.button>
|
||||
<input class="input" wire:model.live.debounce.200ms="search" autofocus placeholder="Search...">
|
||||
<input class="input" autofocus wire:model.live.debounce.200ms="search" autofocus placeholder="Search...">
|
||||
</div>
|
||||
<div class="grid justify-start grid-cols-1 gap-4 text-left xl:grid-cols-3">
|
||||
<div class="pb-4 text-xs">Trademarks Policy: The respective trademarks mentioned here are owned by the
|
||||
respective
|
||||
companies, and use of them does not imply any affiliation or endorsement.</div>
|
||||
<div class="grid justify-start grid-cols-1 gap-4 text-left xl:grid-cols-2">
|
||||
@if ($loadingServices)
|
||||
<span class="loading loading-xs loading-spinner"></span>
|
||||
@else
|
||||
@ -242,9 +247,7 @@
|
||||
@endforelse
|
||||
@endif
|
||||
</div>
|
||||
<div class="py-4 pb-10">Trademarks Policy: The respective trademarks mentioned here are owned by the
|
||||
respective
|
||||
companies, and use of them does not imply any affiliation or endorsement.</div>
|
||||
|
||||
@endif
|
||||
@if ($current_step === 'servers')
|
||||
<h2>Select a server</h2>
|
||||
|
Loading…
Reference in New Issue
Block a user