Adjust footer

amrabed · Sep 5, 2024 · 8537ef3 · 8537ef3
1 parent c364138
commit 8537ef3
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 11 deletions.
diff --git a/src/components/footer.tsx b/src/components/footer.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { SunIcon } from "@heroicons/react/24/outline";
-import { MoonIcon } from "@heroicons/react/24/solid";
+import { MoonIcon } from "@heroicons/react/24/outline";
 import { Switch } from "@nextui-org/react";
 
 import { useTheme } from "@/contexts/theme";
@@ -14,27 +14,28 @@ const ThemeSelector = ({
   toggleTheme: (theme: string) => void;
 }) => (
   <Switch
-    defaultSelected
     size="lg"
+    color="primary"
     value={theme}
     onChange={(e) => toggleTheme(e.target.value)}
-    startContent={<SunIcon color="white" />}
-    endContent={<MoonIcon />}
+    thumbIcon={theme == "dark" ? <MoonIcon /> : <SunIcon />}
   />
 );
 
 const Footer = () => {
   const { theme, toggleTheme } = useTheme();
 
   return (
-    <div className="flex flex-row justify-between p-2">
-      <div className="p-2 text-sm left-15 bottom-0 gap-4">
+    <div className="flex flex-row justify-between content-center items-center h-[100px]">
+      <div className="text-sm p-4">
         &copy; {new Date().getFullYear()} Amr Abed - Built with{" "}
         <a href="https://nextjs.org" target="_blank" rel="noopener noreferrer">
           Next.js
         </a>
       </div>
-      <ThemeSelector theme={theme} toggleTheme={toggleTheme} />
+      <div className="p-4">
+        <ThemeSelector theme={theme} toggleTheme={toggleTheme} />
+      </div>
     </div>
   );
 };

diff --git a/src/components/social.tsx b/src/components/social.tsx
@@ -4,13 +4,12 @@ import profiles from "@/data/profiles";
 
 const SocialMedia = () => (
   <>
-    <div className="flex justify-center bg-background">
-      <div className="fixed bottom-12 flex flex-row z-10">
+    <div className="w-full fixed bottom-0 p-4 z-10">
+      <div className="flex flex-row justify-center">
         {profiles.map((profile, index) => (
           <Tooltip key={index} content={profile.name}>
             <Link href={profile.link} isExternal rel="noreferrer">
-              <div className="bg-background  rounded-full p-1">
-
+              <div className="bg-background rounded-full p-1">
                 <Button
                   isIconOnly
                   variant="light"