Update CSS styles and fix SVG icons

This commit is contained in:
Andras Bacsai 2024-03-22 12:47:19 +01:00
parent 87e56c2f66
commit 66fe124dd1
4 changed files with 34 additions and 32 deletions

View File

@ -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;

View File

@ -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" />

View File

@ -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>

View File

@ -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>