chore: ImageGallery tweaks

RocketChat · Dec 5, 2023 · 13f649c · 13f649c
1 parent a7bee82
commit 13f649c
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git 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
@@ -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,
 	);