From d3e8f713ab08bbe2cc300fa667f93800a01b6dee Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Mon, 23 Dec 2024 02:54:12 +0100
Subject: [PATCH] Add elevation to reader mobile overlay

---
 .../reader/components/overlay/ReaderOverlayHeaderMobile.tsx  | 1 +
 .../overlay/navigation/mobile/ReaderBottomBarMobile.tsx      | 1 +
 .../progress-bar/variants/MobileReaderProgressBar.tsx        | 5 +++--
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/modules/reader/components/overlay/ReaderOverlayHeaderMobile.tsx b/src/modules/reader/components/overlay/ReaderOverlayHeaderMobile.tsx
index 8ca951c1..defd65e1 100644
--- a/src/modules/reader/components/overlay/ReaderOverlayHeaderMobile.tsx
+++ b/src/modules/reader/components/overlay/ReaderOverlayHeaderMobile.tsx
@@ -79,6 +79,7 @@ const BaseReaderOverlayHeaderMobile = ({
                     pt: (theme) => `max(env(safe-area-inset-top), ${theme.spacing(2)})`,
                     backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.95),
                     pointerEvents: 'all',
+                    boxShadow: 2,
                 }}
             >
                 <Tooltip title={t('reader.button.exit')}>
diff --git a/src/modules/reader/components/overlay/navigation/mobile/ReaderBottomBarMobile.tsx b/src/modules/reader/components/overlay/navigation/mobile/ReaderBottomBarMobile.tsx
index 5d95b6f7..08a17bd7 100644
--- a/src/modules/reader/components/overlay/navigation/mobile/ReaderBottomBarMobile.tsx
+++ b/src/modules/reader/components/overlay/navigation/mobile/ReaderBottomBarMobile.tsx
@@ -66,6 +66,7 @@ const BaseReaderBottomBarMobile = ({
                             alignItems: 'center',
                             backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.95),
                             pb: `max(${scrollbarXSize}px, env(safe-area-inset-bottom))`,
+                            boxShadow: 2,
                         }}
                     >
                         <Stack
diff --git a/src/modules/reader/components/overlay/progress-bar/variants/MobileReaderProgressBar.tsx b/src/modules/reader/components/overlay/progress-bar/variants/MobileReaderProgressBar.tsx
index 12acb6bb..7ba07c7b 100644
--- a/src/modules/reader/components/overlay/progress-bar/variants/MobileReaderProgressBar.tsx
+++ b/src/modules/reader/components/overlay/progress-bar/variants/MobileReaderProgressBar.tsx
@@ -68,7 +68,7 @@ const BaseMobileReaderProgressBar = ({
                 <IconButton
                     onClick={openPreviousChapter}
                     disabled={!previousChapter}
-                    sx={{ backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.85) }}
+                    sx={{ backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.85), boxShadow: 2 }}
                 >
                     {getOptionForDirection(<SkipPreviousIcon />, <SkipNextIcon />, direction)}
                 </IconButton>
@@ -119,6 +119,7 @@ const BaseMobileReaderProgressBar = ({
                                 alignItems: 'stretch',
                                 backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.85),
                                 borderRadius: 100,
+                                boxShadow: 2,
                             },
                         },
                         progressBarRoot: {
@@ -185,7 +186,7 @@ const BaseMobileReaderProgressBar = ({
                 <IconButton
                     onClick={openNextChapter}
                     disabled={!nextChapter}
-                    sx={{ backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.85) }}
+                    sx={{ backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.85), boxShadow: 2 }}
                 >
                     {getOptionForDirection(<SkipNextIcon />, <SkipPreviousIcon />, direction)}
                 </IconButton>