Updated buttons and cards in JITM and connect flows

packages/jitm/assets/jetpack-admin-jitm.scss

@@ -3,6 +3,7 @@
 @import '_inc/client/scss/functions/rem';
 @import '_inc/client/scss/variables/colors';
 @import '_inc/client/scss/mixins/breakpoints';
+@import '_inc/client/scss/calypso-colors';
 
 @mixin clear-fix {
 	&:after {
@@ -39,54 +40,61 @@ $blue-medium-dark:       #0071a1;
 	margin: 0;
 	outline: 0;
 	overflow: hidden;
+	font-size: 14px;
 	font-weight: 500;
 	text-overflow: ellipsis;
 	text-decoration: none;
 	vertical-align: top;
 	box-sizing: border-box;
-	font-size: rem( 14px );
-	line-height: rem( 21px );
-	border-radius: rem( 4px );
-	padding: rem( 7px ) rem( 14px ) rem( 9px );
+	font-size: 14px;
+	border-radius: 4px;
+	padding: 7px 14px 9px;
+	-webkit-appearance: none;
 	appearance: none;
 
 	&:hover {
-		border-color: lighten( $gray, 10% );
-		color: $gray-dark;
-	}
-	&:active {
-		border-width: 2px 1px 1px;
-	}
-	&:visited {
-		color: $gray-dark;
+		background: #f1f1f1;
+		border-color: $blue-grey-dark;
+		color: $blue-grey-dark;
 	}
 	&[disabled],
 	&:disabled {
 		color: lighten( $gray, 30% );
 		background: $white;
 		border-color: lighten( $gray, 30% );
 		cursor: default;
-
-		&:active {
-			border-width: 1px 1px 2px;
-		}
 	}
 	&:focus {
-		outline: 0;
-		border-color: $blue-medium;
-		box-shadow: 0 0 0 2px $blue-light;
+		background: $white;
+		border-color: $blue-medium-dark;
+		box-shadow: 0 0 0 1px $blue-medium-dark;
 	}
 	&.is-compact {
-		padding: rem( 7px );
-		color: darken( $gray, 10% );
-		font-size: rem( 12px );
+		padding: 7px;
+		font-size: 11px;
 		line-height: 1;
+		text-transform: uppercase;
 
 		&:disabled {
 			color: lighten( $gray, 30% );
 		}
+		.gridicon {
+			top: 4px;
+			margin-top: -8px;
+		}
+		// Make the left margin of the small plus icon visually less huge
+		.gridicons-plus-small {
+			margin-left: -4px;
+		}
+		// Reset the left margin if the button contains only the plus icon
+		.gridicons-plus-small:last-of-type {
+			margin-left: 0;
+		}
+		// Make plus icon nudged closer to adjacent icons for add-people and add-plugin type buttons
+		.gridicons-plus-small + .gridicon {
+			margin-left: -4px;
+		}
 	}
-
 	&.hidden {
 		display: none;
 	}
@@ -104,6 +112,11 @@ $blue-medium-dark:       #0071a1;
 		background: $blue-medium-dark;
 		color: $white;
 	}
+	&:focus {
+		box-shadow:
+			0 0 0 1px $white,
+			0 0 0 3px $blue-medium-dark;
+	}
 	&[disabled],
 	&:disabled {
 		background: tint( $blue-light, 50% );
@@ -112,6 +125,7 @@ $blue-medium-dark:       #0071a1;
 	}
 	&.is-compact {
 		color: $white;
+		white-space: nowrap;
 	}
 }
 
@@ -124,8 +138,10 @@ $blue-medium-dark:       #0071a1;
 	padding: rem( 16px );
 	box-sizing: border-box;
 	background: $white;
-	box-shadow: 0 0 0 1px transparentize( lighten( $gray, 20% ), .5 ),
-	0 1px 2px lighten( $gray, 30% );
+	box-shadow:
+		0 0 0 1px $light-gray-700,
+		0 1px 1px 1px  rgba(0,0,0,.04);
+
 
 	@include clear-fix;
 

scss/jetpack-connect.scss

@@ -19,33 +19,3 @@
 	margin-top: 84px;
 	display: block;
 }
-
-// =====================================================================
-// Remove dops button override coming from jetpack-banner
-// ==========================================================================
-
-.jp-connect-full__button-container .dops-button.jp-connect-button.is-primary {
-	background: $blue-medium;
-	border-color: $blue-wordpress;
-	color: $white;
-
-	&:focus {
-		outline: 0;
-		border-color: $blue-medium;
-		box-shadow: 0 0 0 2px $blue-light;
-	}
-
-	&:hover,
-	&:focus {
-		background: $blue-medium;
-		border-color: $blue-dark;
-		color: $white;
-	}
-
-	&[disabled],
-	&:disabled {
-		background: tint( $blue-medium, 40% );
-		border-color: tint( $blue-dark, 40% );
-		color: $white;
-	}
-}

scss/organisms/_banners.scss

@@ -105,8 +105,10 @@
 	&.toplevel_page_jetpack .jp-connect-full__container {
 		position: relative;
 		bottom: 0;
-		box-shadow: 0 0 0 1px transparentize( lighten( $gray, 20% ), .5 ),
-			0 1px 2px lighten( $gray, 30% );
+		box-shadow:
+			0 0 0 1px #ccd0d4,
+			0 1px 1px 1px  rgba(0,0,0,.04);
+
 
 		.jp-connect-full__container-card {
 			margin: 0;
@@ -282,7 +284,8 @@
 .updated.jp-wpcom-connect__container {
 	border-left: none;
 	padding: 0;
-	box-shadow: 0 0 0 1px rgba(200, 215, 225, 0.5), 0 1px 2px #e9eff3;
+	border: 1px solid #ccd0d4;
+	box-shadow: 0 1px 1px  rgba(0,0,0,.04);
 
 	@media screen and (max-width: 782px) {
 		padding: 0 !important; // override core cascades
@@ -307,6 +310,7 @@
 .jp-wpcom-connect__container-top-text {
 	padding: 15px 35px 25px 15px;
 	background-color: $green-primary;
+
 	color: $white;
 	display: flex;
 	align-items: baseline;
@@ -450,5 +454,10 @@
 			background: $green-secondary;
 			border-color: $green-dark;
 		}
+		&:focus {
+			box-shadow:
+				0 0 0 1px $white,
+				0 0 0 3px $green-dark;
+		}
 	}
 }