Use a badge for a more explicit last used indicator (#36614)

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', {