fix: swipe media navigation button color style

- Enhanced button styles in SwipeMedia component to use bg-material-medium and border for better visual consistency.
- Updated icon classes to use MingCute's left and right line icons for improved clarity.

Signed-off-by: Innei <tukon479@gmail.com>
This commit is contained in:
Innei 2025-09-30 23:46:02 +08:00
parent 8a450c5421
commit f8b58662e5
No known key found for this signature in database
GPG Key ID: 0F62D33977F021F7
1 changed files with 4 additions and 4 deletions

View File

@ -100,21 +100,21 @@ export function SwipeMedia({
{emblaApi?.canScrollPrev() && (
<button
type="button"
className="center absolute left-2 top-1/2 size-6 -translate-y-1/2 rounded-full bg-gray-800 text-white opacity-0 duration-200 group-hover:opacity-100"
className="center bg-material-medium border-border backdrop-blur-background absolute left-2 top-1/2 size-8 -translate-y-1/2 rounded-full border text-white opacity-0 duration-200 group-hover:opacity-100"
onClick={scrollPrev}
onDoubleClick={stopPropagation}
>
<i className="i-mingcute-arrow-left-line" />
<i className="i-mingcute-left-line" />
</button>
)}
{emblaApi?.canScrollNext() && (
<button
type="button"
className="center absolute right-2 top-1/2 size-6 -translate-y-1/2 rounded-full bg-gray-800 text-white opacity-0 duration-200 group-hover:opacity-100"
className="center bg-material-medium border-border backdrop-blur-background absolute right-2 top-1/2 size-8 -translate-y-1/2 rounded-full border text-white opacity-0 duration-200 group-hover:opacity-100"
onClick={scrollNext}
onDoubleClick={stopPropagation}
>
<i className="i-mingcute-arrow-right-line" />
<i className="i-mingcute-right-line" />
</button>
)}
</div>