From 225c241ac0ab8a9553f5e227dba6e2ebc5602f68 Mon Sep 17 00:00:00 2001
From: Sarim-Sheikh-2003 <sheikh.sarim@ucalgary.ca>
Date: Sat, 20 Jan 2024 12:20:00 -0700
Subject: [PATCH] Gallery css

---
 src/Gallery/Gallery.css | 82 +++++++++++++++++++++++------------------
 src/Gallery/Gallery.js  | 10 +++--
 2 files changed, 53 insertions(+), 39 deletions(-)

diff --git a/src/Gallery/Gallery.css b/src/Gallery/Gallery.css
index 8d75e33..f41bae3 100644
--- a/src/Gallery/Gallery.css
+++ b/src/Gallery/Gallery.css
@@ -1,42 +1,52 @@
 .gallery {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-    grid-gap: 10px;
-  }
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
   
-  @media screen and (max-width: 767px) {
-    .gallery {
-      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-      grid-gap: 5px;
-    }
-  }
+.galleryItem {
+  min-width: 10vw;
+  min-height: 10vh;
+  max-width: 60vw;
+  max-height: 60vh;
+  object-fit: cover;
+  transition: transform 0.2s ease-in-out;
+}
   
-  .galleryItem {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    transition: transform 0.2s ease-in-out;
-  }
-  
-  .galleryItem:hover {
-    transform: scale(1.05);
-  }
+.galleryItem:hover {
+  transform: scale(1.05);
+}
 
-  .container {
-    position: relative;
-	width: 40%;
-  }
+.container {
+  position: relative;
+  width: fit-content;
+  height: fit-content;
+}
 
-  .modalImage {
-    width: 100%;
-  }
+.modalImage {
+  min-width: 20vw;
+  min-height: 20vh;
+  max-width: 70vw;
+  max-height: 70vh;
+}
 
-  .modalButton {
-    position: absolute;
-	padding: 16px;
-	background-color: green;
-	border-radius: 16px;
-	bottom: 10px;
-	left: 200px;
-	width: 100px;
-  }
\ No newline at end of file
+.modalButton {
+  position: absolute;
+  top: 10%;
+  left: 90%;
+  transform: translate(-50%, -50%);
+  -ms-transform: translate(-50%, -50%);
+  opacity: 0.5;
+  background-color: #555;
+  color: white;
+  font-size: 15px;
+  padding: 15px 20px;
+  border: none;
+  cursor: pointer;
+  border-radius: 50%;
+}
+
+.modalButton:hover {
+  background-color: whitesmoke;
+  color: black;
+}
\ No newline at end of file
diff --git a/src/Gallery/Gallery.js b/src/Gallery/Gallery.js
index f54e2fe..16311fd 100644
--- a/src/Gallery/Gallery.js
+++ b/src/Gallery/Gallery.js
@@ -7,7 +7,8 @@ const images = [
   { src: 'https://wallpapers.com/images/featured-full/cool-anime-6kbwj9794wpnsfr1.jpg', alt: 'Image 2' },
   { src: 'https://wallpapers.com/images/featured/cool-anime-pfp-pictures-71urutpksg13vkbk.jpg', alt: 'Image 3' },
   { src: 'https://i.pinimg.com/236x/ab/dc/52/abdc52db893674a7b5dcb767be8776e5.jpg', alt: 'Image 4' },
-  { src: 'https://qph.cf2.quoracdn.net/main-qimg-a3fdbac7bf9f8db58f147887ffa76d88-lq', alt: 'Image 5' }
+  { src: 'https://qph.cf2.quoracdn.net/main-qimg-a3fdbac7bf9f8db58f147887ffa76d88-lq', alt: 'Image 5' },
+  { src: 'https://i.redd.it/people-already-making-good-use-of-that-public-domain-v0-krh76hi874ac1.png?width=2000&format=png&auto=webp&s=405581952294275a5d6cf05a97c05b3387b73f34', alt: 'Image 6'}
 ];
 
 export default function Gallery() {
@@ -42,10 +43,13 @@ export default function Gallery() {
                             overlay: {
                                 display: 'flex',
                                 alignItems: 'center',
-                                justifyContent: 'center'
+                                justifyContent: 'center',
                             },
                             content: {
-                                position: 'initial'
+                                position: 'initial',
+                                border: 'none',
+                                borderRadius: '0px',
+                                padding: '0px'
                             }
                         }}
                     >