- minor tweaks to ui across app

src/features/cameras/components/CameraSettings/RegionSelector.tsx

@@ -104,7 +104,7 @@ const RegionSelector = ({
         </>
       </div>
 
-      <div className="p-2 border border-gray-600 rounded-lg flex flex-col md:col-span-2">
+      <div className="p-2 border border-gray-600 rounded-lg flex flex-col md:col-span-2 h-50">
         <div className="flex flex-col">
           <h2 className="text-2xl mb-2">Actions</h2>
           <button

src/features/dashboard/components/SystemHealth.tsx

@@ -6,31 +6,40 @@ type SystemHealthProps = {
   uptime: string;
   statuses: SystemHealthStatus[];
   isLoading: boolean;
+  isError: boolean;
+  dateUpdatedAt?: number;
 };
 
-const SystemHealth = ({ startTime, uptime, statuses, isLoading }: SystemHealthProps) => {
+const SystemHealth = ({ startTime, uptime, statuses, isLoading, isError, dateUpdatedAt }: SystemHealthProps) => {
+  const updatedDate = dateUpdatedAt ? new Date(dateUpdatedAt).toLocaleString() : null;
+
+  if (isError) {
+    return <span className="text-red-500">Error loading system health.</span>;
+  }
   if (isLoading) {
     return <span className="text-slate-500">Loading system health…</span>;
   }
 
   return (
-    <div className="h-100 md:h-70">
+    <div className="h-100 md:h-75 overflow-y-auto flex flex-col gap-4">
       <div className="p-2 border-b border-gray-600 grid grid-cols-2 justify-between">
-        <div>
+        <div className="flex flex-col border border-gray-600 p-4 rounded-lg mr-4 hover:bg-[#233241]">
           <h3 className="text-lg">Start Time</h3> <span className="text-slate-300">{startTime}</span>
         </div>
-        <div>
+        <div className="flex flex-col border border-gray-600 p-4 rounded-lg mr-4 hover:bg-[#233241]">
           <h3 className="text-lg">Up Time</h3> <span className="text-slate-300">{uptime}</span>
         </div>
       </div>
-
-      <div>
+      <div className="h-50 overflow-auto">
         {statuses?.map((status: SystemHealthStatus) => (
           <div className="border border-gray-700 p-4 rounded-md m-2 flex justify-between">
             <span>{status.id}</span> <Badge text={status.tags[0]} />
           </div>
         ))}
       </div>
+      <div className="border-t border-gray-500">
+        <small className="italic text-gray-400">{`Last refeshed ${updatedDate}`}</small>
+      </div>
     </div>
   );
 };

src/features/dashboard/components/SystemOverview.tsx

@@ -11,10 +11,21 @@ const SystemOverview = () => {
   const uptime = query?.data?.UptimeHumane;
   const statuses = query?.data?.Status;
   const isLoading = query?.isLoading;
+  const isError = query?.isError;
+  const dateUpdatedAt = query?.dataUpdatedAt;
+
+  console.log(query?.dataUpdatedAt);
   return (
     <Card className="p-4">
       <CardHeader title="System Health" refetch={query?.refetch} icon={faArrowsRotate} />
-      <SystemHealth startTime={startTime} uptime={uptime} statuses={statuses} isLoading={isLoading} />
+      <SystemHealth
+        startTime={startTime}
+        uptime={uptime}
+        statuses={statuses}
+        isLoading={isLoading}
+        isError={isError}
+        dateUpdatedAt={dateUpdatedAt}
+      />
     </Card>
   );
 };

src/ui/CardHeader.tsx

@@ -21,7 +21,7 @@ const CardHeader = ({ title, status, icon, refetch }: CameraOverviewHeaderProps)
           {status && <StatusIndicators status={status} />}
           {title}
         </h2>
-        {icon && <FontAwesomeIcon icon={icon} className="size-4" onClick={refetch} />}
+        {icon && <FontAwesomeIcon icon={icon} className="hover:cursor-pointer" onClick={refetch} />}
       </div>
     </div>
   );

src/ui/Header.tsx

@@ -1,29 +1,39 @@
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faGaugeHigh } from "@fortawesome/free-solid-svg-icons";
 import { Link } from "@tanstack/react-router";
 import Logo from "/MAV.svg";
 
 const Header = () => {
   return (
-    <header className="bg-[#253445] p-4 flex  border-b border-gray-500 justify-between">
+    <header className="bg-[#253445] p-4 flex border-b border-gray-500 justify-between items-center">
       <div className="w-28">
         <Link to={"/"}>
           <img src={Logo} alt="Logo" width={150} height={150} />
         </Link>
       </div>
-      <div className="flex gap-4">
-        <Link to="/" className="[&.active]:font-bold">
-          <FontAwesomeIcon icon={faGaugeHigh} />
+      <div className="flex gap-4 text-lg items-center">
+        <Link
+          to="/"
+          className="[&.active]:font-bold [&.active]:bg-gray-700 p-2 rounded-lg flex items-center gap-2 hover:bg-gray-700"
+        >
+          {/* <FontAwesomeIcon icon={faGaugeHigh} /> */}
           Dashboard
         </Link>
 
-        <Link to="/baywatch" className="[&.active]:font-bold">
+        <Link
+          to="/baywatch"
+          className="[&.active]:font-bold [&.active]:bg-gray-700 p-2 rounded-lg flex items-center gap-2 hover:bg-gray-700"
+        >
           Cameras
         </Link>
-        <Link to="/output" className="[&.active]:font-bold">
+        <Link
+          to="/output"
+          className="[&.active]:font-bold [&.active]:bg-gray-700 p-2 rounded-lg flex items-center gap-2 hover:bg-gray-700"
+        >
           Output
         </Link>
-        <Link to="/settings" className="[&.active]:font-bold">
+        <Link
+          to="/settings"
+          className="[&.active]:font-bold [&.active]:bg-gray-700 p-2 rounded-lg flex items-center gap-2 hover:bg-gray-700"
+        >
           Settings
         </Link>
       </div>