Feature/UI animations (#621)

* Add animations to buttons and links

* Improve create search alert button

* Add hover effects

* Add tooltip in save button hover

* Add hover effect on buttons

* Fix pagy btns not entirely clickable

* Make how it works section elements fade in

* Update opening hours save btn

* Make search tabs underline on hover

* Update rexml

* Adjust test to handle daylight saving changes

* Fix time converter test (temp)

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,33 @@ input.admin-panel-population:disabled + label {
     height: 100%;
     object-fit: cover;
   }
+}
+
+// Popover
+.labelled-icon:hover + span[role=tooltip] {
+  display: inline;
+}
+
+// Underline on hover
+
+.underline-on-hover {
+  position: relative;
+  padding: 0;
+  cursor: pointer;
+
+  &::before {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 0;
+    height: 4px;
+    background-color: #0782D0;
+    transition: width 0.3s ease-in-out;
+  }
+
+  &:hover::before {
+    width: 100%;
+  }
+
 }

app/assets/stylesheets/design_system/component/_button.scss

@@ -25,10 +25,6 @@
     font-size: 22px;
     line-height: 26px;
     letter-spacing: 1.1px;
-    transition: background-color 0.3s ease;
-    &:hover {
-      background-color: white;
-    }
   }
 
   &--my_account {
@@ -38,4 +34,3 @@
     }
   }
 }
-

app/assets/stylesheets/helpers/_hover_pointer.scss

@@ -1,4 +1,6 @@
-#pointer:hover {
-	cursor: pointer;
-	transform: scale(1.08);
+.pop-out {
+  &:hover {
+    cursor: pointer;
+    transform: scale(1.08);
+  }
 }

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>

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

@@ -1,12 +1,12 @@
 nav class="flex justify-between"
   // GC profile link
-  = link_to location_path(@location), class: "relative grid place-items-center pb-4 text-blue-medium", target: "_blank" do
+  = link_to location_path(@location), class: "pop-out  relative grid place-items-center pb-4 text-blue-medium", target: "_blank" do
     = render CauseIcon::Component.new(svg_name: "non_profit_cards/redirect.svg", \
                                           wrapper_options: {class: "icon w-10 h-10 border border-blue-medium"}, \
                                           svg_options: {class: "w-1/2", aria_hidden: true})
     span class="#{action_button_styles[:copy]}" View Page
   // Save
-  = render SaveButton::Component.new(user: @user, location: @location)
+  = render SaveButton::Component.new(user: @user, location: @location, tooltip_position: "top-10")
 
   // Share
   button type="button" class="#{action_button_styles[:button]}" data-controller="copy-to-clipboard" data-action="click->copy-to-clipboard#copyContent" data-copy-to-clipboard-content-param="#{location_url(@location)}"

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

@@ -10,7 +10,7 @@ div class="flex gap-x-5"
         = render partial: "shared/popover", locals: { position: "right-0", copy: "Information verified by nonprofit.", wrapper_icon: "verified_nonprofit_check.svg" }
     // maps and phone
     - if @location.public_address?
-      = link_to(@location.formatted_address, @location.link_to_google_maps, class: "w-3/4", target: "_blank")
+      = link_to(@location.formatted_address, @location.link_to_google_maps, class: "pop-out w-3/4", target: "_blank")
     - if @location.phone_number
       a href="tel:#{@location.phone_number.number}" = @location.phone_number.number
     // Designations

app/components/location_infowindow/component.html.slim

@@ -8,14 +8,14 @@ div.flex.items-center.justify-between.w-full
 
 // Name
 div class="flex flex-row gap-1 justify-between items-start"
-  a id="pointer"
+  a class="pop-out"
     = link_to @location.name, location_path(@location), target:"_blank", class: "text-small font-bold text-gray-2"
     - if @location.organization.verified?
       = render partial: "shared/popover", locals: {position: "right-0", copy: "Information verified by nonprofit.", wrapper_icon: "verified_nonprofit_check.svg"}
 
 // Address, website, phone, and availability
 - if @location.public_address?
-  p class="text-xs text-gray-4" id="pointer"
+  p class="text-xs text-gray-4" class="pop-out"
     = link_to @location.formatted_address, @location.link_to_google_maps, target: "blank"
 
 p class="text-xs text-blue-medium"

app/components/map_left_popup/component.html.slim

