Improve player controls styles on focus

sgobotta · Jan 29, 2024 · a182663 · a182663
1 parent 3bf5cf6
commit a182663
Showing 1 changed file with 14 additions and 4 deletions.
diff --git a/lib/livedj_web/live/player_controls_live.html.heex b/lib/livedj_web/live/player_controls_live.html.heex
@@ -52,7 +52,12 @@
         <%!-- Playback Controls --%>
         <div class="col-span-6 row-span-1 w-full flex justify-center items-center">
           <div class="flex items-center gap-4 h-10">
-            <a href="#" phx-click="previous" class="cursor-default" tabindex="0">
+            <a
+              href="#"
+              phx-click="previous"
+              class="cursor-default h-8 w-8 flex justify-center items-center"
+              tabindex="0"
+            >
               <%= PhoenixInlineSvg.Helpers.svg_image(
                 LivedjWeb.Endpoint,
                 "back",
@@ -68,7 +73,7 @@
               <a
                 href="#"
                 phx-click={on_pause_click_event()}
-                class="cursor-default rounded-full"
+                class="cursor-default rounded-full h-8 w-8 flex justify-center items-center"
                 tabindex="0"
               >
                 <.icon
@@ -81,7 +86,7 @@
               <a
                 href="#"
                 phx-click={on_play_click_event()}
-                class="cursor-default rounded-full"
+                class="cursor-default rounded-full h-8 w-8 flex justify-center items-center"
                 tabindex="0"
               >
                 <.icon
@@ -90,7 +95,12 @@
                 />
               </a>
             <% end %>
-            <a href="#" phx-click="next" class="cursor-default" tabindex="0">
+            <a
+              href="#"
+              phx-click="next"
+              class="cursor-default h-8 w-8 flex justify-center items-center"
+              tabindex="0"
+            >
               <%= PhoenixInlineSvg.Helpers.svg_image(
                 LivedjWeb.Endpoint,
                 "next",