Fixes & Updates (#704)

* Adding Dropdown Component

* Styling Issues

* Wishlist Fix

* Fixes for Wishlist View

* Hearts now work again

* Rollback ts

* Removing extra config to disable BigCommerce

* Fixes for Wishlist View

* Remove transition/animation for mobile

* New Updates.

* New Updates.

* Dropdown fix

* Polish

* export

* export

* revert tsconfig

Co-authored-by: Luis Alvarez D. <luis@vercel.com>

Co-authored-by: Dom Sip <dom@vercel.com>
Co-authored-by: Luis Alvarez D. <luis@vercel.com>

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">
-      <div className="lg:col-span-8">
+    <Container className="grid lg:grid-cols-12 pt-4 gap-20">
+      <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 lg:grid-cols-12">
-          <div className="lg:col-span-8 pr-4">
-            <div>
-              <Text variant="sectionHeading">Full Name</Text>
+      <div className="grid grid-cols-4">
+        {data && (
+          <div className="flex flex-col divide-accent-2 divide-y">
+            <div className="flex flex-row items-center space-x-4 py-4">
+              <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">
-              <Text variant="sectionHeading">Email</Text>
+            <div className="flex flex-row items-center space-x-4 py-4">
+              <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>
-      <div className="mt-3 mb-20">
+    <Container className="pt-4">
+      <div className="mb-20">
         <Text variant="pageHeading">My Wishlist</Text>
         <div className="group flex flex-col">
           {isLoading ? (
@@ -65,9 +65,9 @@ export default function Wishlist() {
               </p>
             </div>
           ) : (
-            <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+            <div className="grid grid-cols-1 gap-6 ">
               {data &&
-                // @ts-ignore Shopify - Fix this types
+                // @ts-ignore - Wishlist Item Type
                 data.items?.map((item) => (
                   <WishlistCard key={item.id} item={item!} />
                 ))}