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)}
}>
-
+
{dateFormatted}
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) {
:
-
-
-
+
+
+
+
+
+
+
This camera image is temporarily unavailable. Please check again later.
+
+
-
This camera image is currently unavailable due to technical difficulties.
}
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;
+ }
+ }
+ }
+ }
+ }
+}
+