From d4e2cd2bf35a402b093e8e1b562be7a45d332dfd Mon Sep 17 00:00:00 2001
From: Terry Sutton <saltcod@gmail.com>
Date: Tue, 24 Jun 2025 02:43:32 -0230
Subject: [PATCH] Use a badge for a more explicit last used indicator (#36614)

---
 .../interfaces/SignIn/LastSignInWrapper.tsx      | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/apps/studio/components/interfaces/SignIn/LastSignInWrapper.tsx b/apps/studio/components/interfaces/SignIn/LastSignInWrapper.tsx
index a5d22f4f968..1fda11e3d41 100644
--- a/apps/studio/components/interfaces/SignIn/LastSignInWrapper.tsx
+++ b/apps/studio/components/interfaces/SignIn/LastSignInWrapper.tsx
@@ -1,7 +1,7 @@
 import { LastSignInType, useLastSignIn } from 'hooks/misc/useLastSignIn'
 import { ReactNode } from 'react'
 
-import { cn, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
+import { Badge, cn } from 'ui'
 
 export function LastSignInWrapper({
   children,
@@ -15,14 +15,12 @@ export function LastSignInWrapper({
   return (
     <div className="flex items-center relative">
       {lastSignIn === type && (
-        <Tooltip key={`last-sign-in-${type}`}>
-          <TooltipTrigger asChild className="absolute -right-8">
-            <div className="p-2 flex">
-              <div className="w-2.5 h-2.5 bg-brand rounded-full animate-pulse" />
-            </div>
-          </TooltipTrigger>
-          <TooltipContent>Last used</TooltipContent>
-        </Tooltip>
+        <Badge
+          variant="brand"
+          className="absolute -right-4 -top-3 rounded-full px-2 py-0.5 shadow z-10 bg-brand-400 bg-opacity-100 text-foreground pointer-events-none"
+        >
+          Last used
+        </Badge>
       )}
       <div
         className={cn('w-full', {