Merge pull request #7653 from artsy/mc-jones/buyer_guarantee_line_bre…

…ak_and_padding fix: add padding and line break to buyer guarantee page
artsy · May 28, 2021 · 3ce932b · 3ce932b
2 parents 7c8407e + be58284
commit 3ce932b
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/src/v2/Apps/BuyerGuarantee/Components/Feature.tsx b/src/v2/Apps/BuyerGuarantee/Components/Feature.tsx
@@ -11,6 +11,7 @@ import {
 interface FeatureProps {
   title: string
   text?: string
+  forcedSecondLine?: string
   icon: React.FC<IconProps>
   sm?: boolean
   onClick?: () => void
@@ -19,6 +20,7 @@ interface FeatureProps {
 export const Feature: React.FC<FeatureProps> = ({
   title,
   text,
+  forcedSecondLine,
   icon,
   sm,
   onClick,
@@ -65,6 +67,7 @@ export const Feature: React.FC<FeatureProps> = ({
           {title}
         </Text>
         <Text variant="text">{text}</Text>
+        {forcedSecondLine && <Text variant="text">{forcedSecondLine}</Text>}
       </Box>
       {!!onClick && <Box>{learnMore}</Box>}
     </Flex>

diff --git a/src/v2/Apps/BuyerGuarantee/Routes/BuyerGuaranteeIndex.tsx b/src/v2/Apps/BuyerGuarantee/Routes/BuyerGuaranteeIndex.tsx
@@ -209,7 +209,8 @@ export const BuyerGuaranteeIndex: React.FC<BuyerGuaranteeIndexProps> = ({
             />
             <Feature
               title="Money-Back Guarantee"
-              text="If an item arrives not as described, we’ll work with you to make it right."
+              text="If an item arrives not as described,"
+              forcedSecondLine="we’ll work with you to make it right."
               icon={MoneyBackIcon}
               onClick={() => {
                 scrollTo("moneyBack")
@@ -385,6 +386,7 @@ export const BuyerGuaranteeIndex: React.FC<BuyerGuaranteeIndexProps> = ({
             backgroundColor={color("black5")}
             gridTemplateColumns="repeat(3, 1fr)"
             mt={2}
+            px={2}
           >
             <Box borderBottom={`solid 1px ${color("black10")}`}>{""}</Box>
             <Text
@@ -574,7 +576,7 @@ export const BuyerGuaranteeIndex: React.FC<BuyerGuaranteeIndexProps> = ({
         <CSSGrid
           backgroundColor={color("black5")}
           gridTemplateColumns="repeat(6, 1fr)"
-          px={0}
+          px={2}
           pt={0}
           pb={space(9)}
         >