feat(ui): restyle core views with Material You

src/features/reader/overlay/navigation/desktop/ReaderNavBarDesktop.tsx

@@ -34,6 +34,7 @@ import {
     useReaderSettingsStore,
     useReaderStore,
 } from '@/features/reader/stores/ReaderStore.ts';
+import { MATERIAL_YOU_VISUALS } from '@/features/theme/services/MaterialYouVisualTokens.ts';
 
 const useGetPreviousNavBarStaticValue = (isVisible: boolean, isStaticNav: boolean) => {
     const wasNavBarStaticRef = useRef(isStaticNav);
@@ -104,6 +105,12 @@ const BaseReaderNavBarDesktop = ({
             slotProps={{
                 paper: {
                     ref: (ref: HTMLDivElement | null) => setNavBarElement(ref),
+                    sx: {
+                        m: 1,
+                        height: 'calc(100% - 16px)',
+                        borderRadius: `${MATERIAL_YOU_VISUALS.detailRadius}px`,
+                        overflow: 'hidden',
+                    },
                 },
                 transition: {
                     unmountOnExit: true,
@@ -111,7 +118,7 @@ const BaseReaderNavBarDesktop = ({
             }}
         >
             <ReaderNavContainer sx={{ backgroundColor: 'background.paper', pointerEvents: 'all' }}>
-                <Stack sx={{ p: 2, gap: 2, backgroundColor: 'action.hover' }}>
+                <Stack sx={{ p: 2, gap: 2, backgroundColor: 'action.selected' }}>
                     <Stack sx={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
                         <ReaderExitButton />
                         <CustomTooltip title={t`Static navigation`}>