image gallery improvements

src/shared/components/Modal/index.scss

@@ -145,7 +145,6 @@ $modal-mobile-padding: 1.5rem;
   .modal__content {
     flex: 1;
     padding: 0 $modal-padding;
-    overflow-y: auto;
 
     @include big-phone {
       padding-left: $modal-mobile-padding;
@@ -190,7 +189,6 @@ $modal-mobile-padding: 1.5rem;
     height: 100%;
     margin: unset;
     border-radius: unset;
-    overflow-y: scroll;
   }
 }
 .modal--mobile-pop-up {

src/shared/ui-kit/ImageGallery/ImageGallery.tsx

@@ -3,14 +3,9 @@ import { useMeasure } from "react-use";
 import classNames from "classnames";
 import { ButtonLink, Image } from "@/shared/components";
 import { useModal } from "@/shared/hooks";
-import { useIsTabletView } from "@/shared/hooks/viewport";
 import { CommonLink } from "@/shared/models";
 import { FilePrefix, ResizeType, getResizedFileUrl } from "@/shared/utils";
-import {
-  ImageGalleryModal,
-  ImageGalleryMobileModal,
-  GalleryMainContent,
-} from "./components";
+import { ImageGalleryModal, GalleryMainContent } from "./components";
 import styles from "./ImageGallery.module.scss";
 
 interface ImageGalleryProps {
@@ -21,7 +16,6 @@ interface ImageGalleryProps {
 
 const ImageGallery: FC<ImageGalleryProps> = (props) => {
   const { gallery, videoSrc, useResizedFile = true } = props;
-  const isTabletView = useIsTabletView();
   const [videoContainerRef, { width: videoContainerWidth }] = useMeasure();
   const { isShowing, onOpen, onClose } = useModal(false);
   const images = (gallery || []).map(({ value }) =>
@@ -97,21 +91,13 @@ const ImageGallery: FC<ImageGalleryProps> = (props) => {
           See all gallery
         </ButtonLink>
       )}
-      {isTabletView ? (
-        <ImageGalleryMobileModal
-          images={images}
-          isShowing={isShowing}
-          onClose={onClose}
-          videoSrc={videoSrc}
-        />
-      ) : (
-        <ImageGalleryModal
-          isShowing={isShowing}
-          onClose={onClose}
-          images={images}
-          videoSrc={videoSrc}
-        />
-      )}
+
+      <ImageGalleryModal
+        isShowing={isShowing}
+        onClose={onClose}
+        images={images}
+        videoSrc={videoSrc}
+      />
     </div>
   );
 };

src/shared/ui-kit/ImageGallery/components/ImageGalleryModal/ImageGalleryModal.scss

@@ -6,10 +6,13 @@
   width: 100%;
   max-height: 43.125rem;
   height: 100%;
-  margin-top: 1.625rem;
+  margin: auto;
+
+  @include big-phone {
+    margin-top: unset;
+  }
 
   & .swiper-container {
-    padding-bottom: 2rem;
     max-height: 35rem;
     height: 100%;
     max-width: 48.8125rem;
@@ -18,6 +21,11 @@
 
   & .swiper-wrapper {
     max-height: 35rem;
+    height: 90%;
+  }
+
+  & .swiper-pagination-bullet {
+    background-color: var(--primary-text);
   }
 
   & .swiper-pagination-bullet-active {
@@ -108,3 +116,16 @@
   height: 100%;
   width: 100%;
 }
+
+.image-gallery-modal {
+  .modal__content {
+    padding: 0;
+    .modal__header-wrapper {
+      .modal__header--default-padding {
+        margin-right: 0.5rem;
+        margin-top: 0.5rem;
+        padding-top: 0;
+      }
+    }
+  }
+}

src/shared/ui-kit/ImageGallery/components/ImageGalleryModal/ImageGalleryModal.tsx

@@ -2,6 +2,7 @@ import React, { FC, ReactNode, useCallback, useState } from "react";
 import { Swiper, SwiperSlide } from "swiper/react";
 import SwiperClass from "swiper/types/swiper-class";
 import { ButtonIcon, Image, Modal } from "@/shared/components";
+import { useIsTabletView } from "@/shared/hooks/viewport";
 import LeftArrowIcon from "@/shared/icons/leftArrow.icon";
 import RightArrowIcon from "@/shared/icons/rightArrow.icon";
 import { VideoEmbed } from "@/shared/ui-kit/VideoEmbed";
@@ -21,6 +22,7 @@ interface ImageGalleryProps {
 const ImageGalleryModal: FC<ImageGalleryProps> = (props) => {
   const { images, isShowing, onClose, videoSrc, initialSlide = 0 } = props;
   const [swiperRef, setSwiperRef] = useState<SwiperClass | null>(null);
+  const isTabletView = useIsTabletView();
 
   const handleLeftClick = useCallback(() => {
     if (swiperRef) {
@@ -43,14 +45,19 @@ const ImageGalleryModal: FC<ImageGalleryProps> = (props) => {
   }, [swiperRef]);
 
   return (
-    <Modal isShowing={isShowing} onClose={onClose}>
+    <Modal
+      isShowing={isShowing}
+      onClose={onClose}
+      mobileFullScreen={isTabletView}
+      className="image-gallery-modal"
+    >
       <div className="container">
         <Swiper
           onSwiper={setSwiperRef}
           loop={true}
           pagination
           initialSlide={initialSlide}
-          allowTouchMove={false}
+          allowTouchMove={isTabletView}
         >
           {videoSrc && (
             <SwiperSlide key={videoSrc} className="slider-wrapper">
@@ -68,15 +75,16 @@ const ImageGalleryModal: FC<ImageGalleryProps> = (props) => {
               }
             >
               <Image
-                hasZoom
+                hasZoom={!isTabletView}
                 className="slide-img"
+                imageContainerClassName="image-container"
                 src={imageURL}
                 alt={`Common gallery image #${index + 1}`}
               />
             </SwiperSlide>
           ))}
         </Swiper>
-        {images.length > 1 && (
+        {!isTabletView && images.length > 1 && (
           <>
             <ButtonIcon
               className="arrow-wrapper-left"