From b1c49cc76ef94ccb72cbe3c9f689ce854affa84c Mon Sep 17 00:00:00 2001
From: Sergiotarxz <sergiotarxz@posteo.net>
Date: Wed, 8 Jan 2025 16:58:00 +0100
Subject: [PATCH] Making the search tooltip more trustable adding an X button
 to exit it.

Really the entire tooltip fullfils that purpose, but
the nature of internet has made people wary of everything
so they wouldn't click the tooltip to dismiss it.
---
 public/css/styles.css              | 6 ++++++
 public/css/styles.scss             | 7 +++++++
 templates/page/_search_bar.html.ep | 1 +
 3 files changed, 14 insertions(+)

diff --git a/public/css/styles.css b/public/css/styles.css
index a6b9fed..a848a6b 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -80,6 +80,12 @@ div.tooltip-search-promo {
   bottom: 115%;
   transform: translateX(-50%);
   opacity: 80%; }
+  div.tooltip-search-promo p.exit {
+    display: block;
+    position: absolute;
+    top: calc(0% - 5px);
+    left: calc(100% - 15px);
+    transform: translatex(-50%); }
 
 div.open-browser-container {
   display: flex;
diff --git a/public/css/styles.scss b/public/css/styles.scss
index 40f8343..4576897 100644
--- a/public/css/styles.scss
+++ b/public/css/styles.scss
@@ -107,6 +107,13 @@ div.tooltip-search-promo {
   bottom: 115%;
   transform: translateX(-50%);
   opacity: 80%;
+  p.exit {
+    display: block;
+    position: absolute;
+    top: calc(0% - 5px);
+    left: calc(100% - 15px);
+    transform: translatex(-50%);
+  }
 }
 
 div.open-browser-container {
diff --git a/templates/page/_search_bar.html.ep b/templates/page/_search_bar.html.ep
index 6845df4..f5f35ec 100644
--- a/templates/page/_search_bar.html.ep
+++ b/templates/page/_search_bar.html.ep
@@ -6,6 +6,7 @@
     <div class="fake-text-box">
         <input type="text" value="<%=$search_term%>"></input>
         <div class="tooltip-search-promo">
+            <p class="exit">x</p>
             <p>Puedes buscar cualquier producto que quieras comprar en internet aquí.</p>
         </div>
     </div>