Fix error by updating Field component to include all chakra box props (#56)

## Notion ticket link
None

<!-- Give a quick summary of the implementation details, provide design
justifications if necessary -->
## Implementation description
Previously, running `npx tsc --noEmit` gave the following error: 
```src/APIClients/baseAPIClient.ts:4:46 - error TS7016: Could not find a declaration file for module 'humps'. '/Users/eddyzheng/llsc/frontend/node_modules/humps/humps.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/humps` if it exists or add a new declaration (.d.ts) file containing `declare module 'humps';`

4 import { camelizeKeys, decamelizeKeys } from 'humps';
                                               ~~~~~~~

src/components/auth/AuthLoadingSkeleton.tsx:11:45 - error TS2322: Type '{ size: "xl"; color: "blue.500"; thickness: string; }' is not assignable to type 'IntrinsicAttributes & SpinnerProps & RefAttributes<HTMLSpanElement>'.
  Property 'thickness' does not exist on type 'IntrinsicAttributes & SpinnerProps & RefAttributes<HTMLSpanElement>'.

11         <Spinner size="xl" color="blue.500" thickness="4px" />
                                               ~~~~~~~~~

src/pages/admin-login.tsx:98:15 - error TS2322: Type '{ children: Element; label: Element; mb: number; }' is not assignable to type 'IntrinsicAttributes & FieldProps'.
  Property 'mb' does not exist on type 'IntrinsicAttributes & FieldProps'.

98               mb={4}
                 ~~

src/pages/admin-login.tsx:133:15 - error TS2322: Type '{ children: Element; label: Element; mb: number; }' is not assignable to type 'IntrinsicAttributes & FieldProps'.
  Property 'mb' does not exist on type 'IntrinsicAttributes & FieldProps'.

133               mb={2}
                  ~~

src/pages/admin.tsx:123:15 - error TS2322: Type '{ children: Element; label: Element; mb: number; }' is not assignable to type 'IntrinsicAttributes & FieldProps'.
  Property 'mb' does not exist on type 'IntrinsicAttributes & FieldProps'.

123               mb={4}
                  ~~

src/pages/admin.tsx:158:15 - error TS2322: Type '{ children: Element; label: Element; mb: number; }' is not assignable to type 'IntrinsicAttributes & FieldProps'.
  Property 'mb' does not exist on type 'IntrinsicAttributes & FieldProps'.

158               mb={2}
                  ~~

src/pages/admin.tsx:193:15 - error TS2322: Type '{ children: Element; label: Element; mb: number; }' is not assignable to type 'IntrinsicAttributes & FieldProps'.
  Property 'mb' does not exist on type 'IntrinsicAttributes & FieldProps'.

193               mb={6}
                  ~~

src/pages/index.tsx:113:15 - error TS2322: Type '{ children: Element; label: Element; mb: number; }' is not assignable to type 'IntrinsicAttributes & FieldProps'.
  Property 'mb' does not exist on type 'IntrinsicAttributes & FieldProps'.

113               mb={4}
                  ~~

src/pages/index.tsx:148:15 - error TS2322: Type '{ children: Element; label: Element; mb: number; }' is not assignable to type 'IntrinsicAttributes & FieldProps'.
  Property 'mb' does not exist on type 'IntrinsicAttributes & FieldProps'.

148               mb={2}
                  ~~

src/pages/participant-form.tsx:139:15 - error TS2322: Type '{ children: Element; label: Element; mb: number; }' is not assignable to type 'IntrinsicAttributes & FieldProps'.
  Property 'mb' does not exist on type 'IntrinsicAttributes & FieldProps'.

139               mb={4}
                  ~~

src/pages/participant-form.tsx:174:15 - error TS2322: Type '{ children: Element; label: Element; mb: number; }' is not assignable to type 'IntrinsicAttributes & FieldProps'.
  Property 'mb' does not exist on type 'IntrinsicAttributes & FieldProps'.

174               mb={4}
                  ~~

src/pages/participant-form.tsx:215:15 - error TS2322: Type '{ children: Element; label: Element; mb: number; }' is not assignable to type 'IntrinsicAttributes & FieldProps'.
  Property 'mb' does not exist on type 'IntrinsicAttributes & FieldProps'.

215               mb={4}
                  ~~

src/pages/reset-password.tsx:103:15 - error TS2322: Type '{ children: Element; label: Element; mb: number; }' is not assignable to type 'IntrinsicAttributes & FieldProps'.
  Property 'mb' does not exist on type 'IntrinsicAttributes & FieldProps'.

103               mb={4}
                  ~~

src/pages/set-new-password.tsx:168:17 - error TS2322: Type '{ children: Element; label: Element; mb: number; }' is not assignable to type 'IntrinsicAttributes & FieldProps'.
  Property 'mb' does not exist on type 'IntrinsicAttributes & FieldProps'.

168                 mb={4}
                    ~~

src/pages/set-new-password.tsx:205:17 - error TS2322: Type '{ children: Element; label: Element; mb: number; }' is not assignable to type 'IntrinsicAttributes & FieldProps'.
  Property 'mb' does not exist on type 'IntrinsicAttributes & FieldProps'.

205                 mb={4}
                    ~~


Found 15 errors in 8 files.

Errors  Files
     1  src/APIClients/baseAPIClient.ts:4
     1  src/components/auth/AuthLoadingSkeleton.tsx:11
     2  src/pages/admin-login.tsx:98
     3  src/pages/admin.tsx:123
     2  src/pages/index.tsx:113
     3  src/pages/participant-form.tsx:139
     1  src/pages/reset-password.tsx:103
     2  src/pages/set-new-password.tsx:168
```

Meaning that the mb prop was being ignored in the Field component cuz
Field doesn't accept mb as a prop. To fix this we modify Field to accept
all chakra ui box props.

## How to test
Run typescript compiler and see that there are no more errors relating
to mb prop.
```
cd frontend
npx tsc --noEmit
```


## Checklist
- [ ] My PR name is descriptive and in imperative tense
- [ ] My commit messages are descriptive and in imperative tense. My
commits are atomic and trivial commits are squashed or fixup'd into
non-trivial commits
- [ ] I have run the appropriate linter(s)
- [ ] I have requested a review from the PL, as well as other devs who
have background knowledge on this PR or who will be building on top of
this PR

Author: e1011

frontend/src/components/ui/field.tsx

@@ -1,15 +1,14 @@
 import React from 'react';
-import { Box } from '@chakra-ui/react';
+import { Box, BoxProps } from '@chakra-ui/react';
 
-interface FieldProps {
+interface FieldProps extends BoxProps {
   label: React.ReactNode;
   children: React.ReactNode;
-  flex?: string | number;
 }
 
-export const Field: React.FC<FieldProps> = ({ label, children, flex }) => {
+export const Field: React.FC<FieldProps> = ({ label, children, ...boxProps }) => {
   return (
-    <Box flex={flex}>
+    <Box {...boxProps}>
       {label}
       {children}
     </Box>