From 63320fe58b50ad523b091be971f282aad8d2f96c Mon Sep 17 00:00:00 2001
From: mbecker20 <becker.maxh@gmail.com>
Date: Wed, 12 Feb 2025 23:39:01 -0800
Subject: [PATCH] improve update indicator style and also put on home screen

---
 frontend/src/components/resources/stack/index.tsx | 6 +++---
 frontend/src/pages/home/dashboard.tsx             | 6 +++++-
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/resources/stack/index.tsx b/frontend/src/components/resources/stack/index.tsx
index 329734ddb..b1b562e01 100644
--- a/frontend/src/components/resources/stack/index.tsx
+++ b/frontend/src/components/resources/stack/index.tsx
@@ -468,9 +468,9 @@ export const UpdateAvailable = ({
   return (
     <HoverCard openDelay={200}>
       <HoverCardTrigger asChild>
-        <Card
+        <div
           className={cn(
-            "border-blue-400 hover:border-blue-500 transition-colors cursor-pointer flex items-center gap-2",
+            "px-2 py-1 border rounded-md border-blue-400 hover:border-blue-500 opacity-50 hover:opacity-70 transition-colors cursor-pointer flex items-center gap-2",
             small ? "px-2 py-1" : "px-3 py-2"
           )}
         >
@@ -485,7 +485,7 @@ export const UpdateAvailable = ({
               Available
             </div>
           )}
-        </Card>
+        </div>
       </HoverCardTrigger>
       <HoverCardContent align="start" className="flex flex-col gap-2 w-fit">
         {info?.services
diff --git a/frontend/src/pages/home/dashboard.tsx b/frontend/src/pages/home/dashboard.tsx
index bfdde5fba..71310f226 100644
--- a/frontend/src/pages/home/dashboard.tsx
+++ b/frontend/src/pages/home/dashboard.tsx
@@ -21,6 +21,8 @@ import { DataTable, SortableHeader } from "@ui/data-table";
 import { AlertTriangle, Box, Circle, History } from "lucide-react";
 import { PieChart } from "react-minimal-pie-chart";
 import { Link } from "react-router-dom";
+import { UpdateAvailable as StackUpdateAvailable } from "@components/resources/stack";
+import { UpdateAvailable as DeploymentUpdateAvailable } from "@components/resources/deployment";
 
 export const Dashboard = () => {
   const noResources = useNoResources();
@@ -143,10 +145,12 @@ const RecentCard = ({
       )}
     >
       <div className="flex items-center justify-between">
-        <div className="flex items-center gap-2 text-sm text-nowrap">
+        <div className="flex flex-wrap items-center gap-2 text-sm text-nowrap">
           <Components.Icon id={id} />
           <ResourceName type={type} id={id} />
         </div>
+        {type === "Deployment" && <DeploymentUpdateAvailable id={id} small />}
+        {type === "Stack" && <StackUpdateAvailable id={id} small />}
       </div>
       <div className="flex gap-2 w-full">
         <TagsWithBadge tag_ids={tags} />