From 4ca580983a9a7fa042605033b19c0b4d3b07485a Mon Sep 17 00:00:00 2001
From: Bel Curcio <curciobel@gmail.com>
Date: Tue, 8 Mar 2022 17:53:09 +0100
Subject: [PATCH] Fixes for Wishlist View

---
 .../WishlistCard/WishlistCard.module.css      | 47 ++++++++++-----
 .../wishlist/WishlistCard/WishlistCard.tsx    | 60 +++++++++----------
 site/pages/wishlist.tsx                       |  4 +-
 3 files changed, 64 insertions(+), 47 deletions(-)

diff --git a/site/components/wishlist/WishlistCard/WishlistCard.module.css b/site/components/wishlist/WishlistCard/WishlistCard.module.css
index cd0237d3b..633249fa2 100644
--- a/site/components/wishlist/WishlistCard/WishlistCard.module.css
+++ b/site/components/wishlist/WishlistCard/WishlistCard.module.css
@@ -1,21 +1,38 @@
 .root {
-  @apply grid grid-cols-12 w-full gap-6 px-3 py-6 border-b border-accent-2 transition duration-100 ease-in-out;
+  @apply relative grid sm:grid-cols-1 lg:grid-cols-12
+  w-full gap-6 px-3 py-6 border-b border-accent-2
+  transition duration-100 ease-in-out;
+}
 
-  &:nth-child(3n + 1) {
-    & .productBg {
-      @apply bg-violet;
-    }
-  }
+.root:nth-child(3n + 1) .imageWrapper {
+  @apply bg-violet;
+}
 
-  &:nth-child(3n + 2) {
-    & .productBg {
-      @apply bg-pink;
-    }
-  }
+.root:nth-child(3n + 2) .imageWrapper {
+  @apply bg-pink;
+}
 
-  &:nth-child(3n + 3) {
-    & .productBg {
-      @apply bg-blue;
-    }
+.root:nth-child(3n + 3) .imageWrapper {
+  @apply bg-blue;
+}
+
+.imageWrapper {
+  @apply col-span-3;
+  min-width: 230px;
+  width: 230px;
+  height: 230px;
+}
+
+.description {
+  @apply col-span-7 flex flex-col;
+}
+
+.actions {
+  @apply absolute bg-white p-6 top-0 right-4;
+}
+
+@media screen(lg) {
+  .actions {
+    @apply static col-span-2 flex flex-col justify-between space-y-4;
   }
 }
diff --git a/site/components/wishlist/WishlistCard/WishlistCard.tsx b/site/components/wishlist/WishlistCard/WishlistCard.tsx
index 7d0c6710a..7deb05e16 100644
--- a/site/components/wishlist/WishlistCard/WishlistCard.tsx
+++ b/site/components/wishlist/WishlistCard/WishlistCard.tsx
@@ -63,41 +63,41 @@ const WishlistCard: FC<Props> = ({ item }) => {
 
   return (
     <div className={cn(s.root, { 'opacity-75 pointer-events-none': removing })}>
-      <div className={`col-span-3 ${s.productBg}`}>
-        <div>
-          <Image
-            src={product.images[0]?.url || placeholderImg}
-            width={400}
-            height={400}
-            alt={product.images[0]?.alt || 'Product Image'}
-          />
-        </div>
+      <div className={s.imageWrapper}>
+        <Image
+          width={230}
+          height={230}
+          src={product.images[0]?.url || placeholderImg}
+          alt={product.images[0]?.alt || 'Product Image'}
+        />
       </div>
 
-      <div className="col-span-7">
-        <h3 className="text-2xl mb-2">
-          <Link href={`/product${product.path}`}>
-            <a>{product.name}</a>
-          </Link>
-        </h3>
-        <div className="mb-4">
-          <Text html={product.description} />
+      <div className={s.description}>
+        <div className="flex-1 mb-6">
+          <h3 className="text-2xl mb-2 -mt-1">
+            <Link href={`/product${product.path}`}>
+              <a>{product.name}</a>
+            </Link>
+          </h3>
+          <div className="mb-4">
+            <Text html={product.description} />
+          </div>
+        </div>
+        <div>
+          <Button
+            width={260}
+            aria-label="Add to Cart"
+            type="button"
+            onClick={addToCart}
+            loading={loading}
+          >
+            Add to Cart
+          </Button>
         </div>
-        <Button
-          aria-label="Add to Cart"
-          type="button"
-          className={
-            'py-1 px-3 border border-secondary rounded-md shadow-sm hover:bg-primary-hover'
-          }
-          onClick={addToCart}
-          loading={loading}
-        >
-          Add to Cart
-        </Button>
       </div>
-      <div className="col-span-2 flex flex-col justify-between">
+      <div className={s.actions}>
         <div className="flex justify-end font-bold">{price}</div>
-        <div className="flex justify-end">
+        <div className="flex justify-end mt-4 lg:mt-0">
           <button onClick={handleRemove}>
             <Trash />
           </button>
diff --git a/site/pages/wishlist.tsx b/site/pages/wishlist.tsx
index c4c347986..1b8edb31f 100644
--- a/site/pages/wishlist.tsx
+++ b/site/pages/wishlist.tsx
@@ -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!} />
                 ))}