[client] UI refactor (#6069)

Refactor UI

---------

Co-authored-by: Eduard Gert <kontakt@eduardgert.de>
Co-authored-by: braginini <bangvalo@gmail.com>
Co-authored-by: Pascal Fischer <32096965+pascal-fischer@users.noreply.github.com>
Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: riccardom <riccardomanfrin@gmail.com>

client/ui/frontend/src/modules/auto-update/UpdateBadge.tsx

@@ -0,0 +1,27 @@
+import { forwardRef, type HTMLAttributes } from "react";
+import { ArrowUpCircleIcon } from "lucide-react";
+import { cn } from "@/lib/cn";
+
+type Props = HTMLAttributes<HTMLDivElement> & {
+    size?: number;
+};
+
+export const UpdateBadge = forwardRef<HTMLDivElement, Props>(function UpdateBadge(
+    { size = 15, className, ...rest },
+    ref,
+) {
+    return (
+        <div
+            ref={ref}
+            className={cn("relative flex items-center justify-center", className)}
+            {...rest}
+        >
+            <span
+                className={
+                    "pointer-events-none absolute inline-flex h-[15px] w-[15px] animate-ping rounded-full bg-netbird opacity-20"
+                }
+            />
+            <ArrowUpCircleIcon size={size} className={"text-netbird"} />
+        </div>
+    );
+});