Merge pull request #1120 from hackforla/dev

Dev
hackforla · Jan 22, 2024 · bd156c4 · bd156c4
2 parents d0dada6 + 943ade9
commit bd156c4
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 13 deletions.
diff --git a/products/statement-generator/public/locales/en/translation.json b/products/statement-generator/public/locales/en/translation.json
@@ -47,12 +47,12 @@
     "header": "Before you begin",
     "sectionTitle1": "Are you eligible?",
     "sectionParagraph1": "Be sure you are eligible to have your record cleared. If you’re not sure, the <a target='_blank' href='https://selfhelp.courts.ca.gov/clean-your-record'>California Courts Self-Help Guide</a> or the <a target='_blank' href='https://roadmap.rootandrebound.org/understanding-cleaning-up-your-criminal-record/cleaning-up-your-criminal-record-later-in-reentry/california-expungement-of-state-convictions/chart-which-type-of-expungement-am-i-eligible-for/'>Roadmap to Reentry</a> can help you get started.",
-    "sectionTitle2": "Keep your browser open",
-    "sectionParagraph2": "This website doesn’t save anything you write, so be sure to keep your browser open until you are done. You can download your completed letter at the end.",
-    "sectionTitle3": "Using this site",
-    "sectionParagraph3": "Remember to read our <a target='_blank' href='/privacy-policy'>Privacy Policy</a> and <a target='_blank' href='/terms-of-use'>Terms of Use</a>.",
-    "sectionTitle4": "Need help?",
-    "sectionParagraph4": "If you have questions at any point, you can always check our <a target='_blank' href='/faq'>FAQ</a>."
+    "sectionTitle2": "Take your time",
+    "sectionParagraph2": "This process may take 30 minutes or longer so it's important that you give yourself enough time to complete your letter.",
+    "sectionTitle3": "Need help?",
+    "sectionParagraph3": "If you have questions, check our <a target='_blank' href='/faq'>FAQ</a>.",
+    "sectionTitle4": "Keep your browser open",
+    "sectionParagraph4": "Expunge Assist doesn't save anything you write, so be sure to keep your browser open until you are done. You can download your completed letter at the end."
   },
   "welcome_page": {
     "titleText": "Welcome",

diff --git a/products/statement-generator/src/pages-form/BeforeYouBegin.tsx b/products/statement-generator/src/pages-form/BeforeYouBegin.tsx
@@ -4,6 +4,7 @@ import { makeStyles, createStyles } from '@material-ui/core';
 
 import ContentContainer from 'components-layout/ContentContainer';
 import FlowNavigation from 'components-layout/FlowNavigation';
+import ErrorIcon from '@material-ui/icons/Error';
 
 const useStyles = makeStyles(({ palette, breakpoints }) =>
   createStyles({
@@ -48,6 +49,47 @@ const useStyles = makeStyles(({ palette, breakpoints }) =>
         fontStyle: 'italic',
       },
     },
+    alert: {
+      background: '#f0f5ff',
+      display: 'grid',
+      gridTemplateColumns: 'auto 1fr',
+      gridTemplateAreas: `
+                          'icon title'
+                          'icon paragraph'
+                        `,
+      alignItems: 'start',
+      boxShadow: '0 4px 4px rgb(0 0 0 / 25%)',
+      borderRadius: '8px',
+      padding: '16px',
+      marginTop: '24px',
+      marginBottom: '40px',
+      '& span': {
+        height: 'auto',
+        width: '24px',
+        gridArea: 'icon',
+        marginRight: '8px',
+      },
+      '& h6': {
+        margin: 0,
+        fontSize: '20px',
+        fontWeight: 400,
+        lineHeight: 1.2,
+        gridArea: 'title',
+        [breakpoints.up(breakpoints.values.md)]: {
+          fontSize: '20px',
+          fontWeight: 400,
+        },
+      },
+      '& p': {
+        marginTop: 0,
+        lineHeight: 1.175,
+        letterSpacing: '0.005em',
+        gridArea: 'paragraph',
+        [breakpoints.up(breakpoints.values.md)]: {
+          marginTop: 0,
+        },
+      },
+    },
   })
 );
 
@@ -80,13 +122,18 @@ const BeforeYouBegin = () => {
           __html: t('before_you_begin_page.sectionParagraph3'),
         }}
       />
-      <h6>{t('before_you_begin_page.sectionTitle4')}</h6>
-      <p
-        /* eslint-disable-next-line  react/no-danger */
-        dangerouslySetInnerHTML={{
-          __html: t('before_you_begin_page.sectionParagraph4'),
-        }}
-      />
+      <div className={classes.alert}>
+        <span>
+          <ErrorIcon style={{ color: '#2F6FED' }} />
+        </span>
+        <h6>{t('before_you_begin_page.sectionTitle4')}</h6>
+        <p
+          /* eslint-disable-next-line  react/no-danger */
+          dangerouslySetInnerHTML={{
+            __html: t('before_you_begin_page.sectionParagraph4'),
+          }}
+        />
+      </div>
       <FlowNavigation />
     </ContentContainer>
   );