From 9ee9b9e77c6532976aecce2a8b2194557b4bf5d2 Mon Sep 17 00:00:00 2001
From: Justin Johnson <justin@oxd.com>
Date: Thu, 1 Feb 2024 11:55:01 -0800
Subject: [PATCH] DBC22-1677 Fixing styles

---
 src/frontend/src/App.scss                     | 59 -------------
 src/frontend/src/Components/FriendlyTime.js   |  2 +-
 src/frontend/src/Components/map/camPopup.js   | 18 +++-
 src/frontend/src/Components/map/camPopup.scss | 86 +++++++++++++++++++
 4 files changed, 101 insertions(+), 64 deletions(-)
 create mode 100644 src/frontend/src/Components/map/camPopup.scss

diff --git a/src/frontend/src/App.scss b/src/frontend/src/App.scss
index 69470857..d081fcf1 100644
--- a/src/frontend/src/App.scss
+++ b/src/frontend/src/App.scss
@@ -152,65 +152,6 @@ body {
         }
       }
 
-      &--camera {
-        .popup__description {
-          p {
-            @media (max-width: 575px) {
-              order: 2;
-            }
-          }
-          .camera-image {
-            @media (max-width: 575px) {
-              order: 1;
-            }
-
-            img {
-              @media (max-width: 575px) {
-                width: 100%;
-              }
-            }
-
-            .timestamp {
-              background-color: $Black;
-              padding: 0 10px;
-              display: flex;
-              color: $White;
-              font-size: 0.714rem;
-
-              p {
-                color: $White;
-                margin-bottom: 0;
-              }
-
-              .driveBC {
-                font-family: serif;
-                span {
-                  color: $BC-Yellow;
-                }
-                margin-right: 10px;
-              }
-
-              .friendly-time, .formatted-date {
-                margin-left: auto;
-              }
-            }
-
-            &.camera-unavailable {
-              background-color: $Surface-status-red;
-              border-left: 3px solid;
-              border-color: $Type-status-red;
-              padding: 1rem;
-              min-height: 225px;
-              font-size: 1rem;
-              p, .card-img-box {
-                color: $Type-status-red;
-                font-weight: 700;
-              }
-            }
-          }
-        }
-      }
-
       &--ferry {
 
         .popup__title {
diff --git a/src/frontend/src/Components/FriendlyTime.js b/src/frontend/src/Components/FriendlyTime.js
index 23deb72f..bf0e8c88 100644
--- a/src/frontend/src/Components/FriendlyTime.js
+++ b/src/frontend/src/Components/FriendlyTime.js
@@ -35,7 +35,7 @@ export default function FriendlyTime( {date} ) {
               event.stopPropagation();
               setShowTooltip(!showTooltip)}
             }>
-            <p className={"friendly-time-text" }>
+            <p className="friendly-time-text">
               <ReactTimeAgo date={date} locale="en-US"/>
             </p>
             <span className={"friendly-time__tooltip" + (showTooltip ? " showTooltip" : "")}>{dateFormatted}</span>
diff --git a/src/frontend/src/Components/map/camPopup.js b/src/frontend/src/Components/map/camPopup.js
index 17cd40c2..499602ba 100644
--- a/src/frontend/src/Components/map/camPopup.js
+++ b/src/frontend/src/Components/map/camPopup.js
@@ -12,6 +12,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faVideoSlash } from '@fortawesome/free-solid-svg-icons';
 
 import colocatedCamIcon from '../../images/colocated-camera.svg';
+import './camPopup.scss';
 
 export default function CamPopup(props) {
   // Props
@@ -94,11 +95,20 @@ export default function CamPopup(props) {
                     <FriendlyTime date={camera.last_update_modified} />
                   </div>
                 </div> :
-                <div className='camera-image camera-unavailable'>
-                  <div className="card-img-box unavailable">
-                    <FontAwesomeIcon icon={faVideoSlash} />
+                <div className='camera-image'>
+                  <div className='camera-unavailable'>
+                    <div className="card-pill">
+                      <p>Unavailable</p>
+                    </div>
+                    <div className="card-img-box unavailable">
+                      <FontAwesomeIcon icon={faVideoSlash} />
+                    </div>
+                    <p>This camera image is temporarily unavailable.  Please check again later.</p>
+                  </div>
+                  <div className="timestamp">
+                    <p className="driveBC">Drive<span>BC</span></p>
+                    <FriendlyTime date={camera.last_update_modified} />
                   </div>
-                  <p>This camera image is currently unavailable due to technical difficulties.</p>
                 </div>
               }
             </div>
diff --git a/src/frontend/src/Components/map/camPopup.scss b/src/frontend/src/Components/map/camPopup.scss
new file mode 100644
index 00000000..7587dbb9
--- /dev/null
+++ b/src/frontend/src/Components/map/camPopup.scss
@@ -0,0 +1,86 @@
+@import "../../styles/variables";
+
+.popup--camera {
+  .popup__description {
+    p {
+      @media (max-width: 575px) {
+        order: 2;
+      }
+    }
+    .camera-image {
+      @media (max-width: 575px) {
+        order: 1;
+      }
+
+      img {
+        @media (max-width: 575px) {
+          width: 100%;
+        }
+      }
+
+      .timestamp {
+        background-color: $Black;
+        padding: 0 10px;
+        display: flex;
+        color: $White;
+        font-size: 0.714rem;
+        align-items: baseline;
+
+        p {
+          color: $White;
+          margin-bottom: 0;
+        }
+
+        .driveBC {
+          font-family: serif;
+          span {
+            color: $BC-Yellow;
+          }
+          margin-right: 10px;
+        }
+
+        .friendly-time, .formatted-date {
+          margin-left: auto;
+        }
+
+        .formatted-date {
+          font-size: 0.75rem;
+        }
+      }
+
+      .camera-unavailable {
+        background-color: $Surface-status-red;
+        padding: 1rem;
+        min-height: 225px;
+        font-size: 1rem;
+        p, .card-img-box {
+          color: $Type-status-red;
+          clear: right;
+        }
+
+        svg {
+          font-size: 1rem;
+        }
+
+        .card-pill {
+          background-color: $Error;
+          border-radius: 12px;
+          height: 24px;
+          float: right;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          padding: 4px 6px;
+
+          p {
+            color: $White;
+            font-weight: 700;
+            margin-bottom: 0;
+            font-size: 0.625rem;
+          }
+        }
+      }
+    }
+  }
+}
+