From d26ab52cb25563240fa42c0189f5859091c01355 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Wed, 23 Sep 2020 16:57:17 -0300
Subject: [PATCH] More UI Changes

---
 components/Navbar/Navbar.module.css |  6 +++++-
 components/Navbar/Navbar.tsx        | 14 ++++++++------
 pages/index.tsx                     |  2 +-
 ui/Container/Container.module.css   |  3 ++-
 4 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/components/Navbar/Navbar.module.css b/components/Navbar/Navbar.module.css
index d0189b847..15275affc 100644
--- a/components/Navbar/Navbar.module.css
+++ b/components/Navbar/Navbar.module.css
@@ -1,3 +1,7 @@
 .root {
-  @apply flex justify-between items-center px-4 py-5;
+  @apply px-4 py-5;
+}
+
+.container {
+  @apply flex justify-between items-center flex-row;
 }
diff --git a/components/Navbar/Navbar.tsx b/components/Navbar/Navbar.tsx
index 49c77871b..e5036ed7d 100644
--- a/components/Navbar/Navbar.tsx
+++ b/components/Navbar/Navbar.tsx
@@ -1,7 +1,7 @@
 import cn from "classnames";
-import { FunctionComponent } from "react";
+import React, { FunctionComponent } from "react";
 import s from "./Navbar.module.css";
-import { Logo } from "ui";
+import { Logo, Container } from "ui";
 interface Props {
   className?: string;
   children?: any;
@@ -11,10 +11,12 @@ const Navbar: FunctionComponent<Props> = ({ className }) => {
   const rootClassName = cn(s.root, className);
   return (
     <div className={rootClassName}>
-      <Logo />
-      <div>SEARCH BAR</div>
-      <div>Menu list bar</div>
-      <div>Menu Icon bar</div>
+      <Container className={s.container}>
+        <Logo />
+        <div>SEARCH BAR</div>
+        <div>Menu list bar</div>
+        <div>Menu Icon bar</div>
+      </Container>
     </div>
   );
 };
diff --git a/pages/index.tsx b/pages/index.tsx
index 761d12e0b..7e202e306 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -9,7 +9,7 @@ export default function Home() {
         title="Free Standard Shipping on orders over $99.99"
         description="Due to COVID-19, some orders may experience processing and delivery delays."
       />
-      <Container className="py-12 bg-black">
+      <Container className="py-12">
         <Button>Click Me!</Button>
       </Container>
     </>
diff --git a/ui/Container/Container.module.css b/ui/Container/Container.module.css
index 8f87e20dc..b244b6372 100644
--- a/ui/Container/Container.module.css
+++ b/ui/Container/Container.module.css
@@ -1,3 +1,4 @@
 .root {
-  @apply max-w-6xl mx-auto;
+  @apply max-w-6xl mx-auto px-2;
+  display: inherit;
 }