Add clapping icon to congratulations message after writing a comment

openaustralia · Jan 30, 2024 · 371df4f · 371df4f
1 parent 3573660
commit 371df4f
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 4 deletions.
diff --git a/app/assets/images/tailwind/clapping.svg b/app/assets/images/tailwind/clapping.svg
diff --git a/app/components/tailwind/alert_component.html.erb b/app/components/tailwind/alert_component.html.erb
@@ -1,4 +1,4 @@
-<div class="flex items-center px-4 py-3 text-2xl font-bold text-white rounded-lg <%= @bg_class %>">
+<div class="flex <%= @alignment_class %> <%= @padding_class %> text-2xl font-bold text-white rounded-lg <%= @bg_class %>">
   <%= image_tag @image_src, class: "mr-5", alt: @image_alt %>
   <div><%= content %></div>
 </div>
diff --git a/app/components/tailwind/alert_component.rb b/app/components/tailwind/alert_component.rb
@@ -13,10 +13,20 @@ def initialize(type:)
       case type
       when :success
         @bg_class = T.let("bg-lavender", String)
+        @alignment_class = T.let("items-center", String)
+        @padding_class = T.let("px-4 py-3", String)
         @image_src = T.let("tailwind/tick.svg", String)
         @image_alt = T.let("Success", String)
+      when :congratulations
+        @bg_class = T.let("bg-lavender", String)
+        @alignment_class = T.let("items-start", String)
+        @padding_class = T.let("px-8 py-8", String)
+        @image_src = T.let("tailwind/clapping.svg", String)
+        @image_alt = T.let("Congratulations", String)
       when :warning
         @bg_class = "bg-error-red"
+        @alignment_class = T.let("items-center", String)
+        @padding_class = T.let("px-4 py-3", String)
         @image_src = "tailwind/warning.svg"
         @image_alt = "Warning"
       else

diff --git a/app/views/_tailwind/applications/show.html.erb b/app/views/_tailwind/applications/show.html.erb
@@ -155,9 +155,9 @@
     <div class="pt-12" id="comment<%= comment.id %>">
       <% if comment.id == flash[:published_comment_id] %>
         <div class="mb-8">
-          <%= render Tailwind::AlertComponent.new(type: :success) do %>
-            <div class="m-4 mb-6 text-3xl">
-              <p class="mb-6">
+          <%= render Tailwind::AlertComponent.new(type: :congratulations) do %>
+            <div class="mb-4 ml-4 text-3xl">
+              <p class="mb-8">
                 Thanks, your comment has been sent to <%= comment.comment_recipient_full_name %> and posted below!
               </p>
               <%= render Tailwind::ButtonComponent.new(tag: :a, size: "2xl", icon: :share, type: :inverse_lavender, href: "https://www.facebook.com/sharer/sharer.php?u=#{comment_url(Comment.first)}&t=") do %>