Merge pull request #1128 from hackforla/dev

Dev
hackforla · Feb 1, 2024 · 557510b · 557510b
2 parents df0f885 + 111cef8
commit 557510b
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 3 deletions.
diff --git a/products/statement-generator/src/components/FormHeader.tsx b/products/statement-generator/src/components/FormHeader.tsx
@@ -17,9 +17,13 @@ const useStyles = makeStyles<Theme>(
         background: palette.primary.lighter,
         borderBottomRightRadius: '64px',
         paddingBottom: spacing(1),
+        maxWidth: '80%',
+        marginLeft: '10%',
 
-        [breakpoints.up(breakpoints.values.md)]: {
-          borderBottomLeftRadius: '64px',
+        [breakpoints.down(breakpoints.values.md)]: {
+          borderBottomLeftRadius: '0px',
+          maxWidth: '100%',
+          marginLeft: '0%',
         },
       },
       formHeader: {
@@ -34,6 +38,10 @@ const useStyles = makeStyles<Theme>(
         marginTop: spacing(1),
         fontSize: typography.fontSize,
       },
+      formTitle: {
+        marginTop: '10px',
+        marginBottom: '8px',
+      },
     })
 );
 
@@ -173,7 +181,7 @@ const FormHeader = () => {
   return (
     <div className={classes.outerWrapper}>
       <div className={classes.formHeader}>
-        <h3>{formTitle}</h3>
+        <h3 className={classes.formTitle}>{formTitle}</h3>
 
         <ProgressBar percentage={percentageComplete} />
       </div>

diff --git a/products/statement-generator/src/components/ProgressBar.tsx b/products/statement-generator/src/components/ProgressBar.tsx
@@ -11,13 +11,20 @@ const useStyles = makeStyles((theme) =>
     root: {
       borderRadius: 10,
       backgroundColor: '#FFFFFF',
+      height: '8px',
+
+      [theme.breakpoints.down(theme.breakpoints.values.md)]: {
+        height: '6px',
+      },
       '& .MuiLinearProgress-bar': {
         borderRadius: 10,
         backgroundColor: theme.palette.primary.main,
       },
     },
     box: {
       width: '95%',
+      marginTop: '10px',
+      marginBottom: '8px',
     },
   })
 );