From f470ebbbe0d625b368ccc4d2dd4124b0b3ff5bd5 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <andras.bacsai@gmail.com>
Date: Fri, 20 Oct 2023 09:29:09 +0200
Subject: [PATCH] ui: updates

---
 resources/css/app.css                         |  8 ++--
 resources/views/livewire/dashboard.blade.php  | 43 ++++++++++---------
 .../livewire/project/new/select.blade.php     | 30 ++++++-------
 resources/views/livewire/server/all.blade.php |  2 +-
 resources/views/project/resources.blade.php   |  7 ++-
 resources/views/project/show.blade.php        |  2 +-
 resources/views/projects.blade.php            | 26 +++++------
 templates/compose/babybuddy.yaml              |  2 +-
 templates/service-templates.json              |  2 +-
 9 files changed, 64 insertions(+), 58 deletions(-)

diff --git a/resources/css/app.css b/resources/css/app.css
index c1e8f3259..ee4ec7b77 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -53,12 +53,14 @@ .icon:hover {
     @apply text-white;
 }
 .box {
-    @apply flex items-center p-2 transition-colors cursor-pointer min-h-16 bg-coolgray-200 hover:bg-coollabs-100 hover:text-white hover:no-underline min-w-[24rem];
+    @apply flex p-2 transition-colors cursor-pointer min-h-16 bg-coolgray-200 hover:bg-coollabs-100 hover:text-white hover:no-underline min-w-[24rem];
 }
 .box-without-bg {
-    @apply flex items-center p-2 transition-colors min-h-16 hover:text-white hover:no-underline min-w-[24rem];
+    @apply flex p-2 transition-colors min-h-16 hover:text-white hover:no-underline min-w-[24rem];
+}
+.description {
+    @apply pt-2 text-xs font-bold text-neutral-500 group-hover:text-white;
 }
-
 .lds-heart {
     animation: lds-heart 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
 }
diff --git a/resources/views/livewire/dashboard.blade.php b/resources/views/livewire/dashboard.blade.php
index 7ceb40d7a..2e79582e1 100644
--- a/resources/views/livewire/dashboard.blade.php
+++ b/resources/views/livewire/dashboard.blade.php
@@ -15,7 +15,8 @@
         </div>
     @endif
     @if ($projects->count() === 0 && $servers->count() === 0)
-        No resources found. Add your first server / private key <a class="text-white underline" href="{{route('server.create')}}">here</a>.
+        No resources found. Add your first server / private key <a class="text-white underline"
+            href="{{ route('server.create') }}">here</a>.
     @endif
     @if ($projects->count() > 0)
         <h3 class="pb-4">Projects</h3>
@@ -32,32 +33,34 @@
                 <a class="flex flex-col flex-1 mx-6 hover:no-underline"
                     href="{{ route('project.resources', ['project_uuid' => data_get($project, 'uuid'), 'environment_name' => data_get($project, 'environments.0.name', 'production')]) }}">
                     <div class="font-bold text-white">{{ $project->name }}</div>
-                    <div class="text-xs group-hover:text-white hover:no-underline">
+                    <div class="description">
                         {{ $project->description }}</div>
                 </a>
             @else
                 <a class="flex flex-col flex-1 mx-6 hover:no-underline"
                     href="{{ route('project.show', ['project_uuid' => data_get($project, 'uuid')]) }}">
                     <div class="font-bold text-white">{{ $project->name }}</div>
-                    <div class="text-xs group-hover:text-white hover:no-underline">
+                    <div class="description">
                         {{ $project->description }}</div>
                 </a>
             @endif
-            <a class="mx-4 rounded group-hover:text-white hover:no-underline"
-                href="{{ route('project.resources.new', ['project_uuid' => data_get($project, 'uuid'), 'environment_name' => data_get($project, 'environments.0.name', 'production')]) }}">
-                <span class="font-bold hover:text-warning">+ New Resource</span>
-            </a>
-            <a class="mx-4 rounded group-hover:text-white"
-                href="{{ route('project.edit', ['project_uuid' => data_get($project, 'uuid')]) }}">
-                <svg xmlns="http://www.w3.org/2000/svg" class="icon hover:text-warning" viewBox="0 0 24 24"
-                    stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
-                    stroke-linejoin="round">
-                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                    <path
-                        d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" />
-                    <path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" />
-                </svg>
-            </a>
+            <div class="flex items-center">
+                <a class="mx-4 rounded group-hover:text-white hover:no-underline"
+                    href="{{ route('project.resources.new', ['project_uuid' => data_get($project, 'uuid'), 'environment_name' => data_get($project, 'environments.0.name', 'production')]) }}">
+                    <span class="font-bold hover:text-warning">+ New Resource</span>
+                </a>
+                <a class="mx-4 rounded group-hover:text-white"
+                    href="{{ route('project.edit', ['project_uuid' => data_get($project, 'uuid')]) }}">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="icon hover:text-warning" viewBox="0 0 24 24"
+                        stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
+                        stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                        <path
+                            d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" />
+                        <path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" />
+                    </svg>
+                </a>
+            </div>
         </div>
     @endforeach
 </div>
