From d6bd0941e7a9976cff121be73ca60ed7411fda5f Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Thu, 4 Dec 2025 15:19:23 +0100
Subject: [PATCH 1/2] refactor: simplify utility classes in CSS and Blade
 templates

---
 resources/css/utilities.css                               | 2 +-
 .../new/github-private-repository-deploy-key.blade.php    | 4 ++--
 .../project/new/github-private-repository.blade.php       | 6 +++---
 resources/views/livewire/project/new/select.blade.php     | 8 ++++----
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/resources/css/utilities.css b/resources/css/utilities.css
index fbfb98e9f..abb177835 100644
--- a/resources/css/utilities.css
+++ b/resources/css/utilities.css
@@ -230,7 +230,7 @@ @utility box-without-bg-without-border {
 }
 
 @utility coolbox {
-    @apply relative flex transition-all duration-150 dark:bg-coolgray-100 bg-white p-2 rounded-lg border border-neutral-200 dark:border-coolgray-400 hover:ring-2 dark:hover:ring-warning hover:ring-coollabs cursor-pointer min-h-[4rem];
+    @apply relative flex transition-all duration-150 dark:bg-coolgray-100 bg-white p-2 rounded border border-neutral-200 dark:border-coolgray-400 hover:ring-2 dark:hover:ring-warning hover:ring-coollabs cursor-pointer min-h-[4rem];
 }
 
 @utility on-box {
diff --git a/resources/views/livewire/project/new/github-private-repository-deploy-key.blade.php b/resources/views/livewire/project/new/github-private-repository-deploy-key.blade.php
index 596559817..43b54db9c 100644
--- a/resources/views/livewire/project/new/github-private-repository-deploy-key.blade.php
+++ b/resources/views/livewire/project/new/github-private-repository-deploy-key.blade.php
@@ -7,7 +7,7 @@
             <div class="flex flex-col justify-center gap-2 text-left ">
                 @forelse ($private_keys as $key)
                     @if ($private_key_id == $key->id)
-                        <div class="gap-2 py-4 cursor-pointer group hover:bg-coollabs bg-coolgray-100 coolbox"
+                        <div class="gap-2 py-4 cursor-pointer group coolbox"
                             wire:click="setPrivateKey('{{ $key->id }}')" wire:key="{{ $key->id }}">
                             <div class="flex flex-col mx-6">
                                 <div class="box-title">
@@ -20,7 +20,7 @@ class="loading loading-xs dark:text-warning loading-spinner"></span>
                             </div>
                         </div>
                     @else
-                        <div class="gap-2 py-4 cursor-pointer group hover:bg-coollabs bg-coolgray-100 coolbox"
+                        <div class="gap-2 py-4 cursor-pointer group coolbox"
                             wire:click="setPrivateKey('{{ $key->id }}')" wire:key="{{ $key->id }}">
                             <div class="flex flex-col mx-6">
                                 <div class="box-title">
diff --git a/resources/views/livewire/project/new/github-private-repository.blade.php b/resources/views/livewire/project/new/github-private-repository.blade.php
index e7f90788e..cbb659156 100644
--- a/resources/views/livewire/project/new/github-private-repository.blade.php
+++ b/resources/views/livewire/project/new/github-private-repository.blade.php
@@ -21,7 +21,7 @@
                 <div class="flex flex-col justify-center gap-2 text-left">
                     @foreach ($github_apps as $ghapp)
                         <div class="flex">
-                            <div class="w-full gap-2 py-4 bg-white cursor-pointer group hover:bg-coollabs dark:bg-coolgray-200 coolbox"
+                            <div class="w-full gap-2 py-4 group coolbox"
                                 wire:click.prevent="loadRepositories({{ $ghapp->id }})"
                                 wire:key="{{ $ghapp->id }}">
                                 <div class="flex mr-4">
@@ -118,8 +118,8 @@
                                     }" class="gap-2 flex flex-col">
                                         <x-forms.input placeholder="/" wire:model.defer="base_directory"
                                             label="Base Directory"
-                                            helper="Directory to use as root. Useful for monorepos."
-                                            x-model="baseDir" @blur="normalizeBaseDir()" />
+                                            helper="Directory to use as root. Useful for monorepos." x-model="baseDir"
+                                            @blur="normalizeBaseDir()" />
                                         <x-forms.input placeholder="/docker-compose.yaml"
                                             wire:model.defer="docker_compose_location" label="Docker Compose Location"
                                             helper="It is calculated together with the Base Directory."
