Make Flex components more general-purpose

[good-idea]

I think that as the site grows, these Flex components are going to start getting more and more complicated:

export const FlexThree = styled.div`
	flex: 1 1 33%;
	max-width: 33.33%;
	margin: ${(props) => props.margin};
	${(props: WrapperProps) => `
   		${props.theme.mediaQueries.tablet} {
			max-width: ${props.mobileWidth === '2' ? '49.65%' : '33.33%'};
	 	}
	`}
`

We'll probably need to continue adding props (like tabletWidth or something) to suit the needs of all of the places where it is used.

Instead, it would be easier and more maintainable to make them more general purpose, then extending them for use in specific places. We could do this several ways:

• Export them as simple components that only set up basic flex styles, then extend them later:

// Flex.tsx
export const Flex3 = styled.div`
	flex: 1 1 33%;
	max-width: 33.33%;
`

// checkout/styled.tsx
import { Flex3 } from 'Components/Layout/Flex'

const ProductWrapper = styled(Flex3)`
	// * margins, media queries, etc
`

• Add some 'mixins' to the theme object:

// theme/mixins.tsx

export const flex3 = `
	flex: 1 1 33%;
	max-width: 33.33%;
`

// could be handy for other commonly-used sets of rules:
export const absFullSize = `
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
`

// checkout/styled.tsx

const ProductWrapper = styled.div`
  ${({ theme }) => css`
     ${theme.mixins.flex3};
     // * margins, media queries, etc
  `}
`

• Or, just drop them completely in favor of just writing out the flex rules for each component. This isn't too DRY, but it simplifies things overall.

// checkout/styled.tsx
const ProductWrapper = styled.div`
	flex: 1 1 33%;
	max-width: 33.33%;
     // * margins, media queries, etc
`

I removed the usage of the Flex containers on the PDP and PLP pages. I broke some of the styling in the process 🤦🏼‍♂️and probably should have left it alone. So now they are only used in the Checkout component. They're fine as-is, but let's deprecate them and, as you make any changes to Checkout, build out checkout-specific styled components