feat: make some icons solid

AnthonyPorthouse · Nov 14, 2024 · 74f0294 · 74f0294
1 parent 7f40aab
commit 74f0294
Show file tree

Hide file tree

Showing 10 changed files with 22 additions and 14 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/Components/AlbumHeader.tsx b/src/Components/AlbumHeader.tsx
@@ -2,7 +2,7 @@ import type { SongIds, Songs } from "@api/types.js";
 import { useTrackList } from "@hooks/useTrackList.js";
 import { Link } from "@tanstack/react-router";
 import { Play, Shuffle } from "lucide-react";
-import { SyntheticEvent, memo, useMemo } from "react";
+import { SyntheticEvent, memo, useCallback, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 
 import AlbumArt from "./AlbumArt.js";
@@ -76,7 +76,12 @@ function AlbumHeader({ album, tracks }: Readonly<AlbumHeaderProps>) {
           <h3>{album.year}</h3>
           <div className="flex flex-col gap-2">
             <Button
-              renderIcon={() => <Play className="w-6" />}
+              renderIcon={useCallback(
+                () => (
+                  <Play className="w-6 fill-black" />
+                ),
+                [],
+              )}
               onClick={playAll}
             >
               <span className="flex-grow">{t("playAll")}</span>

diff --git a/src/Components/EpisodeListItem.tsx b/src/Components/EpisodeListItem.tsx
@@ -51,7 +51,7 @@ function EpisodeListItem({ episode }: Readonly<EpisodeListItemProps>) {
       className={`flex w-full flex-shrink-0 gap-6 md:block md:w-6`}
       title={t("media:playTrack")}
     >
-      <Play className={`w-6 flex-shrink-0 md:w-full`} />
+      <Play className={`w-6 flex-shrink-0 fill-black md:w-full`} />
       <span className={`truncate md:hidden`}>{episode.title}</span>
     </button>
   );
@@ -61,7 +61,9 @@ function EpisodeListItem({ episode }: Readonly<EpisodeListItemProps>) {
       className={`flex w-full flex-shrink-0 gap-6 md:block md:w-6`}
       title={`Currently Playing`}
     >
-      <Play className={`w-6 flex-shrink-0 text-green-400 md:w-full`} />
+      <Play
+        className={`w-6 flex-shrink-0 fill-green-400 text-green-400 md:w-full`}
+      />
       <span className={`truncate md:hidden`}>{episode.title}</span>
     </div>
   );

diff --git a/src/Components/MediaControls/FullscreenButton.tsx b/src/Components/MediaControls/FullscreenButton.tsx
@@ -1,5 +1,5 @@
 import { useFullscreen } from "@hooks/useFullscreen";
-import { Expand, Shrink } from "lucide-react";
+import { Fullscreen, Shrink } from "lucide-react";
 import { SyntheticEvent, memo } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -34,7 +34,7 @@ function FullscreenButton() {
       title={t("enterFullscreen")}
       onClick={fullScreen}
     >
-      <Expand className={`w-full`} />
+      <Fullscreen className={`w-full`} />
     </button>
   );
 }

diff --git a/src/Components/MediaControls/PauseButton.tsx b/src/Components/MediaControls/PauseButton.tsx
@@ -21,7 +21,7 @@ function PauseButton() {
       title={t("pauseTrack")}
       onClick={pause}
     >
-      <Pause className={`w-full`} />
+      <Pause fill="#000" className={`w-full`} />
     </button>
   );
 }

diff --git a/src/Components/MediaControls/PlayButton.tsx b/src/Components/MediaControls/PlayButton.tsx
@@ -19,7 +19,7 @@ function PlayButton() {
       title={t("playTrack")}
       onClick={play}
     >
-      <Play className={`w-full`} />
+      <Play className={`w-full fill-black`} />
     </button>
   );
 }

diff --git a/src/Components/MediaControls/SkipButton.tsx b/src/Components/MediaControls/SkipButton.tsx
@@ -18,7 +18,7 @@ function SkipButton() {
       className={`inline-block w-12`}
       title={t("nextTrack")}
     >
-      <SkipForward className={`w-full`} />
+      <SkipForward fill="#000" className={`w-full`} />
     </button>
   );
 }

diff --git a/src/Components/MediaControls/StopButton.tsx b/src/Components/MediaControls/StopButton.tsx
@@ -24,7 +24,7 @@ function StopButton() {
       title={t("stopTrack")}
       onClick={stop}
     >
-      <Square className={`w-full`} />
+      <Square fill="#000" className={`w-full`} />
     </button>
   );
 }

diff --git a/src/Components/TrackListItem.tsx b/src/Components/TrackListItem.tsx
@@ -49,7 +49,7 @@ function TrackListItem({
         data-tooltip-content={t("playTrack")}
         data-tooltip-delay-show={1000}
       >
-        <Play className={`w-6 md:w-full`} />
+        <Play className={`w-6 fill-black md:w-full`} />
       </a>
     </button>
   );
@@ -80,7 +80,7 @@ function TrackListItem({
         data-tooltip-content={t("currentlyPlaying")}
         data-tooltip-delay-show={1000}
       >
-        <Play className={`w-6 text-green-400 md:w-full`} />
+        <Play className={`w-6 fill-green-400 text-green-400 md:w-full`} />
       </a>
     </div>
   );

diff --git a/vite.config.ts b/vite.config.ts
@@ -14,7 +14,7 @@ import tsconfigPaths from "vite-tsconfig-paths";
 export default defineConfig({
   plugins: [
     MillionLint.vite({
-      enabled: false,
+      enabled: true,
     }),
     tsconfigPaths(),
     react(),
@@ -176,6 +176,6 @@ export default defineConfig({
     },
   },
   optimizeDeps: {
-    exclude: "node_modules/.cache/storybook",
+    exclude: ["node_modules/.cache/storybook"],
   },
 });