From 0b19b4b83dd6e65a0c4e581b8873282d76e78c49 Mon Sep 17 00:00:00 2001 From: Alicia Paz Date: Wed, 13 Nov 2024 17:30:20 -0600 Subject: [PATCH] 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/images/blog_box.svg | 2 +- app/assets/images/twitter_box.svg | 2 +- app/assets/images/youtube_box.svg | 4 +- app/assets/stylesheets/application.scss | 30 ++++++++++++- .../design_system/component/_button.scss | 5 --- .../stylesheets/helpers/_hover_pointer.scss | 8 ++-- app/components/causes_list/component.js | 1 - app/components/causes_list/component.scss | 3 -- .../designation_tag/component.html.erb | 8 ++-- .../actions_menu/component.html.slim | 4 +- .../head/component.html.slim | 2 +- .../location_infowindow/component.html.slim | 4 +- .../map_left_popup/component.html.slim | 2 +- app/components/navbar/component.html.slim | 2 +- app/components/result_card/component.html.erb | 6 +-- app/components/save_button/component.html.erb | 25 ++++++----- app/components/save_button/component.rb | 3 +- app/components/search_bar/component.html.erb | 2 +- .../search_pills/button/component.html.slim | 2 +- .../search_pills/component.html.slim | 22 +++++----- .../more_filters_button/component.html.slim | 2 +- .../search_pills/pill/component.html.slim | 2 +- .../social_media/component.html.slim | 12 +++--- app/helpers/action_button_helper.rb | 2 +- .../controllers/fade_in_controller.js | 26 ++++++++++++ app/views/about_us/show.html.slim | 2 +- .../admin_users/passwords/edit.html.slim | 6 +-- app/views/admin_users/passwords/new.html.slim | 6 +-- app/views/admin_users/sessions/new.html.slim | 6 +-- app/views/alerts/_form.html.slim | 2 +- app/views/contact_messages/new.html.slim | 2 +- app/views/donates/show.html.slim | 4 +- app/views/home/index.html.slim | 14 +++---- app/views/locations/show.html.slim | 17 ++++---- app/views/my_accounts/show.html.slim | 4 +- app/views/nonprofit_requests/new.html.slim | 2 +- app/views/organizations/edit.html.slim | 4 +- app/views/pagy/_nav.html.slim | 7 +--- app/views/privacy_policies/show.html.slim | 42 +++++++++---------- app/views/searches/_preview.html.slim | 28 ++++++------- app/views/searches/show.html.slim | 14 ++++--- app/views/users/confirmations/new.html.slim | 8 ++-- app/views/users/passwords/edit.html.slim | 2 +- app/views/users/passwords/new.html.slim | 2 +- app/views/users/registrations/new.html.slim | 2 +- app/views/users/sessions/new.html.slim | 10 ++--- app/views/users/shared/_links.html.slim | 2 +- spec/models/office_hour_spec.rb | 8 +++- spec/services/time_zone_converter_spec.rb | 4 +- tailwind.config.js | 1 + 50 files changed, 218 insertions(+), 162 deletions(-) delete mode 100644 app/components/causes_list/component.js delete mode 100644 app/components/causes_list/component.scss create mode 100644 app/javascript/controllers/fade_in_controller.js diff --git a/app/assets/images/blog_box.svg b/app/assets/images/blog_box.svg index 011523b0b..0165f1060 100644 --- a/app/assets/images/blog_box.svg +++ b/app/assets/images/blog_box.svg @@ -1,5 +1,5 @@ - + diff --git a/app/assets/images/twitter_box.svg b/app/assets/images/twitter_box.svg index 3de4f13a3..c7d175964 100644 --- a/app/assets/images/twitter_box.svg +++ b/app/assets/images/twitter_box.svg @@ -1,5 +1,5 @@ - + diff --git a/app/assets/images/youtube_box.svg b/app/assets/images/youtube_box.svg index c5066a800..786ce4df1 100644 --- a/app/assets/images/youtube_box.svg +++ b/app/assets/images/youtube_box.svg @@ -1,5 +1,5 @@ - + - + diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 186728732..8da6a1a2a 100644 --- 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,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%; + } + } \ No newline at end of file diff --git a/app/assets/stylesheets/design_system/component/_button.scss b/app/assets/stylesheets/design_system/component/_button.scss index 44ecc7c0f..1cc22fdfe 100644 --- a/app/assets/stylesheets/design_system/component/_button.scss +++ b/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 @@ } } } - diff --git a/app/assets/stylesheets/helpers/_hover_pointer.scss b/app/assets/stylesheets/helpers/_hover_pointer.scss index 3dd280b17..b7b6f5163 100644 --- a/app/assets/stylesheets/helpers/_hover_pointer.scss +++ b/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); + } } diff --git a/app/components/causes_list/component.js b/app/components/causes_list/component.js deleted file mode 100644 index 1617c6c11..000000000 --- a/app/components/causes_list/component.js +++ /dev/null @@ -1 +0,0 @@ -import "./component.scss" \ No newline at end of file diff --git a/app/components/causes_list/component.scss b/app/components/causes_list/component.scss deleted file mode 100644 index 87f114989..000000000 --- a/app/components/causes_list/component.scss +++ /dev/null @@ -1,3 +0,0 @@ -.labelled-icon:hover + span[role=tooltip] { - display: inline; -} \ No newline at end of file diff --git a/app/components/designation_tag/component.html.erb b/app/components/designation_tag/component.html.erb index 5d37da85c..17ca09d37 100644 --- 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) %> - -
+
<%# Pill %> - + <%= designation_name %> - <%# Hover over %>
diff --git a/app/components/discover_nonprofit_card/actions_menu/component.html.slim b/app/components/discover_nonprofit_card/actions_menu/component.html.slim index 76cdd06e4..2be551f32 100644 --- a/app/components/discover_nonprofit_card/actions_menu/component.html.slim +++ b/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)}" diff --git a/app/components/discover_nonprofit_card/head/component.html.slim b/app/components/discover_nonprofit_card/head/component.html.slim index a1a952b4b..f62a9548c 100644 --- a/app/components/discover_nonprofit_card/head/component.html.slim +++ b/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 diff --git a/app/components/location_infowindow/component.html.slim b/app/components/location_infowindow/component.html.slim index d1d91d75c..d52675058 100644 --- a/app/components/location_infowindow/component.html.slim +++ b/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" diff --git a/app/components/map_left_popup/component.html.slim b/app/components/map_left_popup/component.html.slim index 7eab1671b..03fe3c681 100644 --- a/app/components/map_left_popup/component.html.slim +++ b/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) diff --git a/app/components/navbar/component.html.slim b/app/components/navbar/component.html.slim index 89dc7f9a9..c18da8001 100644 --- a/app/components/navbar/component.html.slim +++ b/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" diff --git a/app/components/result_card/component.html.erb b/app/components/result_card/component.html.erb index 9dff2e67f..a6deb947e 100644 --- a/app/components/result_card/component.html.erb +++ b/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") %>
<% if @public_address %> -

