Add to cart

.gitignore

@@ -6,4 +6,4 @@ node_modules
 yarn-error.log
 dist
 built
-package-lock.json
+package-lock.json

.vscode/settings.json

@@ -18,5 +18,6 @@
 	},
 	"[typescriptreact]": {
 		"editor.formatOnSave": false
-	}
+	},
+	"git.ignoreLimitWarning": true
 }

app/src/components/Cart.tsx

@@ -8,15 +8,16 @@ interface CartSidebarProps {
 export const CartSidebar = styled.div`
 	${(props: CartSidebarProps) => css`
 		position: fixed;
-		right: ${props.open ? '0px' : '-360px'};
-		top: 1;
-		max-width: 340px;
+		right: ${props.open ? '0px' : '-500px'};
+		top: 0;
+		max-width: 500px;
 		max-height: 100vh;
 		min-height: 100vh;
 		overflow: scroll;
 		background-color: ${props.theme.color.white};
 		box-shadow: -5px 0 5px rgba(0, 0, 0, 0.1);
 		transition: 250ms linear;
+		width: 500px;
 		::-webkit-scrollbar {
 			width: 0px;
 			background: transparent;
@@ -32,14 +33,19 @@ export const CartSidebar = styled.div`
 			margin: ${props.theme.layout.spacing.small};
 			margin-top: ${props.theme.layout.spacing.small} !important;
 		}
+		${props.theme.mediaQueries.mobile} {
+			max-width: 340px;
+		}
 	`}
 `
 
 export const CloseButton = styled.button`
-	color: blue;
+	color: white;
 	position: absolute;
 	right: 10px;
-	top: 10px;
+	bottom: 0;
+	background-color: black;
+	padding: 2rem;
 	padding: ${(props) => props.theme.layout.spacing.small};
 `
 
@@ -54,6 +60,7 @@ export const CartBottom = styled.div`
 	justify-content: space-between;
 	flex-direction: column;
 	height: 15vh;
+
 	> div,
 	> h6 {
 		margin: ${(props) => props.theme.layout.spacing.small};

app/src/components/Layout/Flex.tsx

@@ -34,10 +34,12 @@ export const FlexThree = styled.div`
 
 export const FlexFour = styled.div`
 	flex: 5;
-	margin: 10px;
 `
 
 export const FlexSix = styled.div`
 	flex: 6;
 	margin: 10px;
+	${({ theme, marginVertical }: WrapperProps) => `
+		margin-top: ${theme.layout.spacing[marginVertical] || 'initial'} ;
+	`}
 `

app/src/components/Text.tsx

@@ -8,6 +8,7 @@ export interface TextStyleProps {
 	family?: string
 	transform?: string
 	children: any
+	margin?: string
 }
 
 const commonHeaderStyles = ({
@@ -17,6 +18,7 @@ const commonHeaderStyles = ({
 	weight,
 	color,
 	family,
+	margin,
 	children,
 }: TextStyleProps) => css`
 	font-weight: ${theme.font.weight[weight]
@@ -28,7 +30,7 @@ const commonHeaderStyles = ({
 	color: ${theme.color[color] || 'inherit'};
 	text-align: ${align || 'inherit'};
 	text-transform: ${transform || 'auto'};
-	margin: 0.3em 0;
+	margin: ${margin || '0.3em 0'};
 	letter-spacing: 0.03em;
 
 	&:first-child {

app/src/views/Cart/Checkout.tsx

@@ -22,19 +22,21 @@ import { CartBottom } from 'Components/Cart'
 export const Checkout = () => {
 	const { checkout } = useCheckout()
 	if (!checkout || checkout.lineItems.length < 1) {
-		return <NormalizeDiv>Your cart is empty</NormalizeDiv>
+		return <NormalizeDiv top="0">Your cart is empty</NormalizeDiv>
 	}
 	return (
-		<NormalizeDiv>
-			<Header3 color="dark">Your cart</Header3>
+		<NormalizeDiv top="0">
+			<Header3 color="dark" align="center">
+				Your cart
+			</Header3>
 			{checkout.lineItems.edges.map((element) => {
 				let { title, variant } = element.node
 				return (
 					<FlexContainer key={variant.id} margin="small">
 						<FlexThree>
 							<img src={variant.image.originalSrc} />
 						</FlexThree>
-						<FlexSix>
+						<FlexSix marginVertical="0">
 							<Header5 weight="light" color="dark">
 								{title}
 							</Header5>
@@ -79,18 +81,22 @@ export const Checkout = () => {
 						</Header5>
 					</FlexHalf>
 				</FlexContainer>
-				<Header6 align="center">
-					Shipping and discount codes are added at checkout.
-				</Header6>
-				<Button
-					as="a"
-					href={checkout.webUrl}
-					background="dark"
-					color="light"
-					weight="semi"
-				>
-					Checkout
-				</Button>
+				<NormalizeDiv align="center">
+					<Button
+						as="a"
+						href={checkout.webUrl}
+						background="dark"
+						color="light"
+						weight="semi"
+						width="100%"
+					>
+						Checkout
+					</Button>
+
+					<Header6 align="center">
+						Shipping and discount codes are added at checkout.
+					</Header6>
+				</NormalizeDiv>
 			</CartBottom>
 		</NormalizeDiv>
 	)

app/src/views/Navigation/Navigation.tsx

@@ -20,6 +20,7 @@ import {
 	SubmenuPane,
 	Logo,
 } from './styled'
+import { IoIosCart } from 'react-icons/io'
 
 interface MenuProps {
 	activeMenu: null | string
@@ -130,7 +131,7 @@ export const Navigation = () => {
 				<NavSection ready={ready} align="right">
 					<NavHeaderWrapper>
 						<NavHeader as="button" onClick={openCart}>
-							Cart {cartCount}
+							<IoIosCart /> {cartCount}
 						</NavHeader>
 					</NavHeaderWrapper>
 				</NavSection>
@@ -147,8 +148,8 @@ export const Navigation = () => {
 				</SubmenuPane>
 			</Inner>
 			<CartSidebar open={cartOpen}>
-				<CloseButton onClick={closeCart}>close</CloseButton>
 				<Checkout />
+				<CloseButton onClick={closeCart}>close</CloseButton>
 			</CartSidebar>
 		</Wrapper>
 	)

app/src/views/ProductDetail/components/ProductDetailHeader.tsx

@@ -8,7 +8,10 @@ interface ProductDetailHeaderProps {
 	currentVariant: Variant
 }
 
-export const ProductDetailHeader = ({ product, currentVariant }: ProductDetailHeaderProps) => {
+export const ProductDetailHeader = ({
+	product,
+	currentVariant,
+}: ProductDetailHeaderProps) => {
 	return (
 		<NormalizeDiv>
 			<Header2 weight="xlight" color="dark">

app/src/views/ProductDetail/styled.tsx

@@ -139,11 +139,15 @@ export const ProductRelatedInner = styled.div`
 interface NormalizeDivProps {
 	theme: DefaultTheme
 	width?: string
+	top?: string
+	align?: string
 }
 
 export const NormalizeDiv = styled.div`
 	max-width: ${(props: NormalizeDivProps) =>
 		props.width === 'half' ? '50%' : '100%'};
+	text-align: ${(props: NormalizeDivProps) => props.align || 'inherit'};
+
 	${(props) => `
    		margin: ${props.theme.layout.spacing.small};
 	`}
@@ -172,6 +176,7 @@ interface ButtonProps {
 	family?: string
 	transform?: string
 	href?: string
+	width?: string
 }
 
 export const Button = styled.button`
@@ -194,6 +199,7 @@ export const Button = styled.button`
 		pointer-events: ${props.disabled ? 'none' : 'auto'};
 		max-width: 200px;
 		border-radius: 2px;
+		width: ${props.width || 'initial'};
 	`}
 `
 

package.json

@@ -5,8 +5,8 @@
 		"setup": "yarn install",
 		"test": "yarn workspace jemmawynne-app test",
 		"build": "yarn workspace jemmawynne-app build && yarn workspace jemmawynne-proxy build",
-    "start:app": "yarn workspace jemmawynne-app start",
-    "start:proxy": "yarn workspace jemmawynne-proxy start"
+		"start:app": "yarn workspace jemmawynne-app start",
+		"start:proxy": "yarn workspace jemmawynne-proxy start"
 	},
 	"devDependencies": {
 		"@commitlint/cli": "^8.0.0",
@@ -33,5 +33,8 @@
 			"post-merge": "yarnhook",
 			"post-rewrite": "yarnhook"
 		}
+	},
+	"dependencies": {
+		"react-icons": "^3.7.0"
 	}
 }