feat: Update Footer component styles and enhance link titles with icons for better UX

Common/UI/Components/Footer/Footer.tsx

@@ -24,12 +24,14 @@ const Footer: FunctionComponent<ComponentProps> = (
   return (
     <React.Fragment>
       <footer
-        className={props.className || "bg-white min-h-16"}
+        className={
+          props.className || "bg-gray-50/50 border-t border-gray-100 min-h-16"
+        }
         style={props.style}
       >
-        <div className="mx-auto w-full py-5 px-6 md:flex md:items-center md:justify-between lg:px-0">
+        <div className="mx-auto w-full py-6 px-6 md:flex md:items-center md:justify-between lg:px-8">
           {/* Mobile: Stack links vertically, Desktop: Horizontal layout */}
-          <div className="flex flex-col space-y-3 md:flex-row md:justify-center md:space-y-0 md:space-x-6 md:order-2">
+          <div className="flex flex-col space-y-3 md:flex-row md:justify-center md:items-center md:space-y-0 md:space-x-8 md:order-2">
             {props.links &&
               props.links.length > 0 &&
               props.links.map((link: FooterLink, i: number) => {
@@ -37,7 +39,7 @@ const Footer: FunctionComponent<ComponentProps> = (
                   return (
                     <div
                       key={i}
-                      className="text-gray-400 hover:text-gray-500 text-center md:text-left"
+                      className="text-gray-500 text-sm text-center md:text-left transition-colors duration-200"
                     >
                       {link.content}
                     </div>
@@ -51,7 +53,7 @@ const Footer: FunctionComponent<ComponentProps> = (
                 return (
                   <UILink
                     key={i}
-                    className="text-gray-400 hover:text-gray-500 text-center md:text-left"
+                    className="text-gray-500 hover:text-gray-700 text-sm font-medium text-center md:text-left transition-colors duration-200"
                     to={link.to}
                     openInNewTab={link.openInNewTab}
                     onClick={link.onClick}
@@ -62,9 +64,9 @@ const Footer: FunctionComponent<ComponentProps> = (
               })}
           </div>
           {/* Copyright: Show on mobile, hide on larger screens unless specified */}
-          <div className="mt-4 md:order-1 md:mt-0 block md:hidden lg:block">
+          <div className="mt-5 md:order-1 md:mt-0 block md:hidden lg:block">
             {props.copyright && (
-              <p className="text-center text-base text-gray-400">
+              <p className="text-center text-sm text-gray-400">
                 &copy; {props.copyright}
               </p>
             )}

Dashboard/src/Components/Footer/Footer.tsx

@@ -4,8 +4,10 @@ import Dictionary from "Common/Types/Dictionary";
 import BadDataException from "Common/Types/Exception/BadDataException";
 import { PromiseVoidFunction } from "Common/Types/FunctionTypes";
 import { JSONObject } from "Common/Types/JSON";
+import IconProp from "Common/Types/Icon/IconProp";
 import API from "Common/Utils/API";
 import Footer from "Common/UI/Components/Footer/Footer";
+import Icon from "Common/UI/Components/Icon/Icon";
 import ConfirmModal from "Common/UI/Components/Modal/ConfirmModal";
 import EditionLabel from "Common/UI/Components/EditionLabel/EditionLabel";
 import { HOST, HTTP_PROTOCOL } from "Common/UI/Config";
@@ -68,22 +70,48 @@ const DashboardFooter: () => JSX.Element = () => {
   return (
     <>
       <Footer
-        className="bg-white px-8"
+        className="bg-gray-50/50 border-t border-gray-100 px-8"
         copyright="HackerBay, Inc."
         links={[
           {
             content: <EditionLabel />,
           },
           {
-            title: "Help and Support",
+            title: (
+              <span className="inline-flex items-center gap-1.5 text-gray-400 hover:text-gray-500">
+                <Icon
+                  icon={IconProp.Help}
+                  className="h-3.5 w-3.5"
+                />
+                Help and Support
+              </span>
+            ),
             to: URL.fromString("https://oneuptime.com/support"),
+            openInNewTab: true,
           },
           {
-            title: "Legal",
+            title: (
+              <span className="inline-flex items-center gap-1.5 text-gray-400 hover:text-gray-500">
+                <Icon
+                  icon={IconProp.ShieldCheck}
+                  className="h-3.5 w-3.5"
+                />
+                Legal
+              </span>
+            ),
             to: URL.fromString("https://oneuptime.com/legal"),
+            openInNewTab: true,
           },
           {
-            title: "Version",
+            title: (
+              <span className="inline-flex items-center gap-1.5 text-gray-400 hover:text-gray-500">
+                <Icon
+                  icon={IconProp.Info}
+                  className="h-3.5 w-3.5"
+                />
+                Version
+              </span>
+            ),
             onClick: async () => {
               setShowAboutModal(true);
               await fetchVersions();