From 398722f9cd255ee18beeec6239a057c8fa11250f Mon Sep 17 00:00:00 2001
From: Joshua Dinh <josh@joshuadinh.tech>
Date: Wed, 23 Aug 2023 15:22:07 -0700
Subject: [PATCH] refactor: update styles

---
 .../components/send-preview-email.tsx         |   6 +-
 .../settings/email/template-options/index.tsx |  18 +-
 .../email/template-options/settings.tsx       |  25 +-
 .../src/styles/_email-settings.scss           | 267 ++++++++++--------
 4 files changed, 173 insertions(+), 143 deletions(-)

diff --git a/src/FormBuilder/resources/js/form-builder/src/settings/email/template-options/components/send-preview-email.tsx b/src/FormBuilder/resources/js/form-builder/src/settings/email/template-options/components/send-preview-email.tsx
index 1329141d01..c4afba96f1 100644
--- a/src/FormBuilder/resources/js/form-builder/src/settings/email/template-options/components/send-preview-email.tsx
+++ b/src/FormBuilder/resources/js/form-builder/src/settings/email/template-options/components/send-preview-email.tsx
@@ -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>
         </>
diff --git a/src/FormBuilder/resources/js/form-builder/src/settings/email/template-options/index.tsx b/src/FormBuilder/resources/js/form-builder/src/settings/email/template-options/index.tsx
index ca09a88fa6..924be7a9f0 100644
--- a/src/FormBuilder/resources/js/form-builder/src/settings/email/template-options/index.tsx
+++ b/src/FormBuilder/resources/js/form-builder/src/settings/email/template-options/index.tsx
@@ -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'}
@@ -88,7 +88,7 @@ export default () => {
                                     >
                                         {(tab) => (
                                             <div
-                                                className={'email-settings-template-wrapper'}
+                                                className={'email-settings-template'}
                                                 style={{
                                                     padding:
                                                         selectedNotificationStatus === 'global'
@@ -96,7 +96,7 @@ export default () => {
                                                             : '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}
@@ -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')}
@@ -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'
diff --git a/src/FormBuilder/resources/js/form-builder/src/settings/email/template-options/settings.tsx b/src/FormBuilder/resources/js/form-builder/src/settings/email/template-options/settings.tsx
index dd70ded89a..e3d4249307 100644
--- a/src/FormBuilder/resources/js/form-builder/src/settings/email/template-options/settings.tsx
+++ b/src/FormBuilder/resources/js/form-builder/src/settings/email/template-options/settings.tsx
@@ -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}
                 >
@@ -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>
@@ -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) => {
@@ -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());
@@ -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, ''])}
                                 >
diff --git a/src/FormBuilder/resources/js/form-builder/src/styles/_email-settings.scss b/src/FormBuilder/resources/js/form-builder/src/styles/_email-settings.scss
index b2031aed15..1d554488de 100644
--- a/src/FormBuilder/resources/js/form-builder/src/styles/_email-settings.scss
+++ b/src/FormBuilder/resources/js/form-builder/src/styles/_email-settings.scss
@@ -1,3 +1,103 @@
+.radio-control--email-options {
+    display: flex;
+    flex-direction: column-reverse;
+    gap: var(--givewp-spacing-2);
+
+    .components-radio-control__option {
+        margin: .15rem 0;
+    }
+
+    .components-base-control__help {
+        margin: 0;
+    }
+}
+
+.select-control--email-options {
+    .components-input-control__label {
+        color: rgb(60, 67, 74);
+        font-size: 0.813rem;
+    }
+
+    .components-base-control__help {
+        color: var(--givewp-grey-500);
+        font-size: 0.75rem;
+        margin: 0;
+    }
+}
+
+.base-control--email-options {
+    .components-base-control, .components-base-control__field {
+        margin-bottom: 0;
+    }
+}
+
+[id^='__wp-uploader'] {
+    z-index: 9999999999;
+}
+
+.media-frame {
+    z-index: 1 !important;
+}
+
+.components-modal__content {
+    display: flex;
+
+    > div {
+        width: 100%;
+    }
+}
+
+
+.email-settings {
+    display: flex;
+    gap: var(--givewp-spacing-10);
+    height: 100%;
+    overflow: hidden;
+    flex: 1;
+
+    .components-text-control__input {
+        height: 2.25rem;
+    }
+
+    .givewp-ql-text-editor, #toolbar, .ql-container .ql-snow, .ql-editor {
+        border-radius: 2px;
+    }
+
+    &-email-btn {
+        height: 2.5rem;
+        width: 100%;
+        justify-content: center;
+    }
+
+    &__header {
+        font-size: .875rem;
+        line-height: 1.25rem;
+        margin: 0 0 0.5rem 0;
+    }
+
+    &__description {
+        color: var(--givewp-grey-500);
+        font-size: 0.75rem;
+        line-height: 1.5;
+        margin: 0 0 .5rem 0;
+    }
+
+    &__col-left {
+        flex: 2;
+        overflow-y: Scroll;
+
+    }
+
+    &__col-right {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: var(--givewp-spacing-10);
+        padding-right: 10px;
+        overflow-y: Scroll;
+    }
+}
+
 .email-settings-modal-tabs {
     display: flex;
     gap: var(--givewp-spacing-10);
@@ -27,30 +127,63 @@
     }
 }
 
