From eccc17cd49d8ee1e3581303a24e7fd94da190ec1 Mon Sep 17 00:00:00 2001
From: Steven Pothoven <steven@pothoven.net>
Date: Tue, 25 Jul 2023 12:27:51 -0400
Subject: [PATCH] Fix animal lightbox (AnimalImages) styling

---
 package-lock.json                        | 12 ------
 package.json                             |  1 -
 src/assets/stylesheets/style.scss        | 54 ++++++++++++++++++++++++
 src/components/AnimalDetails.js          |  8 ++--
 src/components/AnimalDetails.module.scss | 35 +--------------
 src/components/VolunteerForm.js          |  2 +-
 6 files changed, 61 insertions(+), 51 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 0b100c1..8a939ad 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,7 +20,6 @@
                 "react-select": "^5.7.4",
                 "react-visibility-sensor": "^5.1.1",
                 "reactjs-popup": "^2.0.5",
-                "reactjs-popup2": "npm:reactjs-popup@^2.0.5",
                 "sass": "^1.64.0"
             },
             "devDependencies": {
@@ -15975,12 +15974,6 @@
                 "react-dom": ">=16"
             }
         },
-        "node_modules/reactjs-popup2": {
-            "name": "reactjs-popup",
-            "version": "2.0.5",
-            "resolved": "https://registry.npmjs.org/reactjs-popup/-/reactjs-popup-2.0.5.tgz",
-            "integrity": "sha512-b5hv9a6aGsHEHXFAgPO5s1Jw1eSkopueyUVxQewGdLgqk2eW0IVXZrPRpHR629YcgIpC2oxtX8OOZ8a7bQJbxA=="
-        },
         "node_modules/read-cache": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -30773,11 +30766,6 @@
             "integrity": "sha512-b5hv9a6aGsHEHXFAgPO5s1Jw1eSkopueyUVxQewGdLgqk2eW0IVXZrPRpHR629YcgIpC2oxtX8OOZ8a7bQJbxA==",
             "requires": {}
         },
-        "reactjs-popup2": {
-            "version": "npm:reactjs-popup@2.0.5",
-            "resolved": "https://registry.npmjs.org/reactjs-popup/-/reactjs-popup-2.0.5.tgz",
-            "integrity": "sha512-b5hv9a6aGsHEHXFAgPO5s1Jw1eSkopueyUVxQewGdLgqk2eW0IVXZrPRpHR629YcgIpC2oxtX8OOZ8a7bQJbxA=="
-        },
         "read-cache": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
diff --git a/package.json b/package.json
index a7cfb92..c34e5f7 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,6 @@
         "react-select": "^5.7.4",
         "react-visibility-sensor": "^5.1.1",
         "reactjs-popup": "^2.0.5",
-        "reactjs-popup2": "npm:reactjs-popup@^2.0.5",
         "sass": "^1.64.0"
     },
     "scripts": {
diff --git a/src/assets/stylesheets/style.scss b/src/assets/stylesheets/style.scss
index cc9cf07..f0a4141 100644
--- a/src/assets/stylesheets/style.scss
+++ b/src/assets/stylesheets/style.scss
@@ -140,4 +140,58 @@ hr {
       }
     }
   }
+
+  .animal-images {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    position: relative;
+  
+    img {
+      max-height: 100vh;
+      margin: 0 auto;
+    }
+  
+    .right {
+      position: absolute;
+      z-index: 100;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+
+    .arrow {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      position: absolute;
+      z-index: 100;
+      top: 50%;
+      transform: translateY(-50%);
+      border-radius: 50%;
+      background-color: rgba(0, 0, 0, 0.8);
+      width: 3.5rem;
+      height: 3.5rem;
+      text-align: center;
+  
+      @media (max-width: 480px) {
+        background-color: auto;
+      }
+  
+      button {
+        border: none;
+        background: none;
+        font-size: 2.5rem;
+        color: #fff;
+      }
+    }
+  
+    .left {
+      left: 1rem;
+    }
+  
+    .right {
+      right: 1rem;
+    }
+  
+  }
 }
\ No newline at end of file
diff --git a/src/components/AnimalDetails.js b/src/components/AnimalDetails.js
index 095aef1..81a8ea5 100644
--- a/src/components/AnimalDetails.js
+++ b/src/components/AnimalDetails.js
@@ -19,9 +19,9 @@ const AnimalImages = ({ images, name, index }) => {
   const setIndex = newIndex => () => setCurrentIndex(newIndex)
 
   return (
-    <>
+    <div className='animal-images'>
       {currentIndex && (
-        <div className={cx('arrow', 'left')}>
+        <div className='arrow left'>
           <button onClick={setIndex(currentIndex - 1)}>&lt;</button>
         </div>
       )}
@@ -30,11 +30,11 @@ const AnimalImages = ({ images, name, index }) => {
         alt={name}
       />
       {currentIndex < images.length - 1 && (
-        <div className={cx('arrow', 'right')}>
+        <div className='arrow right'>
           <button onClick={setIndex(currentIndex + 1)}>&gt;</button>
         </div>
       )}
-    </>
+    </div>
   )
 }
 
diff --git a/src/components/AnimalDetails.module.scss b/src/components/AnimalDetails.module.scss
index 86b6c2f..0b781a4 100644
--- a/src/components/AnimalDetails.module.scss
+++ b/src/components/AnimalDetails.module.scss
@@ -1,6 +1,7 @@
 @import '../assets/stylesheets/style.scss';
 
 .animal-details {
+  
   .main {
     display: flex;
 
@@ -181,37 +182,5 @@
     }
   }
 
-  .arrow {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: absolute;
-    z-index: 100;
-    top: 50%;
-    transform: translateY(-50%);
-    border-radius: 50%;
-    background-color: rgba(0, 0, 0, 0.8);
-    width: 3.5rem;
-    height: 3.5rem;
-    text-align: center;
-
-    @media (max-width: 480px) {
-      background-color: auto;
-    }
-
-    button {
-      border: none;
-      background: none;
-      font-size: 2.5rem;
-      color: #fff;
-    }
-  }
-
-  .left {
-    left: 1rem;
-  }
-
-  .right {
-    right: 1rem;
-  }
 }
+
diff --git a/src/components/VolunteerForm.js b/src/components/VolunteerForm.js
index 0f1b204..5ec5926 100644
--- a/src/components/VolunteerForm.js
+++ b/src/components/VolunteerForm.js
@@ -1,6 +1,6 @@
 import React, { useState, useRef } from 'react'
 import classNames from 'classnames/bind'
-import Popup from 'reactjs-popup2'
+import Popup from 'reactjs-popup'
 import { PROTOCOL, HOSTNAME } from '../config/StFrancisRescue'
 import states from '../config/states'
 import StandardLayout from './StandardLayout'