[not verified] Style service picture

Automattic · Sep 27, 2021 · 0df31d5 · 0df31d5
1 parent abd1156
commit 0df31d5
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 11 deletions.
diff --git a/...ects/plugins/jetpack/extensions/plugins/publicize/components/publicize-checkbox/index.tsx b/...ects/plugins/jetpack/extensions/plugins/publicize/components/publicize-checkbox/index.tsx
@@ -23,17 +23,12 @@ type PublicizeCheckboxProps = {
 	checked: boolean;
 	id: string;
 	disabled: boolean;
-	onChange: React.ChangeEventHandler;
+	onChange: () => void;
 	serviceName: string;
 	label: string;
 	picture: string;
 };
 
-/**
- * Publicize checkbox with icon and username label.
- * @param props
- * @returns
- */
 const PublicizeCheckbox: React.FC< PublicizeCheckboxProps > = props => {
 	const { className, checked, id, disabled, onChange, serviceName, label, picture } = props;
 
@@ -52,11 +47,13 @@ const PublicizeCheckbox: React.FC< PublicizeCheckboxProps > = props => {
 				onChange={ onChange }
 				disabled={ disabled }
 			/>
-			<img src={ picture } />
-			<SocialServiceIcon
-				serviceName={ serviceName }
-				className="jetpack-publicize-gutenberg-social-icon"
-			/>
+			<div className="components-publicize-icon__picture">
+				{ picture ? <img src={ picture } /> : <span className="placeholder" /> }
+				<SocialServiceIcon
+					serviceName={ serviceName }
+					className="jetpack-publicize-gutenberg-social-icon"
+				/>
+			</div>
 			<label htmlFor={ id } className="jetpack-publicize-connection-label">
 				<span className="jetpack-publicize-connection-label-copy">{ label }</span>
 			</label>

diff --git a/...cts/plugins/jetpack/extensions/plugins/publicize/components/publicize-checkbox/style.scss b/...cts/plugins/jetpack/extensions/plugins/publicize/components/publicize-checkbox/style.scss
@@ -17,4 +17,35 @@
 	.components-disabled & {
 		opacity: 0.3;
 	}
+
+	// Icon and picture.
+	.components-publicize-icon__picture {
+		display: grid;
+
+		img {
+			border-radius: 50%;
+			width: 30px;
+			height: 30px;
+			grid-area: 1 / 1 / 2 / 2;
+		}
+
+		.placeholder {
+			display: block;
+			background-color: rgb( 168, 190, 206 );
+			border-radius: 50%;
+			width: 30px;
+			height: 30px;
+			grid-area: 1 / 1 / 2 / 2;
+		}
+
+		svg {
+			width: 15px;
+			height: 15px;
+			grid-area: 1 / 1 / 2 / 2;
+			margin-top: 18px;
+			margin-left: 18px;
+			border: 1px solid white;
+			border-radius: 1px;
+		}
+	}
 }