Added close button for photo-viewer

client/src/components/photo-viewer/photo-viewer.js

@@ -2,7 +2,7 @@ import * as React from "react";
 import {createRef, useEffect, useState} from "react";
 
 import "./photo-viewer.scss"
-import {ArrowLeft, ArrowRight} from "@mui/icons-material";
+import {ArrowLeft, ArrowRight, Close} from "@mui/icons-material";
 import {useCurrentInstance} from "../../services/current-instance/use-current-instance";
 
 export function PhotoViewer() {
@@ -36,6 +36,9 @@ export function PhotoViewer() {
             setSelectedPhotoIndex(selectedPhotoIndex + 1);
         }
     }
+    const handleClose = () => {
+        setSelectedPhotoIndex(-1);
+    }
     const handleKeyUp = (e) => {
         switch (e.code) {
             case "ArrowLeft":
@@ -103,7 +106,8 @@ export function PhotoViewer() {
                     {hasPrevious && <ArrowLeft/>}
                 </div>
                 <div id="photoSlider">
-                    {hasPrevious && <div className="photo photo--placeholder photo--previous" style={previousPhotoStyle}>
+                    {hasPrevious &&
+                        <div className="photo photo--placeholder photo--previous" style={previousPhotoStyle}>
                             <img src={`${selectedAlbum.photos[selectedPhotoIndex - 1].url}`}
                                  alt={selectedAlbum.photos[selectedPhotoIndex - 1].name}/>
                         </div>}
@@ -123,6 +127,10 @@ export function PhotoViewer() {
                 <div className="goto-btn goto-btn--next" onClick={handleGoNext}>
                     {hasNext && <ArrowRight/>}
                 </div>
+
+                <div className="close-btn" onClick={handleClose}>
+                    {hasNext && <Close/>}
+                </div>
             </div> : null}
     </>
 }

client/src/components/photo-viewer/photo-viewer.scss

@@ -41,6 +41,26 @@
     }
   }
 
+  .close-btn {
+    position: absolute;
+    top: 15px;
+    right: 15px;
+    cursor: pointer;
+
+    svg {
+      color: white;
+      opacity: 0.15;
+      width: 75px;
+      height: 75px;
+
+      @media (max-width: 768px) {
+        width: 75px;
+        height: 75px;
+      }
+    }
+
+  }
+
   .goto-btn {
     cursor: pointer;
     flex: 1;