Various design changes

humanmade · Aug 17, 2022 · ac4f2b7 · ac4f2b7
1 parent 6903320
commit ac4f2b7
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 36 deletions.
diff --git a/src/accelerate/components/Dashboard.scss b/src/accelerate/components/Dashboard.scss
@@ -9,6 +9,9 @@ $color-light-grey: #eef0f4;
 $color-dark-grey: #7B7B7B;
 $color-light-grey-bg: #F5F6F8;
 
+// Variables (Noel edit - will reconcile will above once we have final design)
+$color-light-blue-bg: #ECEEF1; // Thumbnail BG + Ghost Bars
+
 // Override certain WP-specific pieces
 body.index-php {
 
@@ -227,13 +230,13 @@ body.index-php {
 				background: $color-light-grey;
 				border-color: transparent;
 				border-radius: 10px;
-				padding-left: 45px;
+				padding-left: 35px;
 				height: 36px;
 
 				&:focus {
 					outline: 0;
 					box-shadow: none;
-					border-bottom: 1px solid #ddd;
+					border-bottom: none;
 				}
 
 				&::placeholder {
@@ -333,30 +336,19 @@ body.index-php {
 			padding-top: 17px;
 			padding-left: 0;
 
-			img, a {
+			.record-thumbnail-wrap {
 				width: 105px;
 				height: 47px;
-				object-fit: cover;
-				object-position: top center;
-				box-shadow: 0 2px 5px rgb(0 0 0 / 40%);
+				background-color: $color-light-blue-bg;
+				border-radius: 2px;
 			}
 
-			a {
-				display: inline-block;
-				text-align: center;
-				vertical-align: middle;
-				padding: 13px;
-				text-decoration: none;
-				box-shadow: none;
-				background-color: #f5f6f8;
-
-				&:hover {
-					box-shadow: 0 2px 4px rgb(0 0 0 / 30%);
-				}
-
-				&.record-thumbnail__empty {
-					background-color: #ECECEC;
-				}
+			img {
+				width: 105px;
+				height: 47px;
+				object-fit: cover;
+				object-position: top center;
+				box-shadow: 0 4px 7px 0 rgba(21, 42, 79, 0.2);
 			}
 
 		}
@@ -402,6 +394,11 @@ body.index-php {
 			}
 		}
 
+		.record-empty {
+			display: inline-block;
+			min-height: 300px;
+		}
+
 		.record-traffic {
 
 			> div {

diff --git a/src/accelerate/components/List.tsx b/src/accelerate/components/List.tsx
@@ -74,7 +74,7 @@ export default function List ( props: Props ) {
 		},
 		{
 			value: 'me',
-			label: __( 'My content', 'altis' ),
+			label: __( 'My Content', 'altis' ),
 		},
 	];
 
@@ -266,6 +266,7 @@ export default function List ( props: Props ) {
 							return (
 								<tr key={ post.id }>
 									<td className='record-thumbnail'>
+										<div className='record-thumbnail-wrap'>
 										{ post.thumbnail && (
 											<Image
 												src={ post.thumbnail }
@@ -275,17 +276,12 @@ export default function List ( props: Props ) {
 											/>
 										) }
 										{ post.thumbnail === '' && post.editUrl && (
-											<Button
-												href={ post.editUrl }
-												isLink
-												title={ __( 'Set featured image', 'altis' ) }
-												onClick={ () => trackEvent( 'Content Explorer', 'Set Feature Image', { type: post.type } ) }
-												className='record-thumbnail__empty'
-											>
-												<Icon icon="plus-alt" />
-												<span className="screen-reader-text">{ __( 'Set featured image' ) }</span>
-											</Button>
+											<div
+											className='record-thumbnail__empty'
+										>
+										</div>
 										) }
+										</div>
 									</td>
 									<td className="record-name">
 										<div className='record-name__type'>

diff --git a/src/accelerate/components/SparkChart.tsx b/src/accelerate/components/SparkChart.tsx
@@ -24,7 +24,7 @@ const getY = ( d : Datum ) => d.count;
 export default function SparkChart( props: Props ) {
 	const {
 		histogram,
-		width = 180,
+		width = 160,
 		height = 20,
 		maxViews,
 	} = props;
@@ -65,10 +65,10 @@ export default function SparkChart( props: Props ) {
 						key={ `bar-${ d.index }` }
 						x={ barX }
 						y={ barY }
-						rx={ 2 }
+						rx={ 1 }
 						width={ barWidth }
 						height={ barHeight + 10 }
-						fill={ d.zeroData ? '#d2d5d7' : 'var( --wp-admin-theme-color )' }
+						fill={ d.zeroData ? '#E3E5E8' : 'var( --wp-admin-theme-color )' }
 						fillOpacity={ 0.8 }
 					>
 						<title>{