updated styling

src/components/UI/Footer.tsx

@@ -1,11 +1,13 @@
 import { cn } from "@core/utils/cn.ts";
-import { Trans } from "react-i18next";
+import { Trans, useTranslation } from "react-i18next";
 
 type FooterProps = {
   className?: string;
 };
 
 const Footer = ({ className, ...props }: FooterProps) => {
+  const { t } = useTranslation();
+
   return (
     <footer
       className={cn(
@@ -15,18 +17,11 @@ const Footer = ({ className, ...props }: FooterProps) => {
       {...props}
     >
       <div className="justify-start px-2">
-        <Trans
-          i18nKey="footer.commitSha"
-          components={[
-            <span
-              key="sha"
-              className="font-semibold text-gray-500/40 dark:text-gray-400/40"
-            />,
-          ]}
-          values={{
+        <span className="font-semibold text-gray-500/40 dark:text-gray-400/40">
+          {t("footer.commitSha", {
             sha: String(import.meta.env.VITE_COMMIT_HASH)?.toUpperCase(),
-          }}
-        />
+          })}
+        </span>
       </div>
       <p className="ml-auto mr-auto text-gray-500 dark:text-gray-400">
         <Trans