Merge pull request #360 from Automattic/fix/site-picker-contrast

Framework: Contrast and gridicon update to full screen site picker
Automattic · Nov 24, 2015 · 79f0706 · 79f0706
2 parents 3f32227 + b6f4b2e
commit 79f0706
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 8 deletions.
diff --git a/assets/stylesheets/sections/_sites.scss b/assets/stylesheets/sections/_sites.scss
@@ -24,15 +24,13 @@
 }
 
 .site-card__add-new {
-	.noticon {
-		font-size: 64px;
-		height: 65px;
-		margin-top: 20px;
+	.gridicon {
+		margin: 28px 0 4px;
 		color: darken( $gray, 10% );
 		transition: all 0.1s ease-in-out;
 	}
 
-	a:hover .noticon {
+	a:hover .gridicon {
 		color: $blue-medium;
 	}
 
@@ -42,7 +40,7 @@
 		background: none;
 		box-shadow: none;
 		border: 2px dashed lighten( $gray, 20% );
-		padding-top: 25px;
+		padding-top: 24px;
 
 		.site-card__title {
 			color: darken( $gray, 10% );
@@ -200,7 +198,7 @@
 
 	// Banner image
 	.site-card__header {
-		background-color: $gray-light;
+		background-color: lighten( $gray, 30% );
 		background-size: cover;
 		position: absolute;
 			top: 0;

diff --git a/client/my-sites/sites/sites.jsx b/client/my-sites/sites/sites.jsx
@@ -9,6 +9,7 @@ var React = require( 'react' ),
  */
 var SiteCard = require( './site-card' ),
 	SearchCard = require( 'components/search-card' ),
+	Gridicon = require( 'components/gridicon' ),
 	infiniteScroll = require( 'lib/mixins/infinite-scroll' ),
 	observe = require( 'lib/mixins/data-observe' ),
 	config = require( 'config' );
@@ -83,7 +84,7 @@ module.exports = React.createClass( {
 			<div className="site-card site-card__add-new" key="new-site-box">
 				<a href={ config( 'signup_url' ) + '?ref=calypso-sites' }>
 					<div className="site-card__content">
-						<span className="noticon noticon-plus" />
+						<Gridicon icon="add-outline" size={ 48 } />
 						<h3 className="site-card__title">{ this.translate( 'Start a New WordPress' ) }</h3>
 					</div>
 				</a>