chore(icon): update icon names

[Heroicons v2][0] represents a new set of icons. So, to keep everything
working, some names needed to be changed to match the new pattern.

[0]: https://github.com/tailwindlabs/heroicons/releases/tag/v2.0.0

lib/live_beats_web/components/core_components.ex

@@ -91,7 +91,7 @@ defmodule LiveBeatsWeb.CoreComponents do
           type="button"
           class="inline-flex bg-red-50 rounded-md p-1.5 text-red-500 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-red-50 focus:ring-red-600"
         >
-          <.icon name={:x} class="w-4 h-4" />
+          <.icon name={:x_mark} class="w-4 h-4" />
         </button>
       </div>
     </div>
@@ -116,7 +116,7 @@ defmodule LiveBeatsWeb.CoreComponents do
           type="button"
           class="inline-flex bg-green-50 rounded-md p-1.5 text-green-500 hover:bg-green-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-green-50 focus:ring-green-600"
         >
-          <.icon name={:x} class="w-4 h-4" />
+          <.icon name={:x_mark} class="w-4 h-4" />
         </button>
       </div>
     </div>

lib/live_beats_web/components/layouts.ex

@@ -45,7 +45,7 @@ defmodule LiveBeatsWeb.Layouts do
           aria-current={if @active_tab == :profile, do: "true", else: "false"}
         >
           <.icon
-            name={:music_note}
+            name={:musical_note}
             outlined
             class="text-gray-400 group-hover:text-gray-500 mr-3 flex-shrink-0 h-6 w-6"
           /> My Songs
@@ -59,7 +59,7 @@ defmodule LiveBeatsWeb.Layouts do
           aria-current={if @active_tab == :settings, do: "true", else: "false"}
         >
           <.icon
-            name={:adjustments}
+            name={:adjustments_vertical}
             outlined
             class="text-gray-400 group-hover:text-gray-500 mr-3 flex-shrink-0 h-6 w-6"
           /> Settings

lib/live_beats_web/components/layouts/live.html.heex

@@ -42,7 +42,7 @@
 
     <div class="flex-shrink-0 flex items-center px-4">
       <.link navigate={home_path(@current_user)}>
-        <.icon name={:status_online} class="w-8 h-8 text-purple-600 -mt-2 inline-block" outlined />
+        <.icon name={:signal} class="w-8 h-8 text-purple-600 -mt-2 inline-block" outlined />
         <span class="h-8 w-auto text-2xl ml-1 font-bold">
           LiveBeats
         </span>
@@ -71,7 +71,7 @@
   <div class="flex flex-col w-64 border-r border-gray-200 pt-5 pb-4 bg-gray-100">
     <div class="flex items-center flex-shrink-0 px-6">
       <.link navigate={home_path(@current_user)}>
-        <.icon name={:status_online} class="w-8 h-8 text-purple-600 -mt-2 inline-block" outlined />
+        <.icon name={:signal} class="w-8 h-8 text-purple-600 -mt-2 inline-block" outlined />
         <span class="h-8 w-auto text-2xl ml-1 font-bold">
           LiveBeats
         </span>

lib/live_beats_web/live/profile_live.ex

@@ -37,7 +37,7 @@ defmodule LiveBeatsWeb.ProfileLive do
           </span>
         </div>
         <.link href={@profile.external_homepage_url} target="_blank" class="text-sm text-gray-600">
-          <.icon name={:code} /> <span class=""><%= url_text(@profile.external_homepage_url) %></span>
+          <.icon name={:code_bracket} /> <span class=""><%= url_text(@profile.external_homepage_url) %></span>
         </.link>
       </div>
       <:actions>
@@ -49,7 +49,7 @@ defmodule LiveBeatsWeb.ProfileLive do
               JS.push("switch_profile", value: %{user_id: nil}, target: "#player", loading: "#player")
             }
           >
-            <.icon name={:stop} /><span class="ml-2">Stop Listening</span>
+            <.icon name={:stop_circle} /><span class="ml-2">Stop Listening</span>
           </.button>
         <% else %>
           <.button
