From 0dcaf57dd21ceac5b94e92c00b8ebf8ec08cd02b Mon Sep 17 00:00:00 2001
From: Stepan Usatiuk <stepanusatiuk@gmail.com>
Date: Sat, 17 Oct 2020 07:38:53 +0000
Subject: [PATCH] a better photo viewing experience (with a close button!)

---
 frontend/src/Photos/Overview.scss | 47 +++++++++++++++++++++++++++++--
 frontend/src/Photos/Overview.tsx  | 13 ++++++++-
 2 files changed, 57 insertions(+), 3 deletions(-)

diff --git a/frontend/src/Photos/Overview.scss b/frontend/src/Photos/Overview.scss
index 95e1522..bdcbe6c 100644
--- a/frontend/src/Photos/Overview.scss
+++ b/frontend/src/Photos/Overview.scss
@@ -7,23 +7,66 @@
     align-items: center;
     justify-content: center;
     transition: 0.3s;
+
+    #photo {
+        height: 100%;
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        box-shadow: $pt-elevation-shadow-4;
+    }
+
+    #photoOverlayDrawer {
+        height: 100%;
+        align-self: flex-end;
+        justify-self: flex-end;
+        margin-left: auto;
+        display: flex;
+        flex-direction: row;
+        align-items: flex-start;
+        justify-content: center;
+        padding: 1rem;
+        background-color: $light-gray5;
+        box-shadow: $pt-elevation-shadow-4;
+        transition: transform 0.5s;
+    }
 }
 
-.bp3-overlay-enter {
+.bp3-overlay-enter,
+.bp3-overlay-appear {
     opacity: 0;
+
+    #photoOverlayDrawer {
+        transform: translate(10rem);
+    }
 }
 
-.bp3-overlay-enter-active {
+.bp3-overlay-enter-active,
+.bp3-overlay-appear-active {
     opacity: 1;
+
+    #photoOverlayDrawer {
+        transform: translate(0rem);
+    }
 }
 
 
 .bp3-overlay-exit {
     opacity: 1;
+
+    #photoOverlayDrawer {
+        transform: translate(0rem);
+    }
 }
 
 .bp3-overlay-exit-active {
     opacity: 0;
+
+    #photoOverlayDrawer {
+        transform: translate(10rem);
+
+    }
 }
 
 #overviewContainer {
diff --git a/frontend/src/Photos/Overview.tsx b/frontend/src/Photos/Overview.tsx
index 71af9aa..09b345f 100644
--- a/frontend/src/Photos/Overview.tsx
+++ b/frontend/src/Photos/Overview.tsx
@@ -71,10 +71,21 @@ export const OverviewComponent: React.FunctionComponent<IOverviewComponentProps>
                 onClose={() => {
                     setOverlayOpen(false);
                 }}
+                transitionDuration={500}
                 lazy
             >
                 <div id="photoOverlayContainer">
-                    <Photo id={selectedPhoto} />
+                    <div id="photo">
+                        <Photo id={selectedPhoto} />
+                    </div>
+                    <div id="photoOverlayDrawer">
+                        <Button
+                            icon="cross"
+                            onClick={() => {
+                                setOverlayOpen(false);
+                            }}
+                        />
+                    </div>
                 </div>
             </Overlay>
             <div id="overviewContainer" onScroll={onLoaderScroll}>