fix(ui): Broke formik hook for MButton out.

There are now two button components, MButton and MBaseButton.
MBaseButton is the actual implementation with no formik logic.
MButton is a wrapper around MBaseButton that includes a formik hook in.

ui/components/MButton.tsx

@@ -7,6 +7,7 @@ import clsx from 'clsx';
 export interface MButtonProps extends ButtonBaseProps {
   color?: 'primary' | 'secondary' | 'cancel';
   variant?: 'solid' | 'text';
+  submitting?: boolean;
 }
 
 const MButtonPropsDefaults: MButtonProps = {
@@ -15,13 +16,12 @@ const MButtonPropsDefaults: MButtonProps = {
   variant: 'solid',
 };
 
-export default function MButton(props: MButtonProps = MButtonPropsDefaults): JSX.Element {
-  const formikContext = useFormikContext();
-
+// MBaseButton is the button implementation without the formik hook in and overrides.
+// If you need to use a monetr button without formik then this should be used instead.
+export function MBaseButton(props: MButtonProps = MButtonPropsDefaults): JSX.Element {
   const { disabled, color: theme, variant: kind }: MButtonProps = {
     ...MButtonPropsDefaults,
     ...props,
-    disabled: formikContext?.isSubmitting || props.disabled,
   };
   const themeClasses = {
     'primary': {
@@ -87,9 +87,21 @@ export default function MButton(props: MButtonProps = MButtonPropsDefaults): JSX
   );
 
   return <ButtonBase
-    onSubmit={ props.type === 'submit' ? formikContext?.submitForm : null }
-    disabled={ formikContext?.isSubmitting || props.disabled }
     { ...props }
     className={ classNames }
   />;
+};
+
+// MButton is a wrapper around MBaseButton but includes a formik hook in with some basic overrides.
+export default function MButton(props: MButtonProps = MButtonPropsDefaults): JSX.Element {
+  const formikContext = useFormikContext();
+  props = {
+    ...MButtonPropsDefaults,
+    ...props,
+    disabled: formikContext?.isSubmitting || props?.disabled,
+    onSubmit: props?.onSubmit || (props.type === 'submit' ? formikContext?.submitForm : undefined),
+  };
+  return (
+    <MBaseButton { ...props } />
+  );
 }

ui/pages/expenses-new.tsx

@@ -3,7 +3,7 @@ import { Divider, List } from '@mui/material';
 
 import { showCreateExpenseDialog } from 'components/Expenses/CreateExpenseDialog';
 import ExpenseItem from 'components/Expenses/ExpenseItem';
-import MButton from 'components/MButton';
+import { MBaseButton } from 'components/MButton';
 import { useSpendingFiltered } from 'hooks/spending';
 import { SpendingType } from 'models/Spending';
 
@@ -32,19 +32,19 @@ export default function ExpensesNew(): JSX.Element {
 
 function EmptyState(): JSX.Element {
   return (
-    <div className="h-full w-full flex justify-center items-center">
+    <div className="h-full w-full flex justify-center items-center px-2">
       <div className="flex flex-col gap-2">
-        <p className='text-3xl opacity-50'>
+        <p className='text-3xl opacity-50 text-center'>
           You don't have any expenses yet...
         </p>
-        <MButton
+        <MBaseButton
           onClick={ showCreateExpenseDialog }
           color="primary"
         >
           <p className='text-lg'>
             Create An Expense
           </p>
-        </MButton>
+        </MBaseButton>
       </div>
     </div>
   );