@@ -8,7 +8,7 @@ div class="flex relative flex-col gap-2 p-7 bg-white rounded-6px" id="loc_#{@res
         - if @result.organization.verified?
           = render partial: "shared/popover", locals: { position: "right-0", copy: "Information verified by nonprofit.", wrapper_icon: "verified_nonprofit_check.svg" }
       - if @result.public_address?
-        p class="text-xs text-gray-500 lg:text-sm" id="pointer"
+        p class="text-xs text-gray-500 lg:text-sm" class="pop-out"
           = link_to @result.formatted_address, @result.link_to_google_maps, target: "blank"
       // Designations
       = render DesignationTag::Component.new(@result.organization)

app/components/navbar/component.html.slim

@@ -42,7 +42,7 @@ nav id="main-navbar" data-controller="navbar--component" class="#{non_sticky_pat
       - if @signed_in
         li = link_to "My Account", my_account_path, class:"navbar__option text-lg font-bold mr-1 lg:mr-6 border-b-2 border-transparent md:text-base #{request.env['PATH_INFO'] == "/my_account" ? "text-seafoam border-seafoam navbar__option--selected" : ""}"
       - else
-        li = link_to "Sign in", signin_path, class:'navbar__option text-lg font-bold mr-2 mid:mr-4 lg:mr-6'
+        li.pop-out = link_to "Sign in", signin_path, class:'navbar__option text-lg font-bold mr-2 mid:mr-4 lg:mr-6 pop-out'
         li = link_to "Create Account", signup_path, class:'c-button c-button--my_account py-2.5 px-5 text-white bg-blue-medium'
       li class="inline-block flex relative items-center mx-2 w-28 font-medium cursor-pointer lg:w-36" data-controller="dropdown" data-action="click@window->dropdown#hide touchstart@window->dropdown#hide keydown.up->dropdown#previousItem keydown.down->dropdown#nextItem keydown.esc->dropdown#hide" 
         button data-action="dropdown#toggle:stop" class="flex items-center text-xs navbar__option navbar__option--selected md:text-base text-seafoam"

app/components/result_card/component.html.erb

@@ -16,12 +16,12 @@
           <% if @verified %>
             <%= render "shared/popover", copy: "Information verified by nonprofit.", wrapper_icon: "verified_nonprofit_check.svg", position: "right-0" %>
           <% end %>
-          <%= render SaveButton::Component.new(user: @current_user, location: Location.find(@id), simplified: true) %>
+          <%= render SaveButton::Component.new(user: @current_user, location: Location.find(@id), simplified: true, tooltip_position:  "right-0 mt-2") %>
         </div>
       </div>
       <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>
+          <p class="pop-out" ><%= link_to @address, @link_to_google_maps, target: "blank" %></p>
         <% end %>
         <% if @website.present? %>
           <p><%= link_to @website_for_display, @website, target: '_blank', class: 'text-blue-medium'%></p>
@@ -57,7 +57,7 @@
             icon_svg_options: {class: "w-5 h-5", aria_hidden: true}) %>
       </section>
     <% end %>
-    <a href="<%= location_path(@id)%>" class="inline-flex items-center ml-4 text-sm font-bold whitespace-nowrap text-blue-medium", target="_blank">
+    <a href="<%= location_path(@id)%>" class="inline-flex items-center ml-4 text-sm font-bold whitespace-nowrap pop-out text-blue-medium", target="_blank">
       Go to Page
       <%= inline_svg_tag 'solid_arrow_right.svg', class: 'w-4 h-4 ml-2 text-blue-medium fill-current'%>
     </a>

app/components/save_button/component.html.erb

@@ -1,14 +1,17 @@
+<% tooltip_id = SecureRandom.hex(8) %>
 <%= link_to(
-  link_args[:path],
-  method: link_args[:method],
-  class: "#{btn_selector} #{button_styles}",
-  data: { turbo_stream: true }
-) do %>
+      link_args[:path],
+      method: link_args[:method],
+      class: "#{btn_selector} #{button_styles} relative",
+      data: { turbo_stream: true}
+    ) do %>
   <%= render CauseIcon::Component.new(
-    svg_name: icon_name,
-    wrapper_options: { class: wrapper_styles },
-    svg_options: { class: "w-4 h-auto", aria_hidden: true }
-  ) %>
-
+        svg_name: icon_name,
+        wrapper_options: { class: "pop-out labelled-icon #{wrapper_styles}", "aria-labelledby": tooltip_id },
+        svg_options: { class: "w-4 h-auto", aria_hidden: true }
+      ) %>
+  <span role="tooltip" id="<%= tooltip_id %>" class="<%= "hidden absolute z-10 px-2 py-1 w-44 text-xs text-white bg-opacity-90 rounded-lg transform bg-gray-2 #{@tooltip_position}" %>" >
+    Save this nonprofit to you account!
+  </span>
   <span class="<%= copy_styles %>">Save</span>
