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) { : -
-
- +
+
+
+

Unavailable

+
+
+ +
+

This camera image is temporarily unavailable. Please check again later.

+
+
+

DriveBC

+
-

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