Add favorite page #33

prayag17 · Oct 7, 2023 · 48d0354 · 48d0354
1 parent 5f394c0
commit 48d0354
Show file tree

Hide file tree

Showing 5 changed files with 358 additions and 15 deletions.
diff --git a/src/components/appBar/appBar.jsx b/src/components/appBar/appBar.jsx
@@ -158,7 +158,7 @@ export const AppBar = () => {
 						<IconButton onClick={() => navigate("/search")}>
 							<MdiMagnify />
 						</IconButton>
-						<IconButton disabled>
+						<IconButton onClick={() => navigate("/favorite")}>
 							<MdiHeartOutline />
 						</IconButton>
 						<IconButton

diff --git a/src/routes/album/album.module.scss b/src/routes/album/album.module.scss
@@ -1,5 +1,7 @@
 /** @format */
 
+$border-radius: 20px;
+
 .item-detail-album {
 	&-track {
 		display: grid;
@@ -9,22 +11,30 @@
 		gap: 0.5em;
 		width: 100%;
 		padding: 0.25em 0;
-		background: rgb(255 255 255 / 0);
+		background: hsl(256, 100%, 4%, 40%);
 		transition: background $transition-time-default;
 
-		&:first-child,
+		&:first-child {
+			border-radius: $border-radius $border-radius 8px 8px;
+			cursor: default !important;
+		}
+
 		&:last-child {
-			border-bottom: none;
+			border-radius: 8px 8px $border-radius $border-radius;
 		}
-		border-bottom: 1px solid rgb(255 255 255 / 0.05);
+		border-radius: 8px;
+
 		&s {
-			border-radius: 10px !important;
-			overflow: hidden !important;
-			background: $clr-background-dark-opacity-0_8 !important;
+			background: transparent !important;
+			box-shadow: none !important;
+			display: flex;
+			flex-direction: column;
+			gap: 5px;
 		}
 
 		&:hover {
-			background: rgb(255 255 255 / 0.05);
+			background: hsl(256, 100%, 4%, 50%);
+			cursor: pointer;
 		}
 
 		&.playing {

diff --git a/src/routes/album/index.jsx b/src/routes/album/index.jsx
@@ -1,5 +1,5 @@
 /** @format */
-import { useEffect } from "react";
+import React, { useEffect } from "react";
 import PropTypes from "prop-types";
 
 import Box from "@mui/material/Box";
@@ -211,9 +211,7 @@ const MusicAlbumTitlePage = () => {
 								style={{
 									padding: "0.75em 0 ",
 									background:
-										"rgb(255 255 255 / 0.1)",
-									boxShadow:
-										"0 0 10px rgb(0 0 0 / 0.5)",
+										"hsl(256, 100%, 4%, 60%)",
 								}}
 							>
 								<Typography