Rejig info icon. Centered a little better. Made it a little bigger. M…

…aybe too big? Also increased spacing before it.
openaustralia · Jun 20, 2024 · 4cd3092 · 4cd3092
1 parent 3fa2b5b
commit 4cd3092
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 20 deletions.
diff --git a/app/components/tailwind/icon.html.erb b/app/components/tailwind/icon.html.erb
@@ -18,12 +18,6 @@
   <svg width="22" height="27" viewBox="0 0 22 27" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
     <path d="M2 13.5V22.7C2 23.31 2.23705 23.895 2.65901 24.3263C3.08097 24.7577 3.65326 25 4.25 25H17.75C18.3467 25 18.919 24.7577 19.341 24.3263C19.7629 23.895 20 23.31 20 22.7V13.5M15.5 6.6L11 2M11 2L6.5 6.6M11 2V16.95" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
   </svg>
-<% when :info %>
-  <%# TODO: Get rid of hardcoded white colour  %>
-  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <circle cx="10" cy="10" r="10" fill="currentColor" />
-    <path d="M11.5777 7.538V15H9.08575V7.538H11.5777ZM10.3317 3.52C10.7517 3.52 11.0924 3.65067 11.3537 3.912C11.6244 4.17333 11.7597 4.5 11.7597 4.892C11.7597 5.284 11.6244 5.61067 11.3537 5.872C11.0924 6.13333 10.7517 6.264 10.3317 6.264C9.91175 6.264 9.56641 6.13333 9.29575 5.872C9.03441 5.61067 8.90375 5.284 8.90375 4.892C8.90375 4.5 9.03441 4.17333 9.29575 3.912C9.56641 3.65067 9.91175 3.52 10.3317 3.52Z" fill="white" />
-  </svg>
 <% when :tick %>
   <svg viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M18.6938 37C28.9679 37 37.2977 28.7167 37.2977 18.5C37.2977 8.28255 28.9679 0 18.6938 0C8.41893 0 0.0898438 8.28255 0.0898438 18.5C0.0898438 28.7167 8.41893 37 18.6938 37Z" fill="currentColor" />

diff --git a/app/components/tailwind/info_popup.html.erb b/app/components/tailwind/info_popup.html.erb
@@ -47,9 +47,9 @@
   ">
   <%# TODO: Is info icon too small? How can we make the click area larger? %>
   <%# TODO: Remove duplication between here and pa_link_classes view helper %>
-  <button x-ref="button" x-on:click.prevent="open=!open" class="align-baseline text-fuchsia hover:text-fuchsia-darker focus:outline-none focus:bg-sun-yellow">
+  <button x-ref="button" x-on:click.prevent="open=!open" class="text-base font-bold text-white rounded-full size-6 bg-fuchsia hover:bg-fuchsia-darker focus:outline-none focus:ring-sun-yellow focus:ring-4">
     <span class="sr-only">Info</span>
-    <%= render Tailwind::Icon.new(name: :info) %>
+    i
   </button>
   <%# TODO: Choose a more sensible default width %>
   <%# TODO: Drop shadow doesn't currently match what was designed %>

diff --git a/app/views/_tailwind/applications/show.html.erb b/app/views/_tailwind/applications/show.html.erb
@@ -36,10 +36,12 @@
   <dd>
     <div>
       <%= @application.council_reference %>
-      <%= render Tailwind::InfoPopup.new do %>
-        This was created by <%= @application.authority.full_name %> to identify this application. You will need this if you talk
-        directly with them or use their website.
-      <% end %>
+      <div class="inline-block ml-1">
+        <%= render Tailwind::InfoPopup.new do %>
+          This was created by <%= @application.authority.full_name %> to identify this application. You will need this if you talk
+          directly with them or use their website.
+        <% end %>
+      </div>
     </div>
   </dd>
 </dl>

diff --git a/app/views/_tailwind/comments/_delivery_status.html.erb b/app/views/_tailwind/comments/_delivery_status.html.erb
@@ -3,7 +3,9 @@
 <%# TODO: We don't want the content to fill the full width %>
 <div class="text-lg text-navy">
   <%= render "comments/delivery_status_text_short", comment: %>
-  <%= render Tailwind::InfoPopup.new do %>
-    <%= render "comments/delivery_status_text_long", comment: %>
-  <% end %>
+  <div class="inline-block ml-1">
+    <%= render Tailwind::InfoPopup.new do %>
+      <%= render "comments/delivery_status_text_long", comment: %>
+    <% end %>
+  </div>
 </div>
diff --git a/app/views/_tailwind/comments/_form.html.erb b/app/views/_tailwind/comments/_form.html.erb
@@ -31,11 +31,13 @@
     <div>
       <div class="text-lg text-navy">
         Why do you need my address?
-        <%= render Tailwind::InfoPopup.new do %>
-          <div class="prose prose-xl prose-p:text-white">
-            <%= render "documentation/faq_commenting_address" %>
-          </div>
-        <% end %>
+        <div class="inline-block ml-1">
+          <%= render Tailwind::InfoPopup.new do %>
+            <div class="prose prose-xl prose-p:text-white">
+              <%= render "documentation/faq_commenting_address" %>
+            </div>
+          <% end %>
+        </div>
       </div>
     </div>
   </div>