From 0085570206a598a19c6bdfc307bc97f4a691fc2e Mon Sep 17 00:00:00 2001
From: pluja <codeberg@r3d.red>
Date: Thu, 9 Jan 2025 17:49:19 +0100
Subject: [PATCH] style fixes

---
 .../templates/partials/service_card.templ     | 58 +++++++++----------
 1 file changed, 27 insertions(+), 31 deletions(-)

diff --git a/src/frontend/templates/partials/service_card.templ b/src/frontend/templates/partials/service_card.templ
index 650ed0b..9ecf76f 100644
--- a/src/frontend/templates/partials/service_card.templ
+++ b/src/frontend/templates/partials/service_card.templ
@@ -25,39 +25,35 @@ func getScoreColor(s int) string {
 }
 
 templ ServiceCard(service *ent.Service) {
-	<a href={ templ.SafeURL(fmt.Sprintf("/service/%s", service.Slug)) } class="block w-full max-w-md">
-		<div
-			class="flex flex-col justify-between p-4 bg-gray-700 bg-opacity-30 rounded-lg border border-transparent shadow-lg backdrop-blur-md transition duration-500 hover:border-lime-600/70"
-		>
-			<div class="flex items-center">
-				<img src={ "/static/images/" + service.Slug + ".jpg" } alt={ service.Name + " logo" } class="mr-4 w-12 h-12 rounded-full bg-white/10"/>
-				<div class="flex flex-col justify-center items-center text-lg font-bold text-white md:text-xl">
-					<span class="flex items-center pb-1 w-full text-base font-bold">
-						if service.Verified {
-							<i class="icon-[tabler--rosette-discount-check-filled] inline text-xl text-blue-400/80"></i>
-						}
-						<span class="flex-1 text-sm whitespace-nowrap sm:text-base ms-2">{ service.Name }</span>
-						if !service.Pending {
-							<span class={ "inline-flex justify-center items-center px-2 py-0.5 text-xs font-medium rounded ms-3 text-white/70 " + getScoreColor(service.Score) }>{ fmt.Sprintf("%d", service.Score) }</span>
-						} else {
-							<span class={ "inline-flex justify-center items-center px-2 py-0.5 text-xs font-medium rounded ms-3 text-white/70 bg-gray-900 border-gray-800" }>PENDING</span>
-						}
-					</span>
-					<span class="px-1 mt-1.5 text-xs font-normal text-opacity-60 overflow-ellipsis text-white/60 line-clamp-2">
-						{ service.Description }
-					</span>
-				</div>
-			</div>
-			<div class="flex justify-center items-center mt-4 text-xs">
-				<span class="px-2 py-1 mr-1 text-xs font-bold uppercase rounded border text-white/70 bg-zinc-900 border-zinc-700">
-					if service.Type == "exchange" {
-						EXCHANGE
-					} else {
-						{ service.Category }
+	<a href={ templ.SafeURL(fmt.Sprintf("/service/%s", service.Slug)) } class="flex flex-col gap-4 justify-between p-4 w-full max-w-md bg-gray-700 bg-opacity-30 rounded-lg border border-transparent shadow-lg backdrop-blur-md transition duration-500 hover:border-lime-600/70">
+		<div class="flex items-center">
+			<img src={ "/static/images/" + service.Slug + ".jpg" } alt={ service.Name + " logo" } class="mr-4 w-12 h-12 rounded-full bg-white/10"/>
+			<div class="flex flex-col flex-1 text-lg font-bold text-white md:text-xl">
+				<div class="flex gap-3 items-center w-full text-base font-bold">
+					if service.Verified {
+						<i class="icon-[tabler--rosette-discount-check-filled] inline -me-1 text-xl text-blue-400/80"></i>
 					}
-				</span>
-				@ServiceIcons(service)
+					<span class="overflow-hidden flex-1 w-0 text-sm whitespace-nowrap text-ellipsis sm:text-base">{ service.Name }</span>
+					if !service.Pending {
+						<span class={ "inline-flex justify-center items-center px-2 py-0.5 text-xs font-medium rounded text-white/70 " + getScoreColor(service.Score) }>{ fmt.Sprintf("%d", service.Score) }</span>
+					} else {
+						<span class={ "inline-flex justify-center items-center px-2 py-0.5 text-xs font-medium rounded text-white/70 bg-gray-900 border-gray-800" }>PENDING</span>
+					}
+				</div>
+				<p class="px-1 mt-1.5 text-xs font-normal text-opacity-60 text-white/60 line-clamp-2 text-ellipsis">
+					{ service.Description }
+				</p>
 			</div>
 		</div>
+		<div class="flex justify-center items-center text-xs">
+			<span class="px-2 py-1 mr-1 text-xs font-bold uppercase rounded border text-white/70 bg-zinc-900 border-zinc-700">
+				if service.Type == "exchange" {
+					EXCHANGE
+				} else {
+					{ service.Category }
+				}
+			</span>
+			@ServiceIcons(service)
+		</div>
 	</a>
 }