Improve create search alert button

TelosLabs · Oct 25, 2024 · 71f5bcc · 71f5bcc
1 parent 4693ba3
commit 71f5bcc
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 14 deletions.
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -21,7 +21,6 @@
 @import "helpers/stars_background";
 @import "../../components/accordion/component";
 @import "../../components/navbar/component";
-@import "../../components/causes_list/component";
 @import "../../../node_modules/@yaireo/tagify/dist/tagify";
 @import "../../../node_modules/swiper/swiper-bundle";
 
@@ -187,4 +186,9 @@ input.admin-panel-population:disabled + label {
     height: 100%;
     object-fit: cover;
   }
+}
+
+// Popover
+.labelled-icon:hover + span[role=tooltip] {
+  display: inline;
 }
diff --git a/app/components/causes_list/component.js b/app/components/causes_list/component.js
diff --git a/app/components/causes_list/component.scss b/app/components/causes_list/component.scss
diff --git a/app/components/designation_tag/component.html.erb b/app/components/designation_tag/component.html.erb
@@ -2,18 +2,16 @@
   <%= content_tag(:div, container_setup) do %>
     <% designation_map.each do |designation_name, designation_desc| %>
       <% tooltip_id = SecureRandom.hex(8) %>
-
-      <div class="relative text-xs text-center">
+      <div class="relative text-xs text-center cursor-pointer">
         <%# Pill %>
-        <span class="block labelled-icon w-fit px-2 py-1 border rounded-lg bg-gray-8 text-gray-4" aria-labelledby="<%= tooltip_id %>">
+        <span class="block px-2 py-1 rounded-lg border labelled-icon w-fit bg-gray-8 text-gray-4" aria-labelledby="<%= tooltip_id %>">
           <%= designation_name %>
         </span>
-
         <%# Hover over %>
         <span
         role="tooltip"
         id="<%= tooltip_id %>"
-        class="absolute hidden bottom-full right-1/2 py-1 px-3 mb-2 rounded-lg text-white transform translate-x-1/2 bg-gray-2 bg-opacity-90">
+        class="hidden absolute right-1/2 bottom-full px-3 py-1 mb-2 text-white bg-opacity-90 rounded-lg transform translate-x-1/2 bg-gray-2">
           <%= designation_desc %>
         </span>
       </div>

diff --git a/app/views/searches/show.html.slim b/app/views/searches/show.html.slim
@@ -38,14 +38,18 @@
                       new_alert_path( \
                         filters: parse_filters(@search), \
                         filters_list: list_of_filters(@search)), \
-                      class: "inline-flex items-center px-3 py-2 text-xs text-gray-3", \
+                      class: "inline-flex items-center px-3 py-1 text-xs text-gray-3 cursor-pointer border border-gray-5 hover:bg-gray-5 rounded-full", \
                       data: { turbo_stream: true } ) do
                         = inline_svg_tag "bell.svg", class: 'h-3 w-3 mr-2 fill-current text-gray-2 -ml-0.5'
                         | Create Search Alert
                 - else
-                  div class="inline-flex items-center px-3 py-2 text-xs text-gray-400"
-                    = inline_svg_tag "bell.svg", class: 'h-3 w-3 mr-2 fill-current text-gray-400 -ml-0.5'
-                    | Create Search Alert
+                  - tooltip_id = SecureRandom.hex(8)
+                  div class="relative text-xs text-center"
+                    div class="inline-flex items-center px-3 py-1 text-xs text-gray-400 rounded-full border cursor-pointer border-gray-5 labelled-icon" aria-labelledby=tooltip_id
+                      = inline_svg_tag "bell.svg", class: 'h-3 w-3 mr-2 fill-current text-gray-400 -ml-0.5'
+                      | Create Search Alert
+                    span role="tooltip" id=tooltip_id class="hidden absolute right-24 px-3 py-1 mt-8 w-48 text-white bg-opacity-90 rounded-lg transform translate-x-1/2 bg-gray-2"
+                      | Select search pills to narrow and create a search alert
               div class="overflow-y-auto w-full h-full md:flex md:flex-col" data-tabs-target="panel"
                 - if @results.present?
                   ul class="flex flex-col divide-y divide-gray-8" id="search-results"