<%= link_to @address, @link_to_google_maps, target: "blank" %>

+

<%= link_to @address, @link_to_google_maps, target: "blank" %>

<% end %> <% if @website.present? %>

<%= link_to @website_for_display, @website, target: '_blank', class: 'text-blue-medium'%>

@@ -57,7 +57,7 @@ icon_svg_options: {class: "w-5 h-5", aria_hidden: true}) %> <% end %> - + Go to Page <%= inline_svg_tag 'solid_arrow_right.svg', class: 'w-4 h-4 ml-2 text-blue-medium fill-current'%> diff --git a/app/components/save_button/component.html.erb b/app/components/save_button/component.html.erb index 33dbe4be3..e95bc2e46 100644 --- a/app/components/save_button/component.html.erb +++ b/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 } + ) %> + Save -<% end %> +<% end %> \ No newline at end of file diff --git a/app/components/save_button/component.rb b/app/components/save_button/component.rb index 6ca2a5b7b..872486129 100644 --- a/app/components/save_button/component.rb +++ b/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 diff --git a/app/components/search_bar/component.html.erb b/app/components/search_bar/component.html.erb index 2c11f47ea..0dd157f92 100644 --- a/app/components/search_bar/component.html.erb +++ b/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" )%>
diff --git a/app/components/search_pills/button/component.html.slim b/app/components/search_pills/button/component.html.slim index cfd4b5087..cdfbda548 100644 --- a/app/components/search_pills/button/component.html.slim +++ b/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 diff --git a/app/components/search_pills/component.html.slim b/app/components/search_pills/component.html.slim index daa79e0a5..c57175434 100644 --- a/app/components/search_pills/component.html.slim +++ b/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 diff --git a/app/components/search_pills/more_filters_button/component.html.slim b/app/components/search_pills/more_filters_button/component.html.slim index 999e1ab5b..a2666b925 100644 --- a/app/components/search_pills/more_filters_button/component.html.slim +++ b/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 diff --git a/app/components/search_pills/pill/component.html.slim b/app/components/search_pills/pill/component.html.slim index 402d8fdcb..72d9548ee 100644 --- a/app/components/search_pills/pill/component.html.slim +++ b/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 diff --git a/app/components/social_media/component.html.slim b/app/components/social_media/component.html.slim index c18dc4c3d..416fcca5b 100644 --- a/app/components/social_media/component.html.slim +++ b/app/components/social_media/component.html.slim @@ -3,19 +3,19 @@ h3 class="text-sm font-bold uppercase" div class="flex flex-row gap-5 my-6" - if @social_media&.facebook.present? a href=@social_media&.facebook class="text-sm font-base text-gray-2" target="_blank" - = inline_svg_tag 'facebook_box.svg', class: "text-salmon fill-current" + = inline_svg_tag 'facebook_box.svg', class: "hover:text-salmon-medium transition text-salmon fill-current" - if @social_media&.linkedin.present? a href=@social_media&.linkedin class="text-sm font-base text-gray-2" target="_blank" - = inline_svg_tag 'linkedin_box.svg', class: "text-salmon fill-current" + = inline_svg_tag 'linkedin_box.svg', class: "hover:text-salmon-medium transition text-salmon fill-current" - if @social_media&.twitter.present? a href=@social_media&.twitter class="text-sm font-base text-gray-2" target="_blank" - = inline_svg_tag 'twitter_box.svg', class: "text-salmon fill-current" + = inline_svg_tag 'twitter_box.svg', class: "hover:text-salmon-medium transition text-salmon fill-current" - if @social_media&.instagram.present? a href=@social_media&.instagram class="text-sm font-base text-gray-2" target="_blank" - = inline_svg_tag 'instagram_box.svg', class: "text-salmon fill-current" + = inline_svg_tag 'instagram_box.svg', class: "hover:text-salmon-medium transition text-salmon fill-current" - if @social_media&.youtube.present? a href=@social_media&.youtube class="text-sm font-base text-gray-2" target="_blank" - = inline_svg_tag 'youtube_box.svg', class: "text-salmon fill-current" + = inline_svg_tag 'youtube_box.svg', class: "hover:text-salmon-medium transition text-salmon fill-current" - if @social_media&.blog.present? a href=@social_media&.blog class="text-sm font-base text-gray-2" target="_blank" - = inline_svg_tag 'blog_box.svg', class: "text-salmon fill-current" + = inline_svg_tag 'blog_box.svg', class: "hover:text-salmon-medium transition text-salmon fill-current" diff --git a/app/helpers/action_button_helper.rb b/app/helpers/action_button_helper.rb index 0bcfe44ee..1e6f80df9 100644 --- a/app/helpers/action_button_helper.rb +++ b/app/helpers/action_button_helper.rb @@ -2,7 +2,7 @@ module ActionButtonHelper def action_button_styles { button: "relative grid place-items-center pb-4 transition-colors", - icon_wrapper: "icon w-10 h-10 border border-gray-2", + icon_wrapper: "icon w-10 h-10 border border-gray-2 hover:bg-gray-5 transition", copy: "absolute bottom-0 right-1/2 w-max text-xs transform translate-x-1/2" } end diff --git a/app/javascript/controllers/fade_in_controller.js b/app/javascript/controllers/fade_in_controller.js new file mode 100644 index 000000000..d8b11edaf --- /dev/null +++ b/app/javascript/controllers/fade_in_controller.js @@ -0,0 +1,26 @@ +import { Controller } from "@hotwired/stimulus" + +export default class extends Controller { + static targets = ["fadeInElement"]; + + connect() { + this.observer = new IntersectionObserver(this.handleIntersect.bind(this), { + threshold: 0.1 + }); + + this.fadeInElementTargets.forEach(element => { + this.observer.observe(element); + }); + } + + handleIntersect(entries) { + entries.forEach(entry => { + if (entry.isIntersecting) { + const delay = entry.target.dataset.delay || 0; // Default to 0 if no delay is specified + entry.target.style.transitionDelay = `${delay}ms`; + entry.target.classList.add('opacity-100', 'transition-opacity', 'duration-1000'); + this.observer.unobserve(entry.target); + } + }); + } +} \ No newline at end of file diff --git a/app/views/about_us/show.html.slim b/app/views/about_us/show.html.slim index 7cebf110a..ade62288f 100644 --- a/app/views/about_us/show.html.slim +++ b/app/views/about_us/show.html.slim @@ -474,4 +474,4 @@ div class="flex flex-col text-gray-2" div class="absolute top-0 right-0 left-0 mx-auto max-w-md text-center" h2 class="px-5 pt-20 pb-11 text-2xl font-bold text-center sm:px-0 md:pt-28 text-blue-dark" | Want to connect with nonprofits in your community? - = link_to "START YOUR SEARCH", search_path, class:'c-button inline-block my-1 text-white bg-blue-dark' + = link_to "START YOUR SEARCH", search_path, class:'c-button inline-block my-1 text-white bg-blue-dark hover:bg-blue-medium transition' diff --git a/app/views/admin_users/passwords/edit.html.slim b/app/views/admin_users/passwords/edit.html.slim index 303991af1..57bdae141 100644 --- a/app/views/admin_users/passwords/edit.html.slim +++ b/app/views/admin_users/passwords/edit.html.slim @@ -1,8 +1,8 @@ .main - h2 class="pb-10 text-2xl font-bold text-center pt-14 md:pt-32 md:mt-2 text-gray-gray-7" + h2 class="pt-14 pb-10 text-2xl font-bold text-center md:pt-32 md:mt-2 text-gray-gray-7" | Create a new Password - div class="max-w-md px-4 mx-auto mb-5 text-sm text-center text-black pb-7 sm:text-lg sm:pb-12" + div class="px-4 pb-7 mx-auto mb-5 max-w-md text-sm text-center text-black sm:text-lg sm:pb-12" | Please create a new password = form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :put }) do |f| @@ -16,6 +16,6 @@ = f.label :password_confirmation = f.password_field :password_confirmation, autocomplete: "new-password", class: "c-input rounded-md", placeholder: "Confirm your password" .c-form--action - = f.submit "Reset password", class:"c-button" + = f.submit "Reset password", class:"c-button hover:bg-seafoam-light transition" = render "admin_users/shared/links" diff --git a/app/views/admin_users/passwords/new.html.slim b/app/views/admin_users/passwords/new.html.slim index f27fdca06..3b3f3504f 100644 --- a/app/views/admin_users/passwords/new.html.slim +++ b/app/views/admin_users/passwords/new.html.slim @@ -1,8 +1,8 @@ .main - h2 class="pb-10 text-2xl font-bold text-center pt-14 md:pt-32 md:mt-2 text-gray-gray-7" + h2 class="pt-14 pb-10 text-2xl font-bold text-center md:pt-32 md:mt-2 text-gray-gray-7" | Reset your password? = render "admin_users/shared/error_messages", resource: resource - div class="max-w-md px-4 mx-auto text-sm text-center text-black pb-7 sm:text-lg sm:pb-12" + div class="px-4 pb-7 mx-auto max-w-md text-sm text-center text-black sm:text-lg sm:pb-12" | Forgot your password? Please enter the email associated with your account so we can help you. = form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| @@ -12,4 +12,4 @@ = f.label :email, "Email Address" = f.email_field :email, autofocus: true, autocomplete: "email", class:"c-input rounded-md" .c-form--action class="mt-12 mb-44" - = f.submit "Send reset instructions", class:"c-button" + = f.submit "Send reset instructions", class:"c-button hover:bg-seafoam-light transition" diff --git a/app/views/admin_users/sessions/new.html.slim b/app/views/admin_users/sessions/new.html.slim index b8f24d829..3df628fc5 100644 --- a/app/views/admin_users/sessions/new.html.slim +++ b/app/views/admin_users/sessions/new.html.slim @@ -1,9 +1,9 @@ -.main class="mb-12 md:mb-36 mt-14 md:mt-32" +.main class="mt-14 mb-12 md:mb-36 md:mt-32" h2 class="pb-6 text-2xl font-bold text-center md:pb-9 text-gray-gray-7" | Welcome back! div class="md:hidden" - div class="absolute top-0 left-0 -z-1 w-72 sm:w-80 sm:h-80" + div class="absolute top-0 left-0 w-72 -z-1 sm:w-80 sm:h-80" = inline_svg_tag 'mob-purple-blur-login.svg' div class="absolute top-0 right-0 -z-1" = inline_svg_tag 'mob-green-blur-login.svg' @@ -25,4 +25,4 @@ - if devise_mapping.recoverable? && controller_name != 'passwords' && controller_name != 'registrations' = link_to "Forgot your password?", new_password_path(resource_name), class:'font-bold flex self-end md:self-center' .c-form--action class="mt-12" - = f.submit "Sign in", class:"c-button", data: { test_id: "admin_login_submit_btn"} + = f.submit "Sign in", class:"c-button hover:bg-seafoam-light transition", data: { test_id: "admin_login_submit_btn"} diff --git a/app/views/alerts/_form.html.slim b/app/views/alerts/_form.html.slim index a13b057b7..730d3924d 100644 --- a/app/views/alerts/_form.html.slim +++ b/app/views/alerts/_form.html.slim @@ -54,7 +54,7 @@ p You’ll receive an email when a newly p published organization matches your search. div class='mt-5' - = form.submit alert&.persisted? ? 'SAVE' : 'Create Alert', class:'c-button' + = form.submit alert&.persisted? ? 'SAVE' : 'Create Alert', class:'hover:bg-seafoam-light transition c-button' - if alert&.persisted? div class="my-4 text-center" = link_to 'Delete alert', alert_path(alert), class:"text-sm font-bold text-blue-medium", method: :delete \ No newline at end of file diff --git a/app/views/contact_messages/new.html.slim b/app/views/contact_messages/new.html.slim index 5ac7f62ba..22876959d 100644 --- a/app/views/contact_messages/new.html.slim +++ b/app/views/contact_messages/new.html.slim @@ -51,4 +51,4 @@ = recaptcha_tags div class="mt-3" - = f.submit "Send message", class:"c-button" + = f.submit "Send message", class:"c-button hover:bg-seafoam-light transition" diff --git a/app/views/donates/show.html.slim b/app/views/donates/show.html.slim index 6c8b4347e..2df0fd481 100644 --- a/app/views/donates/show.html.slim +++ b/app/views/donates/show.html.slim @@ -35,7 +35,7 @@ div class="bg-white main" ' We truly could not do this without your help. The overwhelming support we received ' from our community has given us the foundational grounding and energized motivation ' to continue our momentum towards meaningful change. - = link_to "Donate", "https://givebutter.com/aclaunch", target: "_blank", class:'c-button inline-block my-1 text-primary-dark-blue bg-secondary-seafoam' + = link_to "Donate", "https://givebutter.com/aclaunch", target: "_blank", class:'transition c-button transition inline-block my-1 text-primary-dark-blue bg-secondary-seafoam hover:bg-seafoam-light' /* Donate Online */ div class="relative py-10 text-center bg-gradient-to-l md:pt-20 from-blue-gradient-1 to-blue-gradient-2" @@ -70,7 +70,7 @@ div class="bg-white main" p class="mb-9 max-w-353px text-gray-2" ' Your support and contributions will enable us to meet our goals ' and improve conditions. Your generous donation will fund our mission. - = link_to "Donate now", "https://www.paypal.com/us/fundraiser/charity/4363348", target: "_blank", class:'c-button c-button--no-center inline-block my-1 text-primary-dark-blue bg-secondary-seafoam mb-9' + = link_to "Donate now", "https://www.paypal.com/us/fundraiser/charity/4363348", target: "_blank", class:'transition hover:bg-seafoam-light c-button c-button--no-center inline-block my-1 text-primary-dark-blue bg-secondary-seafoam mb-9' = image_tag "paypal-cards.png", size:"169x21" div class="flex flex-col justify-between items-center mb-28 w-full lg:flex-row" diff --git a/app/views/home/index.html.slim b/app/views/home/index.html.slim index 3300be6d9..01978806b 100644 --- a/app/views/home/index.html.slim +++ b/app/views/home/index.html.slim @@ -43,26 +43,26 @@ main = f.hidden_field :lat, value: @current_location[:latitude], data: { geolocation_target: "formLatitude" } = f.hidden_field :lon, value: @current_location[:longitude], data: { geolocation_target: "formLongitude" } div - = f.submit "Search", class:"c-button c-button--search mx-10 mt-8", data: { test_id: "home_search_btn" } - section class="pt-6 text-gray-2 sm:pt-10" + = f.submit "Search", class:"c-button c-button--search hover:bg-white transition mx-10 mt-8", data: { test_id: "home_search_btn" } + section class="pt-6 text-gray-2 sm:pt-10" data-controller="fade-in" h2 class="pb-8 text-2xl font-bold text-center uppercase sm:pb-5" | How it works div class="flex flex-col justify-evenly mx-auto max-w-7xl lg:flex-row xl:px-16" - div class="mx-auto mb-9 max-w-xs text-center lg:mb-0" + div class="mx-auto mb-9 max-w-xs text-center opacity-0 lg:mb-0" data-fade-in-target="fadeInElement" data-delay="500" div class="flex items-end mb-2 h-36" = inline_svg_tag 'search-needs.svg', class:'mx-auto' h5 class="pb-3 font-bold uppercase md:pb-1" | 1. Search for your needs p.px-8 | Enter keywords in the search box above to start your search for nonprofits in your area. - div.text-center.max-w-xs.mx-auto.mb-14.lg:mb-0 + div.text-center.max-w-xs.mx-auto.mb-14.lg:mb-0.opacity-0 data-fade-in-target="fadeInElement" data-delay="1300" div class="flex items-end mb-2 h-36" = inline_svg_tag 'connect.svg', class:'mx-auto' h5 class="pb-3 font-bold uppercase md:pb-1" | 2. Connect with organizations p.px-8 | Browse through nonprofit profiles to find the one that matches your needs. - div class="mx-auto max-w-xs text-center" + div class="mx-auto max-w-xs text-center opacity-0" data-fade-in-target="fadeInElement" data-delay="2100" div class="flex items-end mb-2 h-36" = inline_svg_tag 'help.svg', class:'mx-auto' h5 class="pb-3 font-bold uppercase md:pb-1" @@ -94,7 +94,7 @@ main | We want to make living and giving simpler. p class="px-4 pt-3 pb-6 md:pb-10" | We are a nonprofit search tool connecting you with resources in your community. - = link_to "Start your search", '#search', class:'c-button inline-block text-white bg-blue-medium' + = link_to "Start your search", '#search', class:'bg-blue-dark transition-colors hover:bg-blue-medium c-button inline-block text-white' div class="hidden -top-20 -left-32 sm:block sm:absolute -z-1" = inline_svg_tag 'lw-desk-blur-left.svg' div class="hidden overflow-hidden right-0 -top-40 sm:block sm:absolute xl:-right-28 -z-1" @@ -109,7 +109,7 @@ main div class="relative pb-20 mx-auto max-w-md text-center" h2 class="px-5 pt-20 pb-11 text-2xl font-bold text-center sm:px-0 md:pt-28 text-blue-dark" | Are you a nonprofit organization interested in joining our listings? - = link_to 'Add or Claim a Nonprofit', new_nonprofit_request_path, class:'c-button inline-block my-1 text-white bg-blue-dark' + = link_to 'Add or Claim a Nonprofit', new_nonprofit_request_path, class:'c-button inline-block my-1 text-white bg-blue-dark transition-colors hover:bg-blue-medium ' div class="hidden top-0 left-0 -z-1 sm:block sm:absolute" = inline_svg_tag 'lc-desk-blur-left.svg' div class="hidden top-0 right-0 -z-1 sm:block sm:absolute" diff --git a/app/views/locations/show.html.slim b/app/views/locations/show.html.slim index 519c85529..54a3e984a 100644 --- a/app/views/locations/show.html.slim +++ b/app/views/locations/show.html.slim @@ -10,38 +10,39 @@ div class="" div class="pt-5 pb-16 md:px-11 md:text-left" div + - url = @location.website || @location.organization.website - if @location.organization.verified? div class="flex justify-center items-center mb-2.5" - h5 class="flex mb-1 text-lg font-bold text-center" - = @location.name + h5 class="flex mb-1 text-lg font-bold text-center pop-out" + = link_to @location.name, url, target: url.present? ? "_blank" : "", class: "text-black" = render "shared/popover", wrapper_icon: "verified_nonprofit_check.svg", copy: "Information verified by nonprofit." p class="text-xs text-center font-base text-gray-4" = "This nonprofit has verified the listed information." - else - h5 class="mb-1 text-lg font-bold text-center" - = @location.name + h5 class="mb-1 text-lg font-bold text-center pop-out" + = link_to @location.name, url, target: url.present? ? "_blank" : "", class: "text-black" p class="text-xs text-center font-base text-gray-4" = "This nonprofit has not yet verified the listed information." - if current_user.present? && policy(@location.organization).update? - p class="text-xs text-center text-blue-500 font-base" id="pointer" + p class="text-xs text-center text-blue-500 font-base" class="pop-out" = link_to "Edit My Nonprofit Page", edit_organization_path( @location.organization) // Designations = render DesignationTag::Component.new(@location.organization, container_options: { class: "justify-center items-center" }) div class="mt-4" - if @location.public_address? - p class="text-xs text-center font-base text-gray-4" id="pointer" + p class="text-xs text-center font-base text-gray-4" class="pop-out" = link_to @location.formatted_address, @location.link_to_google_maps, target: "blank" p class="text-xs text-center font-base text-gray-4" = "EIN Number: #{@location.organization.ein_number}" div class="flex gap-2.5 justify-center items-center mt-4" data-controller="copy-to-clipboard" - button type="button" class="flex items-center text-sm gray-2" data-action="click->copy-to-clipboard#copyContent" data-copy-to-clipboard-content-param="#{request.url}" + button type="button" class="flex items-center text-sm pop-out gray-2" data-action="click->copy-to-clipboard#copyContent" data-copy-to-clipboard-content-param="#{request.url}" = inline_svg_tag 'share_icon.svg', class: " fill-current mr-2" | Share - span class="inline-flex gap-x-2 items-center" + span class="inline-flex gap-x-2 items-center pop-out" = render SaveButton::Component.new(user: current_user, location: @location, simplified: true) span class="text-sm" aria-hidden="true" Save diff --git a/app/views/my_accounts/show.html.slim b/app/views/my_accounts/show.html.slim index d6cd2f5d6..7e077cf69 100644 --- a/app/views/my_accounts/show.html.slim +++ b/app/views/my_accounts/show.html.slim @@ -54,9 +54,9 @@ div class="w-full h-full bg-white" = link_to "Reset via email", new_reset_password_path, class:'text-blue-medium' div class="col-span-12 py-0 border-b border-gray-8" div class="flex flex-row col-span-12 justify-center" - = form.submit "Update", class: "mx-auto py-2.5 px-5 text-sm font-bold text-white bg-blue-medium uppercase rounded-6px" + = form.submit "Update", class: "hover:bg-seafoam-light transition mx-auto py-2.5 px-5 text-sm font-bold text-blue-dark bg-seafoam uppercase rounded-6px" div class="col-span-12 py-4 border-t border-gray-8" - = link_to "Log out", destroy_user_session_path, method: :delete, class:'text-xl font-bold text-blue-dark', data: { turbo: false , test_id: "user_logout_link"} + = link_to "Log out", destroy_user_session_path, method: :delete, class:'hover:text-blue-medium text-xl font-bold text-blue-dark', data: { turbo: false , test_id: "user_logout_link"} div class="hidden" data-tabs-target="panel" h4 class="px-6 my-7 text-xl text-grey-2" | My Saved Nonprofit Pages diff --git a/app/views/nonprofit_requests/new.html.slim b/app/views/nonprofit_requests/new.html.slim index a656b5afa..6a8988dd4 100644 --- a/app/views/nonprofit_requests/new.html.slim +++ b/app/views/nonprofit_requests/new.html.slim @@ -73,4 +73,4 @@ = recaptcha_tags div class="mt-3" - = f.submit "Send message", class:"c-button" + = f.submit "Send message", class:"c-button hover:bg-seafoam-light transition" diff --git a/app/views/organizations/edit.html.slim b/app/views/organizations/edit.html.slim index 7ec99fcee..ccf94ab5f 100644 --- a/app/views/organizations/edit.html.slim +++ b/app/views/organizations/edit.html.slim @@ -370,7 +370,7 @@ td class="text-center" = sched.check_box :closed, class: "rounded-md" = sched.label :closed, class: "sr-only" - button type="button" class="block px-5 py-2.5 mx-auto w-1/3 text-white rounded-md bg-blue-medium" data-action="click->modal#close" + button type="button" class="block px-5 py-2.5 mx-auto w-1/3 text-white rounded-md transition bg-blue-medium hover:bg-seafoam" data-action="click->modal#close" | Save div class="hidden col-span-3 md:flex" @@ -459,6 +459,6 @@ = f.check_box :verified, class: "h-4 w-4 mt-1 mr-2 rounded-6px text-base text-blue-medium focus:ring-0 focus:ring-transparent", checked: @organization.verified = f.label :verified, "Check to verify", class: "text-sm" - = f.submit 'Save', class: 'mx-auto mt-12 flex cursor-pointer uppercase flex-row justify-center items-center bg-seafoam py-4 px-10 rounded-6px text-blue-dark text-base font-bold focus:outline-none', data: { action: "click->form-validation#addEmptyRequiredStyles click->halt-navigation-on-change#startSaving" } + = f.submit 'Save', class: 'hover:bg-seafoam-light transition mx-auto mt-12 flex cursor-pointer uppercase flex-row justify-center items-center bg-seafoam py-4 px-10 rounded-6px text-blue-dark text-base font-bold focus:outline-none', data: { action: "click->form-validation#addEmptyRequiredStyles click->halt-navigation-on-change#startSaving" } // unsaved changes modal = render "organizations/unsaved_changes_modal_template" diff --git a/app/views/pagy/_nav.html.slim b/app/views/pagy/_nav.html.slim index 13b3ac4ed..b0d1b8b27 100644 --- a/app/views/pagy/_nav.html.slim +++ b/app/views/pagy/_nav.html.slim @@ -1,13 +1,10 @@ - -- link = pagy_anchor(pagy) - nav class="flex gap-4 justify-center my-5" role="navigation" aria-label="pager" - pagy.series.each do |item| # series example: [1, :gap, 7, 8, "9", 10, 11, :gap, 36] - if item.is_a?(Integer) # page link - span class="px-3 py-1 text-sm font-extrabold leading-6 rounded-6px text-gray-3 bg-gray-7" ==> link.call(item) + a class="px-3 py-1 text-sm font-extrabold leading-6 cursor-pointer rounded-6px text-gray-3 bg-gray-7" href="#{pagy_url_for(pagy, item)}" ==> item - elsif item.is_a?(String) # current page - span class="px-3 py-1 text-sm font-extrabold leading-6 text-white rounded-6px bg-blue-dark" ==> item + span class="px-3 py-1 text-sm font-extrabold leading-6 text-white cursor-pointer rounded-6px bg-blue-dark" ==> item - elsif item == :gap # page gap span class="px-3 py-1 text-sm font-extrabold leading-6 rounded-6px text-gray-3 bg-gray-7" ==> pagy_t('pagy.nav.gap') diff --git a/app/views/privacy_policies/show.html.slim b/app/views/privacy_policies/show.html.slim index e73fb0f3e..2d7558171 100644 --- a/app/views/privacy_policies/show.html.slim +++ b/app/views/privacy_policies/show.html.slim @@ -1,19 +1,19 @@ -div class="max-w-5xl px-6 pb-12 mx-auto text-justify main text-gray-3 sm:pb-6" - div class="flex mx-auto flex-row max-w-7xl justify-evenly" - div class="relative flex flex-col justify-center text-center md:mx-0" - div class="max-w-lg mx-auto" - h2 class="pt-14 sm:pt-32 text-2xl font-bold text-center uppercase text-gray-gray-7" +div class="px-6 pb-12 mx-auto max-w-5xl text-justify main text-gray-3 sm:pb-6" + div class="flex flex-row justify-evenly mx-auto max-w-7xl" + div class="flex relative flex-col justify-center text-center md:mx-0" + div class="mx-auto max-w-lg" + h2 class="pt-14 text-2xl font-bold text-center uppercase sm:pt-32 text-gray-gray-7" | Giving Connection Privacy Policy - p class="max-w-xl pt-10 pb-9 px-3 sm:px-0 mx-auto text-center text-gray-3 text-base" + p class="px-3 pt-10 pb-9 mx-auto max-w-xl text-base text-center sm:px-0 text-gray-3" ' Last Updated: February 15, 2022 - =link_to "go to donor privacy policy", '#donor_policy', class:'c-button py-2.5 px-5 text-white bg-blue-medium mb-8 w-fit' - div class="hidden sm:block sm:absolute -top-20 -left-32 -z-1" + =link_to "go to donor privacy policy", '#donor_policy', class:'c-button hover:bg-blue-light transition py-2.5 px-5 text-white bg-blue-medium mb-8 w-fit' + div class="hidden -top-20 -left-32 sm:block sm:absolute -z-1" = inline_svg_tag 'privacy-desk-blur-left.svg' - div class="hidden overflow-hidden sm:block sm:absolute -top-28 -right-36 -z-1" + div class="hidden overflow-hidden -top-28 -right-36 sm:block sm:absolute -z-1" = inline_svg_tag 'privacy-desk-blur-right.svg' - div class="absolute -left-6 -z-1 sm:hidden -top-20" + div class="absolute -left-6 -top-20 -z-1 sm:hidden" = inline_svg_tag 'privacy-mob-blur-left.svg', size:'320*428' - div class="absolute -right-6 overflow-visible -top-28 -z-1 sm:hidden" + div class="overflow-visible absolute -right-6 -top-28 -z-1 sm:hidden" = inline_svg_tag 'privacy-mob-blur-right.svg' p class="pb-4" ' Giving Connection Inc ("Giving Connection," "we," "us," or "our") welcomes you to our website. We are a tax exempt, @@ -280,25 +280,25 @@ div class="max-w-5xl px-6 pb-12 mx-auto text-justify main text-gray-3 sm:pb-6" p class="pb-4" ' Our intent is to promptly reply to every message we receive. This information is used to respond directly to your questions or comments. We also may file your comments to improve our services in the future. - div id="donor_policy" class="flex mx-auto flex-row max-w-7xl justify-evenly scroll-margin-navbar" - div class="relative flex flex-col justify-center text-center md:mx-0" - div class="max-w-lg mx-auto" - h2 class="pt-10 pb-6 mdpx:pt-24 525px:pb-9 text-2xl font-bold text-center uppercase text-gray-gray-7" + div id="donor_policy" class="flex flex-row justify-evenly mx-auto max-w-7xl scroll-margin-navbar" + div class="flex relative flex-col justify-center text-center md:mx-0" + div class="mx-auto max-w-lg" + h2 class="pt-10 pb-6 text-2xl font-bold text-center uppercase mdpx:pt-24 525px:pb-9 text-gray-gray-7" | Donor Privacy Policy - div class="absolute -left-6 -top-16 xs:-left-10 -z-1 425px:hidden " + div class="absolute -left-6 -top-16 xs:-left-10 -z-1 425px:hidden" = inline_svg_tag 'donor-mob-blur-left.svg', size:'300*325' - div class="absolute -right-7 -top-32 xs:-right-11 overflow-visible -z-1 425px:hidden" + div class="overflow-visible absolute -right-7 -top-32 xs:-right-11 -z-1 425px:hidden" = inline_svg_tag 'donor-mob-blur-right.svg' - div class="hidden 425px:block 425px:absolute -top-20 -left-10 -z-1" + div class="hidden -left-10 -top-20 425px:block 425px:absolute -z-1" = inline_svg_tag 'donor-desk-blur-left.svg', size:'250*250' - div class="hidden overflow-hidden 425px:block 425px:absolute -top-12 -right-10 -z-1" + div class="hidden overflow-hidden -right-10 -top-12 425px:block 425px:absolute -z-1" = inline_svg_tag 'donor-desk-blur-right.svg', size:'250*250' - div class="hidden md:block md:absolute -top-18 -left-52 -z-1" + div class="hidden -left-52 md:block md:absolute -top-18 -z-1" = inline_svg_tag 'donor-desk-blur-left.svg' - div class="hidden overflow-hidden md:block md:absolute -top-36 -right-38 -z-1" + div class="hidden overflow-hidden -top-36 md:block md:absolute -right-38 -z-1" = inline_svg_tag 'donor-desk-blur-right.svg' p class="pb-4" diff --git a/app/views/searches/_preview.html.slim b/app/views/searches/_preview.html.slim index 866e76361..ce77e0800 100644 --- a/app/views/searches/_preview.html.slim +++ b/app/views/searches/_preview.html.slim @@ -13,17 +13,17 @@ div class="w-full bg-gray-9" div div data-tabs-active-tab=("border-b-4 border-blue-medium") - div class="flex bg-white border-b pb-14" + div class="flex pb-14 bg-white border-b" / 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 class="mr-0.5" data-search-target="pillsCounter" button type="button" = 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 - tabs_labels = ['Causes', 'Location', 'Services', 'Populations Served', 'Hours'] - 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 span class="inline-block py-3 whitespace-nowrap" @@ -31,28 +31,28 @@ li button class="inline-block py-3 whitespace-nowrap" type="button" id="advanced-filters-button" disabled="true" | 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" = turbo_frame_tag "search-locations", src: search_path() do - div class="w-full md:flex md:h-85vh" data-controller="tabs" data-tabs-active-tab="border-blue-dark bg-blue-dark text-white" data-tabs-inactive-tab="border-gray-6 bg-transparent text-gray-3" + div class="w-full md:flex md:h-85vh" data-controller="tabs" data-tabs-active-tab="border-blue-dark bg-blue-dark text-white" data-tabs-inactive-tab="border-gray-6 bg-transparent text-gray-3 underline-on-hover" div class="w-full max-w-sm md:border-r border-gray-7" - div class="fixed inset-0 flex items-center justify-center hidden min-h-screen overflow-y-auto animated fadeIn" data-action="click->modal#closeBackground keyup@window->modal#closeWithKeyboard" data-modal-target="container" style=("z-index: 9999;") + div class="flex hidden overflow-y-auto fixed inset-0 justify-center items-center min-h-screen animated fadeIn" data-action="click->modal#closeBackground keyup@window->modal#closeWithKeyboard" data-modal-target="container" style=("z-index: 9999;") div class="relative w-full max-h-full max-w-375px" - div class="flex flex-row justify-between w-full p-4 bg-gray-9 md:hidden" - span class="relative z-0 inline-flex shadow-sm md:hidden rounded-6px" + div class="flex flex-row justify-between p-4 w-full bg-gray-9 md:hidden" + span class="inline-flex relative z-0 shadow-sm md:hidden rounded-6px" / active bg-blue-dark.focus:text-white / inactive bg-white text-gray-3 - button class="relative inline-flex items-center px-5 py-1 text-sm border rounded-l-6px" type="button" data-tabs-target="tab" data-action="click->tabs#change" data-index="0" + button class="inline-flex relative items-center px-5 py-1 text-sm border rounded-l-6px" type="button" data-tabs-target="tab" data-action="click->tabs#change" data-index="0" | List - button class="relative inline-flex items-center px-5 py-1 -ml-px text-sm border rounded-r-6px" type="button" data-tabs-target="tab" data-action="click->tabs#change" data-index="1" + button class="inline-flex relative items-center px-5 py-1 -ml-px text-sm border rounded-r-6px" type="button" data-tabs-target="tab" data-action="click->tabs#change" data-index="1" | Map // Search result cards (mobile) div class="flex flex-col w-full bg-white md:h-85vh md:overflow-y-auto md:hidden" data-tabs-target="panel" - div class="flex items-center justify-center h-full" + div class="flex justify-center items-center h-full" div class="spinner" // Search result cards div class="hidden w-full bg-white md:h-85vh md:flex md:flex-col md:overflow-y-auto" - div class="flex items-center justify-center h-full" + div class="flex justify-center items-center h-full" div class="spinner" //Map mobile @@ -63,7 +63,7 @@ div class="hidden" data-places-target="latitude" div class="hidden" data-places-target="longitude" //Map desktop - div class="relative hidden w-full md:block" + div class="hidden relative w-full md:block" div data-controller="places result-card--component" data-action="google-maps-callback@window->places#initMap" data-places-zoom-value="10" data-places-imageurl-value="#{asset_path 'markergc.png'}" data-places-clickedimageurl-value="#{asset_path 'markerinvgc.png'}" data-places-popup-url-value="/map_popup/new?location_id=" div class="absolute inset-0 w-full h-full xs:h-85vh" data-places-target="map" div class="hidden" diff --git a/app/views/searches/show.html.slim b/app/views/searches/show.html.slim index 73a96b67a..2e6477ffb 100644 --- a/app/views/searches/show.html.slim +++ b/app/views/searches/show.html.slim @@ -13,7 +13,7 @@ = turbo_frame_tag "search-pills" do = render SearchPills::Component.new(causes: @top_10_causes, services: @top_10_services, beneficiary_subcategories: @top_10_beneficiary_subcategories, params: params, current_location: @current_location) = turbo_frame_tag "search-locations" do - div class="flex flex-row justify-center w-full md:h-85vh" data-controller="tabs" data-tabs-active-tab="border-blue-dark bg-blue-dark text-white" data-tabs-inactive-tab="border-gray-6 bg-transparent text-gray-3" + div class="flex flex-row justify-center w-full md:h-85vh" data-controller="tabs" data-tabs-active-tab="border-blue-dark bg-blue-dark text-white" data-tabs-inactive-tab="border-gray-6 bg-transparent text-gray-3 underline-on-hover" div class="flex flex-row justify-center w-full min-h-full" div class="flex flex-col w-full max-w-sm md:border-r border-gray-7" div class="flex hidden overflow-y-auto fixed inset-0 justify-center items-center min-h-screen animated fadeIn" data-action="click->modal#closeBackground keyup@window->modal#closeWithKeyboard" data-modal-target="container" style=("z-index: 9999;") @@ -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 z-10 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" diff --git a/app/views/users/confirmations/new.html.slim b/app/views/users/confirmations/new.html.slim index ec55dfc93..fbbfa9865 100644 --- a/app/views/users/confirmations/new.html.slim +++ b/app/views/users/confirmations/new.html.slim @@ -1,11 +1,11 @@ -h1 class="px-5 mb-11 mt-14 title text-2xl font-bold text-center md:mb-14 md:mt-32" +h1 class="px-5 mt-14 mb-11 text-2xl font-bold text-center title md:mb-14 md:mt-32" | Confirmation instructions = render "users/shared/links" // background SVGs div class="md:hidden" aria-hidden="true" - div class="absolute top-0 left-0 -z-1 w-72 sm:w-80 sm:h-80" + div class="absolute top-0 left-0 w-72 -z-1 sm:w-80 sm:h-80" = inline_svg_tag 'mob-purple-blur-login.svg' div class="absolute top-0 right-0 -z-1" = inline_svg_tag 'mob-green-blur-login.svg' @@ -17,7 +17,7 @@ div class="hidden md:flex" aria-hidden="true" = inline_svg_tag 'desk-green-blur-login.svg' = form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post, class: "mt-4 mb-12 md:mb-36" }) do |f| - div class="max-w-xs mx-auto" + div class="mx-auto max-w-xs" = render "users/shared/error_messages", resource: resource div class="flex flex-col mb-2.5" @@ -27,4 +27,4 @@ div class="hidden md:flex" aria-hidden="true" - if devise_mapping.recoverable? && controller_name != 'passwords' && controller_name != 'registrations' = link_to "Forgot your password?", new_password_path(resource_name), class:'block w-fit mx-auto text-sm font-bold text-gray-3' - = f.submit "Resend", class: "c-button mt-10 mb-20" + = f.submit "Resend", class: "c-button mt-10 mb-20 hover:bg-seafoam-light transition" diff --git a/app/views/users/passwords/edit.html.slim b/app/views/users/passwords/edit.html.slim index 0d6ac5119..62bdc8e61 100644 --- a/app/views/users/passwords/edit.html.slim +++ b/app/views/users/passwords/edit.html.slim @@ -13,4 +13,4 @@ = form_group_for f, :password_confirmation do = f.password_field :password_confirmation, autocomplete: "new-password", class: "c-input", placeholder: "Confirm your password" .c-form--action - = f.submit "Reset password", class:"c-button", data: { turbo: false } + = f.submit "Reset password", class:"c-button hover:bg-seafoam-light transition", data: { turbo: false } diff --git a/app/views/users/passwords/new.html.slim b/app/views/users/passwords/new.html.slim index 4f24db445..8e1108da6 100644 --- a/app/views/users/passwords/new.html.slim +++ b/app/views/users/passwords/new.html.slim @@ -10,4 +10,4 @@ = form_group_for f, :email, label: "Email Address", class: "mb-6" do = f.email_field :email, autofocus: true, autocomplete: "email", class:"c-input" .c-form--action class="mt-12 mb-44" - = f.submit "Send reset instructions", class:"c-button", data: { turbo: false} + = f.submit "Send reset instructions", class:"c-button hover:bg-seafoam-light transition", data: { turbo: false} diff --git a/app/views/users/registrations/new.html.slim b/app/views/users/registrations/new.html.slim index 2a864c2ec..c37b464a1 100644 --- a/app/views/users/registrations/new.html.slim +++ b/app/views/users/registrations/new.html.slim @@ -45,7 +45,7 @@ = form_group_for f, :password_confirmation do = f.password_field :password_confirmation, autocomplete: "new-password", class: "c-input", placeholder: "Confirm your password", data: { test_id: "signup_password_confirmation_input"} .c-form--action - = f.submit "Create Account", class:"c-button", data: { test_id: "signup_submit_btn", turbo: false } + = f.submit "Create Account", class:"c-button hover:bg-seafoam-light transition", data: { test_id: "signup_submit_btn", turbo: false } div class="px-8 pb-28 mx-auto max-w-sm text-xs text-center sm:pb-36" ' By continuing, you agree to Giving Connection’s diff --git a/app/views/users/sessions/new.html.slim b/app/views/users/sessions/new.html.slim index 4f58e7310..c76693c8b 100644 --- a/app/views/users/sessions/new.html.slim +++ b/app/views/users/sessions/new.html.slim @@ -1,9 +1,9 @@ -.main class="mb-12 md:mb-36 mt-14 md:mt-32" +.main class="mt-14 mb-12 md:mb-36 md:mt-32" h2 class="pb-6 text-2xl font-bold text-center md:pb-9" | Welcome back! div class="md:hidden" - div class="absolute top-0 left-0 -z-1 w-72 sm:w-80 sm:h-80" + div class="absolute top-0 left-0 w-72 -z-1 sm:w-80 sm:h-80" = inline_svg_tag 'mob-purple-blur-login.svg' div class="absolute top-0 right-0 -z-1" = inline_svg_tag 'mob-green-blur-login.svg' @@ -25,9 +25,9 @@ = f.label :password = f.password_field :password, autocomplete: "current-password", class:"c-input", data: { test_id: "user_login_password_input"} - if devise_mapping.recoverable? && controller_name != 'passwords' && controller_name != 'registrations' - = link_to "Forgot your password?", new_password_path(resource_name), class:'font-bold' + = link_to "Forgot your password?", new_password_path(resource_name), class:'hover:text-blue-medium transition font-bold' - if devise_mapping.confirmable? - = link_to "Didn't receive confirmation instructions?", new_user_confirmation_path, class: "font-bold" + = link_to "Didn't receive confirmation instructions?", new_user_confirmation_path, class: "hover:text-blue-medium transition font-bold" .c-form--action class="mt-12" - = f.submit "Sign in", class:"c-button", data: { test_id: "user_login_submit_btn"} + = f.submit "Sign in", class:"hover:bg-seafoam-light transition c-button", data: { test_id: "user_login_submit_btn"} \ No newline at end of file diff --git a/app/views/users/shared/_links.html.slim b/app/views/users/shared/_links.html.slim index e422acbc6..c62659124 100644 --- a/app/views/users/shared/_links.html.slim +++ b/app/views/users/shared/_links.html.slim @@ -5,7 +5,7 @@ - if devise_mapping.registerable? && controller_name != 'registrations' div class="flex justify-center mt-1.5 text-sm text-center" | New to Giving Connection?  - = link_to "Sign up", signup_path, class: 'font-bold' + = link_to "Sign up", signup_path, class: 'hover:text-blue-medium transition font-bold' - if devise_mapping.omniauthable? - resource_class.omniauth_providers.each do |provider| = link_to "Sign in with #{OmniAuth::Utils.camelize(provider)}", omniauth_authorize_path(resource_name, provider), method: :post diff --git a/spec/models/office_hour_spec.rb b/spec/models/office_hour_spec.rb index 404f29f0d..6fc45f034 100644 --- a/spec/models/office_hour_spec.rb +++ b/spec/models/office_hour_spec.rb @@ -44,12 +44,16 @@ it "converts the time from location's time zone to UTC before saving" do subject { oh } + # Set the open and close times with a specific time zone + oh.open_time = Time.zone.parse("12:00 PM").in_time_zone("Pacific Time (US & Canada)") + oh.close_time = Time.zone.parse("4:00 PM").in_time_zone("Pacific Time (US & Canada)") + oh.save! expect(oh.open_time.zone).to eql("UTC") expect(oh.close_time.zone).to eql("UTC") - expect(oh.open_time.hour).to eql(19) - expect(oh.close_time.hour).to eql(23) + expect(oh.open_time.hour).to eql(20) + expect(oh.close_time.hour).to eql(0) end end end diff --git a/spec/services/time_zone_converter_spec.rb b/spec/services/time_zone_converter_spec.rb index c8c5d9ff0..64654c2be 100644 --- a/spec/services/time_zone_converter_spec.rb +++ b/spec/services/time_zone_converter_spec.rb @@ -10,11 +10,11 @@ utc_time = converter.to_utc(time_str) expect(utc_time.zone).to eq("UTC") - expect(utc_time.hour).to eq(20) + expect(utc_time.hour).to eq(21) original_time = converter.to_local(utc_time.strftime("%H:%M:%S")) - expect(original_time.zone).to eq("PDT") + expect(original_time.zone).to eq("PST") expect(original_time.hour).to eq(13) end diff --git a/tailwind.config.js b/tailwind.config.js index 1e55bb0d3..f9f41e0a0 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -28,6 +28,7 @@ module.exports = { colors: { seafoam: { DEFAULT: "#9ae2e0", + light: "#adf7f5", }, salmon: { DEFAULT: "#fc8383",