Checkout: fix mobile visual inconsistencies (#106906)

* Fix vertical alignment of Purchase Details header

* Set max-width for inputs

* Set input font color

* Set input colors to textColorDark

* Update input border-radius

* Consistently set top bar height in Checkout

* Fix summary alignment, padding, and border radius

* Fix vertical alignment of summary title

Author: michaeldcain

client/layout/masterbar/style.scss

@@ -110,7 +110,7 @@ body.is-mobile-app-view {
 		background-color: var(--studio-white);
 		border-bottom: none 0;
 		color: var(--color-checkout-masterbar-text);
-		height: var(--masterbar-height);
+		height: var(--masterbar-checkout-height);
 		position: absolute;
 		padding-inline-end: 1.5em;
 
@@ -119,10 +119,6 @@ body.is-mobile-app-view {
 			padding-inline-start: 1.5em;
 		}
 
-		@include break-mobile {
-			height: var(--masterbar-checkout-height);
-		}
-
 		@include breakpoint-deprecated( ">960px" ) {
 			background-color: var(--color-checkout-masterbar-background);
 		}

client/my-sites/checkout/src/components/checkout-main-content.tsx

@@ -1108,6 +1108,7 @@ const CheckoutSummaryTitleContent = styled.span`
 	font-size: 16px;
 	font-weight: ${ ( props ) => props.theme.weights.bold };
 	justify-content: space-between;
+	align-items: center;
 	margin: 0 auto;
 	padding: 24px;
 	max-width: 600px;
@@ -1119,6 +1120,7 @@ const CheckoutSummaryTitleContent = styled.span`
 
 const CheckoutSummaryTitle = styled.span`
 	display: flex;
+	align-items: center;
 `;
 
 const CheckoutSummaryTitleIcon = styled( Gridicon )`
@@ -1531,7 +1533,7 @@ const WPCheckoutCompletedMainContent = styled.div`
 const WPCheckoutSidebarContent = styled.div`
 	background: ${ ( props ) => props.theme.colors.background };
 	grid-area: sidebar-content;
-	margin-top: var( --masterbar-height );
+	margin-top: var( --masterbar-checkout-height );
 
 	@media ( ${ ( props ) => props.theme.breakpoints.bigPhoneUp } ) {
 		margin-top: var( --masterbar-checkout-height );

client/my-sites/checkout/src/components/checkout-sidebar-plan-upsell/style.scss

@@ -4,7 +4,7 @@
 }
 
 .promo-card.checkout-sidebar-plan-upsell {
-	padding: 20px;
+	padding: 24px;
 }
 
 .promo-card.checkout-sidebar-plan-upsell .action-panel__title {
@@ -18,6 +18,7 @@
 .promo-card {
 	max-width: 384px;
 	width: 100%;
+	border-radius: 3px;
 }
 .promo-card .action-panel__body {
 	overflow: visible;

client/my-sites/checkout/src/components/secondary-cart-promotions.tsx

@@ -33,14 +33,12 @@ const UpsellWrapper = styled.div`
 	.cart__upsell-header {
 		border-top: 1px solid ${ ( props ) => props.theme.colors.borderColorLight };
 		box-shadow: none;
-		padding-left: 20px;
-		padding-right: 20px;
+		padding-left: 24px;
+		padding-right: 24px;
 
 		@media ( ${ ( props ) => props.theme.breakpoints.desktopUp } ) {
 			border-top: none;
 			border-bottom: 1px solid ${ ( props ) => props.theme.colors.borderColorLight };
-			padding-left: 24px;
-			padding-right: 24px;
 		}
 
 		.section-header__label {
@@ -51,7 +49,7 @@ const UpsellWrapper = styled.div`
 	}
 
 	.cart__upsell-body {
-		padding: 0 20px 20px;
+		padding: 0 24px 24px;
 		font-size: 14px;
 
 		@media ( ${ ( props ) => props.theme.breakpoints.desktopUp } ) {

client/my-sites/checkout/src/components/wp-checkout-order-summary.tsx

@@ -773,9 +773,9 @@ const pulse = keyframes`
 
 const CheckoutSummaryCard = styled.div`
 	border: none;
-	border-radius: 4px;
+	border-radius: 3px;
 	background: #fff;
-	padding: 28px;
+	padding: 24px;
 	box-shadow:
 		0 3px 1px rgb( 0 0 0 / 4% ),
 		0 3px 8px rgb( 0 0 0 / 12% );

client/my-sites/checkout/src/components/wp-contact-form.tsx

@@ -26,7 +26,8 @@ const BillingFormFields = styled.div< BillingFormFieldsProps >`
 	input[type='search'].form-text-input,
 	.form-select,
 	.form-fieldset.contact-details-form-fields select {
-		border-radius: 3px;
+		border-radius: 2px;
+		color: ${ ( props ) => props.theme.colors.textColorDark };
 	}
 
 	& .form-input-validation {

packages/composite-checkout/src/components/field.tsx

@@ -18,6 +18,7 @@ const Label = styled.label< { disabled?: boolean } & LabelHTMLAttributes< HTMLLa
 const Input = styled.input<
 	{ isError?: boolean; icon?: React.ReactNode } & InputHTMLAttributes< HTMLInputElement >
 >`
+	color: ${ ( props ) => props.theme.colors.textColorDark };
 	display: block;
 	width: 100%;
 	box-sizing: border-box;

packages/wpcom-checkout/src/field.tsx

@@ -113,6 +113,7 @@ const Input = styled.input< {
 	line-height: 1.5;
 	font-size: 14px;
 	padding: 7px 14px;
+	max-width: 100%;
 
 	::-webkit-inner-spin-button,
 	::-webkit-outer-spin-button {