Adjusted FAQ, Logo, and AppFooter components to align without negative

margin values at all breakpoints
hackforla · Mar 21, 2024 · 5a59ba7 · 5a59ba7
1 parent ae7a9eb
commit 5a59ba7
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 11 deletions.
diff --git a/products/statement-generator/src/components-layout/AppFooter.tsx b/products/statement-generator/src/components-layout/AppFooter.tsx
@@ -21,7 +21,7 @@ const useStyles = makeStyles(({ breakpoints, palette, spacing }) =>
       color: palette.common.black,
       display: 'flex',
       alignItems: 'center',
-      padding: spacing(2, 3),
+      padding: spacing(1, 2),
 
       [breakpoints.down(breakpoints.values.md)]: {
         flexDirection: 'column',
@@ -38,12 +38,6 @@ const useStyles = makeStyles(({ breakpoints, palette, spacing }) =>
     leftContainer: {
       display: 'flex',
       flexDirection: 'column',
-      padding: spacing(1),
-      marginLeft: '-16px',
-
-      [breakpoints.down(breakpoints.values.md)]: {
-        marginLeft: '-8px',
-      },
     },
     rightContainer: {
       display: 'flex',
@@ -53,7 +47,8 @@ const useStyles = makeStyles(({ breakpoints, palette, spacing }) =>
 
       [breakpoints.down(breakpoints.values.md)]: {
         flexDirection: 'column',
-        marginLeft: '-8px',
+        justifyContent: 'start',
+        marginTop: spacing(1),
       },
     },
     linkBtn: {
@@ -75,23 +70,40 @@ const useStyles = makeStyles(({ breakpoints, palette, spacing }) =>
         marginLeft: 4,
       },
 
+      [breakpoints.down(breakpoints.values.md)]: {
+        marginTop: 16,
+        padding: spacing(1, 0),
+      },
+
       [breakpoints.down(breakpoints.values.sm)]: {
         marginTop: 16,
       },
     },
     copyrightContainer: {
       display: 'flex',
 
+      [breakpoints.down(breakpoints.values.md)]: {
+        marginTop: 16,
+      },
+
       [breakpoints.down(breakpoints.values.sm)]: {
         marginTop: 16,
       },
     },
     hackforlaIcon: {
       height: 25,
       margin: 'auto 10px',
+
+      [breakpoints.down(breakpoints.values.md)]: {
+        margin: 'auto 0',
+      },
     },
     reg: {
       margin: 'auto 0',
+
+      [breakpoints.down(breakpoints.values.md)]: {
+        marginLeft: spacing(1),
+      },
     },
     line: {
       margin: 'auto 0',

diff --git a/products/statement-generator/src/components/Logo.tsx b/products/statement-generator/src/components/Logo.tsx
@@ -12,8 +12,7 @@ const useStyles = makeStyles<Theme, IUseUtilityStyle>(
         display: 'flex',
         fontSize: 20,
         maxHeight: ({ footer }: IUseUtilityStyle) => (footer ? '25px' : 'null'),
-        marginBottom: ({ footer }: IUseUtilityStyle) =>
-          footer ? '10px' : 'null',
+        marginBottom: ({ footer }: IUseUtilityStyle) => (footer ? 0 : 'null'),
 
         [breakpoints.down(breakpoints.values.sm)]: {
           // display: 'none',

diff --git a/products/statement-generator/src/pages/FAQ.tsx b/products/statement-generator/src/pages/FAQ.tsx
@@ -62,6 +62,7 @@ const useStyles = makeStyles(({ palette, breakpoints }) =>
       fontSize: '24px',
       lineHeight: '36px',
       fontWeight: 400,
+      textAlign: 'center',
     },
     ImgContainer: {
       width: '100%',
@@ -75,7 +76,7 @@ const useStyles = makeStyles(({ palette, breakpoints }) =>
       minWidth: '182px',
     },
     FAQContainer: {
-      maxWidth: '996px',
+      maxWidth: '980px',
       width: '100%',
       paddingTop: 0,