From c835432c88e87f06e3ddee3c47946d82b7423a6c Mon Sep 17 00:00:00 2001
From: David Levin <sayhi@levinmedia.com>
Date: Wed, 22 Aug 2018 19:07:19 -0700
Subject: [PATCH 1/2] Updates to segmented selection and presets / custom
 toggle

---
 .../client/components/filters/date/style.scss     | 15 +++++++++++----
 .../components/segmented-selection/style.scss     |  5 +++--
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/plugins/woocommerce-admin/client/components/filters/date/style.scss b/plugins/woocommerce-admin/client/components/filters/date/style.scss
index 4b65b55359c..7b1f11f4ab5 100644
--- a/plugins/woocommerce-admin/client/components/filters/date/style.scss
+++ b/plugins/woocommerce-admin/client/components/filters/date/style.scss
@@ -12,7 +12,7 @@
 		}
 
 		.components-tab-panel__tab-content {
-			height: calc(100% - 38px);
+			height: calc(100% - 36px);
 		}
 	}
 }
@@ -37,11 +37,17 @@
 .woocommerce-filters-date__tab {
 	outline: none;
 	border: 1px solid $woocommerce;
-	padding: 10px;
+	padding: 9px;
 	margin: 0;
 	border-radius: 5px 0 0 5px;
+	color: $woocommerce;
 	background-color: transparent;
 
+	&:hover {
+		background-color: lighten($woocommerce, 50%);
+		cursor: pointer;
+	}
+
 	&:last-child {
 		border-radius: 0 5px 5px 0;
 	}
@@ -95,6 +101,7 @@
 
 .woocommerce-filters-date__button {
 	justify-content: center;
-	width: 50%;
-	margin: 0 1em;
+	width: 40%;
+	height: 34px !important;
+	margin: 0 0.75em !important;
 }
diff --git a/plugins/woocommerce-admin/client/components/segmented-selection/style.scss b/plugins/woocommerce-admin/client/components/segmented-selection/style.scss
index 9f3d3416d16..28a67844550 100644
--- a/plugins/woocommerce-admin/client/components/segmented-selection/style.scss
+++ b/plugins/woocommerce-admin/client/components/segmented-selection/style.scss
@@ -17,7 +17,7 @@
 
 .woocommerce-segmented-selection__label {
 	background-color: $core-grey-light-100;
-	padding: 12px 12px 12px 24px;
+	padding: 12px 12px 12px 36px;
 	position: relative;
 	display: block;
 	height: 100%;
@@ -42,6 +42,7 @@
 
 	&:checked + label .woocommerce-segmented-selection__label {
 		background-color: $white;
+		font-weight: 600;
 
 		&::before {
 			content: '';
@@ -50,7 +51,7 @@
 			background-color: $woocommerce;
 			position: absolute;
 			top: 50%;
-			transform: translate(-16px, -50%);
+			transform: translate(-20px, -50%);
 		}
 	}
 

From c39e6f1edb15a1a2ff2f2a9e6033b332090ef379 Mon Sep 17 00:00:00 2001
From: David Levin <sayhi@levinmedia.com>
Date: Thu, 23 Aug 2018 11:21:04 -0700
Subject: [PATCH 2/2] style updates per review

---
 .../client/components/filters/date/style.scss | 20 +++++++++----------
 .../components/segmented-selection/style.scss |  2 +-
 .../stylesheets/abstracts/_variables.scss     |  1 +
 3 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/plugins/woocommerce-admin/client/components/filters/date/style.scss b/plugins/woocommerce-admin/client/components/filters/date/style.scss
index 7b1f11f4ab5..5261596b999 100644
--- a/plugins/woocommerce-admin/client/components/filters/date/style.scss
+++ b/plugins/woocommerce-admin/client/components/filters/date/style.scss
@@ -12,7 +12,7 @@
 		}
 
 		.components-tab-panel__tab-content {
-			height: calc(100% - 36px);
+			height: calc(100% - $gap-larger);
 		}
 	}
 }
@@ -37,9 +37,9 @@
 .woocommerce-filters-date__tab {
 	outline: none;
 	border: 1px solid $woocommerce;
-	padding: 9px;
+	padding: $gap-smaller;
 	margin: 0;
-	border-radius: 5px 0 0 5px;
+	border-radius: 4px 0 0 4px;
 	color: $woocommerce;
 	background-color: transparent;
 
@@ -49,7 +49,7 @@
 	}
 
 	&:last-child {
-		border-radius: 0 5px 5px 0;
+		border-radius: 0 4px 4px 0;
 	}
 
 	&.is-active {
@@ -97,11 +97,11 @@
 	display: flex;
 	justify-content: center;
 	width: 100%;
-}
 
-.woocommerce-filters-date__button {
-	justify-content: center;
-	width: 40%;
-	height: 34px !important;
-	margin: 0 0.75em !important;
+	.woocommerce-filters-date__button.is-button {
+		justify-content: center;
+		width: 40%;
+		height: 34px;
+		margin: 0 $gap-small;
+	}
 }
diff --git a/plugins/woocommerce-admin/client/components/segmented-selection/style.scss b/plugins/woocommerce-admin/client/components/segmented-selection/style.scss
index 28a67844550..1a4f24d1b2a 100644
--- a/plugins/woocommerce-admin/client/components/segmented-selection/style.scss
+++ b/plugins/woocommerce-admin/client/components/segmented-selection/style.scss
@@ -17,7 +17,7 @@
 
 .woocommerce-segmented-selection__label {
 	background-color: $core-grey-light-100;
-	padding: 12px 12px 12px 36px;
+	padding: $gap-small $gap-small $gap-small $gap-larger;
 	position: relative;
 	display: block;
 	height: 100%;
diff --git a/plugins/woocommerce-admin/client/stylesheets/abstracts/_variables.scss b/plugins/woocommerce-admin/client/stylesheets/abstracts/_variables.scss
index b6916497cfe..04f9bf1ca35 100644
--- a/plugins/woocommerce-admin/client/stylesheets/abstracts/_variables.scss
+++ b/plugins/woocommerce-admin/client/stylesheets/abstracts/_variables.scss
@@ -4,6 +4,7 @@ $gutter: var(--main-gap);
 $gutter-large: var(--large-gap);
 
 $gap-largest: 40px;
+$gap-larger: 36px;
 $gap-large: 24px;
 $gap: 16px;
 $gap-small: 12px;