Merge pull request #1260 from dacadeorg/fix/nav-links-spacing

fix: navbar spacings

Author: musayann

src/components/layout/Navbar.tsx

@@ -87,21 +87,21 @@ export default function Navbar({ settings, sidebarBurgerColor = false }: NavbarP
   };
 
   return (
-    <div className="text-gray-900 " style={containerStyle}>
+    <div className="text-gray-900" style={containerStyle}>
       <div className="content-wrapper lg:py-12 py-6 flex relative">
         <ul className="relative">
           <NavItem to="/" type="logo w-8 h-8 md:w-11 md:h-11">
             <Logo />
           </NavItem>
-          <NavItem to="/" type="brand mx-0.5">
+          <NavItem to="/" type="brand">
             {t("app.name")}
           </NavItem>
         </ul>
         {isAuthenticatedAndVerified && (
           <ul className="hidden lg:block relative self-center">
             <NavItem to="/bounties">{t("nav.bounties")}</NavItem>
             <NavItem to={"/communities"}>{t("nav.communities")}</NavItem>
-            <button className="nav-item underline underline-offset-2 text-primary bg-transparent pl-2 py-0 capitalize" onClick={displayJobOffersPopup}>
+            <button type="button" className="nav-item underline underline-offset-2 text-primary bg-transparent p-0 capitalize" onClick={displayJobOffersPopup}>
               {t("job.offers.title")}
             </button>
           </ul>

src/components/popups/NotificationPopup.tsx

@@ -61,7 +61,7 @@ export default function NotificationPopup({ buttonStyles }: NotificationPopupPro
   return (
     <div>
       <span onClick={externalClick}>
-        <li className={`inline-block align-middle mr-2 relative text-gray-500 max-w-80 ${isNotificationVisible ? "z-50" : "z-10"}`} onClick={toggle}>
+        <li className={`inline-block align-middle mr-3 relative text-gray-500 max-w-80 ${isNotificationVisible ? "z-50" : "z-10"}`} onClick={toggle}>
           <Button type="button" padding={false} variant="secondary" className="p-2 bg-gray-100 bg-opacity-75 hover:bg-gray-50 text-primary" customStyle={buttonStyles}>
             <BellIcon />
             {unread > 0 && <Badge value={unread} className="top-0 -right-1 absolute" />}

src/styles/globals.css

@@ -51,13 +51,13 @@ body {
 }
 
 .nav-item {
-  @apply font-normal ml-2 opacity-70 hover:opacity-100;
+  @apply font-normal ml-3 opacity-70 hover:opacity-100;
 }
 .nav-item a {
   @apply align-text-top;
 }
 .nav-brand {
-  @apply font-semibold mx-1.5;
+  @apply font-semibold ml-2;
 }
 .content-wrapper {
   @apply relative;