fix(TotalLayout): Title padding

leemonade · Dec 21, 2023 · c0fb0d9 · c0fb0d9
1 parent 57b8098
commit c0fb0d9
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 9 deletions.
diff --git a/...es/components/src/layout/TotalLayout/TotalLayoutStepContainer/TotalLayoutStepContainer.js b/...es/components/src/layout/TotalLayout/TotalLayoutStepContainer/TotalLayoutStepContainer.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Text } from '../../../typography';
+import { Text, Title } from '../../../typography';
 import { Stack } from '../../Stack';
 import { Box } from '../../Box';
 import {
@@ -17,9 +17,9 @@ const TotalLayoutStepContainer = ({ stepName, children, Footer, clean }) => {
   return (
     <Stack className={classes.stepContainer} direction="column">
       {stepName && (
-        <Text className={classes.stepName} as="h1" color="primary">
+        <Title className={classes.stepName} order={2} noFlex>
           {stepName}
-        </Text>
+        </Title>
       )}
       <Stack className={classes.formContainer} fullWidth direction="column">
         {children}

diff --git a/...onents/src/layout/TotalLayout/TotalLayoutStepContainer/TotalLayoutStepContainer.styles.js b/...onents/src/layout/TotalLayout/TotalLayoutStepContainer/TotalLayoutStepContainer.styles.js
@@ -3,7 +3,7 @@ import { createStyles } from '@mantine/styles';
 const TotalLayoutStepContainerStyles = createStyles((theme, { hasFooter, clean }) => ({
   root: {},
   stepContainer: {
-    padding: '24px 0 0 0 ',
+    padding: '30px 0 0 0 ',
     width: 928,
     height: '100%',
   },
@@ -13,10 +13,7 @@ const TotalLayoutStepContainerStyles = createStyles((theme, { hasFooter, clean }
     paddingBottom: hasFooter ? 70 : 24,
   },
   stepName: {
-    fontSize: 23,
-    fontWeight: 500,
-    lineHeight: 40,
-    marginBottom: 8,
+    marginBottom: 12,
   },
 }));
 

diff --git a/packages/components/src/typography/Title/Title.styles.js b/packages/components/src/typography/Title/Title.styles.js
@@ -4,7 +4,7 @@ import { getFontExpressive } from '../../theme.mixins';
 export const TitleStyles = createStyles((theme, { order, transform, color, highlighted }) => {
   const globalContent = theme.other?.global?.content;
   const fontStyles = [];
-
+  
   if (globalContent?.typo) {
     fontStyles.push(
       globalContent.typo.heading.xlg,