Standardize CTA buttons per our design docs

client/src/components/Buttons/Button.tsx

@@ -0,0 +1,63 @@
+import { makeStyles } from 'tss-react/mui';
+import { Button, Typography } from '@mui/material';
+import theme from '../../theme';
+import { ReactNode } from 'react';
+
+const useStyles = makeStyles()(() => ({
+  CTAHeroButton: {
+    color: 'white',
+    backgroundColor: theme.palette.primary.main,
+    borderRadius: '10px',
+    fontWeight: 'semi-bold',
+    border: 'none',
+    '&:hover': {
+      backgroundColor: theme.palette.primary.main,
+      cursor: 'pointer',
+    },
+  },
+  primaryCTAButton: {
+    textTransform: 'capitalize',
+    backgroundColor: theme.palette.primary.main,
+    color: `${theme.palette.primary.contrastText}`,
+    borderRadius: '10px',
+    border: `1px solid ${theme.palette.primary.main}`,
+    marginLeft: '0px',
+    width: '100px',
+    '&:hover': {
+      color: `${theme.palette.text.primary}`,
+    },
+  },
+}));
+
+type Props = {
+  text: string;
+  onClick?: () => void;
+  children?: ReactNode;
+};
+
+export function CTAHeroButton({ text, onClick }: Props) {
+  const { classes } = useStyles();
+
+  return (
+    <button onClick={onClick} className={classes.CTAHeroButton}>
+      <Typography
+        sx={{
+          fontSize: '22px',
+          padding: '15px 25px 15px 25px',
+        }}
+      >
+        {text}
+      </Typography>
+    </button>
+  );
+}
+
+export function PrimaryCTAButton({ text, onClick, children }: Props) {
+  const { classes } = useStyles();
+  return (
+    <Button component="span" onClick={onClick} className={classes.primaryCTAButton}>
+      {text}
+      {children}
+    </Button>
+  );
+}

client/src/components/Forms/FileUploadInput.tsx

@@ -2,6 +2,7 @@ import { makeStyles } from 'tss-react/mui';
 import { FormControl, FormLabel, Button } from '@mui/material';
 
 import type { Theme } from '@mui/material/styles';
+import { CTAHeroButton, PrimaryCTAButton } from '../Buttons/Button';
 
 const useStyles = makeStyles()((theme: Theme) => ({
   buttonText: {
@@ -20,6 +21,7 @@ type CustomProps = {
   id: string;
   label: string;
   text: string;
+  buttonVariant?: 'CTAHeroButton' | 'primaryCTAButton';
   onChange: (event: any) => void;
 };
 
@@ -36,11 +38,18 @@ function FileUploadInput(props: CustomProps) {
         id="raised-button-file"
         multiple
         type="file"
+        onChange={props.onChange}
       />
       <label htmlFor="raised-button-file">
-        <Button component="span" className={classes.buttonText}>
-          {props.text}
-        </Button>
+        {props.buttonVariant === 'primaryCTAButton' ? (
+          <PrimaryCTAButton text={props.text}></PrimaryCTAButton>
+        ) : props.buttonVariant === 'CTAHeroButton' ? (
+          <CTAHeroButton text={props.text}></CTAHeroButton>
+        ) : (
+          <Button component="span" className={classes.buttonText}>
+            {props.text}
+          </Button>
+        )}
       </label>
     </FormControl>
   );