feat: improve formatting of last used (#3824)

site/src/components/WorkspacesTable/WorkspaceLastUsed.tsx

@@ -1,8 +1,10 @@
-import { Theme, useTheme } from "@material-ui/core/styles"
+import { makeStyles, Theme, useTheme } from "@material-ui/core/styles"
 import { FC } from "react"
 
+import Icon from "@material-ui/icons/Brightness1"
 import dayjs from "dayjs"
 import relativeTime from "dayjs/plugin/relativeTime"
+import { colors } from "theme/colors"
 
 dayjs.extend(relativeTime)
 
@@ -12,28 +14,56 @@ interface WorkspaceLastUsedProps {
 
 export const WorkspaceLastUsed: FC<WorkspaceLastUsedProps> = ({ lastUsedAt }) => {
   const theme: Theme = useTheme()
+  const styles = useStyles()
 
   const t = dayjs(lastUsedAt)
   const now = dayjs()
 
   let color = theme.palette.text.secondary
   let message = t.fromNow()
+  let displayCircle = true
 
   if (t.isAfter(now.subtract(1, "hour"))) {
-    color = theme.palette.success.main
+    color = colors.green[9]
     // Since the agent reports on a 10m interval,
     // the last_used_at can be inaccurate when recent.
-    message = "In the last hour"
-  } else if (t.isAfter(now.subtract(1, "day"))) {
-    color = theme.palette.primary.main
-  } else if (t.isAfter(now.subtract(1, "month"))) {
+    message = "Now"
+  } else if (t.isAfter(now.subtract(3, "day"))) {
     color = theme.palette.text.secondary
-  } else if (t.isAfter(now.subtract(100, "year"))) {
+  } else if (t.isAfter(now.subtract(1, "month"))) {
     color = theme.palette.warning.light
+  } else if (t.isAfter(now.subtract(100, "year"))) {
+    color = colors.red[10]
   } else {
-    color = theme.palette.error.light
+    // color = theme.palette.error.light
     message = "Never"
+    displayCircle = false
   }
 
-  return <span style={{ color: color }}>{message}</span>
+  return (
+    <span className={styles.root}>
+      <span
+        style={{
+          color: color,
+          display: displayCircle ? undefined : "none",
+        }}
+      >
+        <Icon className={styles.icon} />
+      </span>
+      {message}
+    </span>
+  )
 }
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    display: "flex",
+    alignItems: "center",
+    color: theme.palette.text.secondary,
+  },
+  icon: {
+    marginRight: 8,
+    width: 10,
+    height: 10,
+  },
+}))