feat(ui):resize connection indicator and add pulse effect for all use cases.

src/components/wrappers/common/connection-indicator.tsx

@@ -1,19 +1,17 @@
-import { cn } from "@/lib/utils";
+import {cn} from "@/lib/utils";
 
 export type ConnectionIndicatorProps = {
     date?: Date | null;
 };
 
-export const ConnectionIndicator = ({ date }: ConnectionIndicatorProps) => {
+export const ConnectionIndicator = ({date}: ConnectionIndicatorProps) => {
     let style = "bg-gray-300";
-    let active = false;
 
     if (date instanceof Date && !isNaN(date.getTime())) {
         const intervalSeconds = (Date.now() - date.getTime()) / 1000;
 
         if (intervalSeconds < 55) {
             style = "bg-green-500";
-            active = true;
         } else if (intervalSeconds <= 60) {
             style = "bg-orange-400";
         } else {
@@ -22,8 +20,8 @@ export const ConnectionIndicator = ({ date }: ConnectionIndicatorProps) => {
     }
 
     return (
-        <div className="relative w-4 h-4">
-            {active && (
+        <div className="relative w-3 h-3">
+
                 <span
                     className={cn(
                         "absolute -inset-0.25 rounded-full opacity-60 animate-ping",
@@ -33,10 +31,10 @@ export const ConnectionIndicator = ({ date }: ConnectionIndicatorProps) => {
                         animationDuration: "2s",
                     }}
                 />
-            )}
+
             <div
                 className={cn(
-                    "relative w-4 h-4 rounded-full shadow-sm animate-pulse",
+                    "relative w-3 h-3 rounded-full shadow-sm animate-pulse",
                     style
                 )}
                 style={{