feat: updated app to tailwind 4.x

src/components/UI/Footer.tsx

@@ -1,3 +1,4 @@
+import { cn } from "@app/core/utils/cn";
 import React from "react";
 
 export interface FooterProps extends React.HTMLAttributes<HTMLElement> {}
@@ -5,26 +6,18 @@ export interface FooterProps extends React.HTMLAttributes<HTMLElement> {}
 const Footer = React.forwardRef<HTMLElement, FooterProps>(
   ({ className, ...props }, ref) => {
     return (
-      <footer
-        className={`flex mt-auto justify-center p-2 ${className}`}
-        style={{
-          backgroundColor: "var(--backgroundPrimary)",
-          color: "var(--textPrimary)",
-        }}
-      >
+      <footer className={cn("flex mt-auto justify-center p-2", className)}>
         <p>
           <a
             href="https://vercel.com/?utm_source=meshtastic&utm_campaign=oss"
-            className="hover:underline"
-            style={{ color: "var(--link)" }}
+            className="hover:underline text-link"
           >
             Powered by ▲ Vercel
           </a>{" "}
           | Meshtastic® is a registered trademark of Meshtastic LLC. |{" "}
           <a
             href="https://meshtastic.org/docs/legal"
-            className="hover:underline"
-            style={{ color: "var(--link)" }}
+            className="hover:underline text-link"
           >
             Legal Information
           </a>