From ffa6f8f15b5b704b5901f8ff3c7a1f4b01f69d94 Mon Sep 17 00:00:00 2001
From: pluja <codeberg@r3d.red>
Date: Tue, 31 Oct 2023 09:34:00 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20chore(service.html):=20reorganiz?=
 =?UTF-8?q?e=20and=20improve=20layout=20of=20service=20details=20section?=
 =?UTF-8?q?=20=F0=9F=94=A7=20chore(service.html):=20move=20service=20icons?=
 =?UTF-8?q?=20section=20to=20the=20bottom=20for=20better=20visual=20flow?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/web/templates/service.html | 28 +++++++++++++++++++---------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/web/templates/service.html b/src/web/templates/service.html
index 90fbed8..5c7a1e2 100644
--- a/src/web/templates/service.html
+++ b/src/web/templates/service.html
@@ -1,10 +1,20 @@
-<section class="pt-14">
+<section class="mt-12 mb-5">
     <div class="flex items-center justify-center space-x-4">
         <img class="w-16 h-16 rounded-full" src="{{.Service.LogoURL}}" alt="">
-        <h1 class="text-2xl font-bold capitalize-first">{{.Service.Name}}</h1>
+        <span class="flex items-center justify-center capitalize">
+            {{if .Service.Verified}}
+                <span class="text-2xl font-bold">{{.Service.Name}}</span>
+                <a href="/about#verified">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 ml-1 {{if .Service.Verified}}text-blue-400/80{{else}} text-white/20 {{end}} discount-check-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                        <path d="M12.01 2.011a3.2 3.2 0 0 1 2.113 .797l.154 .145l.698 .698a1.2 1.2 0 0 0 .71 .341l.135 .008h1a3.2 3.2 0 0 1 3.195 3.018l.005 .182v1c0 .27 .092 .533 .258 .743l.09 .1l.697 .698a3.2 3.2 0 0 1 .147 4.382l-.145 .154l-.698 .698a1.2 1.2 0 0 0 -.341 .71l-.008 .135v1a3.2 3.2 0 0 1 -3.018 3.195l-.182 .005h-1a1.2 1.2 0 0 0 -.743 .258l-.1 .09l-.698 .697a3.2 3.2 0 0 1 -4.382 .147l-.154 -.145l-.698 -.698a1.2 1.2 0 0 0 -.71 -.341l-.135 -.008h-1a3.2 3.2 0 0 1 -3.195 -3.018l-.005 -.182v-1a1.2 1.2 0 0 0 -.258 -.743l-.09 -.1l-.697 -.698a3.2 3.2 0 0 1 -.147 -4.382l.145 -.154l.698 -.698a1.2 1.2 0 0 0 .341 -.71l.008 -.135v-1l.005 -.182a3.2 3.2 0 0 1 3.013 -3.013l.182 -.005h1a1.2 1.2 0 0 0 .743 -.258l.1 -.09l.698 -.697a3.2 3.2 0 0 1 2.269 -.944zm3.697 7.282a1 1 0 0 0 -1.414 0l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.32 1.497l2 2l.094 .083a1 1 0 0 0 1.32 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z" stroke-width="0" fill="currentColor"></path>
+                    </svg>
+                </a>
+            {{end}}
+        </span>
     </div>
     <!-- Links -->
-    <div class="flex items-center justify-center py-4 mt-2 text-sm md:text-md">
+    <div class="flex items-center justify-center mt-4 text-sm md:text-md">
         <div class="flex items-center justify-center">
             <a href="{{index .Service.Urls 0}}" target="_blank" class="flex items-center justify-center px-2 py-1 m-1 space-x-2 text-center text-white transition duration-300 border rounded bg-zinc-900 border-zinc-700 hover:border-lime-600 hover:text-lime-600">
                 <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 tabler-world-www" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
@@ -69,11 +79,6 @@
         </div>
     </div>
     
-    <!-- Icons -->
-    <div class="flex items-center justify-center text-xs">
-        {{template "components/service_icons" .Service}}
-    </div>
-    
     <!-- Description -->
     <div class="flex items-center justify-center p-4">
         <p class="max-w-lg p-4 text-sm border rounded-lg md:text-base border-white/20 bg-gray-400/10">
@@ -86,8 +91,13 @@
     </div>
 </section>
 
+<!-- Icons -->
+<div class="flex items-center justify-center mb-4 text-xs">
+    {{template "components/service_icons" .Service}}
+</div>
+
 <!-- KYC Level -->
-<section class="flex items-center justify-center px-4">
+<section class="flex items-center justify-center px-4 mb-2">
     {{template "components/kyc_level" .Service.KycLevel}}
 </section>