feat: small tweaks to login styles (HL-940) (#2340)

* feat: stylize login * fix: increase footer content margin
City-of-Helsinki · Oct 16, 2023 · 4fd815e · 4fd815e
1 parent 1e0f251
commit 4fd815e
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 10 deletions.
diff --git a/frontend/benefit/applicant/src/components/footer/Footer.sc.ts b/frontend/benefit/applicant/src/components/footer/Footer.sc.ts
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
 
 export const $FooterWrapper = styled.div`
-  margin-top: ${(props) => props.theme.spacing.m};
+  margin-top: ${(props) => props.theme.spacing.xl};
 `;
diff --git a/frontend/benefit/applicant/src/components/pages/Login.sc.ts b/frontend/benefit/applicant/src/components/pages/Login.sc.ts
@@ -0,0 +1,24 @@
+import { $Grid } from 'shared/components/forms/section/FormSection.sc';
+import { respondAbove } from 'shared/styles/mediaQueries';
+import styled from 'styled-components';
+
+export const $LoginGrid = styled($Grid)`
+  max-width: 486px;
+  h1 {
+    font-size: var(--fontsize-heading-l);
+
+    ${respondAbove('xs')`
+    font-weight: 400;
+
+      font-size: var(--fontsize-heading-xl-mobile);
+    `}
+
+    ${respondAbove('sm')`
+      font-size: var(--fontsize-heading-xl);
+    `}
+  }
+
+  p {
+    font-size: 1.15em;
+  }
+`;
diff --git a/frontend/benefit/applicant/src/pages/login.tsx b/frontend/benefit/applicant/src/pages/login.tsx
@@ -1,5 +1,4 @@
 import {
-  $Heading,
   $Hr,
   $Paragraph,
   $Subheading,
@@ -18,13 +17,15 @@ import { useTranslation } from 'next-i18next';
 import React, { useEffect } from 'react';
 import { useQueryClient } from 'react-query';
 import Container from 'shared/components/container/Container';
+import Heading from 'shared/components/forms/heading/Heading';
 import {
   $Grid,
   $GridCell,
 } from 'shared/components/forms/section/FormSection.sc';
 import getServerSideTranslations from 'shared/i18n/get-server-side-translations';
 import { removeLocalStorageItem } from 'shared/utils/localstorage.utils';
 
+import { $LoginGrid } from '../components/pages/Login.sc';
 import { LOCAL_STORAGE_KEYS } from '../constants';
 
 type NotificationProps =
@@ -67,8 +68,8 @@ const Login: NextPage = () => {
 
   return (
     <Container>
-      <$Grid>
-        <$GridCell $colSpan={6}>
+      <$LoginGrid>
+        <$GridCell $colSpan={12}>
           {notificationProps && (
             <Notification
               type={notificationProps.type}
@@ -78,13 +79,13 @@ const Login: NextPage = () => {
               {notificationProps.content}
             </Notification>
           )}
-          <$Heading>{t('common:login.heading')}</$Heading>
+          <Heading as="h1" size="xl" header={t('common:login.heading')} />
           <$Paragraph>{t('common:login.infoText1')}</$Paragraph>
           <$Hr />
           <$Subheading>{t('common:login.subheading1')}</$Subheading>
           <$Paragraph>{t('common:login.infoText2')}</$Paragraph>
-          <$Grid>
-            <$GridCell $colSpan={8}>
+          <$Grid columns={16}>
+            <$GridCell $colSpan={14}>
               <Button
                 theme="coat"
                 fullWidth
@@ -99,8 +100,8 @@ const Login: NextPage = () => {
           <$Hr />
           <$Subheading>{t('common:login.subheading2')}</$Subheading>
           <$Paragraph>{t('common:login.infoText3')}</$Paragraph>
-          <$Grid>
-            <$GridCell $colSpan={8}>
+          <$Grid columns={16}>
+            <$GridCell $colSpan={14}>
               <Button
                 theme="coat"
                 variant="secondary"
@@ -124,7 +125,7 @@ const Login: NextPage = () => {
             {t('common:login.infoContent')}
           </Notification>
         </$GridCell>
-      </$Grid>
+      </$LoginGrid>
     </Container>
   );
 };