From 71913d0d217564c90bbdf1e0465a29f9e66f1915 Mon Sep 17 00:00:00 2001
From: Reza_ashrafi <ashrafimirreza98@gmail.com>
Date: Tue, 13 Jul 2021 07:29:04 +0430
Subject: [PATCH] reza added some change

---
 src/views/Product/Gallery/Modal/index.scss |  7 +++++--
 src/views/Product/Gallery/index.js         | 12 ++++++------
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/views/Product/Gallery/Modal/index.scss b/src/views/Product/Gallery/Modal/index.scss
index c5c6551..2b3120a 100644
--- a/src/views/Product/Gallery/Modal/index.scss
+++ b/src/views/Product/Gallery/Modal/index.scss
@@ -4,7 +4,7 @@
   position: fixed;
   top: 0px;
   left: 0px;
-  background-color: rgba(0, 0, 0, 0.89);
+  background-color: rgba(0, 0, 0, 0.973);
   &__exit{
     position: fixed;
     right: 30px;
@@ -17,7 +17,10 @@
     max-width: 900px;
     height: 70vh;
     max-height: 600px;
-    min-height: 500px;
+    min-height: 300px;
+    border: 1px solid white;
+    margin-bottom: 10px;
+    border-radius: 20px;
     & img{
       width: 100%;
       height: 100%;
diff --git a/src/views/Product/Gallery/index.js b/src/views/Product/Gallery/index.js
index 7dbebae..b753739 100644
--- a/src/views/Product/Gallery/index.js
+++ b/src/views/Product/Gallery/index.js
@@ -32,14 +32,14 @@ export default function Gallery(props) {
             {
               props.gallery.length > 3 ?
               <>
-                <Item item={props.gallery[0]} key={props.gallery[0].id} more={false} setSelectedMedia={setSelectedMedia} setModal={setModal} />
-                <Item item={props.gallery[1]} key={props.gallery[1].id} more={false} setSelectedMedia={setSelectedMedia} setModal={setModal} />
-                <Item item={props.gallery[2]} key={props.gallery[2].id} more={true} setSelectedMedia={setSelectedMedia} setModal={setModal} />
+                <Item active={selectedMedia === props.gallery[0]} item={props.gallery[0]} key={props.gallery[0].id} more={false} setSelectedMedia={setSelectedMedia} setModal={setModal} />
+                <Item active={selectedMedia === props.gallery[1]} item={props.gallery[1]} key={props.gallery[1].id} more={false} setSelectedMedia={setSelectedMedia} setModal={setModal} />
+                <Item active={selectedMedia === props.gallery[2]} item={props.gallery[2]} key={props.gallery[2].id} more={true} setSelectedMedia={setSelectedMedia} setModal={setModal} />
               </> :
               <>
               {
                 props.gallery.map((item, i) => (
-                  <Item item={item} key={item.id} more={false} setSelectedMedia={setSelectedMedia} setModal={setModal} />
+                  <Item active={selectedMedia === item} item={item} key={item.id} more={false} setSelectedMedia={setSelectedMedia} setModal={setModal} />
                 ))
               }
               </>
@@ -56,12 +56,12 @@ export default function Gallery(props) {
 }
 
 const Item = (props) => {
-  const {item, more, setSelectedMedia, setModal} = props;
+  const {item, more, setSelectedMedia, setModal, active} = props;
   return(
     <>
       {
         window.innerWidth > 1000 ?
-        <div className="product-gallery-item d-flex">
+        <div style={{ border: active ? '4px solid #1BBC6E' : ''}} className="product-gallery-item d-flex">
           {
             item.type === 'image' ?
             <img src={item.value} alt={'عکس'} /> : null