#955 - Improved the progress bar to match figma

Refactored the progress bar so that the UI would look better for hte user to look at. #955
hackforla · Oct 12, 2023 · 29ab5bd · 29ab5bd
1 parent a6bd844
commit 29ab5bd
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 1 deletion.
diff --git a/products/statement-generator/src/components/FormHeader.tsx b/products/statement-generator/src/components/FormHeader.tsx
@@ -1,5 +1,6 @@
 import React, { useContext } from 'react';
 import { Theme, makeStyles, createStyles } from '@material-ui/core';
+import '../styles/App.css';
 
 import RoutingContext from 'contexts/RoutingContext';
 import { AppUrl } from 'contexts/RoutingProps';
@@ -167,7 +168,7 @@ const FormHeader = () => {
   return (
     <div className={classes.outerWrapper}>
       <div className={classes.formHeader}>
-        <h3>{formTitle}</h3>
+        <h3 className="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,16 @@ const useStyles = makeStyles((theme) =>
     root: {
       borderRadius: 10,
       backgroundColor: '#FFFFFF',
+      height: '8px',
       '& .MuiLinearProgress-bar': {
         borderRadius: 10,
         backgroundColor: theme.palette.primary.main,
       },
     },
     box: {
       width: '95%',
+      marginTop: '12px',
+      marginBottom: '10px',
     },
   })
 );

diff --git a/products/statement-generator/src/styles/App.css b/products/statement-generator/src/styles/App.css
@@ -52,3 +52,7 @@ code {
 ul {
   padding-left: 2rem;
 }
+
+.formTitle {
+  margin-top: 10px;
+}