Add popover to checkmark in all views

app/components/discover_nonprofit_card/head/component.html.slim

@@ -3,12 +3,11 @@ div class="flex gap-x-5"
     = image_tag @location.organization.logo, class: "w-20 h-20 object-contain", alt: "logo"
   div class="flex flex-col"
     // name and verified icon
-    div class="flex justify-between items-start mb-1.5"
-      h4 class="w-fit font-semibold text-lg leading-6 text-gray-2"
+    div class="flex items-center mb-1.5"
+      h4 class="text-lg font-semibold leading-6 w-fit text-gray-2"
         = link_to(@location.name, location_path(@location), target: "_blank")
       - if @location.organization.verified?
-        span aria-hidden="true" class="ml-1"
-          = inline_svg_tag('verified_nonprofit_check.svg')
+        = render partial: "locations/verified_checkmark", locals: { position: "right-0" }
     // maps and phone
     - if @location.public_address?
       = link_to(@location.formatted_address, @location.link_to_google_maps, class: "w-3/4", target: "_blank")

app/components/location_infowindow/component.html.slim

@@ -7,11 +7,11 @@ div
   = image_tag @location.organization.logo, class: "w-3/5 h-3/5 m-auto"
 
 // Name
-div
+div class="flex items-center gap-1"
   a id="pointer"
     = link_to @location.name, location_path(@location), target:"_blank", class: "text-small font-bold text-gray-2"
   - if @location.organization.verified?
-    = inline_svg_tag 'verified_nonprofit_check.svg', class: "w-4 h-4 ml-1 align-text-bottom inline"
+  = render partial: "locations/verified_checkmark", locals: { position: "right-0" }
 
 // Address, website, phone, and availability
 - if @location.public_address?

app/components/map_left_popup/component.html.slim

@@ -1,14 +1,14 @@
-div class="relative flex flex-col gap-2 p-7 bg-white rounded-6px" id="loc_#{@result.id}_popup" data-places-target="popup"
+div class="relative flex flex-col gap-2 bg-white p-7 rounded-6px" id="loc_#{@result.id}_popup" data-places-target="popup"
   div class="flex items-start gap-1 mb-3"
     = image_tag @result.organization.logo, class: "flex-shrink-0 w-1/5 h-1/5 mt-1"
     div class="flex flex-col ml-2"
-      div
+      div class="flex items-center"
         = link_to location_path(@result), class: "font-semibold text-sm lg:text-base cursor-pointer", target: "_blank" do
           = @result.organization.name
         - if @result.organization.verified?
-          = inline_svg_tag 'verified_nonprofit_check.svg', class: 'w-4 h-4 ml-1 align-text-bottom inline'
+          = render partial: "locations/verified_checkmark", locals: { position: "right-0" }
       - if @result.public_address?
-        p class="text-gray-500 lg:text-sm text-xs" id="pointer"
+        p class="text-xs text-gray-500 lg:text-sm" id="pointer"
           = link_to @result.formatted_address, @result.link_to_google_maps, target: "blank"
       // Designations
       = render DesignationTag::Component.new(@result.organization)
@@ -23,9 +23,9 @@ div class="relative flex flex-col gap-2 p-7 bg-white rounded-6px" id="loc_#{@res
   div class="pt-4 mb-4 border-t border-gray-8"
     = render DiscoverNonprofitCard::ActionsMenu::Component.new(user: @current_user, location: @result)
 
-  div class="text-left pt-4 border-t border-gray-8"
+  div class="pt-4 text-left border-t border-gray-8"
     - unless @result.causes.empty?
