MM2-1696 Fix: seller logo shrinking on PDP and design fixes for seller section

src/components/cells/ProductDetailsSeller/ProductDetailsSeller.tsx

@@ -1,5 +1,4 @@
 import LocalizedClientLink from "@/components/molecules/LocalizedLink/LocalizedLink"
-import { CollapseIcon } from "@/icons"
 import { SellerInfo } from "@/components/molecules"
 import { SellerProps } from "@/types/seller"
 
@@ -8,13 +7,10 @@ export const ProductDetailsSeller = ({ seller }: { seller?: SellerProps }) => {
 
   return (
     <div className="border rounded-sm">
-      <div className="p-4">
-        <LocalizedClientLink href={`/sellers/${seller.handle}`}>
+      <div>
           <div className="flex justify-between">
-            <SellerInfo seller={seller} />
-            <CollapseIcon className="-rotate-90" />
+            <SellerInfo seller={seller} showArrow />
           </div>
-        </LocalizedClientLink>
       </div>
     </div>
   )

src/components/cells/SellerAvatar/SellerAvatar.tsx

@@ -15,15 +15,17 @@ export const SellerAvatar = ({
       alt={alt}
       width={size}
       height={size}
-      style={{ width: size, height: size }}
+      className="shrink-0"
+      style={{ maxWidth: size, maxHeight: size }}
     />
   ) : (
     <Image
       src="/images/placeholder.svg"
       alt={alt}
-      className="opacity-30 w-8 h-8"
+      className="opacity-30 w-8 h-8 shrink-0"
       width={32}
       height={32}
+      style={{ maxWidth: 32, maxHeight: 32 }}
     />
   )
 }

src/components/molecules/SellerInfo/SellerInfo.tsx

@@ -2,13 +2,17 @@ import { StarRating } from "@/components/atoms"
 import { SellerAvatar } from "@/components/cells/SellerAvatar/SellerAvatar"
 import { SellerProps } from "@/types/seller"
 import { SellerReview } from "../SellerReview/SellerReview"
+import { CollapseIcon } from "@/icons"
+import LocalizedClientLink from "../LocalizedLink/LocalizedLink"
 
 export const SellerInfo = ({
   seller,
   header = false,
+  showArrow = false,
 }: {
   seller: SellerProps
   header?: boolean
+  showArrow?: boolean
 }) => {
   const { photo, name, reviews } = seller
 
@@ -24,26 +28,37 @@ export const SellerInfo = ({
       : 0
 
   return (
-    <div className="flex gap-4 w-full">
-      <div className="relative h-12 w-12 overflow-hidden rounded-sm">
-        <SellerAvatar photo={photo} size={56} alt={name} />
-      </div>
-      <div className="w-[90%]">
-        <h3 className="heading-sm text-primary">{name}</h3>
-        <div className="flex items-center gap-2 border-b pb-4">
-          <StarRating starSize={16} rate={rating || 0} />
-          <span className="text-md text-secondary">{reviewCount} reviews</span>
+    <div className="flex flex-col w-full">
+      <div className="flex gap-4 w-full border-b pb-5 p-4 items-center">
+        <div className="rounded-sm">
+          <SellerAvatar photo={photo} size={56} alt={name} />
         </div>
-        <div className="mt-4">
-          {!header &&
-            reviews
-              ?.filter((rev) => rev !== null)
-              .slice(-3)
-              .map((review) => (
-                <SellerReview key={review.id} review={review} />
-              ))}
+        <div className="flex flex-col gap-1">
+          <h3 className="heading-sm text-primary">{name}</h3>
+          <div className="flex items-center gap-2">
+            <StarRating starSize={14} rate={rating || 0} />
+            <span className="label-md text-secondary">
+              {reviewCount} reviews
+            </span>
+          </div>
         </div>
+        {showArrow && (
+          <LocalizedClientLink className="ml-auto" href={`/sellers/${seller.handle}`}>
+            <CollapseIcon className="-rotate-90" />
+          </LocalizedClientLink>
+        )}
       </div>
+      {!header && (
+        <div className="flex flex-col gap-5 p-4">
+          <h3 className="heading-sm uppercase">Seller reviews</h3>
+          {reviews
+            ?.filter((rev) => rev !== null)
+            .slice(-3)
+            .map((review) => (
+              <SellerReview key={review.id} review={review} />
+            ))}
+        </div>
+      )}
     </div>
   )
 }

src/components/molecules/SellerReview/SellerReview.tsx

@@ -1,40 +1,53 @@
 import { StarRating } from "@/components/atoms"
 import { SingleProductReview } from "@/types/product"
 import { Divider } from "@medusajs/ui"
+import clsx from "clsx"
 import { formatDistanceToNow } from "date-fns"
 
 export const SellerReview = ({ review }: { review: SingleProductReview }) => {
   return (
-    <div className="mb-4 border-b pb-4 flex gap-4">
-      <div className="mb-4 w-1/6 items-center">
-        <p className="label-md text-secondary mb-2 truncate">
-          {review.customer.first_name} {review.customer.last_name}
-        </p>
-        <StarRating starSize={12} rate={Number(review.rating.toFixed(1))} />
-        <p className="text-sm text-secondary mt-2">
-          {formatDistanceToNow(new Date(review.created_at), {
-            addSuffix: true,
-          })}
-        </p>
+    <div className={clsx("gap-2 flex flex-col justify-center", review.seller_note && "border-b pb-4 mb-4")}>
+      <div className="items-center flex gap-3">
+        <StarRating starSize={14} rate={Number(review.rating.toFixed(1))} />
+        <div className="flex gap-2 items-center">
+          <p className="label-md text-primary truncate">
+            {review.customer.first_name} {review.customer.last_name}
+          </p>
+          <Divider
+            orientation="vertical"
+            className="h-[10px] border-disabled"
+          />
+          <p className="label-md text-secondary">
+            {formatDistanceToNow(new Date(review.created_at), {
+              addSuffix: true,
+            })}
+          </p>
+        </div>
       </div>
       <div className="w-5/6">
-        <p className="text-md whitespace-pre-line break-words">
+        <p className="text-md whitespace-pre-line break-words text-primary">
           {review.customer_note}
         </p>
         {review.seller_note && (
-          <div className="mt-4 flex gap-4 relative">
+          <div className="mt-4 flex gap-4">
             <Divider orientation="vertical" className="h-auto" />
-            <div>
-              <p className="label-md text-primary">
-                Reply from {review.seller.name}{" "}
-                <span className="text-secondary">
-                  |{" "}
+            <div className="flex flex-col gap-2">
+              <div className="flex gap-2 items-center">
+                <p className="label-md text-primary">
+                  Reply from {review.seller.name}
+                </p>
+                <Divider
+                  orientation="vertical"
+                  className="h-[10px] border-disabled"
+                />
+
+                <p className="label-md text-secondary">
                   {formatDistanceToNow(new Date(review.updated_at), {
                     addSuffix: true,
                   })}
-                </span>
-              </p>
-              <p className="label-sm mt-2">{review.seller_note}</p>
+                </p>
+              </div>
+              <p className="label-sm">{review.seller_note}</p>
             </div>
           </div>
         )}

src/components/organisms/SellerFooter/SellerFooter.tsx

@@ -10,7 +10,7 @@ import { useState } from "react"
 export const SellerFooter = ({ seller }: { seller: SellerProps }) => {
   const [openModal, setOpenModal] = useState(false)
   return (
-    <div className="flex justify-between items-center flex-col lg:flex-row">
+    <div className="flex justify-between items-center flex-col lg:flex-row p-4">
       <div className="flex gap-2 lg:gap-4 items-center label-sm lg:label-md text-secondary mb-4 lg:mb-0 justify-between w-full lg:justify-start lg:w-auto">
         {/* {seller.verified && (
           <div className="flex items-center gap-2">

src/components/sections/SellerPageHeader/SellerPageHeader.tsx

@@ -11,14 +11,16 @@ export const SellerPageHeader = ({
   user: HttpTypes.StoreCustomer | null
 }) => {
   return (
-    <div className="border rounded-sm p-4">
+    <div className="border rounded-sm">
       <SellerHeading header seller={seller} user={user} />
+      <div className="p-4 pb-0">
       <p
         dangerouslySetInnerHTML={{
           __html: seller.description,
         }}
-        className="label-md my-5"
+        className="label-md"
       />
+      </div>
       <SellerFooter seller={seller} />
     </div>
   )