admin components, onboarding, auth page, profile page

packages/core/admin/admin/src/components/AutoReloadOverlayBlockerProvider/Blocker.js

@@ -10,7 +10,6 @@ import { Link } from '@strapi/design-system/Link';
 import { Box } from '@strapi/design-system/Box';
 import { Stack } from '@strapi/design-system/Stack';
 import { Flex } from '@strapi/design-system/Flex';
-import { H1 } from '@strapi/design-system/Text';
 import { Typography } from '@strapi/design-system/Typography';
 import { Content, IconBox, Overlay } from './Overlay';
 
@@ -48,7 +47,9 @@ const Blocker = ({ displayedIcon, description, title, isOpen }) => {
         <Content size={6}>
           <Stack size={2}>
             <Flex justifyContent="center">
-              <H1>{formatMessage(title)}</H1>
+              <Typography as="h1" variant="alpha">
+                {formatMessage(title)}
+              </Typography>
             </Flex>
             <Flex justifyContent="center">
               <Typography as="h2" textColor="neutral600" fontSize={4} fontWeight="regular">

packages/core/admin/admin/src/components/LeftMenu/index.js

@@ -15,7 +15,7 @@ import {
 } from '@strapi/design-system/MainNav';
 import { FocusTrap } from '@strapi/design-system/FocusTrap';
 import { Box } from '@strapi/design-system/Box';
-import { Text } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { Stack } from '@strapi/design-system/Stack';
 import Write from '@strapi/icons/Write';
 import Exit from '@strapi/icons/Exit';
@@ -144,20 +144,20 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
           <FocusTrap onEscape={handleToggleUserLinks}>
             <Stack size={0}>
               <LinkUser onClick={handleToggleUserLinks} to="/me">
-                <Text>
+                <Typography>
                   {formatMessage({
                     id: 'app.components.LeftMenu.profile',
                     defaultMessage: 'Profile',
                   })}
-                </Text>
+                </Typography>
               </LinkUser>
               <LinkUser onClick={handleLogout} logout="logout" to="/auth/login">
-                <Text textColor="danger600">
+                <Typography textColor="danger600">
                   {formatMessage({
                     id: 'app.components.LeftMenu.logout',
                     defaultMessage: 'Logout',
                   })}
-                </Text>
+                </Typography>
                 <Exit />
               </LinkUser>
             </Stack>

packages/core/admin/admin/src/components/UpgradePlanModal /index.js

@@ -8,7 +8,7 @@ import { IconButton } from '@strapi/design-system/IconButton';
 import { LinkButton } from '@strapi/design-system/LinkButton';
 import { Box } from '@strapi/design-system/Box';
 import { Flex } from '@strapi/design-system/Flex';
-import { Text, H1 } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { Stack } from '@strapi/design-system/Stack';
 import ExternalLink from '@strapi/icons/ExternalLink';
 import Cross from '@strapi/icons/Cross';
@@ -48,10 +48,6 @@ const UpgradeContainer = styled(Flex)`
   }
 `;
 
-const TextBold = styled(Text)`
-  font-weight: 700;
-`;
-
 const StackFlexStart = styled(Stack)`
   align-items: flex-start;
   max-width: ${400 / 16}rem;
@@ -82,26 +78,26 @@ const UpgradePlanModal = ({ onClose, isOpen }) => {
               <IconButton onClick={onClose} aria-label="Close" icon={<Cross />} />
             </CloseButtonContainer>
             <StackFlexStart size={6}>
-              <TextBold textColor="primary600">
+              <Typography fontWeight="bold" textColor="primary600">
                 {formatMessage({
                   id: 'app.components.UpgradePlanModal.text-ce',
                   defaultMessage: 'COMMUNITY EDITION',
                 })}
-              </TextBold>
+              </Typography>
               <Stack size={2}>
-                <H1 as="h2" id="upgrade-plan">
+                <Typography variant="alpha" as="h2" id="upgrade-plan">
                   {formatMessage({
                     id: 'app.components.UpgradePlanModal.limit-reached',
                     defaultMessage: 'You have reached the limit',
                   })}
-                </H1>
-                <Text>
+                </Typography>
+                <Typography>
                   {formatMessage({
                     id: 'app.components.UpgradePlanModal.text-power',
                     defaultMessage:
                       'Unlock the full power of Strapi by upgrading your plan to the Enterprise Edition',
                   })}
-                </Text>
+                </Typography>
               </Stack>
               <LinkButton href="https://strapi.io/pricing-self-hosted" endIcon={<ExternalLink />}>
                 {formatMessage({

packages/core/admin/admin/src/pages/Admin/Onboarding/index.js

@@ -4,7 +4,7 @@ import { useIntl } from 'react-intl';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faQuestion, faTimes } from '@fortawesome/free-solid-svg-icons';
 import { Box } from '@strapi/design-system/Box';
-import { Text } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { FocusTrap } from '@strapi/design-system/FocusTrap';
 import { useConfigurations } from '../../../hooks';
 
@@ -52,12 +52,12 @@ const StyledLink = styled.a`
       color: ${({ theme }) => theme.colors.neutral700};
     }
 