-<% end %>
+<% end %>

app/components/save_button/component.rb

@@ -1,10 +1,11 @@
 class SaveButton::Component < ApplicationViewComponent
   include ActionButtonHelper
 
-  def initialize(user:, location:, simplified: false)
+  def initialize(user:, location:, simplified: false, tooltip_position: "")
     @user = user
     @location = location
     @simplified = simplified
+    @tooltip_position = tooltip_position
   end
 
   def link_args

app/components/search_bar/component.html.erb

@@ -55,6 +55,6 @@
   <%# Search Button %>
   <%= @form.submit(
     'Search',
-    class: "invisible w-0 p-0 rounded-md text-blue-dark font-bold uppercase bg-seafoam md:py-4 md:px-10 md:w-36 md:visible focus:outline-none"
+    class: "hover:bg-white transition invisible w-0 p-0 rounded-md text-blue-dark font-bold uppercase bg-seafoam md:py-4 md:px-10 md:w-36 md:visible focus:outline-none"
   )%>
 </div>

app/components/search_pills/button/component.html.slim

@@ -1,3 +1,3 @@
 = radio_button_tag(@name, @value, @checked, @options)
-label for=@options[:id] class="flex items-center flex-auto pl-3 py-4 text-xs text-gray-2 border-y border-l-0 border-r border-gray-6 cursor-pointer button-label md:px-3 md:py-2"
+label for=@options[:id] class="flex flex-auto items-center py-4 pl-3 text-xs border-r border-l-0 transition cursor-pointer hover:bg-gray-5 text-gray-2 border-y border-gray-6 button-label md:px-3 md:py-2"
   = @copy

app/components/search_pills/component.html.slim

@@ -1,32 +1,32 @@
 div class="w-full bg-gray-9"
-  div data-controller="tabs" data-tabs-active-tab=("border-b-4 border-blue-medium")
+  div data-controller="tabs" data-tabs-active-tab=("border-b-4 border-blue-medium") data-tabs-inactive-tab="underline-on-hover"
     div class="flex"
       / Clear-Counter button
-      span class="flex items-center justify-center py-3 pl-5 pr-2 text-xs w-14 bg-blue-pale"
-        span class="inline-flex hidden items-center px-1 py-0.5 border border-blue-medium rounded-full bg-white" data-search-target="pillsCounterWrapper"
+      span class="flex justify-center items-center py-3 pr-2 pl-5 w-14 text-xs bg-blue-pale"
+        span class="inline-flex hidden items-center px-1 py-0.5 bg-white rounded-full border border-blue-medium" data-search-target="pillsCounterWrapper"
           span data-search-target="pillsCounter" class="mr-0.5"
           button type="button" data-action="search#clearCheckedFilters"
             = inline_svg_tag "x-icon.svg", class: 'h-2 w-2 fill-current stroke-current stroke-1 text-blue-medium ml-1 relative'
         = inline_svg_tag "solid_filters.svg", class: 'h-4 w-4 fill-current text-gray-2 -ml-0.5 relative', data: { 'search-target': "filtersIcon" }
       / Tabs
-      ul class="flex flex-1 pl-5 pr-6 overflow-x-auto overflow-y-hidden text-sm list-none gap-x-6 bg-blue-pale text-gray-2"
+      ul class="flex overflow-x-auto overflow-y-hidden flex-1 gap-x-6 pr-6 pl-5 text-sm list-none bg-blue-pale text-gray-2"
         - @tabs_labels.each do |tab_label|
           li data-action="click->tabs#change" data-tabs-target="tab"
             a class="inline-block py-3 whitespace-nowrap" href="#" = tab_label
-        li data-action="click->modal#open"
+        li data-action="click->modal#open" class="underline-on-hover"
           button class="inline-block py-3 whitespace-nowrap" type="button" id="advanced-filters-button"
             | Advanced Filters
-            span class="relative hidden w-2 h-2 mb-2 ml-1 rounded-full bg-salmon" id="appliedIcon"
+            span class="hidden relative mb-2 ml-1 w-2 h-2 rounded-full bg-salmon" id="appliedIcon"
 
     / Panels
     div class="bg-white"
       / Causes
