refactor: fix styling of music cards

components/feed/DeleteButton.tsx

@@ -6,8 +6,6 @@ import { useState, useTransition } from "react";
 import deleteFeedItem from "@/lib/feed/deleteFeedItem";
 import unsaveFeedItem from "@/lib/savedFeedItems/unsaveFeedItem";
 
-import { TrashSolid } from "../ui/favoriteIcon/icons";
-
 const DeleteButton = ({
   userId,
   postId,
@@ -41,7 +39,15 @@ const DeleteButton = ({
       className={`${isMutating ? "loading" : ""} btn btn-ghost btn-secondary`}
       title="Delete feed item"
     >
-      <TrashSolid />
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 448 512"
+        className="fill-current stroke-current"
+        width={24}
+        height="24"
+      >
+        <path d="M135.2 17.7C140.6 6.8 151.7 0 163.8 0H284.2c12.1 0 23.2 6.8 28.6 17.7L320 32h96c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 96 0 81.7 0 64S14.3 32 32 32h96l7.2-14.3zM32 128H416V448c0 35.3-28.7 64-64 64H96c-35.3 0-64-28.7-64-64V128zm96 64c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16zm96 0c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16zm96 0c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16z" />
+      </svg>
     </button>
   );
 };

components/feed/FeedItem.tsx

@@ -1,4 +1,9 @@
-import { Album, Artist, Playlist, Track } from "@/components/music/cards";
+import {
+  AlbumCard,
+  ArtistCard,
+  PlaylistCard,
+  TrackCard,
+} from "@/components/music/cards";
 import ProfileImage from "@/components/profile/ProfileImage";
 import UsernameLink from "@/components/ui/UsernameLink";
 
@@ -42,20 +47,16 @@ const FeedItem = ({
       {data.musicItem && (
         <div className="grid mt-2">
           {data.musicItem.type === "track" && (
-            // @ts-expect-error Server Component
-            <Track track={data.musicItem} isCompact />
+            <TrackCard track={data.musicItem} isCompact />
           )}
           {data.musicItem.type === "playlist" && (
-            // @ts-expect-error Server Component
-            <Playlist playlist={data.musicItem} isCompact />
+            <PlaylistCard playlist={data.musicItem} isCompact />
           )}
           {data.musicItem.type === "album" && (
-            // @ts-expect-error Server Component
-            <Album album={data.musicItem} isCompact />
+            <AlbumCard album={data.musicItem} isCompact />
           )}
           {data.musicItem.type === "artist" && (
-            // @ts-expect-error Server Component
-            <Artist artist={data.musicItem} isCompact />
+            <ArtistCard artist={data.musicItem} isCompact />
           )}
         </div>
       )}

components/music/MusicHeader.tsx

@@ -1,10 +1,9 @@
 import Link from "next/link";
 
-import ShareIcon from "../ui/shareIcon";
-
+import PlayButton from "./buttons/PlayButton";
+import ShareButton from "./buttons/ShareButton";
 import MusicButtons from "./MusicButtons";
 import MusicImage from "./MusicImage";
-import PlayButton from "./PlayButton";
 
 type CardProps = {
   imageUrl: string | undefined;
@@ -73,7 +72,7 @@ const HeaderCard = ({
       <div className="btn-group pt-4">
         <PlayButton contextUri={playbuttonContext} />
         {/* @ts-expect-error Server Component */}
-        <ShareIcon musicItemId={musicItemId} musicItemType={musicItemType} />
+        <ShareButton musicItemId={musicItemId} musicItemType={musicItemType} />
       </div>
     </div>
     <div className="flex flex-col justify-between">

components/music/buttons/FavoriteButton/icons.tsx

@@ -0,0 +1,27 @@
+// Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc.
+
+const REGULAR_SIZE = 24;
+const SMALL_SIZE = 20;
+export const HeartRegular = ({ small }: { small?: boolean }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 512 512"
+    className="stroke-current fill-current"
+    height={small ? SMALL_SIZE : REGULAR_SIZE}
+    width={small ? SMALL_SIZE : REGULAR_SIZE}
+  >
+    <path d="M225.8 468.2l-2.5-2.3L48.1 303.2C17.4 274.7 0 234.7 0 192.8v-3.3c0-70.4 50-130.8 119.2-144C158.6 37.9 198.9 47 231 69.6c9 6.4 17.4 13.8 25 22.3c4.2-4.8 8.7-9.2 13.5-13.3c3.7-3.2 7.5-6.2 11.5-9c0 0 0 0 0 0C313.1 47 353.4 37.9 392.8 45.4C462 58.6 512 119.1 512 189.5v3.3c0 41.9-17.4 81.9-48.1 110.4L288.7 465.9l-2.5 2.3c-8.2 7.6-19 11.9-30.2 11.9s-22-4.2-30.2-11.9zM239.1 145c-.4-.3-.7-.7-1-1.1l-17.8-20c0 0-.1-.1-.1-.1c0 0 0 0 0 0c-23.1-25.9-58-37.7-92-31.2C81.6 101.5 48 142.1 48 189.5v3.3c0 28.5 11.9 55.8 32.8 75.2L256 430.7 431.2 268c20.9-19.4 32.8-46.7 32.8-75.2v-3.3c0-47.3-33.6-88-80.1-96.9c-34-6.5-69 5.4-92 31.2c0 0 0 0-.1 .1s0 0-.1 .1l-17.8 20c-.3 .4-.7 .7-1 1.1c-4.5 4.5-10.6 7-16.9 7s-12.4-2.5-16.9-7z" />
+  </svg>
+);
+
+export const HeartSolid = ({ small }: { small?: boolean }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 512 512"
+    className="stroke-current fill-current"
+    height={small ? SMALL_SIZE : REGULAR_SIZE}
+    width={small ? SMALL_SIZE : REGULAR_SIZE}
+  >
+    <path d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z" />
+  </svg>
+);

components/ui/favoriteIcon/index.tsx → components/music/buttons/FavoriteButton/index.tsx

@@ -7,12 +7,14 @@ import toggleFavorite from "@/lib/favoriteTracks/toggleFavorite";
 
 import { HeartRegular, HeartSolid } from "./icons";
 
-const FavoriteIcon = ({
+const FavoriteButton = ({
   isFavorited,
   trackId,
+  small,
 }: {
   isFavorited: boolean;
   trackId: string;
+  small?: boolean;
 }) => {
   const router = useRouter();
   const [isPending, startTransition] = useTransition();
@@ -34,15 +36,19 @@ const FavoriteIcon = ({
 
   return (
     <button
-      className={`btn btn-ghost ${isMutating ? "loading" : ""}`}
+      className={`btn btn-ghost btn-square ${isMutating ? "loading" : ""}`}
       onClick={(e) => void handleClick(e)}
       type="button"
       disabled={isMutating}
       title="Favorite song on Spotify"
     >
-      {isFavorited ? <HeartSolid /> : <HeartRegular />}
+      {isFavorited ? (
+        <HeartSolid small={small} />
+      ) : (
+        <HeartRegular small={small} />
+      )}
     </button>
   );
 };
 
-export default FavoriteIcon;
+export default FavoriteButton;

components/music/buttons/PlayButton/PlayIcon.tsx

@@ -0,0 +1,17 @@
+// Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc.
+
+const REGULAR_SIZE = 24;
+const SMALL_SIZE = 20;
+const PlayIcon = ({ small }: { small?: boolean }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 384 512"
+    className="stroke-current fill-current"
+    height={small ? SMALL_SIZE : REGULAR_SIZE}
+    width={small ? SMALL_SIZE : REGULAR_SIZE}
+  >
+    <path d="M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80V432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z" />
+  </svg>
+);
+
+export default PlayIcon;

components/music/PlayButton.tsx → components/music/buttons/PlayButton/index.tsx

@@ -9,7 +9,11 @@ import PlayIcon from "./PlayIcon";
 
 import type { StartPlayingContextParams } from "@/lib/music/startPlaying";
 
-const PlayButton = (params: StartPlayingContextParams) => {
+type PlayButtonProps = {
+  small?: boolean;
+} & StartPlayingContextParams;
+const PlayButton = (props: PlayButtonProps) => {
+  const { small, ...params } = props;
   const {
     currentDeviceState: [currentDeviceId],
   } = usePlayer();
@@ -28,13 +32,13 @@ const PlayButton = (params: StartPlayingContextParams) => {
 
   return (
     <button
-      className={`btn btn-ghost ${isFetching ? "loading" : ""}`}
+      className={`btn btn-ghost btn-square ${isFetching ? "loading" : ""}`}
       onClick={(e) => void handleClick(e)}
       type="button"
       disabled={isFetching}
       title="Play"
     >
-      <PlayIcon />
+      <PlayIcon small={small} />
     </button>
   );
 };

components/ui/shareIcon/IconButton.tsx → components/music/buttons/ShareButton/ModalButton.tsx

@@ -3,18 +3,20 @@
 import { useState } from "react";
 
 import AddContent from "./AddContent";
-import Share from "./icon";
+import ShareIcon from "./ShareIcon";
 
 import type { User } from "next-auth";
 
-const IconButton = ({
+const ModalButton = ({
   user,
   musicItemId,
   musicItemType,
+  small,
 }: {
   user: User;
   musicItemId?: string;
   musicItemType?: "track" | "playlist" | "artist" | "album";
+  small?: boolean;
 }) => {
   const [modal, toggleModal] = useState(false);
 
@@ -25,12 +27,12 @@ const IconButton = ({
   return (
     <>
       <button
-        className="btn btn-ghost"
+        className="btn btn-ghost btn-square"
         onClick={handleClick}
         type="button"
         title="Share to feed"
       >
-        <Share />
+        <ShareIcon small={small} />
       </button>
 
       {modal && (
@@ -46,4 +48,4 @@ const IconButton = ({
   );
 };
 
-export default IconButton;
+export default ModalButton;

components/ui/shareIcon/icon.tsx → components/music/buttons/ShareButton/ShareIcon.tsx

@@ -1,15 +1,17 @@
 // Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc.
 
-const Share = () => (
+const REGULAR_SIZE = 24;
+const SMALL_SIZE = 20;
+const ShareIcon = ({ small }: { small?: boolean }) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 512 512"
     className="stroke-current fill-current"
-    height={24}
-    width={24}
+    height={small ? SMALL_SIZE : REGULAR_SIZE}
+    width={small ? SMALL_SIZE : REGULAR_SIZE}
   >
     <path d="M307 34.8c-11.5 5.1-19 16.6-19 29.2v64H176C78.8 128 0 206.8 0 304C0 417.3 81.5 467.9 100.2 478.1c2.5 1.4 5.3 1.9 8.1 1.9c10.9 0 19.7-8.9 19.7-19.7c0-7.5-4.3-14.4-9.8-19.5C108.8 431.9 96 414.4 96 384c0-53 43-96 96-96h96v64c0 12.6 7.4 24.1 19 29.2s25 3 34.4-5.4l160-144c6.7-6.1 10.6-14.7 10.6-23.8s-3.8-17.7-10.6-23.8l-160-144c-9.4-8.5-22.9-10.6-34.4-5.4z" />
   </svg>
 );
 
-export default Share;
+export default ShareIcon;

components/ui/shareIcon/index.tsx → components/music/buttons/ShareButton/index.tsx

@@ -1,23 +1,26 @@
 import { getCurrentUser } from "@/lib/getUser";
 
-import IconButton from "./IconButton";
+import ModalButton from "./ModalButton";
 
-const ShareIcon = async ({
+const ShareButton = async ({
   musicItemId,
   musicItemType,
+  small,
 }: {
   musicItemId?: string;
   musicItemType?: "track" | "playlist" | "artist" | "album";
+  small?: boolean;
 }) => {
   const user = await getCurrentUser();
 
   return (
-    <IconButton
+    <ModalButton
       user={user}
       musicItemId={musicItemId}
       musicItemType={musicItemType}
+      small={small}
     />
   );
 };
 
-export default ShareIcon;
+export default ShareButton;