julienfroidefond/stripstream
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: update ControlButtons component styles for improved layout and consistency, adjusting icon sizes and padding

Browse Source
This commit is contained in:
Julien Froidefond
2025-10-18 21:39:16 +02:00
parent 0c0456aade
commit e1c53769cd
1 changed files with 28 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/reader/components/ControlButtons.tsx
View File

@@ -45,7 +45,7 @@ export const ControlButtons = ({
{/* Boutons de contrôle */} {/* Boutons de contrôle */}
<div <div
className={cn( className={cn(
"absolute top-4 left-1/2 -translate-x-1/2 z-30 flex items-center gap-2 transition-all duration-300 p-2 rounded-full bg-background/70 backdrop-blur-md", "absolute top-4 left-1/2 -translate-x-1/2 z-30 flex items-center gap-1.5 transition-all duration-300 p-1.5 rounded-full bg-background/70 backdrop-blur-md",
showControls ? "opacity-100" : "opacity-0 pointer-events-none" showControls ? "opacity-100" : "opacity-0 pointer-events-none"
)} )}
onClick={(e) => { onClick={(e) => {
@@ -66,8 +66,8 @@ export const ControlButtons = ({
? "reader.controls.doublePage.disable" ? "reader.controls.doublePage.disable"
: "reader.controls.doublePage.enable" : "reader.controls.doublePage.enable"
)} )}
iconClassName="h-6 w-6" iconClassName="h-5 w-5"
className="rounded-full" className="rounded-full h-9 w-9"
/> />
<IconButton <IconButton
variant="ghost" variant="ghost"
@@ -84,8 +84,8 @@ export const ControlButtons = ({
: "reader.controls.direction.rtl" : "reader.controls.direction.rtl"
), ),
})} })}
iconClassName="h-6 w-6" iconClassName="h-5 w-5"
className="rounded-full" className="rounded-full h-9 w-9"
/> />
<IconButton <IconButton
variant="ghost" variant="ghost"
@@ -98,8 +98,8 @@ export const ControlButtons = ({
tooltip={t( tooltip={t(
isFullscreen ? "reader.controls.fullscreen.exit" : "reader.controls.fullscreen.enter" isFullscreen ? "reader.controls.fullscreen.exit" : "reader.controls.fullscreen.enter"
)} )}
iconClassName="h-6 w-6" iconClassName="h-5 w-5"
className="rounded-full" className="rounded-full h-9 w-9"
/> />
<IconButton <IconButton
variant="ghost" variant="ghost"
@@ -112,8 +112,8 @@ export const ControlButtons = ({
tooltip={t( tooltip={t(
showThumbnails ? "reader.controls.thumbnails.hide" : "reader.controls.thumbnails.show" showThumbnails ? "reader.controls.thumbnails.hide" : "reader.controls.thumbnails.show"
)} )}
iconClassName="h-6 w-6" iconClassName="h-5 w-5"
className={cn("rounded-full", showThumbnails && "ring-2 ring-primary")} className={cn("rounded-full h-9 w-9", showThumbnails && "ring-2 ring-primary")}
/> />
<IconButton <IconButton
variant="ghost" variant="ghost"
@@ -124,8 +124,8 @@ export const ControlButtons = ({
onZoom(); onZoom();
}} }}
tooltip={t("reader.controls.zoom")} tooltip={t("reader.controls.zoom")}
iconClassName="h-6 w-6" iconClassName="h-5 w-5"
className="rounded-full" className="rounded-full h-9 w-9"
/> />
<IconButton <IconButton
variant="ghost" variant="ghost"
@@ -136,10 +136,10 @@ export const ControlButtons = ({
onForceReload(); onForceReload();
}} }}
tooltip={t("reader.controls.reload")} tooltip={t("reader.controls.reload")}
iconClassName="h-6 w-6" iconClassName="h-5 w-5"
className="rounded-full" className="rounded-full h-9 w-9"
/> />
<div className="p-2 rounded-full" onClick={(e) => e.stopPropagation()}> <div className="px-1.5 rounded-full" onClick={(e) => e.stopPropagation()}>
<PageInput <PageInput
currentPage={currentPage} currentPage={currentPage}
totalPages={totalPages} totalPages={totalPages}
@@ -149,9 +149,6 @@ export const ControlButtons = ({
}} }}
/> />
</div> </div>
</div>
{/* Bouton fermer */}
{onClose && ( {onClose && (
<IconButton <IconButton
variant="ghost" variant="ghost"
@@ -162,13 +159,11 @@ export const ControlButtons = ({
onClose(currentPage); onClose(currentPage);
}} }}
tooltip={t("reader.controls.close")} tooltip={t("reader.controls.close")}
iconClassName="h-6 w-6" iconClassName="h-5 w-5"
className={cn( className="rounded-full h-9 w-9"
"absolute top-4 right-4 rounded-full bg-background/70 backdrop-blur-md hover:bg-background/80 transition-all duration-300 z-30",
showControls ? "opacity-100" : "opacity-0 pointer-events-none"
)}
/> />
)} )}
</div>
{/* Bouton précédent */} {/* Bouton précédent */}
{currentPage > 1 && ( {currentPage > 1 && (