Skip to content

Commit

Permalink
refactor: update styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@JoshuaHungDinh
JoshuaHungDinh committed Aug 23, 2023
1 parent 47ade50 commit 398722f
Show file tree
Hide file tree
Showing 4 changed files with 173 additions and 143 deletions.
6 changes: 3 additions & 3 deletions ...ces/js/form-builder/src/settings/email/template-options/components/send-preview-email.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,12 +44,12 @@ export default ({emailType, defaultEmailAddress}) => {

return (
<>
<h2 className={'email-settings-header'}>{__('Send a test email', 'givewp')}</h2>
<p className={'email-settings-description'}>
<h2 className={'email-settings__header'}>{__('Send a test email', 'givewp')}</h2>
<p className={'email-settings__description'}>
{__('Specify below the email address you want to send a test email to', 'givewp')}
</p>
{defaultEmailAddress !== null && <TextControl onChange={setEmailAddress} value={emailAddress} />}
<Button variant={'secondary'} onClick={sendTestEmail} style={{width: '100%', justifyContent: 'center'}}>
<Button className={'email-settings-email-btn'} variant={'secondary'} onClick={sendTestEmail}>
{__('Send test email', 'givewp')}
</Button>
</>
Expand Down
18 changes: 9 additions & 9 deletions src/FormBuilder/resources/js/form-builder/src/settings/email/template-options/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ export default () => {
{!showPreview && (
<>
<div className={'email-settings'}>
<div className={'email-settings-col-left'}>
<div className={'email-settings__col-left'}>
<TabPanel
className={'email-settings-modal-tabs'}
orientation={'vertical' as 'horizontal' | 'vertical' | 'both'}
Expand All @@ -88,15 +88,15 @@ export default () => {
>
{(tab) => (
<div
className={'email-settings-template-wrapper'}
className={'email-settings-template'}
style={{
padding:
selectedNotificationStatus === 'global'
? '16px 20px'
: '0 20px', // Adjust for scrollbar
}}
>
<h2 className={'email-settings-header'}>{__('Notification')}</h2>
<h2 className={'email-settings__header'}>{__('Notification')}</h2>
<EmailTemplateSettings
closeModal={closeModal}
notification={tab.name}
Expand All @@ -106,19 +106,19 @@ export default () => {
</TabPanel>
</div>
<div
className={'email-settings-col-right'}
className={'email-settings__col-right'}
style={{
visibility: 'enabled' === selectedNotificationStatus ? 'visible' : 'hidden',
}}
>
<div>
<h2 className={'email-settings-header'}>{__('Preview email', 'givewp')}</h2>
<p className={'email-settings-description'}>
<h2 className={'email-settings__header'}>{__('Preview email', 'givewp')}</h2>
<p className={'email-settings__description'}>
{__('Preview the email message in your browser', 'givewp')}
</p>
<Button
className={'email-settings-email-btn'}
variant={'secondary'}
style={{width: '100%', justifyContent: 'center'}}
onClick={() => setShowPreview(true)}
>
{__('Preview email', 'givewp')}
Expand All @@ -131,8 +131,8 @@ export default () => {
/>
</div>
<div>
<h2 className={'email-settings-header'}>{__('Template tags', 'givewp')}</h2>
<p className={'email-settings-description'}>
<h2 className={'email-settings__header'}>{__('Template tags', 'givewp')}</h2>
<p className={'email-settings__description'}>
{__(
'Available template tags for this email. HTML is accepted. See our documentation for examples of how to use custom meta email tags to output additional donor or donation information in your GiveWP emails',
'givewp'
Expand Down
25 changes: 10 additions & 15 deletions src/FormBuilder/resources/js/form-builder/src/settings/email/template-options/settings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,21 +112,17 @@ const EmailTemplateSettings = ({notification, closeModal}) => {
};

return (
<div className={'email-settings-template-container'}>
<div className={'email-settings-template-container-actions'}>
<div className={'email-settings-template__container'}>
<div className={'email-settings-template__actions'}>
<Button
style={{
padding: 'var(--givewp-spacing-4) var(--givewp-spacing-12)',
}}
className={'email-settings-template__actions-cancel'}
variant={'secondary'}
onClick={cancelChanges}
>
{__('Cancel', 'givewp')}
</Button>
<Button
style={{
padding: 'var(--givewp-spacing-4) var(--givewp-spacing-8)',
}}
className={'email-settings-template__actions-set'}
variant={'primary'}
onClick={setEmailTemplateOption}
>
Expand Down Expand Up @@ -184,10 +180,10 @@ const EmailTemplateSettings = ({notification, closeModal}) => {
/>

{config.supportsRecipients && (
<div className={'email-settings-template-recipient'}>
<div className={'email-settings-template__recipient'}>
<div>
<h2 className={'email-settings-header'}>{__('Email recipient', 'givewp')}</h2>
<p className={'email-settings-description'}>
<h2 className={'email-settings__header'}>{__('Email recipient', 'givewp')}</h2>
<p className={'email-settings__description'}>
{__('Email address that should receive a notification', 'givewp')}
</p>
</div>
Expand All @@ -196,10 +192,9 @@ const EmailTemplateSettings = ({notification, closeModal}) => {
return (
<li
key={'level-option-inspector-' + index}
className={'givewp-donation-level-control'}
className={'base-control--email-options'}
>
<TextControl
label={__('Donation amount level', 'give')}
hideLabelFromVision
value={recipientEmail}
onChange={(value) => {
Expand All @@ -210,7 +205,7 @@ const EmailTemplateSettings = ({notification, closeModal}) => {
/>

<Button
className={'email-settings-template-recipient-delete'}
className={'email-settings-template__recipient-delete'}
onClick={() => {
recipients.splice(index, 1);
updateEmailTemplateField('recipient', recipients.slice());
Expand All @@ -223,7 +218,7 @@ const EmailTemplateSettings = ({notification, closeModal}) => {
})}

<Button
style={{width: '100%', justifyContent: 'center', gap: '.25rem'}}
style={{height: '2.5rem', width: '100%', justifyContent: 'center', gap: '.25rem'}}
variant={'secondary'}
onClick={() => updateEmailTemplateField('recipient', [...recipients, ''])}
>
Expand Down
Loading

0 comments on commit 398722f

Please sign in to comment.