Merge pull request #15 from SliceOSM/jlow/last-updated-color

Make last updated chip yellow if time > 15 min ago

Author: jake-low

src/LastUpdated.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { formatDistanceToNow, parseISO, formatISO } from "date-fns";
+import { formatDistanceToNow, differenceInSeconds, parseISO, formatISO } from "date-fns";
 import { API_ENDPOINT } from "./Common";
 
 const LastUpdated = () => {  
@@ -17,9 +17,12 @@ const LastUpdated = () => {
     // Loading state
     return <span className="chip">...</span>;
   }
+
+  const chipColor = differenceInSeconds(new Date(), updatedTimestamp) > (15 * 60)
+    ? "chip-yellow" : "chip-green";
 
   return (
-    <span className="chip">
+    <span className={`chip ${chipColor}`}>
       {"Data updated "}
       <time dateTime={formatISO(updatedTimestamp)} title={updatedTimestamp.toString()}>
         {formatDistanceToNow(updatedTimestamp)} ago

src/main.css

@@ -88,19 +88,37 @@ main > footer {
   font-size: 0.9em;
   display: inline-block;
   color: white;
-  background-color: hsl(150, 55%, 20%);
+  background-color: hsl(0, 0%, 25%);
   border-radius: 9999px;
   padding-top: 0.2em;
   padding-bottom: 0.05em;
   padding-inline: 0.6em;
 }
 
-.chip::before {
+.chip-green {
+  background-color: hsl(150, 55%, 20%);
+}
+
+.chip-yellow {
+  background-color: hsl(45, 75%, 27%);
+}
+
+.chip-green::before {
   content: '●';
-  color: #31c48d;
+  color: hsl(158, 60%, 48%);
   margin-right: 0.25em;
 }
 
+.chip-yellow::before {
+  content: '●';
+  color: hsl(48, 100%, 50%);
+  margin-right: 0.25em;
+}
+
+.chip time[title] {
+  text-decoration: underline dotted rgba(255, 255, 255, 0.75);
+}
+
 .neon-red {
   color: rgba(255, 255, 255, 0.7);
   text-shadow: