fix: update navbar styles (#162)

* fix: update navbar styles

Author: thrxpt

apps/web/app/_components/navbar/cta.tsx

@@ -14,7 +14,7 @@ const Landing = ({ isMobile }: { isMobile?: boolean }) => {
   }
   return (
     <Link href="/sign-in" className="2xl:h-full">
-      <button className="hidden cursor-pointer items-center justify-center gap-4 rounded-full bg-gradient-to-r from-purple-400/50 to-pink-300/50 px-6 py-2 text-base shadow-xl shadow-black/25 lg:flex lg:gap-6 lg:px-8 lg:py-2.5 lg:text-lg 2xl:h-full 2xl:self-stretch 2xl:px-10 2xl:text-lg">
+      <button className="text-button-2 hidden cursor-pointer items-center justify-center gap-4 whitespace-nowrap rounded-full bg-gradient-to-r from-purple-400/50 to-pink-300/50 shadow-xl shadow-black/25 lg:flex lg:h-full lg:px-8 lg:py-3 2xl:px-10 2xl:py-2.5">
         ลงทะเบียน
       </button>
     </Link>

apps/web/app/_components/navbar/index.tsx

@@ -79,8 +79,8 @@ export function Navbar({ links, CTAId, sections }: NavbarProps) {
   const isActive = (href: string) => active === href
   return (
     <div className="z-100 sticky top-0 w-full p-9 px-[24px] lg:px-[60px] 2xl:px-[160px]">
-      <GlassCard className="flex items-center justify-between rounded-full pl-3 pr-5 backdrop-blur-md lg:pr-3">
-        <div className="flex w-[142px] items-center justify-center pt-1 lg:w-[120px] 2xl:w-[180px]">
+      <GlassCard className="flex items-center rounded-full pl-3 pr-5 backdrop-blur-md lg:pr-3">
+        <div className="flex w-[142px] items-center justify-center lg:w-[120px] 2xl:w-[180px]">
           <NavLink href={"/"}>
             <Image
               style={{ width: "100%", height: "auto", objectFit: "cover" }}
@@ -91,21 +91,23 @@ export function Navbar({ links, CTAId, sections }: NavbarProps) {
             />
           </NavLink>
         </div>
-        <div className="hidden items-center lg:flex lg:gap-2 2xl:justify-between 2xl:gap-2.5">
-          {links.map((item, i) => {
-            if (item.type === "normal" && !item.mobileOnly) {
-              return (
-                <NavLink
-                  key={item.label}
-                  className={`rounded-full px-3 py-3 text-white lg:px-3 2xl:px-6 ${isActive(item.href.replace("#", "")) ? "text-nav-1-selected liquid" : "text-nav-2"}`}
-                  href={item.href}>
-                  {item.label}
-                </NavLink>
-              )
-            } else return <Fragment key={`${item.label}-${i}`}></Fragment>
-          })}
+        <div className="flex flex-1 items-center justify-center">
+          <div className="hidden items-center lg:flex lg:gap-2 2xl:gap-2.5">
+            {links.map((item, i) => {
+              if (item.type === "normal" && !item.mobileOnly) {
+                return (
+                  <NavLink
+                    key={item.label}
+                    className={`rounded-full px-4 py-3 text-white 2xl:px-6 2xl:py-4 ${isActive(item.href.replace("#", "")) ? "text-nav-1-selected liquid" : "text-nav-2"}`}
+                    href={item.href}>
+                    {item.label}
+                  </NavLink>
+                )
+              } else return <Fragment key={`${item.label}-${i}`}></Fragment>
+            })}
+          </div>
         </div>
-        <div className="flex h-[70px] items-center">
+        <div className="flex h-[70px] w-[142px] items-center justify-end lg:w-[120px] 2xl:w-[180px]">
           {CTA[CTAId]}
           <Drawer>
             <DrawerTrigger asChild>

packages/ui/src/styles/globals.css

@@ -238,9 +238,11 @@
   }
 
   .group::before {
-    background: radial-gradient(80% 80% at 50% 50%,
-        var(--glow-color, rgba(159, 131, 220, 0.5)) 0%,
-        transparent 70%);
+    background: radial-gradient(
+      80% 80% at 50% 50%,
+      var(--glow-color, rgba(159, 131, 220, 0.5)) 0%,
+      transparent 70%
+    );
   }
 
   .bg-home {
@@ -263,4 +265,4 @@
       background-image: url("/static/background-image/Home.webp");
     }
   }
-}
+}