@@ -79,7 +82,7 @@
             <div class="font-bold text-white">
                 {{ $server->name }}
             </div>
-            <div class="text-xs group-hover:text-white">
+            <div class="description">
                 {{ $server->description }}</div>
             <div class="flex gap-1 text-xs text-error">
                 @if (!$server->settings->is_reachable)
@@ -97,7 +100,7 @@
     </a>
 @endforeach
 </div>
-    {{-- <h3 class="py-4">Tokens</h3>
+{{-- <h3 class="py-4">Tokens</h3>
     {{auth()->user()->tokens}}
     <x-forms.button wire:click='createToken'>Create Token</x-forms.button> --}}
 <script>
diff --git a/resources/views/livewire/project/new/select.blade.php b/resources/views/livewire/project/new/select.blade.php
index 9659ff995..ab5b0b894 100644
--- a/resources/views/livewire/project/new/select.blade.php
+++ b/resources/views/livewire/project/new/select.blade.php
@@ -24,7 +24,7 @@
                         <div class="font-bold text-white group-hover:text-white">
                             Public Repository
                         </div>
-                        <div class="text-xs group-hover:text-white">
+                        <div class="description">
                             You can deploy any kind of public repositories from the supported git providers.
                         </div>
                     </div>
@@ -34,7 +34,7 @@
                         <div class="font-bold text-white group-hover:text-white">
                             Private Repository (with GitHub App)
                         </div>
-                        <div class="text-xs group-hover:text-white">
+                        <div class="description">
                             You can deploy public & private repositories through your GitHub Apps.
                         </div>
                     </div>
@@ -44,7 +44,7 @@
                         <div class="font-bold text-white group-hover:text-white">
                             Private Repository (with deploy key)
                         </div>
-                        <div class="text-xs group-hover:text-white">
+                        <div class="description">
                             You can deploy public & private repositories with a simple deploy key (SSH key).
                         </div>
                     </div>
@@ -56,7 +56,7 @@
                         <div class="font-bold text-white group-hover:text-white">
                             Based on a Dockerfile
                         </div>
-                        <div class="text-xs group-hover:text-white">
+                        <div class="description">
                             You can deploy a simple Dockerfile, without Git.
                         </div>
                     </div>
@@ -66,7 +66,7 @@
                         <div class="font-bold text-white group-hover:text-white">
                             Based on a Docker Compose
                         </div>
-                        <div class="text-xs group-hover:text-white">
+                        <div class="description">
                             You can deploy complex application easily with Docker Compose.
                         </div>
                     </div>
@@ -76,7 +76,7 @@
                         <div class="font-bold text-white group-hover:text-white">
                             Based on an existing Docker Image
                         </div>
-                        <div class="text-xs group-hover:text-white">
+                        <div class="description">
                             You can deploy an existing Docker Image form any Registry.
                         </div>
                     </div>
@@ -89,7 +89,7 @@
                         <div class="font-bold text-white group-hover:text-white">
                             New PostgreSQL
                         </div>
-                        <div class="text-xs group-hover:text-white">
+                        <div class="description">
                             The most loved relational database in the world.
                         </div>
                     </div>
@@ -99,16 +99,17 @@
                         <div class="font-bold text-white group-hover:text-white">
                             New Redis
                         </div>
-                        <div class="text-xs group-hover:text-white">
+                        <div class="description">
                             The open source, in-memory data store for cache, streaming engine, and message broker.
                         </div>
                     </div>
-                </div> <div class="box group" wire:click="setType('mongodb')">
+                </div>
+                <div class="box group" wire:click="setType('mongodb')">
                     <div class="flex flex-col mx-6">
                         <div class="font-bold text-white group-hover:text-white">
                             New MongoDB
                         </div>
-                        <div class="text-xs group-hover:text-white">
+                        <div class="description">
                             MongoDB is a source-available cross-platform document-oriented database program.
                         </div>
                     </div>
@@ -134,10 +135,9 @@
                 @else
                     @foreach ($services as $serviceName => $service)
                         @if (data_get($service, 'disabled'))
-                            <button class="text-left bg-black cursor-not-allowed bg-coolgray-200/20 box-without-bg"
-                                disabled>
+                            <button class="text-left cursor-not-allowed bg-coolgray-200/20 box-without-bg" disabled>
                                 <div class="flex flex-col mx-6">
-                                    <div class="font-bold text-coolgray-500">
+                                    <div class="font-bold">
                                         {{ Str::headline($serviceName) }}
                                     </div>
                                     You need to upgrade to {{ data_get($service, 'minVersion') }} to use this service.
@@ -146,12 +146,12 @@
                         @else
                             <button class="text-left box group" wire:loading.attr="disabled"
                                 wire:click="setType('one-click-service-{{ $serviceName }}')">
-                                <div class="flex flex-col mx-6">
+                                <div class="flex flex-col mx-2">
                                     <div class="font-bold text-white group-hover:text-white">
                                         {{ Str::headline($serviceName) }}
                                     </div>
                                     @if (data_get($service, 'slogan'))
-                                        <div class="text-xs">
+                                        <div class="description">
                                             {{ data_get($service, 'slogan') }}
                                         </div>
                                     @endif
diff --git a/resources/views/livewire/server/all.blade.php b/resources/views/livewire/server/all.blade.php
index 8195eb2af..e87ad3975 100644
--- a/resources/views/livewire/server/all.blade.php
+++ b/resources/views/livewire/server/all.blade.php
@@ -18,7 +18,7 @@
                     <div class="font-bold text-white">
                         {{ $server->name }}
                     </div>
-                    <div class="text-xs group-hover:text-white">
+                    <div class="description">
                         {{ $server->description }}</div>
                     <div class="flex gap-1 text-xs text-error">
                         @if (!$server->settings->is_reachable)
diff --git a/resources/views/project/resources.blade.php b/resources/views/project/resources.blade.php
index d268954c6..775e95588 100644
--- a/resources/views/project/resources.blade.php
+++ b/resources/views/project/resources.blade.php
@@ -42,8 +42,7 @@ class="items-center justify-center box">+ Add New Resource</a>
                 href="{{ route('project.application.configuration', [$project->uuid, $environment->name, $application->uuid]) }}">
                 <div class="flex flex-col mx-6">
                     <div class="font-bold text-white">{{ $application->name }}</div>
-                    <div class="text-xs text-gray-400 group-hover:text-white">{{ $application->description }}</div>
-
+                    <div class="description">{{ $application->description }}</div>
                 </div>
                 @if (Str::of(data_get($application, 'status'))->startsWith('running'))
                     <div class="absolute bg-success -top-1 -left-1 badge badge-xs"></div>
@@ -59,7 +58,7 @@ class="items-center justify-center box">+ Add New Resource</a>
                 href="{{ route('project.database.configuration', [$project->uuid, $environment->name, $database->uuid]) }}">
                 <div class="flex flex-col mx-6">
                     <div class="font-bold text-white">{{ $database->name }}</div>
-                    <div class="text-xs text-gray-400 group-hover:text-white">{{ $database->description }}</div>
+                    <div class="description">{{ $database->description }}</div>
                 </div>
                 @if (Str::of(data_get($database, 'status'))->startsWith('running'))
                     <div class="absolute bg-success -top-1 -left-1 badge badge-xs"></div>
@@ -75,7 +74,7 @@ class="items-center justify-center box">+ Add New Resource</a>
                 href="{{ route('project.service', [$project->uuid, $environment->name, $service->uuid]) }}">
                 <div class="flex flex-col mx-6">
                     <div class="font-bold text-white">{{ $service->name }}</div>
-                    <div class="text-xs text-gray-400 group-hover:text-white">{{ $service->description }}</div>
+                    <div class="description">{{ $service->description }}</div>
                 </div>
                 @if (Str::of(serviceStatus($service))->startsWith('running'))
                     <div class="absolute bg-success -top-1 -left-1 badge badge-xs"></div>
diff --git a/resources/views/project/show.blade.php b/resources/views/project/show.blade.php
index bfda9146f..a54bccb2c 100644
--- a/resources/views/project/show.blade.php
+++ b/resources/views/project/show.blade.php
@@ -10,7 +10,7 @@
     <div class="text-xs truncate subtitle lg:text-sm">{{ $project->name }}</div>
     <div class="grid gap-2 lg:grid-cols-2">
         @forelse ($project->environments as $environment)
-            <a class="justify-center box" href="{{ route('project.resources', [$project->uuid, $environment->name]) }}">
+            <a class="items-center justify-center box description" href="{{ route('project.resources', [$project->uuid, $environment->name]) }}">
                 {{ $environment->name }}
             </a>
         @empty
diff --git a/resources/views/projects.blade.php b/resources/views/projects.blade.php
index 6de72d451..6ae387bb0 100644
--- a/resources/views/projects.blade.php
+++ b/resources/views/projects.blade.php
@@ -20,20 +20,22 @@
                     <a class="flex flex-col flex-1 mx-6 hover:no-underline"
                         href="{{ route('project.show', ['project_uuid' => data_get($project, 'uuid')]) }}">
                         <div class="font-bold text-white">{{ $project->name }}</div>
-                        <div class="text-xs group-hover:text-white hover:no-underline">
+                        <div class="description ">
                             {{ $project->description }}</div>
                     </a>
-                    <a class="mx-4 rounded group-hover:text-white"
-                        href="{{ route('project.edit', ['project_uuid' => data_get($project, 'uuid')]) }}">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="icon hover:text-warning" viewBox="0 0 24 24"
-                            stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
-                            stroke-linejoin="round">
-                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                            <path
-                                d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" />
-                            <path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" />
-                        </svg>
-                    </a>
+                    <div class="flex items-center">
+                        <a class="mx-4 rounded group-hover:text-white"
+                            href="{{ route('project.edit', ['project_uuid' => data_get($project, 'uuid')]) }}">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="icon hover:text-warning" viewBox="0 0 24 24"
+                                stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
+                                stroke-linejoin="round">
+                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                                <path
+                                    d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" />
+                                <path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" />
+                            </svg>
+                        </a>
+                    </div>
                 </div>
             @empty
                 <div>
diff --git a/templates/compose/babybuddy.yaml b/templates/compose/babybuddy.yaml
index 10b7eed38..e73f01c08 100644
--- a/templates/compose/babybuddy.yaml
+++ b/templates/compose/babybuddy.yaml
@@ -1,5 +1,5 @@
 # documentation: https://docs.baby-buddy.net
-# slogan: Baby Buddy is an open-source web application that helps parents track their baby's daily activities, growth, and health with ease. It's a handy tool for new parents to keep a close eye on their little one's development.
+# slogan: Baby Buddy is an open-source web application that helps parents track their baby's daily activities, growth, and health with ease.
 
 services:
   babybuddy:
diff --git a/templates/service-templates.json b/templates/service-templates.json
index 4a7b4e834..7d3136784 100644
--- a/templates/service-templates.json
+++ b/templates/service-templates.json
@@ -12,7 +12,7 @@
     },
     "babybuddy": {
         "documentation": "https:\/\/docs.baby-buddy.net",
-        "slogan": "Baby Buddy is an open-source web application that helps parents track their baby's daily activities, growth, and health with ease. It's a handy tool for new parents to keep a close eye on their little one's development.",
+        "slogan": "Baby Buddy is an open-source web application that helps parents track their baby's daily activities, growth, and health with ease.",
         "compose": "c2VydmljZXM6CiAgYmFieWJ1ZGR5OgogICAgaW1hZ2U6ICdsc2NyLmlvL2xpbnV4c2VydmVyL2JhYnlidWRkeTpsYXRlc3QnCiAgICBlbnZpcm9ubWVudDoKICAgICAgLSBTRVJWSUNFX0ZRRE5fQkFCWUJVRERZCiAgICAgIC0gUFVJRD0xMDAwCiAgICAgIC0gUEdJRD0xMDAwCiAgICAgIC0gVFo9RXVyb3BlL01hZHJpZAogICAgICAtIENTUkZfVFJVU1RFRF9PUklHSU5TPSRTRVJWSUNFX0ZRRE5fQkFCWUJVRERZCiAgICB2b2x1bWVzOgogICAgICAtICdiYWJ5YnVkZHktY29uZmlnOi9jb25maWcnCiAgICBoZWFsdGhjaGVjazoKICAgICAgdGVzdDoKICAgICAgICAtIENNRAogICAgICAgIC0gY3VybAogICAgICAgIC0gJy1mJwogICAgICAgIC0gJ2h0dHA6Ly9sb2NhbGhvc3Q6ODAwMCcKICAgICAgaW50ZXJ2YWw6IDJzCiAgICAgIHRpbWVvdXQ6IDEwcwogICAgICByZXRyaWVzOiAxNQo="
     },
     "code-server": {