update single input field and submit button

src/components/SingleInputForm.tsx

@@ -6,6 +6,7 @@ import SubmitButton from './SubmitButton';
 import TextField from '@mui/material/TextField';
 import ShowHidePassword from './Form/ShowHidePassword';
 import { FlexWrapper } from './Container';
+import { Button } from '@mui/material';
 
 interface formValues {
     inputValue: string;
@@ -18,11 +19,15 @@ export interface SingleInputFormProps {
     fieldType: 'text' | 'email' | 'password';
     placeholder: string;
     buttonText: string;
-    customSubmitButton?: any;
+    submitButtonProps?: any;
     initialValue?: string;
+    secondaryButtonAction?: () => void;
 }
 
 export default function SingleInputForm(props: SingleInputFormProps) {
+    const { submitButtonProps } = props;
+    const { sx: buttonSx, ...restSubmitButtonProps } = submitButtonProps ?? {};
+
     const [loading, SetLoading] = useState(false);
     const [showPassword, setShowPassword] = useState(false);
 
@@ -100,19 +105,24 @@ export default function SingleInputForm(props: SingleInputFormProps) {
                             ),
                         }}
                     />
-                    <FlexWrapper></FlexWrapper>
-                    {props.customSubmitButton ? (
-                        <props.customSubmitButton
-                            buttonText={props.buttonText}
-                            loading={loading}
-                        />
-                    ) : (
+                    <FlexWrapper justifyContent={'flex-end'}>
+                        {props.secondaryButtonAction && (
+                            <Button
+                                onClick={props.secondaryButtonAction}
+                                size="large"
+                                color="secondary"
+                                sx={{ mt: 2, mr: 1, ...buttonSx }}
+                                {...restSubmitButtonProps}>
+                                {constants.CANCEL}
+                            </Button>
+                        )}
                         <SubmitButton
-                            sx={{ mt: 2 }}
+                            sx={{ mt: 2, ...buttonSx }}
                             buttonText={props.buttonText}
                             loading={loading}
+                            {...restSubmitButtonProps}
                         />
-                    )}
+                    </FlexWrapper>
                 </form>
             )}
         </Formik>

src/components/SubmitButton.tsx

@@ -4,13 +4,12 @@ import React, { FC } from 'react';
 export interface SubmitButtonProps {
     loading: boolean;
     buttonText: string;
-    inline?: any;
+
     disabled?: boolean;
 }
 const SubmitButton: FC<ButtonProps<'button', SubmitButtonProps>> = ({
     loading,
     buttonText,
-    inline,
     disabled,
     sx,
     ...props
@@ -21,7 +20,6 @@ const SubmitButton: FC<ButtonProps<'button', SubmitButtonProps>> = ({
             variant="contained"
             color="accent"
             type="submit"
-            fullWidth={!inline}
             disabled={loading || disabled}
             sx={{ my: 4, ...sx }}
             {...props}>