From 13f649c58ba98e5f2f646ed36eca8e32ed1e9c97 Mon Sep 17 00:00:00 2001
From: juliajforesti <juliajforesti@gmail.com>
Date: Tue, 5 Dec 2023 12:20:47 -0300
Subject: [PATCH] chore: ImageGallery tweaks

---
 .../components/ImageGallery/ImageGallery.tsx      | 15 +++++++++++++--
 .../ImageGallery/ImageGalleryLoader.tsx           |  4 ++--
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/apps/meteor/client/components/ImageGallery/ImageGallery.tsx b/apps/meteor/client/components/ImageGallery/ImageGallery.tsx
index 2946e3e692a2..0675532432aa 100644
--- a/apps/meteor/client/components/ImageGallery/ImageGallery.tsx
+++ b/apps/meteor/client/components/ImageGallery/ImageGallery.tsx
@@ -1,5 +1,5 @@
 import { css } from '@rocket.chat/css-in-js';
-import { Box, IconButton, Throbber } from '@rocket.chat/fuselage';
+import { Box, IconButton, Palette, Throbber } from '@rocket.chat/fuselage';
 import React, { useRef, useState } from 'react';
 import { FocusScope } from 'react-aria';
 import { createPortal } from 'react-dom';
@@ -83,6 +83,17 @@ const swiperStyle = css`
 		right: 10px;
 		left: auto;
 	}
+
+	.rcx-lazy-preloader {
+		position: absolute;
+		z-index: -1;
+		left: 50%;
+		top: 50%;
+
+		transform: translate(-50%, -50%);
+
+		color: ${Palette.text['font-pure-white']};
+	}
 `;
 
 const ImageGallery = () => {
@@ -122,7 +133,7 @@ const ImageGallery = () => {
 								<div className='swiper-zoom-container'>
 									<img src={url} loading='lazy' />
 									<div className='rcx-lazy-preloader'>
-										<Throbber />
+										<Throbber inheritColor />
 									</div>
 								</div>
 							</SwiperSlide>
diff --git a/apps/meteor/client/components/ImageGallery/ImageGalleryLoader.tsx b/apps/meteor/client/components/ImageGallery/ImageGalleryLoader.tsx
index a495f345194e..131b82780f22 100644
--- a/apps/meteor/client/components/ImageGallery/ImageGalleryLoader.tsx
+++ b/apps/meteor/client/components/ImageGallery/ImageGalleryLoader.tsx
@@ -12,9 +12,9 @@ const closeButtonStyle = css`
 
 const ImageGalleryLoader = ({ onClose }: { onClose: () => void }) =>
 	createPortal(
-		<ModalBackdrop display='flex' justifyContent='center'>
+		<ModalBackdrop display='flex' justifyContent='center' color='pure-white'>
 			<IconButton icon='cross' aria-label='Close gallery' className={closeButtonStyle} onClick={onClose} />
-			<Throbber />
+			<Throbber inheritColor />
 		</ModalBackdrop>,
 		document.body,
 	);