align toggle text

This commit is contained in:
rjchow 2024-09-16 16:50:29 +10:00
parent 0b51196aa4
commit 9cbccb6db4
No known key found for this signature in database
2 changed files with 34 additions and 25 deletions

View File

@ -203,7 +203,7 @@ const SiteVisibility = () => {
</p> </p>
<div <div
className={ clsx( className={ clsx(
'site-visibility-settings-slotfill-section-content', 'site-visibility-settings-slotfill-section-content indent-one-level',
{ {
'is-hidden': comingSoon !== 'yes', 'is-hidden': comingSoon !== 'yes',
} }
@ -308,29 +308,35 @@ const SiteVisibility = () => {
</div> </div>
<div className="site-visibility-settings-slotfill-section"> <div className="site-visibility-settings-slotfill-section">
<h4>{ __( 'Admin bar badge', 'woocommerce' ) }</h4> <h4>{ __( 'Admin bar badge', 'woocommerce' ) }</h4>
<ToggleControl <div
label={ className={ clsx(
<> 'site-visibility-settings-slotfill-section-content'
{ __( 'Hide admin bar badge', 'woocommerce' ) } ) }
<p> >
{ __( <ToggleControl
'Hide the site visibility badge from the admin bar.', label={
'woocommerce' <>
) } { __( 'Hide admin bar badge', 'woocommerce' ) }
</p> <p>
</> { __(
} 'Hide the site visibility badge from the admin bar.',
checked={ hideAdminBarBadge === 'yes' } 'woocommerce'
onChange={ ( checked ) => { ) }
setHideAdminBarBadge( checked ? 'yes' : 'no' ); </p>
recordEvent( </>
'site_visibility_hide_admin_bar_badge_toggle', }
{ checked={ hideAdminBarBadge === 'yes' }
enabled: checked, onChange={ ( checked ) => {
} setHideAdminBarBadge( checked ? 'yes' : 'no' );
); recordEvent(
} } 'site_visibility_hide_admin_bar_badge_toggle',
/> {
enabled: checked,
}
);
} }
/>
</div>
</div> </div>
{ formRef.current && saveButtonRef.current ? ( { formRef.current && saveButtonRef.current ? (
<ConfirmationModal <ConfirmationModal

View File

@ -107,7 +107,10 @@
gap: 16px; gap: 16px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: 16px 0 0 30px;
&.indent-one-level {
margin: 16px 0 0 30px;
}
&.is-hidden { &.is-hidden {
display: none; display: none;