Tablet support for nav

Author: coder8080

src/shared/ui/Button/styles.ts

@@ -7,7 +7,7 @@ export const button = tv({
       xs: "capitalize font-[Poppins] font-medium text-[12px] px-[16px] py-[12px] lg:text-[10px] lg:px-[16px] lg:py-[12px] xl:text-[14px] xl:px-[22px] xl:py-[18px]",
       sm: "uppercase font-[Poppins] text-[10px] px-[18px] py-[10px] xl:text-[14px] xl:px-[26px] xl:py-[16px]",
       md: "uppercase font-[Poppins] text-[12px] px-[21px] py-[15px] xl:text-[16px] xl:px-[30px] xl:py-[18px]",
-      lg: "uppercase font-[Poppins] lg:text-[17px] lg:px-[24px] lg:py-[16px]",
+      lg: "uppercase font-[Poppins] lg:text-[12px] lg:px-[18px] lg:py-[12px] xl:text-[17px] xl:px-[24px] xl:py-[16px]",
       xl: "capitalize font-[Outfit] text-[12px] px-[14px] py-[10px] lg:text-[16px] lg:px-[18px] lg:py-[14px] xl:text-[22px] xl:px-[26px] xl:py-[20px]",
       xl2: "capitalize font-[Outfit] text-[12px] px-[14px] py-[10px] lg:text-[16px] lg:px-[22px] lg:py-[14px] xl:text-[22px] xl:px-[30px] xl:py-[20px]",
     },

src/shared/ui/Nav/Nav.tsx

@@ -10,11 +10,11 @@ const Nav = () => {
 
   return (
     <>
-      <nav class="flex justify-center sticky top-0 w-full bg-[#f9f9f9]/40 backdrop-blur-3xl z-3 px-[28px] xl:px-0 xl:pt-[20px] xl:mt-[25px]">
-        <div class="max-w-[1200px] xl:flex flex-row items-center gap-[118px] h-[78px] pb-[20px] hidden">
-          <div class="flex flex-row gap-[57px] items-center">
+      <nav class="flex justify-center sticky top-0 w-full bg-[#f9f9f9]/40 backdrop-blur-3xl z-3 px-[28px] lg:px-0 lg:pt-[20px] lg:mt-[25px]">
+        <div class="lg:flex flex-row items-center gap-[80px] xl:gap-[100px] pb-[20px] hidden">
+          <div class="flex flex-row gap-[40px] xl:gap-[50px] items-center">
             <A href="/#">
-              <img src="/divesea/icons/logo.svg" class="w-[53px] h-[53px]" alt="Logo" />
+              <img src="/divesea/icons/logo.svg" class="w-[40px] xl:w-[50px] aspect-square" alt="Logo" />
             </A>
             <div class="flex flex-row gap-[24px]">
               <a class="nav-link" href="#weekly">
@@ -31,14 +31,14 @@ const Nav = () => {
               </a>
             </div>
           </div>
-          <div class="flex flex-row gap-[30px] items-center">
+          <div class="flex flex-row gap-[20px] xl:gap-[30px] items-center">
             <Search />
             <Button size="lg" fill>
               Connect Wallet
             </Button>
           </div>
         </div>
-        <div class="flex flex-row xl:hidden w-full py-[16px] justify-between">
+        <div class="flex flex-row lg:hidden w-full py-[16px] justify-between">
           <div class="flex flex-row gap-[7px] items-center">
             <img src="/divesea/icons/wave_black.svg" alt="Logo" />
             <span class="font-[Poppins] font-semibold text-[21.36px] text-black">DiveSea</span>

src/shared/ui/Nav/Search.tsx

@@ -1,9 +1,9 @@
 const Search = () => (
-  <div class="flex flex-row w-[348px] h-[57px] bg-[#ededed] rounded-2xl items-center p-[22px] gap-[22px]">
-    <img loading="lazy" src="/divesea/icons/search.svg" class="h-[22px] w-[22px]" alt="Search" />
+  <div class="flex flex-row w-[250px] h-[40px] xl:w-[348px] xl:h-[57px] bg-[#ededed] rounded-2xl items-center p-[22px] gap-[22px]">
+    <img loading="lazy" src="/divesea/icons/search.svg" class="w-[16px] xl:w-[22px] aspect-square" alt="Search" />
     <input
-      placeholder="Search Art Work / Creator"
-      class="placeholder:text-[#c2c3cb] outline-none font-[Poppins] font-medium grow"
+      placeholder="Search Art Work or Creator"
+      class="placeholder:text-[#c2c3cb] outline-none font-[Poppins] font-medium grow text-[12px] xl:text-[16px] xl:w-[220px] tracking-[-2%]"
     />
   </div>
 )

src/shared/ui/Nav/styles.css

@@ -5,3 +5,9 @@
   font-size: 18px;
   color: #606060;
 }
+
+@media screen and (max-width: 1279px) {
+  .nav-link {
+    font-size: 12px;
+  }
+}