From 3817e19f5387ea5a4df1267f28df2b97e7431606 Mon Sep 17 00:00:00 2001
From: pheralb <pablohdez4340@gmail.com>
Date: Wed, 6 Jul 2022 19:52:52 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9A=92=EF=B8=8F=20Design=20improvements.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/common/iconBtn.tsx       |  2 ++
 src/common/link.tsx          |  5 ++++-
 src/interfaces/components.ts |  5 +++++
 src/layout/header/index.tsx  | 22 ++++++++++++++--------
 src/layout/header/mobile.tsx |  8 +++++---
 5 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/src/common/iconBtn.tsx b/src/common/iconBtn.tsx
index c8d0f88..f97c746 100644
--- a/src/common/iconBtn.tsx
+++ b/src/common/iconBtn.tsx
@@ -9,6 +9,8 @@ const CustomIconBtn = (props: CustomIconBtnProps) => {
       aria-label={props.title}
       icon={props.icon}
       onClick={props.onClick}
+      mr={props.mr}
+      ml={props.ml}
     />
   );
 };
diff --git a/src/common/link.tsx b/src/common/link.tsx
index f70af5d..bbfacc2 100644
--- a/src/common/link.tsx
+++ b/src/common/link.tsx
@@ -3,13 +3,16 @@ import { Link } from "@chakra-ui/react";
 import NextLink from "next/link";
 import { CustomLinkProps } from "@/interfaces/components";
 
-const CustomLink = ({ href, children, external }: CustomLinkProps) => {
+const CustomLink = ({ href, children, external, font, mr, ml }: CustomLinkProps) => {
   return (
     <NextLink href={href} passHref>
       <Link
         isExternal={external}
         _hover={{ textDecoration: "none" }}
         _focus={{ border: "none" }}
+        fontFamily={font}
+        mr={mr}
+        ml={ml}
       >
         {children}
       </Link>
diff --git a/src/interfaces/components.ts b/src/interfaces/components.ts
index 4da1685..31ccdf7 100644
--- a/src/interfaces/components.ts
+++ b/src/interfaces/components.ts
@@ -6,11 +6,16 @@ export interface CustomLinkProps {
   href: string;
   children: React.ReactNode;
   external?: boolean;
+  font?: string;
+  mr?: string;
+  ml?: string;
 }
 
 export interface CustomIconBtnProps {
   title: string;
   icon: React.ReactElement;
+  mr?: string;
+  ml?: string;
   onClick?: () => void;
 }
 
diff --git a/src/layout/header/index.tsx b/src/layout/header/index.tsx
index 3d9a28d..708f376 100644
--- a/src/layout/header/index.tsx
+++ b/src/layout/header/index.tsx
@@ -10,6 +10,7 @@ import {
   Icon,
   useDisclosure,
   Collapse,
+  Text,
 } from "@chakra-ui/react";
 import { ArrowSquareOut, MagnifyingGlass, Sticker, X } from "phosphor-react";
 import Theme from "./theme";
@@ -52,26 +53,31 @@ const Header = () => {
                 </HStack>
               </Tap>
             </CustomLink>
-            <HStack display="flex" alignItems="center" spacing={1}>
-              <HStack
-                spacing={1}
-                mr={1}
-                display={{ base: "none", md: "inline-flex" }}
-              >
+            <HStack display="flex" alignItems="center" spacing={2}>
+              <Box display={{ base: "none", md: "inline-flex" }}>
                 {Links.map((link) => (
                   <CustomLink
                     key={link.title}
                     href={link.slug}
                     external={link.external}
+                    font="Inter-Semibold"
+                    mr="4"
+                    ml="3"
                   >
-                    <Button variant="ghost" fontFamily="Inter-Semibold">
+                    <Tap>
                       {link.title}
                       {link.external ? (
                         <Icon as={ArrowSquareOut} ml="2" />
                       ) : null}
-                    </Button>
+                    </Tap>
                   </CustomLink>
                 ))}
+              </Box>
+              <HStack
+                spacing={1}
+                mr={1}
+                display={{ base: "none", md: "inline-flex" }}
+              >
                 <CustomIconBtn
                   title="Toggle Search bar"
                   icon={
diff --git a/src/layout/header/mobile.tsx b/src/layout/header/mobile.tsx
index bd9f7c1..03b8474 100644
--- a/src/layout/header/mobile.tsx
+++ b/src/layout/header/mobile.tsx
@@ -9,20 +9,22 @@ import {
 } from "@chakra-ui/react";
 import { List } from "phosphor-react";
 import { Links } from "./links";
+import Theme from "./theme";
 
 const Mobile = () => {
   const bg = useColorModeValue("bg.light", "bg.dark");
   const mobileNav = useDisclosure();
   return (
     <>
+      <Theme />
       <IconButton
         display={{ base: "flex", md: "none" }}
         aria-label="Open menu navbar"
         variant="ghost"
         icon={<List size={22} />}
         onClick={mobileNav.onOpen}
+        ml="2"
       />
-
       <VStack
         pos="absolute"
         top={0}
@@ -33,7 +35,7 @@ const Mobile = () => {
         p={4}
         pb={4}
         bg={bg}
-        spacing={3}
+        spacing={5}
         rounded="sm"
         shadow="sm"
         borderWidth="1px"
@@ -46,7 +48,7 @@ const Mobile = () => {
             href={link.slug}
             external={link.external}
           >
-            <Button variant="ghost">{link.title}</Button>
+            {link.title}
           </CustomLink>
         ))}
       </VStack>