From eaf1bf1645c236e3e85d6f31017a843f7d96b45b Mon Sep 17 00:00:00 2001
From: "Guilherme S. Popolin" <guilherme@hedvig.com>
Date: Wed, 23 Oct 2024 10:10:55 +0200
Subject: [PATCH] fix(purchase-form): proper space "calculate price" button and
 "average rating" link

---
 .../ProductPage/PurchaseForm/PurchaseForm.tsx    | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/apps/store/src/components/ProductPage/PurchaseForm/PurchaseForm.tsx b/apps/store/src/components/ProductPage/PurchaseForm/PurchaseForm.tsx
index acca785903..003fdd0e9f 100644
--- a/apps/store/src/components/ProductPage/PurchaseForm/PurchaseForm.tsx
+++ b/apps/store/src/components/ProductPage/PurchaseForm/PurchaseForm.tsx
@@ -6,7 +6,7 @@ import { motion } from 'framer-motion'
 import { usePathname } from 'next/navigation'
 import { useTranslation } from 'next-i18next'
 import { Suspense, useCallback, useRef, useState, useMemo, memo, type ReactNode } from 'react'
-import { Button, framerTransitions, Space } from 'ui'
+import { Button, framerTransitions, yStack } from 'ui'
 import { ButtonNextLink } from '@/components/ButtonNextLink'
 import type { CartToastAttributes } from '@/components/CartNotification/CartToast'
 import { CartToast } from '@/components/CartNotification/CartToast'
@@ -75,10 +75,12 @@ export function PurchaseForm(props: PurchaseFormProps) {
     return (
       <div className={purchaseFormTop}>
         <ProductHeroContainer size="large">
-          <ButtonNextLink fullWidth={true} href={productData.priceCalculatorPageLink}>
-            {t('OPEN_PRICE_CALCULATOR_BUTTON')}
-          </ButtonNextLink>
-          {props.showAverageRating && <ProductAverageRating />}
+          <div className={yStack({ gap: 'md' })}>
+            <ButtonNextLink fullWidth={true} href={productData.priceCalculatorPageLink}>
+              {t('OPEN_PRICE_CALCULATOR_BUTTON')}
+            </ButtonNextLink>
+            {props.showAverageRating && <ProductAverageRating />}
+          </div>
         </ProductHeroContainer>
       </div>
     )
@@ -267,12 +269,12 @@ const IdleState = ({ loading, onClick, showAverageRating }: IdleStateProps) => {
     <>
       <div ref={ref}>
         <ProductHeroContainer size="large">
-          <Space y={1}>
+          <div className={yStack({ gap: 'md' })}>
             <Button loading={loading} onClick={onClick} fullWidth={true}>
               {t('OPEN_PRICE_CALCULATOR_BUTTON')}
             </Button>
             {showAverageRating && <ProductAverageRating />}
-          </Space>
+          </div>
         </ProductHeroContainer>
       </div>
       <ScrollPast targetRef={ref}>