-      h3 class="uppercase text-sm font-bold" causes
+      h3 class="text-sm font-bold uppercase" causes
       = render CausesList::Component.new( \
         causes: @result.organization.causes.uniq, \
         tooltip: true, \
@@ -37,12 +37,12 @@ div class="relative flex flex-col gap-2 p-7 bg-white rounded-6px" id="loc_#{@res
     div class="pt-4 border-t border-gray-8"
       = render WorkingHours::Component.new(result: @result)
     - if @result.images.attached?
-      div class="pt-4 border-t border-gray-8 mt-4"
+      div class="pt-4 mt-4 border-t border-gray-8"
         h3 class="text-sm font-bold text-black uppercase" photos
         = render DiscoverNonprofitCard::ImagesCarousel::Component.new(images: @result.images, \
                                                               carousel_container_options: { class: "rounded-sm h-44 mt-4" })
     - if @result.organization.mission_statement_en.present?
-      div class="border-t border-gray-8 my-4"
+      div class="my-4 border-t border-gray-8"
       div class="flex flex-col text-left"
         h3 class="text-sm font-bold text-black uppercase"
           | MISSION - WHAT WE DO

app/components/result_card/component.html.erb

@@ -8,17 +8,17 @@
     <div class="w-full">
       <div class="flex flex-row items-start justify-between">
         <%# Org name %>
-        <div>
+        <div class="flex items-center">
           <%= helpers.title_link(@turbo_frame, @id, @title) %>
           <% if @verified %>
-            <%= inline_svg_tag 'verified_nonprofit_check.svg', class: 'w-4 h-4 ml-1 align-text-bottom inline' %>
+            <%= render partial: "locations/verified_checkmark" %>
           <% end %>
         </div>
 
         <%= render SaveButton::Component.new(user: @current_user, location: Location.find(@id), simplified: true) %>
       </div>
 
-      <div class="text-xs text-gray-4 pb-0">
+      <div class="pb-0 text-xs text-gray-4">
         <% if @public_address %>
           <p id="pointer"><%= link_to @address, @link_to_google_maps, target: "blank" %></p>
         <% end %>
@@ -43,10 +43,10 @@
       <%= formated_description %>
     </p>
   </div>
-  <div class="flex justify-between items-center">
+  <div class="flex items-center justify-between">
     <% unless @causes.empty? %>
       <section>
-        <h2 class="mb-2 text-xs uppercase font-bold font-sans">Causes</h2>
+        <h2 class="mb-2 font-sans text-xs font-bold uppercase">Causes</h2>
         <%= render CausesList::Component.new( \
             causes: @causes, \
             tooltip: true, \

app/views/locations/_verified_checkmark.html.slim

@@ -0,0 +1,7 @@
+div data-controller="popover"
+  span data-action="mouseenter->popover#show mouseleave->popover#hide" data-popover-target="popover"
+    = inline_svg_tag 'verified_nonprofit_check.svg', class: "h-4 ml-1"
+  template data-popover-target="content"
+    div data-popover-target="card" class="absolute #{local_assigns[:position].presence || "" } z-10 px-3 py-1 mx-1 text-xs text-center text-white rounded-sm bg-gray-2 bg-opacity-90"
+      p
+        = "Information verified by nonprofit." 

app/views/locations/show.html.slim

@@ -14,13 +14,7 @@ div class=""
             div class="flex justify-center items-center mb-2.5"
               h5 class="mb-1 text-lg font-bold text-center"
                 = @location.name
-              div data-controller="popover"
-                span data-action="mouseenter->popover#show mouseleave->popover#hide" data-popover-target="popover"
-                  = inline_svg_tag 'verified_nonprofit_check.svg', class: "w-4 h-4 ml-1"
-                template data-popover-target="content"
-                  div data-popover-target="card" class="absolute px-3 py-1 mx-1 text-xs text-center text-white rounded-sm bg-gray-2 bg-opacity-90"
-                    p
-                      = "Information verified by nonprofit."
+              = render partial: "locations/verified_checkmark"
             p class="text-xs text-center font-base text-gray-4"
               = "This nonprofit has verified the listed information."
           - else
@@ -139,7 +133,7 @@ div class=""
                     a class="font-bold text-small text-gray-2"
                       | #{@location.organization.name}
                     - if @location.organization.verified?
-                      = inline_svg_tag 'verified_nonprofit_check.svg', class: "align-text-bottom inline w-4 h-4 ml-1"
+                      = render partial: "locations/verified_checkmark", locals: { position: "right-0" }
                   p class="text-xs text-gray-4"
                     | #{@location.address}
                   p class="text-xs text-gray-4"

app/views/my_accounts/show.html.slim

@@ -120,7 +120,7 @@ div class="w-full h-full bg-white"
                       span class="flex items-center text-base font-medium text-grey-2"
                         | #{organization.name}
                         - if organization.verified?
-                          = inline_svg_tag 'verified_nonprofit_check.svg', class: "w-4 h-4 ml-1 mt-1"
+                          = render partial: "locations/verified_checkmark"
                       = link_to "Edit", edit_organization_path(organization), class:"text-blue-medium"
 
             - else