From dee1bc4697a0bd20e41e838fd7b3eff44e3c7ef3 Mon Sep 17 00:00:00 2001
From: m5r <mokht@rmi.al>
Date: Tue, 31 Aug 2021 05:15:30 +0800
Subject: [PATCH] style footer

---
 app/core/layouts/layout/footer.tsx | 47 +++++++++++-------------------
 1 file changed, 17 insertions(+), 30 deletions(-)

diff --git a/app/core/layouts/layout/footer.tsx b/app/core/layouts/layout/footer.tsx
index 8069eab..611c649 100644
--- a/app/core/layouts/layout/footer.tsx
+++ b/app/core/layouts/layout/footer.tsx
@@ -7,47 +7,33 @@ import {
 	faComments as fasComments,
 	faCog as fasCog,
 } from "@fortawesome/pro-solid-svg-icons";
-import {
-	faPhoneAlt as farPhone,
-	faTh as farTh,
-	faComments as farComments,
-	faCog as farCog,
-} from "@fortawesome/pro-regular-svg-icons";
+import clsx from "clsx";
 
 export default function Footer() {
 	return (
-		<footer className="grid grid-cols-4" style={{ flex: "0 0 50px" }}>
+		<footer
+			className="grid grid-cols-4 bg-[#F7F7F7] border-t border-gray-400 border-opacity-25 py-3"
+			style={{ flex: "0 0 50px" }}
+		>
 			<NavLink
 				label="Calls"
 				path="/calls"
-				icons={{
-					active: <FontAwesomeIcon size="lg" className="w-6 h-6" icon={fasPhone} />,
-					inactive: <FontAwesomeIcon size="lg" className="w-6 h-6" icon={farPhone} />,
-				}}
+				icon={<FontAwesomeIcon size="lg" className="w-6 h-6" icon={fasPhone} />}
 			/>
 			<NavLink
 				label="Keypad"
 				path="/keypad"
-				icons={{
-					active: <FontAwesomeIcon size="lg" className="w-6 h-6" icon={fasTh} />,
-					inactive: <FontAwesomeIcon size="lg" className="w-6 h-6" icon={farTh} />,
-				}}
+				icon={<FontAwesomeIcon size="lg" className="w-6 h-6" icon={fasTh} />}
 			/>
 			<NavLink
 				label="Messages"
 				path="/messages"
-				icons={{
-					active: <FontAwesomeIcon size="lg" className="w-6 h-6" icon={fasComments} />,
-					inactive: <FontAwesomeIcon size="lg" className="w-6 h-6" icon={farComments} />,
-				}}
+				icon={<FontAwesomeIcon size="lg" className="w-6 h-6" icon={fasComments} />}
 			/>
 			<NavLink
 				label="Settings"
 				path="/settings"
-				icons={{
-					active: <FontAwesomeIcon size="lg" className="w-6 h-6" icon={fasCog} />,
-					inactive: <FontAwesomeIcon size="lg" className="w-6 h-6" icon={farCog} />,
-				}}
+				icon={<FontAwesomeIcon size="lg" className="w-6 h-6" icon={fasCog} />}
 			/>
 		</footer>
 	);
@@ -56,21 +42,22 @@ export default function Footer() {
 type NavLinkProps = {
 	path: string;
 	label: string;
-	icons: {
-		active: ReactNode;
-		inactive: ReactNode;
-	};
+	icon: ReactNode;
 };
 
-function NavLink({ path, label, icons }: NavLinkProps) {
+function NavLink({ path, label, icon }: NavLinkProps) {
 	const router = useRouter();
 	const isActiveRoute = router.pathname.startsWith(path);
-	const icon = isActiveRoute ? icons.active : icons.inactive;
 
 	return (
 		<div className="flex flex-col items-center justify-around h-full">
 			<Link href={path}>
-				<a className="flex flex-col items-center">
+				<a
+					className={clsx("flex flex-col items-center", {
+						"text-[#007AFF]": isActiveRoute,
+						"text-[#959595]": !isActiveRoute,
+					})}
+				>
 					{icon}
 					<span className="text-xs">{label}</span>
 				</a>