new icons

Satyam1923 · Jun 18, 2024 · 471888c · 471888c
1 parent 83634d2
commit 471888c
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 1,103 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
     "@fortawesome/free-brands-svg-icons": "^6.5.2",
+    "@fortawesome/free-regular-svg-icons": "^6.5.2",
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "@fortawesome/react-fontawesome": "^0.2.2",
     "@reduxjs/toolkit": "^2.2.5",
@@ -24,6 +25,7 @@
     "he": "^1.2.0",
     "lodash": "^4.17.21",
     "lottie-react": "^2.4.0",
+    "lucide-react": "^0.395.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-h5-audio-player": "^3.9.1",

diff --git a/frontend/src/components/Home/Home.jsx b/frontend/src/components/Home/Home.jsx
@@ -17,7 +17,7 @@ function Main() {
       {/* Middle */}
       <div className="w-full  mb-6  h-[25%]">
         <RecentlyPlayed />
-      </div>
+    </div>
 
       {/* Bottom */}
       <div className="h-[75%]  w-full">
@@ -54,7 +54,7 @@ function RecentlyPlayedElement({ name, image }) {
 function RecentlyPlayed() {
   return (
     <div className=" w-full h-full rounded-lg flex flex-col gap-2">
-      <h1 className="text-2xl font-medium text-left ml-1 text-white p-1">Recently Played</h1>
+      <h1 className="text-2xl w-[40%] font-medium text-left ml-1 text-white p-1">Recently Played</h1>
       <div className="flex flex-col gap-2 p-1 h-[80%] justify-between">
         <div className="flex justify-between gap-4 flex-wrap">
           <RecentlyPlayedElement

diff --git a/frontend/src/components/MusicPlayer.jsx b/frontend/src/components/MusicPlayer.jsx
@@ -4,6 +4,7 @@ import { AiFillLike } from "react-icons/ai";
 import AudioPlayer from "react-h5-audio-player";
 import "react-h5-audio-player/src/styles.scss";
 import "./styles.scss";
+import {CirclePlay,CirclePause,Rewind,VolumeX,Volume2,FastForward,Repeat2} from "lucide-react";
 
 function MusicPlayer({ currSong, shouldAutoPlay }) {
   const songName = currSong.name || "Reminder";
@@ -12,13 +13,24 @@ function MusicPlayer({ currSong, shouldAutoPlay }) {
   const artistName = currSong.artist || "The Weeknd";
   const audioUrl = currSong.url || "";
   const audioPlayerRef = useRef(null);
+
 
   useEffect(() => {
     if (audioPlayerRef.current && !shouldAutoPlay) {
       audioPlayerRef.current.audio.current.pause();
     }
   }, [currSong]);
 
+  const customIcons={
+    play:<CirclePlay />,
+    pause:<CirclePause />,
+    rewind:<Rewind />,
+    forward: <FastForward />,
+    loop:<Repeat2 />,
+    volume:<Volume2 />,
+    volumeMute: <VolumeX />
+  }
+
   return (
     <div className="bg-[#18181D] w-full h-full rounded-lg">
       <div className="flex flex-col h-full justify-between p-2">
@@ -47,6 +59,7 @@ function MusicPlayer({ currSong, shouldAutoPlay }) {
             autoPlay={false}
             className="rounded-lg bg-[#83ce89] text-black h-full"
             src={audioUrl}
+            customIcons={customIcons}
           />
         </div>
       </div>

diff --git a/frontend/src/components/Navbar.jsx b/frontend/src/components/Navbar.jsx
@@ -6,8 +6,14 @@ import { FaSearch } from "react-icons/fa";
 import { IoReorderThreeOutline } from "react-icons/io5";
 import { PiPlaylistBold } from "react-icons/pi";
 import { Link } from "react-router-dom";
+import { HiHome } from "react-icons/hi2";
+import { AiFillLike } from "react-icons/ai"
+import { IoAlbums } from "react-icons/io5";
+import { RiHome5Fill } from "react-icons/ri";
+
 
 function Navbar() {
+
   return (
     <div className="w-[5%] min-w-[70px] max-w-[80px] h-full rounded-lg">
       <div className="flex flex-col gap-3 w-full h-full">
@@ -22,10 +28,10 @@ function Navbar() {
         </Link>
         <div className="bg-[#18181D] flex p-4 pt-6 pb-6 flex-col gap-8 rounded-lg items-center justify-center hover:bg-gray-800">
           <Link to="/" className="w-full h-full hover:cursor-pointer">
-            <GoHome className="w-full h-full" />
+            <HiHome className="w-full h-full" />
           </Link>
-          <MdFavorite className="w-full h-full scale-[0.8] hover:cursor-pointer" />
-          <MdLibraryMusic className="w-full h-full scale-[0.8] hover:cursor-pointer" />
+          <AiFillLike className="w-full h-full scale-[0.8] hover:cursor-pointer" />
+          <IoAlbums className="w-full h-full scale-[0.8] hover:cursor-pointer" />
         </div>
         <div className="bg-[#18181D] flex p-4 pt-6 pb-6 flex-col gap-8 rounded-lg items-center justify-center hover:bg-gray-800">
           <PiPlaylistBold className="w-full h-full scale-[0.8] hover:cursor-pointer" />