-.radio-control--email-options {
-    display: flex;
-    flex-direction: column-reverse;
-    gap: var(--givewp-spacing-2);
+.email-settings-template {
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
 
-    .components-radio-control__option {
-        margin: .15rem 0;
+    &__container {
+        display: flex;
+        flex-direction: column;
+        gap: var(--givewp-spacing-6);
+        margin-bottom: 20px;
+
+        li {
+            display: flex;
+            gap: 1rem;
+            justify-content: space-between;
+            align-items: flex-end;
+        }
     }
 
-    .components-base-control__help {
-        margin: 0;
-    }
-}
+    &__actions {
+        z-index: 11;
+        position: absolute;
+        top: 0;
+        right: 0;
+        display: flex;
+        gap: var(--givewp-spacing-3);
+        margin: var(--givewp-spacing-4) var(--givewp-spacing-6);
 
-.select-control--email-options {
-    .components-input-control__label {
-        color: rgb(60, 67, 74);
-        font-size: 0.813rem;
+        &-set {
+            padding: var(--givewp-spacing-4) var(--givewp-spacing-8);
+        }
+
+        &-cancel {
+            padding: var(--givewp-spacing-4) var(--givewp-spacing-12);
+        }
     }
 
-    .components-base-control__help {
-        color: var(--givewp-grey-500);
-        font-size: 0.75rem;
-        margin: 0;
+    &__recipient {
+        display: flex;
+        flex-direction: column;
+        gap: var(--givewp-spacing-3);
+
+        &-delete {
+            padding: 0;
+
+            svg {
+                display: block;
+                transform: scale(1.2);
+                stroke: var(--givewp-grey-500);
+                fill: var(--givewp-grey-500);
+
+                :hover {
+                    fill: var(--givewp-red-500);
+                    stroke: var(--givewp-red-500);
+                }
+            }
+        }
     }
 }
 
@@ -99,101 +232,3 @@
         margin: 0; // Override the default margin.
     }
 }
-
-[id^='__wp-uploader'] {
-    z-index: 9999999999;
-}
-
-.media-frame {
-    z-index: 1 !important;
-}
-
-.email-settings {
-    display: flex;
-    gap: var(--givewp-spacing-10);
-    height: 100%;
-    overflow: hidden;
-    flex: 1;
-}
-
-.email-settings-template-wrapper {
-    height: 100%;
-    overflow-x: hidden;
-    overflow-y: auto;
-}
-
-.email-settings-template-container {
-    display: flex;
-    flex-direction: column;
-    gap: var(--givewp-spacing-6);
-    margin-bottom: 20px;
-
-    li {
-        display: flex;
-        gap: 1rem;
-        justify-content: space-between;
-        align-items: flex-end;
-    }
-}
-
-.email-settings-template-container-actions {
-    z-index: 11;
-    position: absolute;
-    top: 0;
-    right: 0;
-    display: flex;
-    gap: 1rem;
-    margin: var(--givewp-spacing-4) var(--givewp-spacing-6);
-}
-
-.email-settings-header {
-    font-size: .875rem;
-    line-height: 1.25rem;
-    margin: 0 0 0.5rem 0;
-}
-
-.email-settings-description {
-    color: var(--givewp-grey-500);
-    font-size: 0.75rem;
-    line-height: 1.5;
-    margin: 0 0 .5rem 0;
-}
-
-.email-settings-col-right {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    gap: var(--givewp-spacing-10);
-    padding-right: 10px;
-}
-
-.email-settings-col-left {
-    flex: 2;
-}
-
-.email-settings-template-recipient {
-    display: flex;
-    flex-direction: column;
-    gap: var(--givewp-spacing-3);
-}
-
-.email-settings-template-recipient-delete {
-    svg {
-        stroke: var(--givewp-grey-500);
-        fill: var(--givewp-grey-500);
-
-        :hover {
-            fill: var(--givewp-red-500);
-            stroke: var(--givewp-red-500);
-        }
-    }
-}
-
-.components-modal__content {
-    display: flex;
-
-    > div {
-        width: 100%;
-    }
-}
-