feat(v2): login page redesign again, add AppGrid template (#3978)

opengovsg · Jun 14, 2022 · bf6a233 · bf6a233
1 parent 5cd3923
commit bf6a233
Show file tree

Hide file tree

Showing 11 changed files with 234 additions and 234 deletions.
diff --git a/frontend/src/app/AppFooter.tsx b/frontend/src/app/AppFooter.tsx
@@ -3,7 +3,7 @@ import Footer, { FooterProps } from '~components/Footer'
 
 type AppFooterProps = Pick<
   FooterProps,
-  'variant' | 'bg' | 'compactMonochromeLogos'
+  'variant' | 'containerProps' | 'compactMonochromeLogos'
 >
 export const AppFooter = (props: AppFooterProps): JSX.Element => {
   return (

diff --git a/frontend/src/components/Footer/CompactFooter.tsx b/frontend/src/components/Footer/CompactFooter.tsx
@@ -19,10 +19,10 @@ export const CompactFooter = ({
   footerLinks,
   compactMonochromeLogos,
   appLink,
-  bg,
+  containerProps,
 }: CompactedFooterProps): JSX.Element => {
   return (
-    <CompactFooter.Container bg={bg}>
+    <CompactFooter.Container {...containerProps}>
       <Stack direction="row" h="2.25rem" align="center" spacing="2rem">
         <Link
           colorScheme={compactMonochromeLogos ? 'white' : textColorScheme}
@@ -87,6 +87,7 @@ CompactFooter.Container = ({
       justify="space-between"
       flexDir="row"
       as="footer"
+      bg="primary.100"
       {...props}
     >
       {children}

diff --git a/frontend/src/components/Footer/Footer.tsx b/frontend/src/components/Footer/Footer.tsx
@@ -13,7 +13,6 @@ export const Footer = ({
   footerIconLink = DEFAULT_FOOTER_ICON_LINK,
   socialMediaLinks = DEFAULT_SOCIAL_MEDIA_LINKS,
   textColorScheme = 'secondary',
-  bg = 'primary.100',
   compactMonochromeLogos,
   ...footerProps
 }: FooterProps): JSX.Element => {
@@ -25,7 +24,6 @@ export const Footer = ({
         compactMonochromeLogos={compactMonochromeLogos}
         socialMediaLinks={socialMediaLinks}
         textColorScheme={textColorScheme}
-        bg={bg}
         footerIconLink={footerIconLink}
         {...footerProps}
       />
@@ -35,7 +33,6 @@ export const Footer = ({
     <FullFooter
       socialMediaLinks={socialMediaLinks}
       textColorScheme={textColorScheme}
-      bg={bg}
       footerIconLink={footerIconLink}
       {...footerProps}
     />

diff --git a/frontend/src/components/Footer/FullFooter.tsx b/frontend/src/components/Footer/FullFooter.tsx
@@ -14,12 +14,12 @@ export const FullFooter = ({
   footerIconLink = DEFAULT_FOOTER_ICON_LINK,
   socialMediaLinks = DEFAULT_SOCIAL_MEDIA_LINKS,
   textColorScheme = 'secondary',
-  bg = 'primary.100',
+  containerProps,
 }: FooterVariantProps): JSX.Element => {
   const currentYear = new Date().getFullYear()
 
   return (
-    <FullFooter.Container bg={bg}>
+    <FullFooter.Container {...containerProps}>
       <FullFooter.Section>
         <Stack
           flex={1}
@@ -124,6 +124,7 @@ FullFooter.Container = ({
     <Flex
       as="footer"
       flexDirection="column"
+      bg="primary.100"
       py="3rem"
       px={{ base: '1.5rem', md: '5.5rem', lg: '9.25rem' }}
       {...props}

diff --git a/frontend/src/components/Footer/common/types.ts b/frontend/src/components/Footer/common/types.ts
@@ -13,6 +13,10 @@ export type FooterLinkWithIcon = FooterLink & {
   Icon: (props: any) => JSX.Element
 }
 
+export interface FooterContainerProps extends FlexProps {
+  children: React.ReactNode
+}
+
 export interface FooterVariantProps {
   /** Application name to display in footer. */
   appName: string
@@ -31,21 +35,13 @@ export interface FooterVariantProps {
    * Defaults to `secondary` if not provided.
    */
   textColorScheme: ThemeColorScheme
-  /**
-   * Background color of footer.
-   * Defaults to `primary.100` if not provided.
-   */
-  bg: string
-}
-
-export interface FooterContainerProps extends FlexProps {
-  children: React.ReactNode
+  containerProps?: Partial<FooterContainerProps>
 }
 
 export interface FooterProps
   extends SetOptional<
     FooterVariantProps,
-    'socialMediaLinks' | 'textColorScheme' | 'footerIconLink' | 'bg'
+    'socialMediaLinks' | 'textColorScheme' | 'footerIconLink'
   > {
   /**
    * The footer variant to display. Defaults to `full` if not provided.

diff --git a/frontend/src/features/login/LoginPage.tsx b/frontend/src/features/login/LoginPage.tsx
@@ -1,7 +1,7 @@
 import { FC, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Link as ReactLink } from 'react-router-dom'
-import { Box, chakra, Flex, Grid, GridItem, Text } from '@chakra-ui/react'
+import { Box, chakra, Flex, GridItem, GridProps, Text } from '@chakra-ui/react'
 
 import { AppFooter } from '~/app/AppFooter'
 
@@ -11,6 +11,7 @@ import { LANDING_ROUTE } from '~constants/routes'
 import { useLocalStorage } from '~hooks/useLocalStorage'
 import { sendLoginOtp, verifyLoginOtp } from '~services/AuthService'
 import Link from '~components/Link'
+import { AppGrid } from '~templates/AppGrid'
 
 import {
   trackAdminLogin,
@@ -33,52 +34,43 @@ const BrandLogo = chakra(BrandLogoSvg, {
 
 // Component for the split blue/white background.
 const BackgroundBox: FC = ({ children }) => (
-  <Box
-    flexGrow={1}
+  <Flex
+    flex={1}
+    overflow={{ lg: 'auto' }}
+    flexDir="column"
+    h="inherit"
     bgGradient={{
       md: 'linear(to-b, primary.500 20.5rem, white 0)',
-      lg: 'linear(to-r, primary.500 50%, white 0)',
+      lg: 'linear(to-r, primary.500 calc(41.6667% - 4px), white 0)',
     }}
     children={children}
   />
 )
 
 // Component that controls the various grid areas according to responsive breakpoints.
-const BaseGridLayout: FC = ({ children }) => (
-  <Grid
-    minH={{ base: 'initial', lg: '100%' }}
-    maxW="90rem"
-    margin="auto"
-    templateAreas={{
-      base: `'login' 'footer'`,
-      md: `'sidebar' 'login' 'footer'`,
-      lg: `'sidebar login' 'footer footer'`,
-    }}
-    templateRows={{ lg: '1fr auto' }}
-    templateColumns={{ lg: 'repeat(2, 1fr)' }}
-    children={children}
-  />
+const BaseGridLayout = (props: GridProps) => (
+  <AppGrid templateRows={{ md: 'auto 1fr auto', lg: '1fr auto' }} {...props} />
 )
 
 // Grid area styling for the login form.
 const LoginGridArea: FC = ({ children }) => (
   <GridItem
-    h={{ base: '100vh', md: '100%' }}
-    gridArea="login"
-    px={{ base: '1.5rem', md: '5.5rem', lg: '10%' }}
+    gridColumn={{ base: '1 / 5', md: '2 / 12', lg: '7 / 12' }}
     py="4rem"
     d="flex"
     alignItems={{ base: 'initial', lg: 'center' }}
+    justifyContent="center"
     children={children}
   />
 )
 
 // Grid area styling for the footer.
 const FooterGridArea: FC = ({ children }) => (
   <GridItem
-    gridArea="footer"
-    px={{ base: 0, lg: '5rem' }}
-    pb={{ base: 0, lg: '4.5rem' }}
+    alignSelf="end"
+    gridColumn={{ base: '1 / 5', md: '2 / 12' }}
+    pb={{ base: 0, lg: '2.5rem' }}
+    bg={{ base: 'primary.100', lg: 'transparent' }}
     children={children}
   />
 )
@@ -87,13 +79,14 @@ const FooterGridArea: FC = ({ children }) => (
 const NonMobileSidebarGridArea: FC = ({ children }) => (
   <GridItem
     d={{ base: 'none', md: 'flex' }}
-    gridArea="sidebar"
-    pl={{ base: '1.5rem', lg: '5rem' }}
-    pr={{ base: '1.5rem', lg: '2rem' }}
-    pt={{ base: '1.5rem', md: '4rem', lg: '6rem' }}
-    pb={{ lg: '3.25rem' }}
+    gridColumn={{ md: '1 / 13', lg: '2 / 6' }}
+    // colSpan={{ md: 12, lg: 5 }}
+    // pl={{ base: '1.5rem', lg: '8%' }}
+    h={{ md: '20.5rem', lg: 'auto' }}
+    pt={{ base: '1.5rem', md: '2.5rem', lg: '3rem' }}
+    pb={{ lg: '3rem' }}
     flexDir="column"
-    alignItems={{ base: 'center', lg: 'flex-start' }}
+    alignItems={{ base: 'center', lg: 'flex-end' }}
     justifyContent="center"
     children={children}
   />
@@ -138,60 +131,59 @@ export const LoginPage = (): JSX.Element => {
   }
 
   return (
-    <Flex flexDir="column" h="100%">
-      <BackgroundBox>
-        <BaseGridLayout>
-          <NonMobileSidebarGridArea>
-            <LoginImageSvgr maxW="100%" aria-hidden />
-          </NonMobileSidebarGridArea>
-          <LoginGridArea>
-            <Box
-              maxW={{ base: '100%', lg: '28rem' }}
-              w="100%"
-              minH={{ base: 'auto', lg: '17.25rem' }}
-            >
-              <Flex mb={{ base: '2.5rem', lg: 0 }} flexDir="column">
-                <Text
-                  display={{ base: 'none', lg: 'initial' }}
-                  textStyle="display-2"
-                  color="secondary.500"
-                  mb="2.5rem"
+    <BackgroundBox>
+      <BaseGridLayout flex={1}>
+        <NonMobileSidebarGridArea>
+          <LoginImageSvgr maxW="100%" aria-hidden />
+        </NonMobileSidebarGridArea>
+        <LoginGridArea>
+          <Box minH={{ base: 'auto', lg: '17.25rem' }} w="100%">
+            <Flex mb={{ base: '2.5rem', lg: 0 }} flexDir="column">
+              <Text
+                display={{ base: 'none', lg: 'initial' }}
+                textStyle="display-2"
+                color="secondary.500"
+                mb="2.5rem"
+              >
+                {t('features.login.LoginPage.slogan')}
+              </Text>
+              <Box display={{ base: 'initial', lg: 'none' }}>
+                <Link
+                  as={ReactLink}
+                  to={LANDING_ROUTE}
+                  mb={{ base: '0.75rem', lg: '1.5rem' }}
                 >
+                  <BrandLogo title="FormSG logo" />
+                </Link>
+                <Text textStyle="h4" color="secondary.500">
                   {t('features.login.LoginPage.slogan')}
                 </Text>
-                <Box display={{ base: 'initial', lg: 'none' }}>
-                  <Link
-                    as={ReactLink}
-                    to={LANDING_ROUTE}
-                    mb={{ base: '0.75rem', lg: '1.5rem' }}
-                  >
-                    <BrandLogo title="FormSG logo" />
-                  </Link>
-                  <Text textStyle="h4" color="secondary.500">
-                    {t('features.login.LoginPage.slogan')}
-                  </Text>
-                </Box>
-              </Flex>
-              {!email ? (
-                <LoginForm onSubmit={handleSendOtp} />
-              ) : (
-                <OtpForm
-                  email={email}
-                  onSubmit={handleVerifyOtp}
-                  onResendOtp={handleResendOtp}
-                />
-              )}
-            </Box>
-          </LoginGridArea>
-          <FooterGridArea>
-            <AppFooter
-              compactMonochromeLogos
-              variant="compact"
-              bg="transparent"
-            />
-          </FooterGridArea>
-        </BaseGridLayout>
-      </BackgroundBox>
-    </Flex>
+              </Box>
+            </Flex>
+            {!email ? (
+              <LoginForm onSubmit={handleSendOtp} />
+            ) : (
+              <OtpForm
+                email={email}
+                onSubmit={handleVerifyOtp}
+                onResendOtp={handleResendOtp}
+              />
+            )}
+          </Box>
+        </LoginGridArea>
+      </BaseGridLayout>
+      <BaseGridLayout bg={{ base: 'primary.100', lg: 'transparent' }}>
+        <FooterGridArea>
+          <AppFooter
+            compactMonochromeLogos
+            variant="compact"
+            containerProps={{
+              px: 0,
+              bg: 'transparent',
+            }}
+          />
+        </FooterGridArea>
+      </BaseGridLayout>
+    </BackgroundBox>
   )
 }