Make minimized standard progress bar gaps transparent

src/modules/reader/components/overlay/progress-bar/desktop/ReaderProgressBarSlotDesktop.tsx

@@ -12,7 +12,6 @@ import { memo } from 'react';
 import { applyStyles } from '@/modules/core/utils/ApplyStyles.ts';
 import { ReaderProgressBarSlot } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBarSlot.tsx';
 import { IReaderSettings } from '@/modules/reader/types/Reader.types.ts';
-import { getProgressBarPositionInfo } from '@/modules/reader/utils/ReaderProgressBar.utils.tsx';
 
 export const ReaderProgressBarSlotDesktop = memo(
     ({
@@ -22,8 +21,6 @@ export const ReaderProgressBarSlotDesktop = memo(
         secondaryPageLoadState,
         progressBarPosition,
         isCurrentPage,
-        isFirstPage,
-        isLastPage,
         isLeadingPage,
         showDraggingStyle,
     }: Pick<IReaderSettings, 'progressBarPosition'> & {
@@ -32,15 +29,11 @@ export const ReaderProgressBarSlotDesktop = memo(
         primaryPageLoadState: boolean;
         secondaryPageLoadState?: boolean;
         isCurrentPage: boolean;
-        isFirstPage: boolean;
-        isLastPage: boolean;
         isLeadingPage: boolean;
         showDraggingStyle: boolean;
     }) => {
         const theme = useTheme();
 
-        const { isVertical, isHorizontal } = getProgressBarPositionInfo(progressBarPosition);
-
         return (
             <ReaderProgressBarSlot
                 key={pageUrl}
@@ -51,16 +44,6 @@ export const ReaderProgressBarSlotDesktop = memo(
                         sx: {
                             cursor: 'pointer',
                             backgroundColor: darken(theme.palette.background.paper, 0.2),
-                            ...applyStyles(isHorizontal, {
-                                borderLeftWidth: 2,
-                                borderLeftColor: 'background.paper',
-                                borderLeftStyle: 'solid',
-                            }),
-                            ...applyStyles(isVertical, {
-                                borderTopWidth: 2,
-                                borderTopColor: 'background.paper',
-                                borderTopStyle: 'solid',
-                            }),
                             ...theme.applyStyles('dark', {
                                 backgroundColor: lighten(theme.palette.background.paper, 0.1),
                             }),
@@ -73,8 +56,6 @@ export const ReaderProgressBarSlotDesktop = memo(
                                     }),
                                 },
                             ),
-                            borderLeftWidth: isFirstPage ? 0 : undefined,
-                            borderRightWidth: isLastPage ? 0 : undefined,
                         },
                     },
                     tooltip: {

src/modules/reader/components/overlay/progress-bar/variants/StandardReaderProgressBar.tsx

@@ -59,13 +59,13 @@ const BaseStandardReaderProgressBar = ({
                 createProgressBarSlot={useCallback(
                     (
                         page,
-                        pagesIndex,
+                        _pagesIndex,
                         primaryPageLoadState,
                         secondaryPageLoadState,
                         isCurrentPage,
                         isLeadingPage,
-                        _,
+                        _isTrailingPage,
-                        totalPages_,
+                        _totalPages,
                         showDraggingStyle,
                     ) => (
                         <ReaderProgressBarSlotDesktop
@@ -75,8 +75,6 @@ const BaseStandardReaderProgressBar = ({
                             secondaryPageLoadState={secondaryPageLoadState}
                             progressBarPosition={progressBarPosition}
                             isCurrentPage={isCurrentPage}
-                            isFirstPage={pagesIndex === 0}
-                            isLastPage={pagesIndex === totalPages_ - 1}
                             isLeadingPage={isLeadingPage}
                             showDraggingStyle={showDraggingStyle}
                         />
@@ -182,6 +180,7 @@ const BaseStandardReaderProgressBar = ({
                     },
                     progressBarSlotsContainer: {
                         sx: {
+                            gap: 0.25,
                             borderRadius: 2,
                             transition: 'height 0.1s ease-in-out',
                             ...applyStyles(isHorizontal, {