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

feat: enhance UI components with backdrop blur effects and improved background styles for better visual aesthetics

Browse Source
This commit is contained in:
Julien Froidefond
2025-10-17 11:09:07 +02:00
parent 8d6f8f4de7
commit faca1cdce6
44 changed files with 112 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/reader/BookReader.tsx
View File

@@ -98,12 +98,12 @@ export function BookReader({ book, pages, onClose, nextBook }: BookReaderProps)
<div className="relative h-full w-full flex items-center justify-center">
{showEndMessage && (
<div className="absolute inset-0 flex items-center justify-center bg-background/80 backdrop-blur-sm z-50">
<div className="bg-background border rounded-lg shadow-lg p-6 max-w-md text-center">
<div className="bg-background/80 backdrop-blur-md border rounded-lg shadow-lg p-6 max-w-md text-center">
<h3 className="text-lg font-semibold mb-2">{t("reader.endOfSeries")}</h3>
<p className="text-muted-foreground mb-4">{t("reader.endOfSeriesMessage")}</p>
<button
onClick={() => onClose?.(currentPage)}
className="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors"
className="px-4 py-2 bg-primary/90 backdrop-blur-md text-primary-foreground rounded-md hover:bg-primary/80 transition-colors"
>
{t("reader.backToSeries")}
</button>

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

@@ -53,7 +53,7 @@ export const ControlButtons = ({
e.stopPropagation();
onToggleDoublePage();
}}
className="p-2 rounded-full bg-background/50 hover:bg-background/80 transition-colors"
className="p-2 rounded-full bg-background/70 backdrop-blur-md hover:bg-background/80 transition-colors"
aria-label={t(
isDoublePage
? "reader.controls.doublePage.disable"
@@ -71,7 +71,7 @@ export const ControlButtons = ({
e.stopPropagation();
onToggleDirection();
}}
className="p-2 rounded-full bg-background/50 hover:bg-background/80 transition-colors"
className="p-2 rounded-full bg-background/70 backdrop-blur-md hover:bg-background/80 transition-colors"
aria-label={t("reader.controls.direction.current", {
direction: t(
direction === "ltr"
@@ -91,7 +91,7 @@ export const ControlButtons = ({
e.stopPropagation();
onToggleFullscreen();
}}
className="p-2 rounded-full bg-background/50 hover:bg-background/80 transition-colors"
className="p-2 rounded-full bg-background/70 backdrop-blur-md hover:bg-background/80 transition-colors"
aria-label={t(
isFullscreen ? "reader.controls.fullscreen.exit" : "reader.controls.fullscreen.enter"
)}
@@ -104,7 +104,7 @@ export const ControlButtons = ({
onToggleThumbnails();
}}
className={cn(
"p-2 rounded-full bg-background/50 hover:bg-background/80 transition-colors",
"p-2 rounded-full bg-background/70 backdrop-blur-md hover:bg-background/80 transition-colors",
showThumbnails && "ring-2 ring-primary"
)}
aria-label={t(
@@ -113,7 +113,7 @@ export const ControlButtons = ({
>
<Images className="h-6 w-6" />
</button>
<div className="p-2 rounded-full bg-background/50" onClick={(e) => e.stopPropagation()}>
<div className="p-2 rounded-full bg-background/70 backdrop-blur-md" onClick={(e) => e.stopPropagation()}>
<PageInput
currentPage={currentPage}
totalPages={totalPages}
@@ -133,7 +133,7 @@ export const ControlButtons = ({
onClose(currentPage);
}}
className={cn(
"absolute top-4 right-4 p-2 rounded-full bg-background/50 hover:bg-background/80 transition-all duration-300 z-30",
"absolute top-4 right-4 p-2 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"
)}
aria-label={t("reader.controls.close")}
@@ -150,7 +150,7 @@ export const ControlButtons = ({
onPreviousPage();
}}
className={cn(
"absolute top-1/2 -translate-y-1/2 p-2 rounded-full bg-background/50 hover:bg-background/80 transition-all duration-300 z-20",
"absolute top-1/2 -translate-y-1/2 p-2 rounded-full bg-background/70 backdrop-blur-md hover:bg-background/80 transition-all duration-300 z-20",
direction === "rtl" ? "right-4" : "left-4",
showControls ? "opacity-100" : "opacity-0 pointer-events-none"
)}
@@ -168,7 +168,7 @@ export const ControlButtons = ({
onNextPage();
}}
className={cn(
"absolute top-1/2 -translate-y-1/2 p-2 rounded-full bg-background/50 hover:bg-background/80 transition-all duration-300 z-20",
"absolute top-1/2 -translate-y-1/2 p-2 rounded-full bg-background/70 backdrop-blur-md hover:bg-background/80 transition-all duration-300 z-20",
direction === "rtl" ? "left-4" : "right-4",
showControls ? "opacity-100" : "opacity-0 pointer-events-none"
)}

4
src/components/reader/components/NavigationBar.tsx
View File

@@ -55,7 +55,7 @@ export const NavigationBar = ({
return (
<div
className={cn(
"absolute bottom-0 left-0 right-0 bg-background/50 backdrop-blur-sm border-t border-border/40 transition-all duration-300 ease-in-out z-30",
"absolute bottom-0 left-0 right-0 bg-background/70 backdrop-blur-md border-t border-border/40 transition-all duration-300 ease-in-out z-30",
showThumbnails ? "h-52 opacity-100" : "h-0 opacity-0"
)}
>
@@ -90,7 +90,7 @@ export const NavigationBar = ({
</div>
{showControls && (
<div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-full px-4 py-2 rounded-full bg-background/50 text-sm">
<div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-full px-4 py-2 rounded-full bg-background/70 backdrop-blur-md text-sm">
Page {currentPage} / {pages.length}
</div>
)}

4
src/components/reader/components/PageInput.tsx
View File

@@ -69,7 +69,7 @@ export const PageInput = ({ currentPage, totalPages, onPageChange }: PageInputPr
value={inputValue}
onChange={handleChange}
className={cn(
"w-12 bg-background/50 text-center rounded-md py-1 px-2",
"w-12 bg-background/70 backdrop-blur-md text-center rounded-md py-1 px-2",
"focus:outline-none focus:ring-2 focus:ring-primary",
"text-sm text-foreground"
)}
@@ -80,7 +80,7 @@ export const PageInput = ({ currentPage, totalPages, onPageChange }: PageInputPr
<button
onClick={handleGoToPage}
data-action="goto"
className="p-1 rounded-md bg-background/50 hover:bg-background/80 transition-colors"
className="p-1 rounded-md bg-background/70 backdrop-blur-md hover:bg-background/80 transition-colors"
aria-label="Aller à cette page"
>
<ArrowRight className="h-4 w-4" />