From b5065c8e7f6ab417bc810d317ac22606b9deb794 Mon Sep 17 00:00:00 2001 From: Ben Chypak Date: Wed, 1 Mar 2023 16:56:02 -0800 Subject: [PATCH] Make some style decisions on padding --- .../assets/image-with-text/index.jsx | 9 +++++- .../page-designer/layouts/carousel/index.jsx | 30 ++++++++++++++----- .../layouts/mobileGrid2r1c/index.jsx | 2 +- .../layouts/mobileGrid2r2c/index.jsx | 2 +- .../layouts/mobileGrid2r3c/index.jsx | 2 +- .../layouts/mobileGrid3r1c/index.jsx | 2 +- .../layouts/mobileGrid3r2c/index.jsx | 2 +- 7 files changed, 35 insertions(+), 14 deletions(-) diff --git a/packages/template-retail-react-app/app/page-designer/assets/image-with-text/index.jsx b/packages/template-retail-react-app/app/page-designer/assets/image-with-text/index.jsx index 29f07015ea..73e7aa7cd8 100644 --- a/packages/template-retail-react-app/app/page-designer/assets/image-with-text/index.jsx +++ b/packages/template-retail-react-app/app/page-designer/assets/image-with-text/index.jsx @@ -6,7 +6,8 @@ */ import React from 'react' import PropTypes from 'prop-types' -import {Box, Image, Link, Text} from '@chakra-ui/react' +import {Box, Image, Text} from '@chakra-ui/react' +import Link from '../../../components/link' /** * Image with text component @@ -54,6 +55,8 @@ export const ImageWithText = ({ITCLink, ITCText, image, heading, alt}) => { position={'absolute'} top={'50%'} width={'100%'} + padding={'15px'} + textAlign={{base: 'center', sm: 'left'}} > { __html: heading }} sx={{ + ['h1, h2, h3, h4, h5, h6']: { + fontSize: 'revert', + fontWeight: 'revert' + }, p: { display: 'flex', alignItems: 'center', diff --git a/packages/template-retail-react-app/app/page-designer/layouts/carousel/index.jsx b/packages/template-retail-react-app/app/page-designer/layouts/carousel/index.jsx index 6caf18f54d..7645454f29 100644 --- a/packages/template-retail-react-app/app/page-designer/layouts/carousel/index.jsx +++ b/packages/template-retail-react-app/app/page-designer/layouts/carousel/index.jsx @@ -64,11 +64,21 @@ export const Carousel = (props = {}) => { } }, [hasOverflow]) + const itemSpacing = 4 + // Calculate the width of each item in the carousel, accounting for the spacing between the items. const itemWidth = { - base: `calc(${100 / xsCarouselSlidesToDisplay}%)`, - sm: `calc(${100 / xsCarouselSlidesToDisplay}%)`, - md: `calc(${100 / smCarouselSlidesToDisplay}%)`, - lg: `calc(${100 / mdCarouselSlidesToDisplay}%)` + base: `calc(${100 / xsCarouselSlidesToDisplay}% - ${ + ((xsCarouselSlidesToDisplay - 1) * (itemSpacing * 4)) / xsCarouselSlidesToDisplay + }px)`, + sm: `calc(${100 / xsCarouselSlidesToDisplay}% - ${ + ((xsCarouselSlidesToDisplay - 1) * (itemSpacing * 4)) / xsCarouselSlidesToDisplay + }px)`, + md: `calc(${100 / smCarouselSlidesToDisplay}% - ${ + ((smCarouselSlidesToDisplay - 1) * (itemSpacing * 4)) / smCarouselSlidesToDisplay + }px)`, + lg: `calc(${100 / mdCarouselSlidesToDisplay}% - ${ + ((mdCarouselSlidesToDisplay - 1) * (itemSpacing * 4)) / mdCarouselSlidesToDisplay + }px)` } const overflowXScroll = { @@ -126,7 +136,7 @@ export const Carousel = (props = {}) => { className={'carousel-container-items scroll-indicator'} data-testid="carousel-container-items" direction="row" - spacing={0} + spacing={itemSpacing} wrap="nowrap" overflowX="scroll" sx={{ @@ -142,7 +152,7 @@ export const Carousel = (props = {}) => { width={itemWidth} style={{scrollSnapAlign: 'start'}} > - + @@ -156,15 +166,17 @@ export const Carousel = (props = {}) => { display={controlDisplay} position="absolute" top="50%" - left={{base: 0, lg: 4}} + left={{base: 1, lg: 4}} transform="translateY(-50%)" > + {/* boxShadow requires !important --> https://github.com/chakra-ui/chakra-ui/issues/3553 */} } borderRadius="full" colorScheme="whiteAlpha" + boxShadow={'0 3px 10px rgb(0 0 0 / 20%) !important'} onClick={() => scroll(-1)} /> @@ -173,15 +185,17 @@ export const Carousel = (props = {}) => { display={controlDisplay} position="absolute" top="50%" - right={{base: 0, lg: 4}} + right={{base: 1, lg: 4}} transform="translateY(-50%)" > + {/* boxShadow requires !important --> https://github.com/chakra-ui/chakra-ui/issues/3553 */} } borderRadius="full" colorScheme="whiteAlpha" + boxShadow={'0 3px 10px rgb(0 0 0 / 20%) !important'} onClick={() => scroll(1)} /> diff --git a/packages/template-retail-react-app/app/page-designer/layouts/mobileGrid2r1c/index.jsx b/packages/template-retail-react-app/app/page-designer/layouts/mobileGrid2r1c/index.jsx index 353aa37c54..82496e8a13 100644 --- a/packages/template-retail-react-app/app/page-designer/layouts/mobileGrid2r1c/index.jsx +++ b/packages/template-retail-react-app/app/page-designer/layouts/mobileGrid2r1c/index.jsx @@ -20,7 +20,7 @@ import {Region, regionType} from '../../core' * @returns {React.ReactElement} - Grid component. */ export const MobileGrid2r1c = ({regions}) => ( - + {regions.map((region) => ( ))} diff --git a/packages/template-retail-react-app/app/page-designer/layouts/mobileGrid2r2c/index.jsx b/packages/template-retail-react-app/app/page-designer/layouts/mobileGrid2r2c/index.jsx index 7a5863d992..eeb9cf47e8 100644 --- a/packages/template-retail-react-app/app/page-designer/layouts/mobileGrid2r2c/index.jsx +++ b/packages/template-retail-react-app/app/page-designer/layouts/mobileGrid2r2c/index.jsx @@ -20,7 +20,7 @@ import {Region, regionType} from '../../core' * @returns {React.ReactElement} - Grid component. */ export const MobileGrid2r2c = ({regions}) => ( - + {regions.map((region) => ( ))} diff --git a/packages/template-retail-react-app/app/page-designer/layouts/mobileGrid2r3c/index.jsx b/packages/template-retail-react-app/app/page-designer/layouts/mobileGrid2r3c/index.jsx index abb9dfcbfa..d063c67d9e 100644 --- a/packages/template-retail-react-app/app/page-designer/layouts/mobileGrid2r3c/index.jsx +++ b/packages/template-retail-react-app/app/page-designer/layouts/mobileGrid2r3c/index.jsx @@ -20,7 +20,7 @@ import {Region, regionType} from '../../core' * @returns {React.ReactElement} - Grid component. */ export const MobileGrid2r3c = ({regions}) => ( - + {regions.map((region) => ( ))} diff --git a/packages/template-retail-react-app/app/page-designer/layouts/mobileGrid3r1c/index.jsx b/packages/template-retail-react-app/app/page-designer/layouts/mobileGrid3r1c/index.jsx index 96bec6531a..a4384a9327 100644 --- a/packages/template-retail-react-app/app/page-designer/layouts/mobileGrid3r1c/index.jsx +++ b/packages/template-retail-react-app/app/page-designer/layouts/mobileGrid3r1c/index.jsx @@ -20,7 +20,7 @@ import {Region, regionType} from '../../core' * @returns {React.ReactElement} - Grid component. */ export const MobileGrid3r1c = ({regions}) => ( - + {regions.map((region) => ( ))} diff --git a/packages/template-retail-react-app/app/page-designer/layouts/mobileGrid3r2c/index.jsx b/packages/template-retail-react-app/app/page-designer/layouts/mobileGrid3r2c/index.jsx index 44a94185b1..d53d6dad83 100644 --- a/packages/template-retail-react-app/app/page-designer/layouts/mobileGrid3r2c/index.jsx +++ b/packages/template-retail-react-app/app/page-designer/layouts/mobileGrid3r2c/index.jsx @@ -20,7 +20,7 @@ import {Region, regionType} from '../../core' * @returns {React.ReactElement} - Grid component. */ export const MobileGrid3r2c = ({regions}) => ( - + {regions.map((region) => ( ))}