-      div class="flex flex-wrap hidden px-6 py-4 overflow-y-auto border-b border-l border-r gap-x-2 gap-y-3 max-h-28" data-tabs-target="panel"
+      div class="flex hidden overflow-y-auto flex-wrap gap-x-2 gap-y-3 px-6 py-4 max-h-28 border-r border-b border-l" data-tabs-target="panel"
         - @causes.each do |cause|
           = render SearchPills::Pill::Component.new(name: "search[causes][]", value: cause.name, checked: @params.dig(:search, :causes)&.include?(cause.name), options: { multiple: true })
         = render SearchPills::MoreFiltersButton::Component.new
       / Location
-      div class="flex flex-col hidden border-b md:flex-row md:items-center" data-tabs-target="panel"
+      div class="flex hidden flex-col border-b md:flex-row md:items-center" data-tabs-target="panel"
         div class="py-4 pl-6 text-sm text-gray-2"
           span class="inline-flex items-center"
             = inline_svg_tag "location-dot.svg", class: "h-3 w-3 fill-current text-blue-medium mr-1"
@@ -36,17 +36,17 @@ div class="w-full bg-gray-9"
           - @radii_in_miles.each do |radius|
             = render SearchPills::Button::Component.new(name: "search[distance]", value: miles_to_km(radius), checked: @params.dig(:search, :distance) == miles_to_km(radius).to_s, copy: radius == "Any" ? radius : "#{radius} mi")
       / Services
-      div class="flex flex-wrap hidden px-6 py-4 overflow-y-auto border-b border-l border-r gap-x-2 gap-y-3 max-h-28" data-tabs-target="panel"
+      div class="flex hidden overflow-y-auto flex-wrap gap-x-2 gap-y-3 px-6 py-4 max-h-28 border-r border-b border-l" data-tabs-target="panel"
         - @services.each do |service|
           = render SearchPills::Pill::Component.new(name: "search[services][#{service.cause.name}][]", value: service.name, checked: @params.dig('search', 'services', service.cause.name)&.include?(service.name), options: { multiple: true })
         = render SearchPills::MoreFiltersButton::Component.new
       / Populations Served
-      div class="flex flex-wrap hidden px-6 py-4 overflow-y-auto border-b border-l border-r gap-x-2 gap-y-3 max-h-28" data-tabs-target="panel"
+      div class="flex hidden overflow-y-auto flex-wrap gap-x-2 gap-y-3 px-6 py-4 max-h-28 border-r border-b border-l" data-tabs-target="panel"
         - @beneficiary_subcategories.each do |subcategory|
           = render SearchPills::Pill::Component.new(name: "search[beneficiary_groups][#{subcategory.beneficiary_group.name}][]", value: subcategory.name, checked: @params.dig('search', 'beneficiary_groups', subcategory.beneficiary_group.name)&.include?(subcategory.name), options: { multiple: true })
         = render SearchPills::MoreFiltersButton::Component.new
       / Hours
-      div class="flex hidden w-full px-6 py-4 border-b border-l border-r gap-x-2" data-tabs-target="panel"
+      div class="flex hidden gap-x-2 px-6 py-4 w-full border-r border-b border-l" data-tabs-target="panel"
         = render SearchPills::Pill::Component.new(name: "search[open_now]", value: true, checked: @params.dig('search', 'open_now') == 'true') do
           | Open Now
         = render SearchPills::Pill::Component.new(name: "search[open_weekends]", value: true, checked: @params.dig('search', 'open_weekends') == 'true') do

app/components/search_pills/more_filters_button/component.html.slim

@@ -1,2 +1,2 @@
-button type="button" class="flex gap-x-1 items-center px-2 py-1.5 border border-gray-6 rounded-full text-gray-2 text-xs whitespace-nowrap" data-action="click->modal#open"
+button type="button" class="flex gap-x-1 items-center px-2 py-1.5 text-xs whitespace-nowrap rounded-full border transition hover:bg-gray-5 border-gray-6 text-gray-2" data-action="click->modal#open"
   | Show More

app/components/search_pills/pill/component.html.slim

@@ -1,3 +1,3 @@
 = check_box_tag(@name, @value, @checked, @options)
-label for=@options[:id] class="px-2 py-1.5 border border-gray-6 rounded-full text-gray-2 text-xs whitespace-nowrap cursor-pointer"
+label for=@options[:id] class="px-2 py-1.5 text-xs whitespace-nowrap rounded-full border transition cursor-pointer hover:bg-gray-5 border-gray-6 text-gray-2"
   = content ? content : @value