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,25 +10,40 @@ 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}>
-          <Link href="/">
-            <span className="flex-0 cursor-pointer">
-              <Logo />
-            </span>
-          </Link>
-          <div className="flex flex-row h-full content-center flex-1 ml-10">
-            <nav className="hidden flex-row items-center px-6 lg:flex space-x-4">
-              <a className={s.link}>All</a>
-              <a className={s.link}>Clothes</a>
-              <a className={s.link}>Accesories</a>
+        <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="/">
+              <a className="cursor-pointer">
+                <Logo />
+              </a>
+            </Link>
+            <nav className="space-x-4 ml-6 hidden md:block">
+              <Link href="/">
+                <a className={s.link}>All</a>
+              </Link>
+              <Link href="/">
+                <a className={s.link}>Clothes</a>
+              </Link>
+              <Link href="/">
+                <a className={s.link}>Accessories</a>
+              </Link>
             </nav>
+          </div>
+
+          <div className="md:flex flex-1 justify-center hidden">
             <Searchbar />
           </div>
-          <UserNav />
+
+          <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,22 +8,22 @@ interface Props {
 }
 
 const Searchbar: FC<Props> = ({ className }) => {
-  const rootClassName = cn(s.root, className)
   return (
-    <div className={rootClassName}>
-      <div className="flex-1 flex justify-between px-2">
-        <div className={s.container}>
-          <input className={s.input} placeholder="Search for products..." />
-          <div className={s.iconContainer}>
-            <svg className={s.icon} fill="currentColor" viewBox="0 0 20 20">
-              <path
-                fillRule="evenodd"
-                clipRule="evenodd"
-                d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
-              />
-            </svg>
-          </div>
-        </div>
+    <div
+      className={cn(
+        '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">
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
+          />
+        </svg>
       </div>
     </div>
   )