Tighten up order review line item styles to match design

Automattic · Apr 21, 2020 · fb18e8a · fb18e8a
1 parent 8c2ed98
commit fb18e8a
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 12 deletions.
diff --git a/client/my-sites/checkout/composite-checkout/wpcom/components/wp-checkout-order-review.js b/client/my-sites/checkout/composite-checkout/wpcom/components/wp-checkout-order-review.js
@@ -5,6 +5,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { useLineItems, useFormStatus } from '@automattic/composite-checkout';
+import { useTranslate } from 'i18n-calypso';
 
 /**
  * Internal dependencies
@@ -26,6 +27,7 @@ export default function WPCheckoutOrderReview( {
 	onChangePlanLength,
 	siteUrl,
 } ) {
+	const translate = useTranslate();
 	const [ items, total ] = useLineItems();
 	const { formStatus } = useFormStatus();
 	const isPurchaseFree = total.amount.value === 0;
@@ -35,7 +37,7 @@ export default function WPCheckoutOrderReview( {
 
 	return (
 		<div className={ joinClasses( [ className, 'checkout-review-order' ] ) }>
-			{ domainUrl && <DomainURL>{ domainUrl }</DomainURL> }
+			{ domainUrl && <DomainURL>{ translate( 'Site' ) + ': ' + domainUrl }</DomainURL> }
 
 			<WPOrderReviewSection>
 				<WPOrderReviewLineItems
@@ -72,12 +74,14 @@ WPCheckoutOrderReview.propTypes = {
 };
 
 const DomainURL = styled.div`
-	margin-top: -12px;
+	color: ${( props ) => props.theme.colors.textColorLight};
+	font-size: 14px;
+	margin-top: -10px;
 	word-break: break-word;
 `;
 
 const CouponField = styled( Coupon )`
-	margin: 24px 30px 24px 0;
-	padding-bottom: 24px;
+	margin: 20px 30px 20px 0;
+	padding-bottom: 20px;
 	border-bottom: 1px solid ${( props ) => props.theme.colors.borderColorLight};
 `;
diff --git a/client/my-sites/checkout/composite-checkout/wpcom/components/wp-order-review-line-items.js b/client/my-sites/checkout/composite-checkout/wpcom/components/wp-order-review-line-items.js
@@ -21,9 +21,18 @@ import { useHasDomainsInCart, isLineItemADomain } from '../hooks/has-domains';
 import { ItemVariationPicker } from './item-variation-picker';
 
 export function WPOrderReviewSection( { children, className } ) {
-	return <div className={ joinClasses( [ className, 'order-review-section' ] ) }>{ children }</div>;
+	return (
+		<WPOrderReviewSectionUI className={ joinClasses( [ className, 'order-review-section' ] ) }>
+			{ children }
+		</WPOrderReviewSectionUI>
+	);
 }
 
+const WPOrderReviewSectionUI = styled.div`
+	box-sizing: border-box;
+	margin: 20px 30px 20px 0;
+`;
+
 WPOrderReviewSection.propTypes = {
 	className: PropTypes.string,
 };
@@ -179,11 +188,10 @@ export const LineItemUI = styled( WPLineItem )`
 	color: ${( { theme, total } ) => ( total ? theme.colors.textColorDark : theme.colors.textColor) };
 	font-size: ${( { total } ) => ( total ? '1.2em' : '1em') };
 	padding: ${( { total, isSummaryVisible, tax, subtotal } ) =>
-		isSummaryVisible || total || subtotal || tax ? '10px 0' : '24px 0'};
+		isSummaryVisible || total || subtotal || tax ? '10px 0' : '20px 0'};
 	border-bottom: ${( { theme, total, isSummaryVisible } ) =>
 		isSummaryVisible || total ? 0 : '1px solid ' + theme.colors.borderColorLight};
 	position: relative;
-	margin-right: ${( { total, tax, subtotal } ) => ( subtotal || total || tax ? '0' : '30px') };
 `;
 
 const LineItemTitleUI = styled.div`
@@ -207,7 +215,7 @@ const DeleteButton = styled( Button )`
 	position: absolute;
 	padding: 10px;
 	right: -50px;
-	top: 10px;
+	top: 8px;
 
 	:hover rect {
 		fill: ${( props ) => props.theme.colors.error};
@@ -275,7 +283,7 @@ export function WPOrderReviewLineItems( {
 	return (
 		<WPOrderReviewList className={ joinClasses( [ className, 'order-review-line-items' ] ) }>
 			{ items.map( ( item ) => (
-				<WPOrderReviewListItems key={ item.id }>
+				<WPOrderReviewListItem key={ item.id }>
 					<LineItemUI
 						isSummaryVisible={ isSummaryVisible }
 						item={ item }
@@ -286,7 +294,7 @@ export function WPOrderReviewLineItems( {
 						getItemVariants={ getItemVariants }
 						onChangePlanLength={ onChangePlanLength }
 					/>
-				</WPOrderReviewListItems>
+				</WPOrderReviewListItem>
 			) ) }
 		</WPOrderReviewList>
 	);
@@ -310,10 +318,11 @@ WPOrderReviewLineItems.propTypes = {
 };
 
 const WPOrderReviewList = styled.ul`
-	margin: 10px 0;
+	border-top: 1px solid ${( props ) => props.theme.colors.borderColorLight};
+	margin: 0;
 `;
 
-const WPOrderReviewListItems = styled.li`
+const WPOrderReviewListItem = styled.li`
 	margin: 0;
 	padding: 0;
 	display: block;