From 18deb4dc2e96e7e04b1e5033a978dd9741eebfed Mon Sep 17 00:00:00 2001
From: Valerie <valerie@automattic.com>
Date: Thu, 21 Sep 2017 00:27:19 +0300
Subject: [PATCH] Setup wizard: Style shipping unit selection

---
 assets/css/wc-setup.scss                      | 13 ++++-
 .../admin/class-wc-admin-setup-wizard.php     | 56 +++++++++++++------
 2 files changed, 50 insertions(+), 19 deletions(-)

diff --git a/assets/css/wc-setup.scss b/assets/css/wc-setup.scss
index d9c869b1846..fa82e2a283e 100644
--- a/assets/css/wc-setup.scss
+++ b/assets/css/wc-setup.scss
@@ -594,7 +594,7 @@ body {
 	display: none;
 }
 
-// Shipping
+// Shipping list of services
 .wc-wizard-services.shipping {
 
 	.wc-wizard-service-name {
@@ -634,6 +634,17 @@ body {
 		font-size: 0.92em;
 	}
 }
+.wc-setup-shipping-units {
+	p {
+		line-height: 1.5em;
+		font-size: 14px;
+		margin-bottom: 0.25em;
+	}
+
+	.wc-setup-shipping-unit {
+		margin-bottom: 1.75em
+	}
+}
 
 .hide {
 	display: none;
diff --git a/includes/admin/class-wc-admin-setup-wizard.php b/includes/admin/class-wc-admin-setup-wizard.php
index 3dc795eaffd..b2f707cd6a0 100644
--- a/includes/admin/class-wc-admin-setup-wizard.php
+++ b/includes/admin/class-wc-admin-setup-wizard.php
@@ -728,24 +728,44 @@ class WC_Admin_Setup_Wizard {
 				</li>
 			</ul>
 
-			<div>
-				<label for="weight_unit"><?php esc_html_e( 'Weight unit—used to calculate shipping rates, and more.', 'woocommerce' ); ?></label>
-				<select id="weight_unit" name="weight_unit" class="wc-enhanced-select" style="width:100%">
-					<option value="kg" <?php selected( $weight_unit, 'kg' ); ?>><?php esc_html_e( 'kg', 'woocommerce' ); ?></option>
-					<option value="g" <?php selected( $weight_unit, 'g' ); ?>><?php esc_html_e( 'g', 'woocommerce' ); ?></option>
-					<option value="lbs" <?php selected( $weight_unit, 'lbs' ); ?>><?php esc_html_e( 'lbs', 'woocommerce' ); ?></option>
-					<option value="oz" <?php selected( $weight_unit, 'oz' ); ?>><?php esc_html_e( 'oz', 'woocommerce' ); ?></option>
-				</select>
-			</div>
-			<div>
-				<label for="dimension_unit"><?php esc_html_e( 'Dimension unit—helps for accurate package selection.', 'woocommerce' ); ?></label>
-				<select id="dimension_unit" name="dimension_unit" class="wc-enhanced-select" style="width:100%">
-					<option value="m" <?php selected( $dimension_unit, 'm' ); ?>><?php esc_html_e( 'm', 'woocommerce' ); ?></option>
-					<option value="cm" <?php selected( $dimension_unit, 'cm' ); ?>><?php esc_html_e( 'cm', 'woocommerce' ); ?></option>
-					<option value="mm" <?php selected( $dimension_unit, 'mm' ); ?>><?php esc_html_e( 'mm', 'woocommerce' ); ?></option>
-					<option value="in" <?php selected( $dimension_unit, 'in' ); ?>><?php esc_html_e( 'in', 'woocommerce' ); ?></option>
-					<option value="yd" <?php selected( $dimension_unit, 'yd' ); ?>><?php esc_html_e( 'yd', 'woocommerce' ); ?></option>
-				</select>
+			<div class="wc-setup-shipping-units">
+				<div class="wc-setup-shipping-unit">
+					<p>
+						<label for="weight_unit">
+							<?php
+								printf( wp_kses(
+									__( '<strong>Weight unit</strong>—used to calculate shipping rates, and more.', 'woocommerce' ),
+									array( 'strong' => array() )
+								) );
+							?>
+						</label>
+					</p>
+					<select id="weight_unit" name="weight_unit" class="wc-enhanced-select" style="width:100%">
+						<option value="kg" <?php selected( $weight_unit, 'kg' ); ?>><?php esc_html_e( 'kg', 'woocommerce' ); ?></option>
+						<option value="g" <?php selected( $weight_unit, 'g' ); ?>><?php esc_html_e( 'g', 'woocommerce' ); ?></option>
+						<option value="lbs" <?php selected( $weight_unit, 'lbs' ); ?>><?php esc_html_e( 'lbs', 'woocommerce' ); ?></option>
+						<option value="oz" <?php selected( $weight_unit, 'oz' ); ?>><?php esc_html_e( 'oz', 'woocommerce' ); ?></option>
+					</select>
+				</div>
+				<div class="wc-setup-shipping-unit">
+					<p>
+						<label for="dimension_unit">
+							<?php
+								printf( wp_kses(
+									__( '<strong>Dimension unit</strong>—helps for accurate package selection.', 'woocommerce' ),
+									array( 'strong' => array() )
+								) );
+							?>
+						</label>
+					</p>
+					<select id="dimension_unit" name="dimension_unit" class="wc-enhanced-select" style="width:100%">
+						<option value="m" <?php selected( $dimension_unit, 'm' ); ?>><?php esc_html_e( 'm', 'woocommerce' ); ?></option>
+						<option value="cm" <?php selected( $dimension_unit, 'cm' ); ?>><?php esc_html_e( 'cm', 'woocommerce' ); ?></option>
+						<option value="mm" <?php selected( $dimension_unit, 'mm' ); ?>><?php esc_html_e( 'mm', 'woocommerce' ); ?></option>
+						<option value="in" <?php selected( $dimension_unit, 'in' ); ?>><?php esc_html_e( 'in', 'woocommerce' ); ?></option>
+						<option value="yd" <?php selected( $dimension_unit, 'yd' ); ?>><?php esc_html_e( 'yd', 'woocommerce' ); ?></option>
+					</select>
+				</div>
 			</div>
 
 			<p class="wc-setup-actions step">