Merge pull request #1258 from hackforla/1172-fix-faq-alignment

1172 fix faq alignment
hackforla · Mar 25, 2024 · 1b35271 · 1b35271
2 parents fa418a8 + 1187b70
commit 1b35271
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 14 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,7 +38,6 @@ const useStyles = makeStyles(({ breakpoints, palette, spacing }) =>
     leftContainer: {
       display: 'flex',
       flexDirection: 'column',
-      padding: spacing(1),
     },
     rightContainer: {
       display: 'flex',
@@ -48,6 +47,7 @@ const useStyles = makeStyles(({ breakpoints, palette, spacing }) =>
 
       [breakpoints.down(breakpoints.values.md)]: {
         flexDirection: 'column',
+        marginTop: spacing(1),
       },
     },
     linkBtn: {
@@ -66,26 +66,43 @@ const useStyles = makeStyles(({ breakpoints, palette, spacing }) =>
       },
 
       '&$linkBtn + $linkBtn': {
-        marginLeft: 4,
+        marginLeft: spacing(0.5),
+      },
+
+      [breakpoints.down(breakpoints.values.md)]: {
+        marginTop: spacing(2),
+        padding: spacing(1, 0),
       },
 
       [breakpoints.down(breakpoints.values.sm)]: {
-        marginTop: 16,
+        marginTop: spacing(2),
       },
     },
     copyrightContainer: {
       display: 'flex',
 
+      [breakpoints.down(breakpoints.values.md)]: {
+        marginTop: spacing(2),
+      },
+
       [breakpoints.down(breakpoints.values.sm)]: {
-        marginTop: 16,
+        marginTop: spacing(2),
       },
     },
     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
@@ -19,10 +19,10 @@ const useStyles = makeStyles(({ palette, breakpoints }) =>
       },
     },
     HeaderContent: {
-      maxWidth: '996px',
+      maxWidth: '945px',
       minWidth: '342px',
-      width: '69.2%',
-      margin: '45px 222px 54.64px',
+      width: '100%',
+      margin: '45px auto 54.64px',
       display: 'flex',
       justifyContent: 'space-between',
       alignItems: 'center',
@@ -38,12 +38,14 @@ const useStyles = makeStyles(({ palette, breakpoints }) =>
       display: 'flex',
       flexDirection: 'column',
       justifyContent: 'center',
-      alignItems: 'center',
+      alignItems: 'flex-start',
       backgroundColor: palette.primary.lighter,
-      marginRight: '113.5px',
+      flex: '1 1 60%',
+      marginRight: '36px',
 
       [breakpoints.down('md')]: {
         marginRight: 0,
+        alignItems: 'center',
       },
 
       [breakpoints.down('sm')]: {
@@ -60,19 +62,25 @@ const useStyles = makeStyles(({ palette, breakpoints }) =>
       fontSize: '24px',
       lineHeight: '36px',
       fontWeight: 400,
+
+      [breakpoints.down(breakpoints.values.lg)]: {
+        textAlign: 'center',
+      },
     },
     ImgContainer: {
       width: '100%',
       textAlign: 'center',
+      flex: '1 1 40%',
+      marginRight: '16px',
     },
     Img: {
       width: 'auto',
       maxWidth: '100%',
       minWidth: '182px',
     },
     FAQContainer: {
-      maxWidth: '996px',
-      width: '69.2%',
+      maxWidth: '980px',
+      width: '100%',
       paddingTop: 0,
 
       [breakpoints.down('xs')]: {