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>

Author: Innei

apps/desktop/layer/renderer/src/components/ui/media/SwipeMedia.tsx

@@ -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>