DBC22-1147: Fix for broken styling on camera timestamp on Map

Author: minORC

src/frontend/src/Components/FriendlyTime.js

@@ -35,13 +35,17 @@ export default function FriendlyTime( {date} ) {
               event.stopPropagation();
               setShowTooltip(!showTooltip)}
             }>
-            <ReactTimeAgo date={date} locale="en-US"/>
+            <p>
+              <ReactTimeAgo date={date} locale="en-US"/>
+            </p>
             <span className={"friendly-time__tooltip" + (showTooltip ? " showTooltip" : "")}>{dateFormatted}</span>
           </div>
   }
 
   // else return formatted date without tooltip
   else {
-    return dateFormatted;
+    return <p className={"formatted-date" }>
+            {dateFormatted}
+          </p>
   }
 }

src/frontend/src/Components/Map.js

@@ -373,15 +373,15 @@ export default function MapWrapper({
                   <img src="${featureDetails.links.imageSource}" width='300'>
                   <div class="timestamp">
                     <p class="driveBC">Drive<span>BC</span></p>
-                    <p>` +
-                ReactDOMServer.renderToString(
-                  <FriendlyTime date={featureDetails.last_update_modified} />,
-                ) +
-                `</p>
+                    ` +
+                    ReactDOMServer.renderToString(
+                      <FriendlyTime date={featureDetails.last_update_modified} />,
+                    ) +
+                    `
+                    </div>
                   </div>
                 </div>
-              </div>
-            </div>`;
+              </div>`;
               clickedWebcam.current = featureDetails;
 
               popup.current.setPosition(

src/frontend/src/Components/Map.scss

@@ -106,11 +106,11 @@
                     background-color: $Black;
                     padding: 0 10px;
                     display: flex;
-                    justify-content: space-between;
+                    color: $White;
+                    font-size: 0.714em;
 
                     p {
                       color: $White;
-                      font-size: 0.625em;
                       margin-bottom: 0;
                     }
 
@@ -121,6 +121,10 @@
                       }
                       margin-right: 10px;
                     }
+
+                    .friendly-time, .formatted-date {
+                      margin-left: auto;
+                    }
                   }
                 }
               }

src/frontend/src/Components/cameras/WebcamCard.js

@@ -104,7 +104,7 @@ export default function WebcamCard({camera}) {
         }
         <div className="timestamp">
           <p className="driveBC">Drive<span>BC</span></p>
-          <p className="label"><FriendlyTime date={camera.last_update_modified} /></p>
+          <FriendlyTime date={camera.last_update_modified} />
         </div>
         <p className="label bold">{camera.name}</p>
         <p className="label">{camera.caption}</p>

src/frontend/src/pages/CameraDetailsPage.js

@@ -313,7 +313,7 @@ export default function CameraDetailsPage() {
                     {replay && (
                       <div className="timestamp">
                         <p className="driveBC">Drive<span>BC</span></p>
-                        <p className="label"><FriendlyTime date={lastUpdate} /></p>
+                        <FriendlyTime date={lastUpdate} />
                       </div>
                     )}
                   </div>