diff --git a/projects/plugins/jetpack/extensions/plugins/publicize/components/publicize-checkbox/index.tsx b/projects/plugins/jetpack/extensions/plugins/publicize/components/publicize-checkbox/index.tsx index 312eb2c919fd8..a96acf9f66bfc 100644 --- a/projects/plugins/jetpack/extensions/plugins/publicize/components/publicize-checkbox/index.tsx +++ b/projects/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 } /> - - +
+ { picture ? : } + +
diff --git a/projects/plugins/jetpack/extensions/plugins/publicize/components/publicize-checkbox/style.scss b/projects/plugins/jetpack/extensions/plugins/publicize/components/publicize-checkbox/style.scss index 3c492ac1a38fa..0f20b863217ca 100644 --- a/projects/plugins/jetpack/extensions/plugins/publicize/components/publicize-checkbox/style.scss +++ b/projects/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; + } + } }