[not verified] Update to match new design

projects/plugins/jetpack/extensions/plugins/publicize/components/connection-icon/index.tsx

@@ -0,0 +1,35 @@
+/**
+ * Internal dependencies
+ */
+import { SocialServiceIcon } from '../../../../shared/icons';
+
+/**
+ * Style dependencies
+ */
+import './style.scss';
+
+type ConnectionIconProps = {
+	id: string;
+	serviceName: string;
+	label: string;
+	profilePicture: string;
+};
+
+const ConnectionIcon: React.FC< ConnectionIconProps > = props => {
+	const { id, serviceName, label, profilePicture } = props;
+
+	return (
+		<label htmlFor={ id } className="jetpack-publicize-connection-label">
+			<div className="components-connection-icon__picture">
+				{ profilePicture ? <img src={ profilePicture } /> : <span className="placeholder" /> }
+				<SocialServiceIcon
+					serviceName={ serviceName }
+					className="jetpack-publicize-gutenberg-social-icon"
+				/>
+			</div>
+			<span className="jetpack-publicize-connection-label-copy">{ label }</span>
+		</label>
+	);
+};
+
+export default ConnectionIcon;

projects/plugins/jetpack/extensions/plugins/publicize/components/connection-icon/style.scss

@@ -0,0 +1,32 @@
+.jetpack-publicize-connection-label {
+	display: flex;
+	align-items: center;
+
+	// Icon and picture.
+	.components-connection-icon__picture {
+		display: grid;
+
+		img,
+		.placeholder {
+			border-radius: 2px;
+			width: 24px;
+			height: 24px;
+			grid-area: 1 / 1 / 2 / 2;
+		}
+
+		.placeholder {
+			display: block;
+			background-color: #a8bece;
+		}
+
+		svg {
+			width: 15px;
+			height: 15px;
+			grid-area: 1 / 1 / 2 / 2;
+			margin-top: 14px;
+			margin-left: 14px;
+			border-radius: 1px;
+			background-color: white;
+		}
+	}
+}

projects/plugins/jetpack/extensions/plugins/publicize/components/connection-toggle/index.tsx

@@ -0,0 +1,53 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { FormToggle } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import ConnectionIcon from '../connection-icon';
+
+/**
+ * Style dependencies
+ */
+import './style.scss';
+
+type ConnectionToggleProps = {
+	className: string;
+	checked: boolean;
+	id: string;
+	disabled: boolean;
+	onChange: () => void;
+	serviceName: string;
+	label: string;
+	profilePicture: string;
+};
+
+const ConnectionToggle: React.FC< ConnectionToggleProps > = props => {
+	const { className, checked, id, disabled, onChange, serviceName, label, profilePicture } = props;
+
+	const wrapperClasses = classnames( 'components-connection-toggle', {
+		'is-not-checked': ! checked,
+		'is-disabled': disabled,
+	} );
+
+	return (
+		<div className={ wrapperClasses }>
+			<ConnectionIcon
+				id={ id }
+				serviceName={ serviceName }
+				label={ label }
+				profilePicture={ profilePicture }
+			/>
+			<FormToggle id={ id } className={ className } checked={ checked } onChange={ onChange } />
+		</div>
+	);
+};
+
+export default ConnectionToggle;

projects/plugins/jetpack/extensions/plugins/publicize/components/connection-toggle/style.scss

@@ -0,0 +1,17 @@
+.components-connection-toggle {
+	position: relative;
+	display: flex;
+	align-items: center;
+	width: 100%;
+
+	// Unchecked state.
+	&.is-not-checked .jetpack-gutenberg-social-icon {
+		fill: #dadada;
+	}
+
+	// Disabled state:
+	&.is-disabled,
+	.components-disabled & {
+		opacity: 0.3;
+	}
+}

projects/plugins/jetpack/extensions/plugins/publicize/components/connection/index.js

@@ -18,7 +18,7 @@ import { includes } from 'lodash';
  * Internal dependencies
  */
 import getSiteFragment from '../../../../shared/get-site-fragment';
-import PublicizeCheckbox from '../publicize-checkbox';
+import ConnectionToggle from '../connection-toggle';
 
 class PublicizeConnection extends Component {
 	/**
@@ -66,10 +66,10 @@ class PublicizeConnection extends Component {
 		// Genericon names are dash separated
 		const serviceName = name.replace( '_', '-' );
 
-		let checkbox = (
-			<PublicizeCheckbox
+		let toggle = (
+			<ConnectionToggle
 				id={ fieldId }
-				className="jetpack-publicize-connection-checkbox"
+				className="jetpack-publicize-connection-toggle"
 				checked={ enabled }
 				onChange={ this.onConnectionChange }
 				serviceName={ serviceName }
@@ -79,13 +79,13 @@ class PublicizeConnection extends Component {
 		);
 
 		if ( disabled || this.connectionIsFailing() || this.connectionNeedsReauth() ) {
-			checkbox = <Disabled>{ checkbox }</Disabled>;
+			toggle = <Disabled>{ toggle }</Disabled>;
 		}
 
 		return (
 			<li>
 				{ this.maybeDisplayLinkedInNotice() }
-				<div className="publicize-jetpack-connection-container">{ checkbox }</div>
+				<div className="publicize-jetpack-connection-container">{ toggle }</div>
 			</li>
 		);
 	}