Merge branch 'front' of https://git.sitenevis.com/Reza_ashrafi/danovin into front

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%;

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