Adjusted the line height of displayed hrefs

newjersey · Nov 14, 2023 · a9b4c4a · a9b4c4a
1 parent 1ac7aa9
commit a9b4c4a
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 28 deletions.
diff --git a/src/templates/EmailTemplateSubComponents/Directive.tsx b/src/templates/EmailTemplateSubComponents/Directive.tsx
@@ -154,20 +154,9 @@ export const Directive: FC<EmailSubComponentProps> = ({ emailSubComponent }) =>
             </Row>
 
             {/* Same Link As Button */}
-            <Row elements={['cell']}>
-              <div
-                className="link-div"
-                style={{
-                  lineHeight: '150%',
-                  wordBreak: 'break-all',
-                  paddingBottom: '16px',
-                }}
-              >
-                <span style={styles.linkText} className="displayed-href">
-                  {value.linkHref ||
-                    'https://link.embedded-into-the-button-above.should-be-shown-here-in-order-to-give-an-alternative-way-to-access-a-link'}
-                </span>
-              </div>
+            <Row elements={[{ part: 'cell', style: styles.linkText, className: 'displayed-href' }]}>
+              {value.linkHref ||
+                'https://link.embedded-into-the-button-above.should-be-shown-here-in-order-to-give-an-alternative-way-to-access-a-link'}
             </Row>
           </Row>
 
@@ -330,20 +319,13 @@ export const Directive: FC<EmailSubComponentProps> = ({ emailSubComponent }) =>
                         </Row>
 
                         {/* Same Link As Button */}
-                        <Row elements={['cell']}>
-                          <div
-                            className="link-div"
-                            style={{
-                              lineHeight: '150%',
-                              wordBreak: 'break-all',
-                              paddingBottom: '16px',
-                            }}
-                          >
-                            <span className="displayed-href" style={styles.linkText}>
-                              {value.linkHref ||
-                                'https://link.embedded-into-the-button-above.should-be-shown-here-in-order-to-give-an-alternative-way-to-access-a-link'}
-                            </span>
-                          </div>
+                        <Row
+                          elements={[
+                            { part: 'cell', style: styles.linkText, className: 'displayed-href' },
+                          ]}
+                        >
+                          {value.linkHref ||
+                            'https://link.embedded-into-the-button-above.should-be-shown-here-in-order-to-give-an-alternative-way-to-access-a-link'}
                         </Row>
                       </Row>
                     </Cell>
@@ -588,6 +570,8 @@ const styles = {
     ...Text.link.small,
     color: Colors.alert.neutral.dark,
     textAlign: 'left',
+    wordBreak: 'break-all',
+    paddingBottom: Spacing.size.medium,
   } as CSSProperties,
   step3AdditionalInfo: {
     paddingLeft: '46px',

diff --git a/src/templates/styles.tsx b/src/templates/styles.tsx
@@ -267,14 +267,17 @@ export const Text = {
     small: {
       regular: defaultTextStyle({
         fontSize: 10,
+        lineHeight: 1.25,
         fontWeight: FontWeight.regular,
       }),
       semibold: defaultTextStyle({
         fontSize: 10,
+        lineHeight: 1.25,
         fontWeight: FontWeight.semibold,
       }),
       bold: defaultTextStyle({
         fontSize: 10,
+        lineHeight: 1.25,
         fontWeight: FontWeight.bold,
       }),
     },
@@ -284,16 +287,19 @@ export const Text = {
       regular: defaultTextStyle({
         fontSize: 12,
         fontWeight: FontWeight.regular,
+        lineHeight: 1.25,
         textDecoration: 'underline',
       }),
       bold: defaultTextStyle({
         fontSize: 12,
         fontWeight: FontWeight.bold,
+        lineHeight: 1.25,
         textDecoration: 'underline',
       }),
     },
     small: defaultTextStyle({
       fontSize: 10,
+      lineHeight: 1.25,
       textDecoration: 'underline',
     }),
   },