feat(login-form): implement referral line for both builds

- shift referral line to below login header - style referral line to keep login header as main focus - implement referral line for both edu and for builds
opengovsg · May 4, 2021 · a345b17 · a345b17
1 parent 490501a
commit a345b17
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 4 deletions.
diff --git a/public/locales/edu/en/translation.json b/public/locales/edu/en/translation.json
@@ -4,6 +4,9 @@
     "shortUrlPrefix": "for.edu.sg/",
     "appTitle": "for.edu.sg",
     "officerType": "education",
+    "referralEmailDomain": "gov.sg",
+    "referralOfficerPhrase": "Public officers",
+    "referralLink": "go.gov.sg",
     "appCatchphrase": {
       "styled": "Trusted short links from <strong><i>education institutions</i></strong>",
       "noStyle": "Trusted short links from education institutions"

diff --git a/public/locales/gov/en/translation.json b/public/locales/gov/en/translation.json
@@ -4,6 +4,9 @@
     "shortUrlPrefix": "go.gov.sg/",
     "appTitle": "Go.gov.sg",
     "officerType": "public",
+    "referralEmailDomain": "edu.sg",
+    "referralOfficerPhrase": "Staff from selected schools",
+    "referralLink": "for.edu.sg",
     "appCatchphrase": {
       "styled": "Trusted short links from <strong><i>public officers</i></strong>",
       "noStyle": "Trusted short links from public officers"

diff --git a/src/client/login/index.tsx b/src/client/login/index.tsx
@@ -71,6 +71,9 @@ const useStyles = makeStyles((theme) =>
     },
     loginHeader: {
       marginTop: theme.spacing(1),
+    },
+    loginReferral: {
+      fontSize: '0.85rem',
       marginBottom: theme.spacing(4),
     },
     textInputGroup: {
@@ -234,10 +237,22 @@ const LoginPage: FunctionComponent<LoginPageProps> = ({
                       Only available for use by{' '}
                       {i18next.t('general.officerType')} officers with an email
                       from <strong>{i18next.t('general.emailDomain')}</strong>.
-                      Staff from selected schools can use their{' '}
-                      <strong>edu.sg</strong> emails at{' '}
-                      <Link href="https://for.edu.sg">for.edu.sg</Link> to
-                      shorten links instead.
+                    </Typography>
+                    <Typography
+                      className={classes.loginReferral}
+                      variant="body1"
+                    >
+                      {i18next.t('general.referralOfficerPhrase')} can use their{' '}
+                      <strong>
+                        {i18next.t('general.referralEmailDomain')}
+                      </strong>{' '}
+                      emails at{' '}
+                      <Link
+                        href={`https://${i18next.t('general.referralLink')}`}
+                      >
+                        {i18next.t('general.referralLink')}
+                      </Link>{' '}
+                      to shorten links instead.
                     </Typography>
                   </span>
                   <span className={classes.textInputGroup}>