Add full app backdrop

prayag17 · Aug 14, 2023 · 94e7ea9 · 94e7ea9
1 parent 73085f7
commit 94e7ea9
Show file tree

Hide file tree

Showing 7 changed files with 436 additions and 451 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -359,33 +359,34 @@ function App() {
 						</Button>
 					</DialogActions>
 				</Dialog>
-				<AnimatePresence>
+				<AnimatePresence wait>
+					<Box className="app-backdrop-container">
+						<motion.img
+							key={backdropId}
+							src={backdropUrl}
+							alt=""
+							className="app-backdrop"
+							initial={{
+								opacity: 0,
+							}}
+							animate={{
+								opacity: 0.5,
+							}}
+							exit={{
+								opacity: 0,
+							}}
+							transition={{
+								duration: 1,
+							}}
+							loading="eager"
+						/>
+					</Box>
 					<div
 						style={{
 							display: "flex",
 							width: "calc(100vw - 14px)",
 						}}
 					>
-						<Box className="app-backdrop-container">
-							<motion.img
-								key={backdropId}
-								src={backdropUrl}
-								alt=""
-								className="app-backdrop"
-								initial={{
-									opacity: 0,
-								}}
-								animate={{
-									opacity: 0.5,
-								}}
-								exit={{
-									opacity: 0,
-								}}
-								transition={{
-									duration: 1,
-								}}
-							/>
-						</Box>
 						<CssBaseline />
 						<SideMenu />
 						<AppBar />

diff --git a/src/components/menu/sidemenu.jsx b/src/components/menu/sidemenu.jsx
@@ -129,8 +129,10 @@ export const SideMenu = ({}) => {
 						},
 					}}
 					sx={{
+						zIndex: 1,
 						width: `calc(${theme.spacing(7)} + 10px)`,
-						background: theme.palette.background.paper,
+						background:
+							"linear-gradient(to right, rgb(0 0 0 /  0.35) , transparent) !important ",
 					}}
 				>
 					<DrawerHeader
@@ -139,7 +141,6 @@ export const SideMenu = ({}) => {
 							justifyContent: "center",
 						}}
 					></DrawerHeader>
-					<Divider />
 					{libraries.isLoading ? (
 						<>
 							<Skeleton
@@ -207,7 +208,6 @@ export const SideMenu = ({}) => {
 								)}
 							</List>
 							<List sx={{ marginTop: "auto" }}>
-								<Divider />
 								<Tooltip
 									title="Home"
 									placement="right"

diff --git a/src/components/skeleton/carousel.jsx b/src/components/skeleton/carousel.jsx
@@ -7,9 +7,13 @@ import { theme } from "../../theme";
 export const CarouselSkeleton = () => {
 	return (
 		<Paper
-			className="hero-carousel-slide"
+			className="hero-carousel-skeleton"
+			elevation={0}
 			sx={{
+				height: "100vh",
+				position: "relative",
 				background: theme.palette.primary.background.main,
+				borderRadius: 0,
 			}}
 		>
 			<div className="hero-carousel-background">

diff --git a/src/routes/home/home.module.scss b/src/routes/home/home.module.scss
@@ -43,12 +43,16 @@
 			right: 0;
 			bottom: 0;
 			opacity: 0.8;
-			mask-image: linear-gradient(to bottom, black, transparent);
+			mask-image: linear-gradient(to bottom, black 40%, transparent),
+				linear-gradient(to left, black 40%, transparent);
 			-webkit-mask-image: linear-gradient(
-				to bottom,
-				black,
-				transparent
-			);
+					to bottom,
+					black 40%,
+					transparent
+				),
+				linear-gradient(to left, black 40%, transparent);
+			mask-composite: source-in;
+			-webkit-mask-composite: source-in;
 		}
 		&-image {
 			position: absolute;