From 37ff2ac2b9531e53bed05d8b4828614558418062 Mon Sep 17 00:00:00 2001
From: syeopite <syeopite@syeopite.dev>
Date: Fri, 26 Mar 2021 20:48:46 -0700
Subject: [PATCH] Overhaul button icon html and styling

---
 src/invidious/views/components/item.ecr | 24 +++++++++++++-----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/invidious/views/components/item.ecr b/src/invidious/views/components/item.ecr
index 929ba25f..0e379e8e 100644
--- a/src/invidious/views/components/item.ecr
+++ b/src/invidious/views/components/item.ecr
@@ -137,20 +137,22 @@
                 </a>
             <% end %>
             <p><a href="/watch?v=<%= item.id %>"><%= HTML.escape(item.title) %></a></p>
-            <p style="display: flex;">
+            <div style="display: flex">
                 <b style="flex: 1;">
                     <a style="width:100%" href="/channel/<%= item.ucid %>"><%= item.author %></a>
                 </b>
-                <a title="<%=translate(locale, "Watch on YouTube")%>" href="https://www.youtube.com/watch?v=<%= item.id %>" style="margin-right: 5px;">
-                    <i class="icon ion-logo-youtube"></i>
-                </a>
-                <a title="<%=translate(locale, "Audio mode")%>" href="/watch?v=<%= item.id %>&amp;listen=1">
-                    <i class="icon ion-md-headset"></i>
-                </a>
-                <a title="<%=translate(locale, "Switch Invidious Instance")%>" href="/redirect?id=<%= item.id %>&amp;listen=1">
-                    <i class="icon ion-md-headset"></i>
-                </a>
-            </p>
+                <div class="icon-buttons">
+                    <a title="<%=translate(locale, "Watch on YouTube")%>" href="https://www.youtube.com/watch?v=<%= item.id %>">
+                        <i class="icon ion-logo-youtube"></i>
+                    </a>
+                    <a title="<%=translate(locale, "Audio mode")%>" href="/watch?v=<%= item.id %>&amp;listen=1">
+                        <i class="icon ion-md-headset"></i>
+                    </a>
+                    <a title="<%=translate(locale, "Switch Invidious Instance")%>" href="/redirect?id=<%= item.id %>&amp;listen=1">
+                        <i class="icon ion-md-jet"></i>
+                    </a>
+                </div>
+            </div>
 
             <h5 class="pure-g">
                 <% if item.responds_to?(:premiere_timestamp) && item.premiere_timestamp.try &.> Time.utc %>