@@ -63,7 +63,7 @@ defmodule LiveBeatsWeb.ProfileLive do
               )
             }
           >
-            <.icon name={:play} /><span class="ml-2">Listen</span>
+            <.icon name={:play_circle} /><span class="ml-2">Listen</span>
           </.button>
         <% end %>
         <.button
@@ -72,7 +72,7 @@ defmodule LiveBeatsWeb.ProfileLive do
           primary
           phx-click={show_modal("upload") |> JS.patch(profile_upload_path(@current_user))}
         >
-          <.icon name={:upload} /><span class="ml-2">Upload Songs</span>
+          <.icon name={:arrow_up_tray} /><span class="ml-2">Upload Songs</span>
         </.button>
       </:actions>
     </.title_bar>
@@ -110,7 +110,7 @@ defmodule LiveBeatsWeb.ProfileLive do
     </div>
 
     <div :if={@songs_count == 0} class="my-2 text-center">
-      <.icon name={:music_note} class="mx-auto h-12 w-12 text-gray-400" />
+      <.icon name={:musical_note} class="mx-auto h-12 w-12 text-gray-400" />
       <h3 class="mt-2 text-sm font-semibold text-gray-900">No music</h3>
       <p class="mt-1 text-sm text-gray-500">Get started by uploading a new playlist</p>
       <div class="mt-6">
@@ -118,7 +118,7 @@ defmodule LiveBeatsWeb.ProfileLive do
           primary
           phx-click={show_modal("upload") |> JS.patch(profile_upload_path(@current_user))}
         >
-          <.icon name={:upload} />
+          <.icon name={:arrow_up_tray} />
           <span class="ml-2">Upload songs</span>
         </.button>
       </div>
@@ -150,11 +150,11 @@ defmodule LiveBeatsWeb.ProfileLive do
         >
           <span :if={song.status == :playing} class="flex pt-1 relative mr-2 w-4">
             <span class="w-3 h-3 animate-ping bg-purple-400 rounded-full absolute"></span>
-            <.icon name={:volume_up} class="h-5 w-5 -mt-1 -ml-1" aria-label="Playing" role="button" />
+            <.icon name={:speaker_wave} class="h-5 w-5 -mt-1 -ml-1" aria-label="Playing" role="button" />
           </span>
           <span :if={song.status == :paused} class="flex pt-1 relative mr-2 w-4">
             <.icon
-              name={:volume_up}
+              name={:speaker_wave}
               class="h-5 w-5 -mt-1 -ml-1 text-gray-400"
               aria-label="Paused"
               role="button"
@@ -163,7 +163,7 @@ defmodule LiveBeatsWeb.ProfileLive do
           <span :if={song.status == :stopped} class="flex relative w-6 -translate-x-1">
             <.icon
               :if={@owns_profile?}
-              name={:play}
+              name={:play_circle}
               class="h-5 w-5 text-gray-400"
               aria-label="Play"
               role="button"

lib/live_beats_web/live/profile_live/song_row_component.ex

@@ -21,7 +21,7 @@ defmodule LiveBeatsWeb.ProfileLive.SongRowComponent do
                 <span class="flex pt-1 relative mr-2 w-4">
                   <span class="w-3 h-3 animate-ping bg-purple-400 rounded-full absolute"></span>
                   <.icon
-                    name={:volume_up}
+                    name={:speaker_wave}
                     class="h-5 w-5 -mt-1 -ml-1"
                     aria-label="Playing"
                     role="button"
@@ -31,7 +31,7 @@ defmodule LiveBeatsWeb.ProfileLive.SongRowComponent do
               <%= if @status == :paused do %>
                 <span class="flex pt-1 relative mr-2 w-4">
                   <.icon
-                    name={:volume_up}
+                    name={:speaker_wave}
                     class="h-5 w-5 -mt-1 -ml-1 text-gray-400"
                     aria-label="Paused"
                     role="button"