Merge pull request #9 from codesweetly/fix/resolve-undefined-margin

fix: Resolve undefined margin
codesweetly · Apr 29, 2024 · 933190d · 933190d
2 parents ae94411 + b3e61a5
commit 933190d
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/src/ImageGallery.tsx b/src/ImageGallery.tsx
@@ -19,7 +19,11 @@ export function ImageGallery({
     columnWidth,
     gapSize
   ).galleryContainerStyle;
-  const imageContainerStyle = imageGalleryStyles(gapSize).imageContainerStyle;
+  const imageContainerStyle = imageGalleryStyles(
+    undefined,
+    undefined,
+    gapSize
+  ).imageContainerStyle;
   const imageStyle = imageGalleryStyles().imageStyle;
   const imageCaptionStyle = imageGalleryStyles().imageCaptionStyle;
   const modalContainerStyle = imageGalleryStyles(

diff --git a/src/ImageGalleryStyles.ts b/src/ImageGalleryStyles.ts
@@ -10,8 +10,7 @@ export function imageGalleryStyles(
     columnGap: `${gapSize}px`,
   };
   const imageContainerStyle: React.CSSProperties = {
-    margin: 0,
-    marginBottom: `${gapSize}px`,
+    margin: `0 0 ${gapSize}px`,
     position: "relative",
   };
   const imageStyle: React.CSSProperties = {
@@ -53,6 +52,7 @@ export function imageGalleryStyles(
     left: 0,
     padding: "13px",
     backgroundColor: "rgba(35, 35, 35, 0.73)",
+    color: "#fff",
     fontSize: "0.93rem",
     transition: "opacity 1s ease-in-out",
     userSelect: "none",
@@ -72,6 +72,7 @@ export function imageGalleryStyles(
     border: "none",
     background: "none",
     padding: "13px",
+    color: "#fff",
     cursor: "pointer",
   };
   const modalSlideShowSectionStyle: React.CSSProperties = {
@@ -92,6 +93,7 @@ export function imageGalleryStyles(
     marginInline: "7px",
     padding: "10px 15px",
     backgroundColor: "rgba(35, 35, 35, 0.73)",
+    color: "#fff",
     transition: "opacity 1s ease-in-out",
     cursor: "pointer",
     userSelect: "none",