From b02689a43e863265150b210bd681d82f0cdbde9a Mon Sep 17 00:00:00 2001 From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com> Date: Thu, 23 Oct 2025 21:27:53 +0200 Subject: [PATCH] feat: display service logos in original colors with consistent sizing MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This commit improves the visual presentation of service, application, and database logos on the new resource selection page: - Remove grayscale filter: Logos now display in their original colors by default instead of being greyed out - Dark mode support for SVGs: Updated SVG logos to use `fill="currentColor"` and added `text-black dark:text-white` wrapper for proper light/dark theme adaptation - Consistent aspect ratios: Removed `aspect-square` and added `object-contain` to preserve original logo proportions - Uniform sizing: Implemented fixed-size container (4.5rem × 4.5rem) with centered logo positioning to ensure all logos appear at consistent sizes regardless of intrinsic dimensions - Improved mobile UX: Adjusted sticky search bar positioning from `top-10` to `top-20` to prevent navbar overlap Files modified: - resources/views/livewire/project/new/select.blade.php - resources/views/components/resource-view.blade.php - app/Livewire/Project/New/Select.php - public/svgs/*.svg (12 SVG files updated with currentColor) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- app/Livewire/Project/New/Select.php | 16 +-- .../views/components/resource-view.blade.php | 4 +- .../livewire/project/new/select.blade.php | 105 +++++++++--------- 3 files changed, 62 insertions(+), 63 deletions(-) diff --git a/app/Livewire/Project/New/Select.php b/app/Livewire/Project/New/Select.php index ed454bb77..0afcf94e6 100644 --- a/app/Livewire/Project/New/Select.php +++ b/app/Livewire/Project/New/Select.php @@ -177,14 +177,14 @@ public function loadServices() 'id' => 'postgresql', 'name' => 'PostgreSQL', 'description' => 'PostgreSQL is an object-relational database known for its robustness, advanced features, and strong standards compliance.', - 'logo' => ' + 'logo' => ' ', ], [ 'id' => 'mysql', 'name' => 'MySQL', 'description' => 'MySQL is an open-source relational database management system. ', - 'logo' => ' + 'logo' => ' @@ -195,37 +195,37 @@ public function loadServices() 'id' => 'mariadb', 'name' => 'MariaDB', 'description' => 'MariaDB is a community-developed, commercially supported fork of the MySQL relational database management system, intended to remain free and open-source.', - 'logo' => '', + 'logo' => '', ], [ 'id' => 'redis', 'name' => 'Redis', 'description' => 'Redis is a source-available, in-memory storage, used as a distributed, in-memory key–value database, cache and message broker, with optional durability.', - 'logo' => '', + 'logo' => '', ], [ 'id' => 'keydb', 'name' => 'KeyDB', 'description' => 'KeyDB is a database that offers high performance, low latency, and scalability for various data structures and workloads.', - 'logo' => '
', + 'logo' => '
', ], [ 'id' => 'dragonfly', 'name' => 'Dragonfly', 'description' => 'Dragonfly DB is a drop-in Redis replacement that delivers 25x more throughput and 12x faster snapshotting than Redis.', - 'logo' => '
', + 'logo' => '
', ], [ 'id' => 'mongodb', 'name' => 'MongoDB', 'description' => 'MongoDB is a source-available, cross-platform, document-oriented database program.', - 'logo' => '', + 'logo' => '', ], [ 'id' => 'clickhouse', 'name' => 'ClickHouse', 'description' => 'ClickHouse is a column-oriented database that supports real-time analytics, business intelligence, observability, ML and GenAI, and more.', - 'logo' => '
', + 'logo' => '
', ], ]; diff --git a/resources/views/components/resource-view.blade.php b/resources/views/components/resource-view.blade.php index acde36336..ff8e99074 100644 --- a/resources/views/components/resource-view.blade.php +++ b/resources/views/components/resource-view.blade.php @@ -4,7 +4,9 @@ 'hover:border-l-red-500 cursor-not-allowed' => $upgrade, ])>
- {{ $logo }} +
+ {{ $logo }} +
{{ $title }} diff --git a/resources/views/livewire/project/new/select.blade.php b/resources/views/livewire/project/new/select.blade.php index 277ca99af..8d2ad665d 100644 --- a/resources/views/livewire/project/new/select.blade.php +++ b/resources/views/livewire/project/new/select.blade.php @@ -74,13 +74,13 @@ class="grid justify-start grid-cols-1 gap-4 text-left xl:grid-cols-1"> :class="{ 'cursor-pointer': !selecting, 'cursor-not-allowed opacity-50': selecting }"> - - - - - - + + + + + +
@@ -93,10 +93,10 @@ class="grid justify-start grid-cols-1 gap-4 text-left xl:grid-cols-3"> :class="{ 'cursor-pointer': !selecting, 'cursor-not-allowed opacity-50': selecting }"> - - + +
@@ -109,12 +109,12 @@ class="grid justify-start grid-cols-1 gap-4 text-left xl:grid-cols-2"> :class="{ 'cursor-pointer': !selecting, 'cursor-not-allowed opacity-50': selecting }"> - - - - - - + + + + + +
@@ -141,33 +141,33 @@ class="grid justify-start grid-cols-1 gap-4 text-left xl:grid-cols-2"> - - - - - - - - - - + + + + + + + + + + @@ -301,14 +301,14 @@ function searchResources() { {{ $server->name }}
- {{ $server->description }}
+ {{ $server->description }} + @empty
-
No validated & reachable servers found. +
@@ -368,8 +368,7 @@ function searchResources() {
+ onclick="event.stopPropagation()" href="https://hub.docker.com/_/postgres/" target="_blank"> Documentation
@@ -387,8 +386,7 @@ function searchResources() {
+ onclick="event.stopPropagation()" href="https://github.com/supabase/postgres" target="_blank"> Documentation
@@ -426,8 +424,7 @@ function searchResources() {
+ onclick="event.stopPropagation()" href="https://github.com/pgvector/pgvector" target="_blank"> Documentation
@@ -442,4 +439,4 @@ function searchResources() { Add Database @endif -
+ \ No newline at end of file