From aa2c6392c91a81e65e1a624cab99f5f2fcf3204f Mon Sep 17 00:00:00 2001
From: juliajforesti <juliajforesti@gmail.com>
Date: Wed, 11 Oct 2023 16:14:31 -0300
Subject: [PATCH] feat: apply IconButton to navigation items

---
 .../meteor/client/components/ImageGallery.tsx | 22 +++++--
 .../components/ImageGallery/ImageGallery.css  | 57 +++++++++++++++++++
 2 files changed, 73 insertions(+), 6 deletions(-)
 create mode 100644 apps/meteor/client/components/ImageGallery/ImageGallery.css

diff --git a/apps/meteor/client/components/ImageGallery.tsx b/apps/meteor/client/components/ImageGallery.tsx
index 29b08753279c..bec1814b0660 100644
--- a/apps/meteor/client/components/ImageGallery.tsx
+++ b/apps/meteor/client/components/ImageGallery.tsx
@@ -1,8 +1,8 @@
-// Import Swiper React components
-
 import { IconButton, Throbber } from '@rocket.chat/fuselage';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { Keyboard, Navigation, Zoom, A11y } from 'swiper';
+import type { SwiperRef } from 'swiper/react';
 import { type SwiperClass, Swiper, SwiperSlide } from 'swiper/react';
 
 // Import Swiper styles
@@ -10,12 +10,15 @@ import 'swiper/swiper.css';
 import 'swiper/modules/navigation/navigation.min.css';
 import 'swiper/modules/keyboard/keyboard.min.css';
 import 'swiper/modules/zoom/zoom.min.css';
+import './ImageGallery/ImageGallery.css';
+
 import { useRecordList } from '../hooks/lists/useRecordList';
 import { useRoom } from '../views/room/contexts/RoomContext';
 import { useFilesList } from '../views/room/contextualBar/RoomFiles/hooks/useFilesList';
 
 const ImageGallery = ({ url, onClose }: { url: string; onClose: () => void }) => {
 	const room = useRoom();
+	const swiperRef = useRef<SwiperRef>(null);
 
 	const [images, setImages] = useState<string[]>();
 	const [swiperInst, setSwiperInst] = useState<SwiperClass>();
@@ -38,11 +41,17 @@ const ImageGallery = ({ url, onClose }: { url: string; onClose: () => void }) =>
 		return null;
 	}
 
-	return (
+	const swiperContainer = (
 		<div className='swiper-container'>
-			<IconButton icon='cross' onClick={onClose} />
+			<IconButton icon='cross' aria-label='Close gallery' className='rcx-swiper-close-button' onClick={onClose} />
+			<IconButton icon='chevron-right' className='rcx-swiper-prev-button' onClick={() => swiperRef?.current?.swiper.slidePrev()} />
+			<IconButton icon='chevron-left' className='rcx-swiper-next-button' onClick={() => swiperRef?.current?.swiper.slideNext()} />
 			<Swiper
-				navigation
+				ref={swiperRef}
+				navigation={{
+					nextEl: '.rcx-swiper-next-button',
+					prevEl: '.rcx-swiper-prev-button',
+				}}
 				keyboard
 				zoom
 				lazyPreloaderClass='rcx-lazy-preloader'
@@ -65,6 +74,7 @@ const ImageGallery = ({ url, onClose }: { url: string; onClose: () => void }) =>
 			</Swiper>
 		</div>
 	);
+	return createPortal(swiperContainer, document.body);
 };
 
 export default ImageGallery;
diff --git a/apps/meteor/client/components/ImageGallery/ImageGallery.css b/apps/meteor/client/components/ImageGallery/ImageGallery.css
new file mode 100644
index 000000000000..c584523ea04a
--- /dev/null
+++ b/apps/meteor/client/components/ImageGallery/ImageGallery.css
@@ -0,0 +1,57 @@
+:root {
+	--swiper-navigation-size: 44px;
+}
+
+.swiper {
+	background-color: var(--rcx-color-surface-overlay, rgba(0, 0, 0, 0.6));
+}
+.rcx-swiper-close-button, .rcx-swiper-prev-button, .rcx-swiper-next-button {
+  color: var(--rcx-color-font-pure-white, #fff) !important;
+}
+.rcx-swiper-close-button {
+	position: absolute;
+	z-index: 10;
+	top: 10px;
+	right: 10px;
+}
+.rcx-swiper-prev-button,
+.rcx-swiper-next-button {
+	position: absolute;
+	top: 50%;
+	z-index: 10;
+	cursor: pointer;
+}
+.rcx-swiper-prev-button.swiper-button-disabled,
+.rcx-swiper-next-button.swiper-button-disabled {
+	opacity: 0.35;
+	cursor: auto;
+	pointer-events: none;
+}
+.rcx-swiper-prev-button.swiper-button-hidden,
+.rcx-swiper-next-button.swiper-button-hidden {
+	opacity: 0;
+	cursor: auto;
+	pointer-events: none;
+}
+.swiper-navigation-disabled .rcx-swiper-prev-button,
+.swiper-navigation-disabled .rcx-swiper-next-button {
+	display: none !important;
+}
+.rcx-swiper-prev-button,
+.swiper-rtl .rcx-swiper-next-button {
+	left: 10px;
+	right: auto;
+}
+.rcx-swiper-prev-button:after,
+.swiper-rtl .rcx-swiper-next-button:after {
+	content: 'prev';
+}
+.rcx-swiper-next-button,
+.swiper-rtl .rcx-swiper-prev-button {
+	right: 10px;
+	left: auto;
+}
+.rcx-swiper-next-button:after,
+.swiper-rtl .rcx-swiper-prev-button:after {
+	content: 'next';
+}