Improve padding in navbar

devinshoemaker · Feb 7, 2021 · 9e55c33 · 9e55c33 · vercel · Feb 7, 2021
1 parent bd44b89
commit 9e55c33
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 5 deletions.
diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
@@ -9,14 +9,14 @@ import NavBarLink from './NavBarLink';
 
 function NavBar() {
   return (
-    <div className="flex justify-between items-center px-6 h-16 w-full bg-gray-900 dark:bg-black shadow-lg z-10 fixed top-0 overflow-auto">
+    <div className="flex justify-between items-center h-16 w-full bg-gray-900 dark:bg-black shadow-lg z-10 fixed top-0 overflow-auto">
       <nav className="flex">
         <NavBarLink label="Home" href="/" />
         <NavBarLink label="Blog" href="/blog" />
         <NavBarLink label="Projects" href="/projects" />
         <NavBarLink label="About" href="/about" />
       </nav>
-      <div className="flex">
+      <div className="flex ml-6">
         <NavBarExternalLink href="https://dev.to/devinshoemaker" icon={faDev} />
         <NavBarExternalLink
           href="https://twitch.tv/paranoidcoder"

diff --git a/src/components/NavBarExternalLink.tsx b/src/components/NavBarExternalLink.tsx
@@ -9,7 +9,7 @@ interface NavBarExternalLinkProps {
 
 function NavBarExternalLink({ href, icon }: NavBarExternalLinkProps) {
   return (
-    <a href={href} target="blank" className="ml-6">
+    <a href={href} target="blank" className="mr-6">
       <FontAwesomeIcon
         icon={icon}
         color="white"

diff --git a/src/components/NavBarLink.tsx b/src/components/NavBarLink.tsx
@@ -7,9 +7,9 @@ interface NavBarLinkProps {
 
 function NavBarLink({ label, href }: NavBarLinkProps) {
   return (
-    <ul style={{ height: 'fit-content' }}>
+    <ul style={{ height: 'fit-content' }} className="ml-6">
       <Link href={href}>
-        <a className="mr-4 text-xl text-gray-100 no-underline">{label}</a>
+        <a className="text-xl text-gray-100 no-underline">{label}</a>
       </Link>
     </ul>
   );