-    ${[Text]} {
+    ${[Typography]} {
       color: ${({ theme }) => theme.colors.neutral700};
     }
   }
 
-  ${[Text]} {
+  ${[Typography]} {
     color: ${({ theme }) => theme.colors.neutral600};
   }
 `;
@@ -124,7 +124,7 @@ const Onboarding = () => {
                 href={link.destination}
               >
                 <FontAwesomeIcon icon={link.icon} />
-                <Text>{link.label}</Text>
+                <Typography>{link.label}</Typography>
               </StyledLink>
             ))}
           </LinksWrapper>

packages/core/admin/admin/src/pages/AuthPage/components/ForgotPassword/index.js

@@ -9,7 +9,7 @@ import { Flex } from '@strapi/design-system/Flex';
 import { Link } from '@strapi/design-system/Link';
 import { Button } from '@strapi/design-system/Button';
 import { TextInput } from '@strapi/design-system/TextInput';
-import { H1, Text } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { Formik } from 'formik';
 import UnauthenticatedLayout, {
   Column,
@@ -38,20 +38,25 @@ const ForgotPassword = ({ onSubmit, schema }) => {
                 <Column>
                   <Logo />
                   <Box paddingTop={6} paddingBottom={7}>
-                    <H1>
+                    <Typography as="h1" variant="alpha">
                       {formatMessage({
                         id: 'Auth.form.button.password-recovery',
                         defaultMessage: 'Password Recovery',
                       })}
-                    </H1>
+                    </Typography>
                   </Box>
                   {errors.errorMessage && (
-                    <Text id="global-form-error" role="alert" tabIndex={-1} textColor="danger600">
+                    <Typography
+                      id="global-form-error"
+                      role="alert"
+                      tabIndex={-1}
+                      textColor="danger600"
+                    >
                       {formatMessage({
                         id: errors.errorMessage,
                         defaultMessage: 'An error occurred',
                       })}
-                    </Text>
+                    </Typography>
                   )}
                 </Column>
 

packages/core/admin/admin/src/pages/AuthPage/components/ForgotPasswordSuccess/index.js

@@ -4,7 +4,7 @@ import { Box } from '@strapi/design-system/Box';
 import { Main } from '@strapi/design-system/Main';
 import { Flex } from '@strapi/design-system/Flex';
 import { Link } from '@strapi/design-system/Link';
-import { H1, Text } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import UnauthenticatedLayout, {
   Column,
   LayoutContent,
@@ -21,27 +21,27 @@ const ForgotPasswordSuccess = () => {
           <Column>
             <Logo />
             <Box paddingTop={6} paddingBottom={7}>
-              <H1>
+              <Typography as="h1" variant="alpha">
                 {formatMessage({
                   id: 'app.containers.AuthPage.ForgotPasswordSuccess.title',
                   defaultMessage: 'Email sent',
                 })}
-              </H1>
+              </Typography>
             </Box>
-            <Text>
+            <Typography>
               {formatMessage({
                 id: 'app.containers.AuthPage.ForgotPasswordSuccess.text.email',
                 defaultMessage: 'It can take a few minutes to receive your password recovery link.',
               })}
-            </Text>
+            </Typography>
             <Box paddingTop={4}>
-              <Text>
+              <Typography>
                 {formatMessage({
                   id: 'app.containers.AuthPage.ForgotPasswordSuccess.text.contact-admin',
                   defaultMessage:
                     'If you do not receive this link, please contact your administrator.',
                 })}
-              </Text>
+              </Typography>
             </Box>
           </Column>
         </LayoutContent>

packages/core/admin/admin/src/pages/AuthPage/components/Login/BaseLogin.js

@@ -9,7 +9,7 @@ import { Link } from '@strapi/design-system/Link';
 import { Button } from '@strapi/design-system/Button';
 import { TextInput } from '@strapi/design-system/TextInput';
 import { Checkbox } from '@strapi/design-system/Checkbox';
-import { H1, Text, Subtitle } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { Form } from '@strapi/helper-plugin';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
@@ -48,25 +48,30 @@ const Login = ({ onSubmit, schema, children }) => {
               <Column>
                 <Logo />
                 <Box paddingTop={6} paddingBottom={1}>
-                  <H1>
+                  <Typography as="h1">
                     {formatMessage({
                       id: 'Auth.form.welcome.title',
                       defaultMessage: 'Welcome!',
                     })}
-                  </H1>
+                  </Typography>
                 </Box>
                 <Box paddingBottom={7}>
-                  <Subtitle textColor="neutral600">
+                  <Typography variant="epsilon" textColor="neutral600">
                     {formatMessage({
                       id: 'Auth.form.welcome.subtitle',
                       defaultMessage: 'Log in to your Strapi account',
                     })}
-                  </Subtitle>
+                  </Typography>
                 </Box>
                 {errors.errorMessage && (
-                  <Text id="global-form-error" role="alert" tabIndex={-1} textColor="danger600">
+                  <Typography
+                    id="global-form-error"
+                    role="alert"
+                    tabIndex={-1}
+                    textColor="danger600"
+                  >
                     {errors.errorMessage}
-                  </Text>
+                  </Typography>
                 )}
               </Column>
 

packages/core/admin/admin/src/pages/AuthPage/components/Oops/index.js

@@ -5,7 +5,7 @@ import { Box } from '@strapi/design-system/Box';
 import { Main } from '@strapi/design-system/Main';
 import { Flex } from '@strapi/design-system/Flex';
 import { Link } from '@strapi/design-system/Link';
-import { H1, Text } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import UnauthenticatedLayout, {
   Column,
   LayoutContent,
@@ -30,18 +30,18 @@ const Oops = () => {
           <Column>
             <Logo />
             <Box paddingTop={6} paddingBottom={7}>
-              <H1>
+              <Typography as="h1" variant="alpha">
                 {formatMessage({ id: 'Auth.components.Oops.title', defaultMessage: 'Oops...' })}
-              </H1>
+              </Typography>
             </Box>
-            <Text>{message}</Text>
+            <Typography>{message}</Typography>
             <Box paddingTop={4}>
-              <Text>
+              <Typography>
                 {formatMessage({
                   id: 'Auth.components.Oops.text.admin',
                   defaultMessage: 'If this is a mistake, please contact your administrator.',
                 })}
-              </Text>
+              </Typography>
             </Box>
           </Column>
         </LayoutContent>

packages/core/admin/admin/src/pages/AuthPage/components/Register/index.js

@@ -12,7 +12,7 @@ import { Button } from '@strapi/design-system/Button';
 import { TextInput } from '@strapi/design-system/TextInput';
 import { Checkbox } from '@strapi/design-system/Checkbox';
 import { Grid, GridItem } from '@strapi/design-system/Grid';
-import { H1, Subtitle } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import EyeStriked from '@strapi/icons/EyeStriked';
 import Eye from '@strapi/icons/Eye';
 import { Form, useQuery, useNotification } from '@strapi/helper-plugin';
@@ -113,21 +113,21 @@ const Register = ({ fieldsToDisable, noSignin, onSubmit, schema }) => {
                 <Column>
                   <Logo />
                   <Box paddingTop={6} paddingBottom={1}>
-                    <H1>
+                    <Typography as="h1" variant="alpha">
                       {formatMessage({
                         id: 'Auth.form.welcome.title',
                         defaultMessage: 'Welcome!',
                       })}
-                    </H1>
+                    </Typography>
                   </Box>
                   <CenteredBox paddingBottom={7}>
-                    <Subtitle textColor="neutral600">
+                    <Typography variant="epsilon" textColor="neutral600">
                       {formatMessage({
                         id: 'Auth.form.register.subtitle',
                         defaultMessage:
                           'Your credentials are only used to authenticate yourself on the admin panel. All saved data will be stored in your own database.',
                       })}
-                    </Subtitle>
+                    </Typography>
                   </CenteredBox>
                 </Column>
                 <Stack size={7}>

packages/core/admin/admin/src/pages/AuthPage/components/ResetPassword/index.js

@@ -9,7 +9,7 @@ import { Flex } from '@strapi/design-system/Flex';
 import { Link } from '@strapi/design-system/Link';
 import { Button } from '@strapi/design-system/Button';
 import { TextInput } from '@strapi/design-system/TextInput';
-import { H1, Text } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import EyeStriked from '@strapi/icons/EyeStriked';
 import Eye from '@strapi/icons/Eye';
 import styled from 'styled-components';
@@ -51,20 +51,25 @@ const ForgotPassword = ({ onSubmit, schema }) => {
                 <Column>
                   <Logo />
                   <Box paddingTop={6} paddingBottom={7}>
-                    <H1>
+                    <Typography as="h1" variant="alpha">
                       {formatMessage({
                         id: 'Auth.reset-password.title',
                         defaultMessage: 'Reset password',
                       })}
-                    </H1>
+                    </Typography>
                   </Box>
                   {errors.errorMessage && (
-                    <Text id="global-form-error" role="alert" tabIndex={-1} textColor="danger600">
+                    <Typography
+                      id="global-form-error"
+                      role="alert"
+                      tabIndex={-1}
+                      textColor="danger600"
+                    >
                       {formatMessage({
                         id: errors.errorMessage,
                         defaultMessage: 'An error occurred',
                       })}
-                    </Text>
+                    </Typography>
                   )}
                 </Column>
 

packages/core/admin/admin/src/pages/ProfilePage/index.js

@@ -17,7 +17,7 @@ import pick from 'lodash/pick';
 import omit from 'lodash/omit';
 import { Helmet } from 'react-helmet';
 import { Main } from '@strapi/design-system/Main';
-import { H3 } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { Box } from '@strapi/design-system/Box';
 import { ContentLayout, HeaderLayout } from '@strapi/design-system/Layout';
 import { Button } from '@strapi/design-system/Button';
@@ -192,12 +192,12 @@ const ProfilePage = () => {
                       paddingRight={7}
                     >
                       <Stack size={4}>
-                        <H3 as="h2">
+                        <Typography variant="delta" as="h2">
                           {formatMessage({
                             id: 'Settings.profile.form.section.profile.title',
                             defaultMessage: 'Profile',
                           })}
-                        </H3>
+                        </Typography>
                         <Grid gap={5}>
                           <GridItem s={12} col={6}>
                             <GenericInput
@@ -261,12 +261,12 @@ const ProfilePage = () => {
                       paddingRight={7}
                     >
                       <Stack size={4}>
-                        <H3 as="h2">
+                        <Typography variant="delta" as="h2">
                           {formatMessage({
                             id: 'Settings.profile.form.section.password.title',
                             defaultMessage: 'Change password',
                           })}
-                        </H3>
+                        </Typography>
 
                         <Grid gap={5}>
                           <GridItem s={12} col={6}>
@@ -408,12 +408,12 @@ const ProfilePage = () => {
                       paddingRight={7}
                     >
                       <Stack size={4}>
-                        <H3 as="h2">
+                        <Typography variant="delta" as="h2">
                           {formatMessage({
                             id: 'Settings.profile.form.section.experience.title',
                             defaultMessage: 'Experience',
                           })}
-                        </H3>
+                        </Typography>
                         <Grid gap={5}>
                           <GridItem s={12} col={6}>
                             <Select