Improve styling of featurebar/searchbar

components/core/Featurebar/Featurebar.tsx

@@ -10,14 +10,14 @@ interface Props {
 
 const Featurebar: FC<Props> = ({ title, description, className }) => {
   const rootClassName = cn(
-    'hidden py-4 px-6 bg-black text-white md:flex flex-row justify-center items-center;',
+    'hidden py-2 px-6 bg-gray-100 text-sm text-gray-600 md:flex flex-row justify-center items-center font-medium',
     className
   )
   return (
     <div className={rootClassName}>
-      <span className="text-white font-medium">{title}</span>
+      <span>{title}</span>
       <span className={s.separator} />
-      <span className="text-white font-medium">{description}</span>
+      <span>{description}</span>
     </div>
   )
 }

components/core/Navbar/Navbar.module.css

@@ -1,10 +1,3 @@
-.root {
-}
-
-.container {
-  @apply flex justify-between items-center flex-row px-6 h-20 relative;
-}
-
 .link {
   @apply group text-gray-500 inline-flex items-center text-base leading-6 font-medium hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 cursor-pointer;
 }

components/core/Navbar/Navbar.tsx

@@ -10,26 +10,41 @@ interface Props {
 }
 
 const Navbar: FC<Props> = ({ className }) => {
-  const rootClassName = cn(s.root, className)
+  const rootClassName = className
   return (
     <div className={rootClassName}>
       <Container>
-        <div className={s.container}>
+        <div className="flex justify-between align-center flex-row px-6 py-4 md:py-6 relative">
+          <div className="flex flex-1 items-center">
             <Link href="/">
-            <span className="flex-0 cursor-pointer">
+              <a className="cursor-pointer">
                 <Logo />
-            </span>
+              </a>
             </Link>
-          <div className="flex flex-row h-full content-center flex-1 ml-10">
+            <nav className="space-x-4 ml-6 hidden md:block">
-            <nav className="hidden flex-row items-center px-6 lg:flex space-x-4">
+              <Link href="/">
                 <a className={s.link}>All</a>
+              </Link>
+              <Link href="/">
                 <a className={s.link}>Clothes</a>
-              <a className={s.link}>Accesories</a>
+              </Link>
+              <Link href="/">
+                <a className={s.link}>Accessories</a>
+              </Link>
             </nav>
+          </div>
+
+          <div className="md:flex flex-1 justify-center hidden">
             <Searchbar />
           </div>
+
+          <div className="flex flex-initial md:flex-1 justify-end">
             <UserNav />
           </div>
+        </div>
+        <div className="block flex pb-4 md:hidden px-6">
+          <Searchbar />
+        </div>
       </Container>
     </div>
   )

components/core/Searchbar/Searchbar.module.css

@@ -1,13 +1,5 @@
-.root {
-  @apply px-4 items-center hidden md:flex;
-}
-
-.container {
-  @apply relative rounded-lg flex flex-row text-sm items-center bg-accent-1;
-}
-
 .input {
-  @apply bg-transparent px-3 py-2 appearance-none w-full transition duration-150 ease-in-out rounded-lg text-accent-1 placeholder-accent-4;
+  @apply bg-transparent px-3 py-2 appearance-none w-full transition duration-150 ease-in-out rounded-lg text-gray-600 placeholder-accent-4;
   min-width: 300px;
 }
 

components/core/Searchbar/Searchbar.tsx

@@ -8,11 +8,13 @@ interface Props {
 }
 
 const Searchbar: FC<Props> = ({ className }) => {
-  const rootClassName = cn(s.root, className)
   return (
-    <div className={rootClassName}>
+    <div
-      <div className="flex-1 flex justify-between px-2">
+      className={cn(
-        <div className={s.container}>
+        'relative rounded-lg text-sm bg-accent-1 text-gray-600 w-full',
+        className
+      )}
+    >
       <input className={s.input} placeholder="Search for products..." />
       <div className={s.iconContainer}>
         <svg className={s.icon} fill="currentColor" viewBox="0 0 20 20">
@@ -24,8 +26,6 @@ const Searchbar: FC<Props> = ({ className }) => {
         </svg>
       </div>
     </div>
-      </div>
-    </div>
   )
 }