Styling Issues

site/components/common/Navbar/Navbar.tsx

@@ -16,7 +16,7 @@ interface NavbarProps {
 
 const Navbar: FC<NavbarProps> = ({ links }) => (
   <NavbarRoot>
-    <Container>
+    <Container clean className="mx-auto max-w-8xl px-6">
       <div className={s.nav}>
         <div className="flex items-center flex-1">
           <Link href="/">

site/components/common/UserNav/UserNav.module.css

@@ -7,20 +7,21 @@
 }
 
 .item {
-  @apply ml-6 cursor-pointer relative transition ease-in-out duration-100 flex items-center outline-none text-primary;
+  @apply ml-6 cursor-pointer relative transition ease-in-out
+  duration-100 flex items-center outline-none text-primary;
+}
 
-  &:hover {
+.item:hover {
-    @apply text-accent-6 transition scale-110 duration-100;
+  @apply text-accent-6 transition scale-110 duration-100;
-  }
+}
 
-  &:first-child {
+.item:first-child {
-    @apply ml-0;
+  @apply ml-0;
-  }
+}
 
-  &:focus,
+.item:focus,
-  &:active {
+.item:active {
-    @apply outline-none;
+  @apply outline-none;
-  }
 }
 
 .bagCount {

site/components/ui/Container/Container.tsx

@@ -12,10 +12,10 @@ const Container: FC<ContainerProps> = ({
   children,
   className,
   el = 'div',
-  clean,
+  clean = false, // Full Width Screen
 }) => {
   const rootClassName = cn(className, {
-    'mx-auto max-w-8xl px-6': !clean,
+    'mx-auto max-w-7xl px-6 w-full': !clean,
   })
 
   let Component: React.ComponentType<React.HTMLAttributes<HTMLDivElement>> =

site/pages/cart.tsx

@@ -3,7 +3,7 @@ import useCart from '@framework/cart/use-cart'
 import usePrice from '@framework/product/use-price'
 import commerce from '@lib/api/commerce'
 import { Layout } from '@components/common'
-import { Button, Text } from '@components/ui'
+import { Button, Text, Container } from '@components/ui'
 import { Bag, Cross, Check, MapPin, CreditCard } from '@components/icons'
 import { CartItem } from '@components/cart'
 import { useUI } from '@components/ui/context'
@@ -48,8 +48,8 @@ export default function Cart() {
   }
 
   return (
-    <div className="grid lg:grid-cols-12 w-full max-w-7xl mx-auto">
+    <Container className="grid lg:grid-cols-12 pt-4 gap-20">
-      <div className="lg:col-span-8">
+      <div className="lg:col-span-7">
         {isLoading || isEmpty ? (
           <div className="flex-1 px-12 py-24 flex flex-col justify-center items-center ">
             <span className="border border-dashed border-secondary flex items-center justify-center w-16 h-16 bg-primary p-12 rounded-lg text-primary">
@@ -82,7 +82,7 @@ export default function Cart() {
             </h2>
           </div>
         ) : (
-          <div className="px-4 sm:px-6 flex-1">
+          <div className="lg:px-0 sm:px-6 flex-1">
             <Text variant="pageHeading">My Cart</Text>
             <Text variant="sectionHeading">Review your Order</Text>
             <ul className="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-accent-2 border-b border-accent-2">
@@ -111,7 +111,7 @@ export default function Cart() {
           </div>
         )}
       </div>
-      <div className="lg:col-span-4">
+      <div className="lg:col-span-5">
         <div className="flex-shrink-0 px-4 py-24 sm:px-6">
           {process.env.COMMERCE_CUSTOMCHECKOUT_ENABLED && (
             <>
@@ -185,7 +185,7 @@ export default function Cart() {
           </div>
         </div>
       </div>
-    </div>
+    </Container>
   )
 }
 

site/pages/orders.tsx

@@ -22,7 +22,7 @@ export async function getStaticProps({
 
 export default function Orders() {
   return (
-    <Container>
+    <Container className="pt-4">
       <Text variant="pageHeading">My Orders</Text>
       <div className="flex-1 p-24 flex flex-col justify-center items-center ">
         <span className="border border-dashed border-secondary rounded-full flex items-center justify-center w-16 h-16 p-12 bg-primary text-primary">

site/pages/profile.tsx

@@ -23,24 +23,28 @@ export async function getStaticProps({
 export default function Profile() {
   const { data } = useCustomer()
   return (
-    <Container>
+    <Container className="pt-4">
       <Text variant="pageHeading">My Profile</Text>
-      {data && (
+      <div className="grid grid-cols-4">
-        <div className="grid lg:grid-cols-12">
+        {data && (
-          <div className="lg:col-span-8 pr-4">
+          <div className="flex flex-col divide-accent-2 divide-y">
-            <div>
+            <div className="flex flex-row items-center space-x-4 py-4">
-              <Text variant="sectionHeading">Full Name</Text>
+              <span className="text-lg font-medium text-accent-600 flex-1">
+                Full Name
+              </span>
               <span>
                 {data.firstName} {data.lastName}
               </span>
             </div>
-            <div className="mt-5">
+            <div className="flex flex-row items-center space-x-4 py-4">
-              <Text variant="sectionHeading">Email</Text>
+              <span className="text-lg font-medium text-accent-600 flex-1">
+                Email
+              </span>
               <span>{data.email}</span>
             </div>
           </div>
-        </div>
+        )}
-      )}
+      </div>
     </Container>
   )
 }

site/pages/wishlist.tsx

@@ -40,8 +40,8 @@ export default function Wishlist() {
   const { data, isLoading, isEmpty } = useWishlist({ includeProducts: true })
 
   return (
-    <Container>
+    <Container className="pt-4">
-      <div className="mt-3 mb-20">
+      <div className="mb-20">
         <Text variant="pageHeading">My Wishlist</Text>
         <div className="group flex flex-col">
           {isLoading ? (