Make sizes of icons a little more consistent

openaustralia · Sep 13, 2024 · e8b73fc · e8b73fc
1 parent a88c9b4
commit e8b73fc
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 7 deletions.
diff --git a/app/components/icon_component.html.erb b/app/components/icon_component.html.erb
@@ -1,21 +1,24 @@
 <%# Using inlined svg icons so that we can set their colour based on the current text colour %>
 <% case @name %>
 <% when :trash %>
-  <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <%# TODO: Move size out of here %>
+  <svg class="size-5" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
     <path d="M5 2C5 1.46957 5.21071 0.960859 5.58579 0.585786C5.96086 0.210714 6.46957 0 7 0H13C13.5304 0 14.0391 0.210714 14.4142 0.585786C14.7893 0.960859 15 1.46957 15 2V4H19C19.2652 4 19.5196 4.10536 19.7071 4.29289C19.8946 4.48043 20 4.73478 20 5C20 5.26522 19.8946 5.51957 19.7071 5.70711C19.5196 5.89464 19.2652 6 19 6H17.931L17.064 18.142C17.0281 18.6466 16.8023 19.1188 16.4321 19.4636C16.0619 19.8083 15.5749 20 15.069 20H4.93C4.42414 20 3.93707 19.8083 3.56688 19.4636C3.1967 19.1188 2.97092 18.6466 2.935 18.142L2.07 6H1C0.734784 6 0.48043 5.89464 0.292893 5.70711C0.105357 5.51957 0 5.26522 0 5C0 4.73478 0.105357 4.48043 0.292893 4.29289C0.48043 4.10536 0.734784 4 1 4H5V2ZM7 4H13V2H7V4ZM4.074 6L4.931 18H15.07L15.927 6H4.074ZM8 8C8.26522 8 8.51957 8.10536 8.70711 8.29289C8.89464 8.48043 9 8.73478 9 9V15C9 15.2652 8.89464 15.5196 8.70711 15.7071C8.51957 15.8946 8.26522 16 8 16C7.73478 16 7.48043 15.8946 7.29289 15.7071C7.10536 15.5196 7 15.2652 7 15V9C7 8.73478 7.10536 8.48043 7.29289 8.29289C7.48043 8.10536 7.73478 8 8 8ZM12 8C12.2652 8 12.5196 8.10536 12.7071 8.29289C12.8946 8.48043 13 8.73478 13 9V15C13 15.2652 12.8946 15.5196 12.7071 15.7071C12.5196 15.8946 12.2652 16 12 16C11.7348 16 11.4804 15.8946 11.2929 15.7071C11.1054 15.5196 11 15.2652 11 15V9C11 8.73478 11.1054 8.48043 11.2929 8.29289C11.4804 8.10536 11.7348 8 12 8Z" />
   </svg>
 <% when :edit %>
-  <svg width="19" height="16" viewBox="0 0 19 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <%# TODO: Move size out of here %>
+  <svg class="size-5" viewBox="0 -3 20 17" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
     <path d="M5.707 14.3136L15 6.6215L10.586 2.96789L1.293 10.66C1.16506 10.766 1.07418 10.8988 1.03 11.0441L0 15.3839L5.242 14.5313C5.418 14.4949 5.579 14.4196 5.707 14.3136ZM18 4.13831C18.3749 3.82786 18.5856 3.40686 18.5856 2.96789C18.5856 2.52892 18.3749 2.10793 18 1.79748L16.414 0.484697C16.0389 0.174346 15.5303 0 15 0C14.4697 0 13.9611 0.174346 13.586 0.484697L12 1.79748L16.414 5.45109L18 4.13831Z" />
   </svg>
 <% when :external %>
-  <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <%# TODO: Move size out of here %>
+  <svg class="size-5" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
     <path d="M11.9734 0V1.83577L16.865 1.83562L9.65234 9.04869L10.9505 10.3467L18.1632 3.13399V8.02565H19.9989V0.000191485L11.9734 0Z" />
     <path d="M16.3284 18.164H1.83569V3.6717H8.79011V1.83594H0V20H18.1641V11.2099H16.3284L16.3284 18.164Z" />
   </svg>
 <% when :share %>
-  <%# TODO: Share icon is not visually consistent with external link icon %>
-  <svg width="22" height="27" viewBox="0 0 22 27" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <%# TODO: Move size out of here %>
+  <svg class="size-5" 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 :tick %>

diff --git a/app/components/share_button_component.html.erb b/app/components/share_button_component.html.erb
@@ -26,10 +26,10 @@
             setTimeout(() => { copied = false }, 2000);
           }">
     <%# Giving this a constant height to avoid any content shifts when button is clicked %>
-    <div class="flex items-center justify-center h-8 gap-4">
+    <div class="flex items-baseline justify-center h-8 gap-4">
       <div>
         <div x-show="!copied"><%= render IconComponent.new(name: :share) %></div>
-        <div x-show="copied" class="w-6 h-6"><%= render IconComponent.new(name: :tick) %></div>
+        <div x-show="copied" class="size-5"><%= render IconComponent.new(name: :tick) %></div>
       </div>
       <div>
         <div x-show="!copied"><%= content %></div>