feat: introduce some design tweaks

starters/shopify-meilisearch/components/product-card.tsx

@@ -18,7 +18,7 @@ export const ProductCard = ({ variants, handle, title, featuredImage, minPrice,
   const variantPrice = variants?.find(Boolean)?.price
 
   return (
-    <Link className={cn("group flex h-full w-full flex-col overflow-hidden transition-all hover:shadow-md", className)} aria-label={linkAria} href={href} prefetch={prefetch}>
+    <Link className={cn("group flex h-full w-full flex-col overflow-hidden", className)} aria-label={linkAria} href={href} prefetch={prefetch}>
       <div className="relative aspect-square overflow-hidden">
         <Image
           priority={priority}
@@ -28,25 +28,30 @@ export const ProductCard = ({ variants, handle, title, featuredImage, minPrice,
           fill
         />
       </div>
-      <div className="flex shrink-0 grow flex-col gap-2 p-4">
+      <div className="flex shrink-0 grow flex-col py-4">
         {/* remove first word from the title as it includes vendor (this just needs feed update and then can be removed) */}
-        <h3 className="line-clamp-2 text-lg font-semibold transition-colors group-hover:text-orange-500">{title.split(" ").slice(1).join(" ")}</h3>
+        <h3 className="line-clamp-2 text-lg font-semibold transition-colors">{title.split(" ").slice(1).join(" ")}</h3>
         <div className="mt-auto flex flex-col gap-1">
-          {!!vendor && <p className="text-sm text-orange-400">{vendor}</p>}
-          {noOfVariants > 0 && (
-            <p className="text-sm text-gray-500">
-              {noOfVariants} variant{noOfVariants > 1 ? "s" : ""}
-            </p>
-          )}
-          {!!avgRating && !!totalReviews && (
-            <div className="flex items-center space-x-1">
-              <StarIcon className="size-4 fill-yellow-400 stroke-yellow-500" />
-              <span className="text-sm">{avgRating.toFixed(2)}</span>
-              <span className="text-xs">
-                ({totalReviews} review{totalReviews !== 1 && "s"})
-              </span>
-            </div>
-          )}
+          {!!vendor && <p className="text-sm text-gray-500">{vendor}</p>}
+          <div className="mt-1 flex items-center gap-1">
+            {!!avgRating && !!totalReviews && (
+              <>
+                <div className="flex items-center space-x-1">
+                  <StarIcon className="size-4 fill-gray-400 stroke-gray-500" />
+                  <span className="text-sm">{avgRating.toFixed(2)}</span>
+                  <span className="text-xs">
+                    ({totalReviews} review{totalReviews !== 1 && "s"})
+                  </span>
+                </div>
+                •
+              </>
+            )}
+            {noOfVariants > 0 && (
+              <p className="text-sm text-gray-500">
+                {noOfVariants} variant{noOfVariants > 1 ? "s" : ""}
+              </p>
+            )}
+          </div>
           {!!variantPrice && <span>From {mapCurrencyToSign((variantPrice.currencyCode as CurrencyType) || "USD") + minPrice.toFixed(2)}</span>}
         </div>
       </div>

starters/shopify-meilisearch/components/ui/carousel.tsx

@@ -162,7 +162,7 @@ const CarouselPrevious = forwardRef<HTMLButtonElement, React.ComponentProps<type
       variant="secondary"
       isAnimated={false}
       size="lg"
-      className={cn("absolute flex size-12 rotate-90 items-center justify-center rounded-full transition-transform hover:scale-105 hover:text-white", className)}
+      className={cn("absolute flex size-10 rotate-90 items-center justify-center rounded-full p-0 transition-transform hover:scale-105 hover:text-white", className)}
       disabled={!canScrollPrev}
       onClick={scrollPrev}
       {...props}
@@ -183,12 +183,12 @@ const CarouselNext = forwardRef<HTMLButtonElement, React.ComponentProps<typeof B
       isAnimated={false}
       variant="secondary"
       size="lg"
-      className={cn("absolute flex size-12 rotate-90 items-center justify-center rounded-full transition-transform hover:scale-105 hover:text-white", className)}
+      className={cn("absolute flex size-10 rotate-90 items-center justify-center rounded-full p-0 transition-transform hover:scale-105 hover:text-white", className)}
       disabled={!canScrollNext}
       onClick={scrollNext}
       {...props}
     >
-      <ChevronIcon className="m-auto size-4 rotate-180" />
+      <ChevronIcon className="size-4 rotate-180" />
       <span className="sr-only">Next slide</span>
     </Button>
   )

starters/shopify-meilisearch/views/listing/hits-section.tsx

@@ -10,7 +10,7 @@ export async function HitsSection({ hits }: HitsSectionProps) {
     return <p>No results for this query</p>
   }
   return (
-    <div className="-px-4 grid w-full grid-cols-2 items-start gap-1 gap-y-8 sm:grid-cols-3 sm:gap-4 lg:grid-cols-2 xl:grid-cols-3">
+    <div className="-px-4 grid w-full grid-cols-2 items-start gap-1 gap-y-8 sm:grid-cols-3 sm:gap-6 lg:grid-cols-2 xl:grid-cols-3">
       {hits.map((singleResult, idx) => (
         <ProductCard key={singleResult.id} priority={[0, 1].includes(idx)} {...singleResult} />
       ))}

starters/shopify-meilisearch/views/product/review-button.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { Button } from "components/ui/button-old"
+import { Button } from "components/ui/button"
 import { useModalStore } from "stores/modal-store"
 import { useQueryState } from "nuqs"
 
@@ -14,6 +14,8 @@ export const ReviewButton = ({ productId }: ReviewButtonProps) => {
 
   return (
     <Button
+      variant={"outline"}
+      className="bg-white transition-all hover:scale-105"
       onClick={() => {
         setPid(productId)
         open("review")

starters/shopify-meilisearch/views/product/review-card.tsx

@@ -11,23 +11,23 @@ export type ReviewCardProps = {
 
 export const ReviewCard = ({ created_at, author, rating, body }: ReviewCardProps) => {
   return (
-    <Card key={created_at} className="min-w-[280px] max-w-[280px] p-4">
-      <div className="flex flex-col items-center justify-between space-y-2">
-        <div className="flex w-full flex-col-reverse items-center justify-between gap-2">
-          <span className="text-xs text-gray-500">
-            {new Date(created_at).toLocaleDateString("en-US", {
-              year: "numeric",
-              month: "long",
-              day: "numeric",
-            })}
-          </span>
-          <h3 className="font-semibold">{author}</h3>
-        </div>
+    <Card key={created_at} className="flex min-w-[280px] max-w-[280px] flex-col px-4 py-8">
+      <div className="mx-auto w-auto">
         <StarRating rating={rating} />
       </div>
       <ExpandableContent lines={4}>
-        <p className="mt-4 text-gray-500">{body}</p>
+        <p className="mt-6 text-gray-500">{body}</p>
       </ExpandableContent>
+      <div className="mt-6 flex w-full flex-col items-center justify-between gap-2">
+        <h3 className="font-semibold">{author}</h3>
+        <span className="text-xs text-gray-500">
+          {new Date(created_at).toLocaleDateString("en-US", {
+            year: "numeric",
+            month: "long",
+            day: "numeric",
+          })}
+        </span>
+      </div>
     </Card>
   )
 }

starters/shopify-meilisearch/views/product/reviews-section.tsx

@@ -7,6 +7,7 @@ import { RobotIcon } from "components/icons/robot-icon"
 import { isOptIn, notifyOptIn } from "utils/opt-in"
 import { StarIcon } from "components/icons/star-icon"
 import { cn } from "utils/cn"
+import { buttonVariants } from "components/ui/button"
 
 type ReviewsSectionProps = {
   productId: string
@@ -39,15 +40,15 @@ export const ReviewsSection = ({ productId, productHandle, reviews, total, summa
 
   return (
     <section className={cn("relative left-1/2 w-screen -translate-x-1/2 bg-gray-50 py-12 md:my-10", className)}>
-      <div className="container mx-auto max-w-5xl px-4 md:px-6">
+      <div className="container mx-auto max-w-5xl px-6 xl:pl-0">
         <div className="space-y-4">
           <div className="mb-10 flex flex-col items-center justify-between gap-4 md:flex-row">
             <div className="flex items-center justify-center">
               <h2 className="text-xl font-semibold sm:text-xl">Customer Reviews</h2>
               <span className="ml-1 text-sm font-normal text-gray-500">({total})</span>
               {!!avgRating && (
                 <div className="ml-1 inline-flex items-center">
-                  <StarIcon className="ml-0.5 size-4 fill-yellow-400 text-yellow-500" />
+                  <StarIcon className="ml-0.5 size-4 fill-gray-400 text-gray-500" />
                   <span className="ml-0.5 text-sm font-normal"> {avgRating.toFixed(2)}</span>
                 </div>
               )}
@@ -66,19 +67,17 @@ export const ReviewsSection = ({ productId, productHandle, reviews, total, summa
           )}
 
           <Carousel opts={{ skipSnaps: true }}>
-            <div className="my-4 hidden justify-end gap-4 md:flex">
-              <CarouselPrevious className="relative" />
-              <CarouselNext className="relative" />
-            </div>
+            <CarouselPrevious className="absolute -left-20 top-1/2 hidden xl:flex" />
             <CarouselContent className="ml-0 gap-6">
               {reviews.map(({ body, author, rating, created_at }) => (
                 <ReviewCard key={created_at} body={body} author={author} rating={rating} created_at={created_at} />
               ))}
             </CarouselContent>
+            <CarouselNext className="absolute -right-20 top-1/2 hidden xl:flex" />
           </Carousel>
         </div>
         <div className="mt-10 flex justify-center md:justify-end">
-          <Link href={`/reviews/${productHandle}`} className="text-sm underline" prefetch={false}>
+          <Link href={`/reviews/${productHandle}`} className={cn(buttonVariants({ variant: "outline" }), "w-full bg-white transition-all hover:scale-105")} prefetch={false}>
             See all reviews
           </Link>
         </div>

starters/shopify-meilisearch/views/product/similar-products-section.tsx

@@ -18,20 +18,17 @@ export async function SimilarProductsSection({ slug, collectionHandle }: Similar
   return (
     <section className="my-10">
       <Carousel opts={{ skipSnaps: true }}>
-        <div className="flex justify-between">
-          <h2 className="mb-10 text-[26px] font-normal tracking-[-0.78px]">You might also like</h2>
-          <div className="hidden gap-4 md:flex">
-            <CarouselPrevious className="relative" />
-            <CarouselNext className="relative" />
-          </div>
-        </div>
+        <CarouselPrevious className="absolute -left-20 top-[40%] hidden xl:flex" />
+        <h2 className="mb-10 text-[26px] font-medium tracking-[-0.78px]">You might also like</h2>
+
         <CarouselContent>
           {items.map((product, idx) => (
             <CarouselItem className="basis-1/2 md:basis-1/4" key={"featured_" + product.id + idx}>
               <ProductCard prefetch {...product} />
             </CarouselItem>
           ))}
         </CarouselContent>
+        <CarouselNext className="absolute -right-20 top-[40%] hidden xl:flex" />
       </Carousel>
     </section>
   )

starters/shopify-meilisearch/views/product/star-rating.tsx

@@ -7,7 +7,7 @@ export const StarRating = ({ rating }: { rating: number }) => {
   return (
     <div className="flex items-center gap-1">
       {stars.map((star) => (
-        <StarIcon key={star} className={cn("size-4", star <= rating ? "fill-yellow-400 stroke-yellow-500" : "stroke-yellow-500")} />
+        <StarIcon key={star} className={cn("size-4", star <= rating ? "fill-gray-400 stroke-gray-500" : "stroke-gray-500")} />
       ))}
     </div>
   )