Fix animal lightbox (AnimalImages) styling

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": {

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;
+    }
+
+  }
 }

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>
   )
 }
 

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;
-  }
 }
+

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'