Minor styling fixes

mlpierce22 · Dec 5, 2023 · 15856a1 · 15856a1
1 parent 4bc9701
commit 15856a1
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 13 deletions.
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -18,11 +18,11 @@ const HomePage = () => {
   };
 
   const imageButtons: NavItem[] = [
-    { id: "view-projects-button", name: 'View Projects', icon: <FaArrowRight />, path: '/projects', variant: 'link', customButtonProps },
+    { id: "view-projects-button", name: 'View Projects', icon: <FaArrowRight />, path: '/projects', variant: 'link', noPadding: true, customButtonProps },
     {
-      id: "view-projects-button", name: 'Visit Github', icon: <FaArrowRight />, path: "https://github.com/mlpierce22", variant: 'link', isExternal: true, customButtonProps
+      id: "view-projects-button", name: 'Visit Github', icon: <FaArrowRight />, path: "https://github.com/mlpierce22", variant: 'link', noPadding: true, isExternal: true, customButtonProps
     },
-    { id: "connect-linkedin-button", name: 'Connect on LinkedIn', icon: <FaArrowRight />, path: "https://linkedin.com/in/malapier", variant: 'link', isExternal: true, customButtonProps }
+    { id: "connect-linkedin-button", name: 'Connect on LinkedIn', icon: <FaArrowRight />, path: "https://linkedin.com/in/malapier", variant: 'link', noPadding: true, isExternal: true, customButtonProps }
   ]
 
   const header = useMemo(() => (
@@ -79,7 +79,7 @@ const HomePage = () => {
           </SlideFade>
         </VStack>
         <SlideFade in={isMyTurn(1)} offsetY='20px' transition={{ enter: { duration: 2 } }} className='w-full h-full'>
-          <Stack direction={{ base: "row", xl: "column" }} spacing={7} alignSelf={"start"} alignItems={"start"} justifyContent={{ base: "center" }} height={"50%"}>
+          <Stack direction={{ base: "column", sm: "row", xl: "column" }} spacing={{ base: 2, sm: 7 }} alignSelf={"start"} alignItems={"start"} justifyContent={{ base: "center" }} height={"50%"} mt={{ base: 0, "2xl": 12 }}>
             <NavItemsList navItems={imageButtons} size={{ base: "md", md: "lg", xl: "lg" }} />
           </Stack>
         </SlideFade>

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -5,15 +5,15 @@ import NavItemsList, { NavItem } from './NavItemList';
 
 const Footer = () => {
     const bottomIcons: NavItem[] = [
-        { id: "bottom-github-link", name: "", path: "https://github.com/mlpierce22", isExternal: true, icon: <FaGithub size="1.5rem" />, variant: "link" },
-        { id: "bottom-linkedin-link", name: "", path: "https://linkedin.com/in/malapier", isExternal: true, icon: <FaLinkedin size="1.5rem" />, variant: "link" }
+        { id: "bottom-github-link", name: "Github", path: "https://github.com/mlpierce22", isExternal: true, icon: <FaGithub size="1.5rem" />, variant: "solid" },
+        { id: "bottom-linkedin-link", name: "LinkedIn", path: "https://linkedin.com/in/malapier", isExternal: true, icon: <FaLinkedin size="1.5rem" />, variant: "solid", }
 
     ]
     return (
-        <VStack p={4} mt={"auto"}>
-            <VStack>
-                <HStack>
-                    <NavItemsList navItems={bottomIcons}></NavItemsList>
+        <VStack p={8} mt={"auto"} className='border-t-2 dark:border-t-slate-700 border-t-slate-200'>
+            <VStack spacing={5}>
+                <HStack spacing={5}>
+                    <NavItemsList navItems={bottomIcons} showGradient={true}></NavItemsList>
                 </HStack>
                 <Text>&copy; {new Date().getFullYear()} Mason Pierce</Text>
             </VStack>

diff --git a/src/components/NavItemList.tsx b/src/components/NavItemList.tsx
@@ -9,7 +9,8 @@ export type NavItem = {
     variant: "solid" | "outline" | "ghost" | "link",
     icon?: any,
     isExternal?: boolean
-    customButtonProps?: ButtonProps
+    customButtonProps?: ButtonProps,
+    noPadding?: boolean,
 }
 
 type Sizes = "sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl"
@@ -37,11 +38,11 @@ const NavItemsList = ({ navItems, iconOnly, size, showGradient, callbackWhenClic
             {navItems.map((item, index) => {
                 return item.icon && !item.name || iconOnly ?
                     <GradientShadow show={!!showGradient} key={`${index}-${item.id}-nav-icon`} fit={true}>
-                        <Button onClick={(e) => navigate(item.path, !!item.isExternal, e)} size={size} {...item.customButtonProps}>{item.icon}</Button>
+                        <Button className={item.noPadding ? "!p-0" : ''} onClick={(e) => navigate(item.path, !!item.isExternal, e)} size={size} {...item.customButtonProps}>{item.icon}</Button>
                     </GradientShadow>
                     :
                     <GradientShadow show={!!showGradient} key={`${index}-${item.id}-nav-item`} fit={true}>
-                        <Button leftIcon={item.icon || ''} onClick={(e) => navigate(item.path, !!item.isExternal, e)} variant={item.variant} size={size} {...item.customButtonProps}>{item.name}</Button>
+                        <Button className={item.noPadding ? "!p-0" : ''} leftIcon={item.icon || ''} onClick={(e) => navigate(item.path, !!item.isExternal, e)} variant={item.variant} size={size} {...item.customButtonProps}>{item.name}</Button>
                     </GradientShadow>
             })
             }