diff --git a/resources/views/livewire/project/new/select.blade.php b/resources/views/livewire/project/new/select.blade.php
index 61c5a65eb..75b87ff16 100644
--- a/resources/views/livewire/project/new/select.blade.php
+++ b/resources/views/livewire/project/new/select.blade.php
@@ -450,7 +450,7 @@ function searchResources() {
                 PostgreSQL
                 17 (default).</div>
             <div class="flex flex-col gap-6 pt-8">
-                <div class="gap-2 border border-transparent box-without-bg dark:bg-coolgray-100 bg-white dark:hover:text-neutral-400 dark:hover:bg-coollabs group flex"
+                <div class="gap-2 coolbox group flex"
                     :class="{ 'cursor-pointer': !selecting, 'cursor-not-allowed opacity-50': selecting }"
                     x-on:click="!selecting && (selecting = true, $wire.setPostgresqlType('postgres:17-alpine'))"
                     :disabled="selecting">
@@ -470,7 +470,7 @@ function searchResources() {
                         </a>
                     </div>
                 </div>
-                <div class="gap-2 border border-transparent box-without-bg dark:bg-coolgray-100 bg-white dark:hover:text-neutral-400 dark:hover:bg-coollabs group flex"
+                <div class="gap-2 coolbox group flex"
                     :class="{ 'cursor-pointer': !selecting, 'cursor-not-allowed opacity-50': selecting }"
                     x-on:click="!selecting && (selecting = true, $wire.setPostgresqlType('supabase/postgres:17.4.1.032'))"
                     :disabled="selecting">
@@ -489,7 +489,7 @@ function searchResources() {
                         </a>
                     </div>
                 </div>
-                <div class="gap-2 border border-transparent box-without-bg dark:bg-coolgray-100 bg-white dark:hover:text-neutral-400 dark:hover:bg-coollabs group flex"
+                <div class="gap-2 coolbox group flex"
                     :class="{ 'cursor-pointer': !selecting, 'cursor-not-allowed opacity-50': selecting }"
                     x-on:click="!selecting && (selecting = true, $wire.setPostgresqlType('postgis/postgis:17-3.5-alpine'))"
                     :disabled="selecting">
@@ -508,7 +508,7 @@ function searchResources() {
                         </a>
                     </div>
                 </div>
-                <div class="gap-2 border border-transparent box-without-bg dark:bg-coolgray-100 bg-white dark:hover:text-neutral-400 dark:hover:bg-coollabs group flex"
+                <div class="gap-2 coolbox group flex"
                     :class="{ 'cursor-pointer': !selecting, 'cursor-not-allowed opacity-50': selecting }"
                     x-on:click="!selecting && (selecting = true, $wire.setPostgresqlType('pgvector/pgvector:pg17'))"
                     :disabled="selecting">

From ddb7437a637775b1ea33e80df4a27461834ea7e0 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Thu, 4 Dec 2025 15:28:52 +0100
Subject: [PATCH 2/2] Style PostgreSQL type docs links to match service list
 pattern
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace text "Documentation" links with SVG icons positioned in top-right corner, matching the established design pattern used in the service list. Update all four PostgreSQL type options: PostgreSQL 17, Supabase, PostGIS, and PGVector.

🤖 Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../livewire/project/new/select.blade.php     | 82 ++++++++++---------
 1 file changed, 44 insertions(+), 38 deletions(-)

diff --git a/resources/views/livewire/project/new/select.blade.php b/resources/views/livewire/project/new/select.blade.php
index 75b87ff16..a8572f92c 100644
--- a/resources/views/livewire/project/new/select.blade.php
+++ b/resources/views/livewire/project/new/select.blade.php
@@ -450,7 +450,7 @@ function searchResources() {
                 PostgreSQL
                 17 (default).</div>
             <div class="flex flex-col gap-6 pt-8">
-                <div class="gap-2 coolbox group flex"
+                <div class="gap-2 coolbox group flex relative"
                     :class="{ 'cursor-pointer': !selecting, 'cursor-not-allowed opacity-50': selecting }"
                     x-on:click="!selecting && (selecting = true, $wire.setPostgresqlType('postgres:17-alpine'))"
                     :disabled="selecting">
@@ -460,17 +460,18 @@ function searchResources() {
                             PostgreSQL is a powerful, open-source object-relational database system (no extensions).
                         </div>
                     </div>
-                    <div class="flex-1"></div>
-
-                    <div class="flex items-center px-2" title="Read the documentation.">
-                        <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">
-                            Documentation
-                        </a>
-                    </div>
+                    <a href="https://hub.docker.com/_/postgres/" target="_blank"
+                        @click.stop
+                        class="absolute top-2 right-2 p-1.5 rounded hover:bg-neutral-200 dark:hover:bg-coolgray-300 transition-colors"
+                        title="View documentation">
+                        <svg class="w-4 h-4 text-neutral-600 dark:text-neutral-400" fill="none"
+                            stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                        </svg>
+                    </a>
                 </div>
-                <div class="gap-2 coolbox group flex"
+                <div class="gap-2 coolbox group flex relative"
                     :class="{ 'cursor-pointer': !selecting, 'cursor-not-allowed opacity-50': selecting }"
                     x-on:click="!selecting && (selecting = true, $wire.setPostgresqlType('supabase/postgres:17.4.1.032'))"
                     :disabled="selecting">
@@ -480,16 +481,18 @@ function searchResources() {
                             Supabase is a modern, open-source alternative to PostgreSQL with lots of extensions.
                         </div>
                     </div>
-                    <div class="flex-1"></div>
-                    <div class="flex items-center px-2" title="Read the documentation.">
-                        <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"
-                            target="_blank">
-                            Documentation
-                        </a>
-                    </div>
+                    <a href="https://github.com/supabase/postgres" target="_blank"
+                        @click.stop
+                        class="absolute top-2 right-2 p-1.5 rounded hover:bg-neutral-200 dark:hover:bg-coolgray-300 transition-colors"
+                        title="View documentation">
+                        <svg class="w-4 h-4 text-neutral-600 dark:text-neutral-400" fill="none"
+                            stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                        </svg>
+                    </a>
                 </div>
-                <div class="gap-2 coolbox group flex"
+                <div class="gap-2 coolbox group flex relative"
                     :class="{ 'cursor-pointer': !selecting, 'cursor-not-allowed opacity-50': selecting }"
                     x-on:click="!selecting && (selecting = true, $wire.setPostgresqlType('postgis/postgis:17-3.5-alpine'))"
                     :disabled="selecting">
@@ -499,16 +502,18 @@ function searchResources() {
                             PostGIS is a PostgreSQL extension for geographic objects.
                         </div>
                     </div>
-                    <div class="flex-1"></div>
-                    <div class="flex items-center px-2" title="Read the documentation.">
-                        <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"
-                            target="_blank">
-                            Documentation
-                        </a>
-                    </div>
+                    <a href="https://github.com/postgis/docker-postgis" target="_blank"
+                        @click.stop
+                        class="absolute top-2 right-2 p-1.5 rounded hover:bg-neutral-200 dark:hover:bg-coolgray-300 transition-colors"
+                        title="View documentation">
+                        <svg class="w-4 h-4 text-neutral-600 dark:text-neutral-400" fill="none"
+                            stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                        </svg>
+                    </a>
                 </div>
-                <div class="gap-2 coolbox group flex"
+                <div class="gap-2 coolbox group flex relative"
                     :class="{ 'cursor-pointer': !selecting, 'cursor-not-allowed opacity-50': selecting }"
                     x-on:click="!selecting && (selecting = true, $wire.setPostgresqlType('pgvector/pgvector:pg17'))"
                     :disabled="selecting">
@@ -518,15 +523,16 @@ function searchResources() {
                             PGVector is a PostgreSQL extension for vector data types.
                         </div>
                     </div>
-                    <div class="flex-1"></div>
-
-                    <div class="flex items-center px-2" title="Read the documentation.">
-                        <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"
-                            target="_blank">
-                            Documentation
-                        </a>
-                    </div>
+                    <a href="https://github.com/pgvector/pgvector" target="_blank"
+                        @click.stop
+                        class="absolute top-2 right-2 p-1.5 rounded hover:bg-neutral-200 dark:hover:bg-coolgray-300 transition-colors"
+                        title="View documentation">
+                        <svg class="w-4 h-4 text-neutral-600 dark:text-neutral-400" fill="none"
+                            stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                        </svg>
+                    </a>
                 </div>
             </div>
         </div>