CRDCDH-35 Redesign Form Section B

package.json

@@ -11,13 +11,15 @@
     "@mui/lab": "^5.0.0-alpha.130",
     "@mui/material": "^5.13.1",
     "@mui/styles": "^5.13.1",
+    "@mui/x-date-pickers": "^6.8.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.2",
     "@types/node": "^16.18.31",
     "@types/react": "^18.2.6",
     "@types/react-dom": "^18.2.4",
+    "dayjs": "^1.11.8",
     "graphql": "^16.6.0",
     "lodash": "^4.17.21",
     "nprogress": "^0.2.0",

src/App.tsx

@@ -1,22 +1,24 @@
-import { RouterProvider, createBrowserRouter } from 'react-router-dom';
-import { ThemeProvider, CssBaseline, createTheme } from '@mui/material';
-import routeConfig from './router';
+import { RouterProvider, createBrowserRouter } from "react-router-dom";
+import { ThemeProvider, CssBaseline, createTheme } from "@mui/material";
+import { LocalizationProvider } from "@mui/x-date-pickers";
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
+import routeConfig from "./router";
 
 const theme = createTheme({
   typography: {
     fontFamily: "'Nunito', sans-serif",
   },
 });
 
-const router = createBrowserRouter(
-  routeConfig,
-);
+const router = createBrowserRouter(routeConfig);
 
 function App() {
   return (
     <ThemeProvider theme={theme}>
-      <CssBaseline />
-      <RouterProvider router={router} />
+      <LocalizationProvider dateAdapter={AdapterDayjs}>
+        <CssBaseline />
+        <RouterProvider router={router} />
+      </LocalizationProvider>
     </ThemeProvider>
   );
 }

src/components/Questionnaire/AddRemoveButton.tsx

@@ -0,0 +1,51 @@
+import { Button, ButtonProps, Stack, StackProps, styled } from "@mui/material";
+import { FC } from "react";
+
+const ActionButton = styled(Button, {
+  shouldForwardProp: (prop) => prop !== "textColor" && prop !== "iconColor"
+})<Props>`
+  font-weight: 700;
+  font-size: 15px;
+  font-family: 'Nunito', 'Rubik', sans-serif;
+  line-height: 16px;
+  color: ${(props) => props.textColor ?? "#000000"};
+  padding: 0;
+  justify-content: end;
+  min-width: 143px;
+  border: none !important;
+  background: transparent;
+  text-transform: none;
+  & .MuiButton-startIcon {
+    color: ${(props) => props.iconColor ?? "#6EC882"};
+    margin-right: 4px;
+    & svg {
+      font-size: 23px;
+    }
+  }
+`;
+
+type Props = ButtonProps & {
+  label?: string;
+  placement?: StackProps["justifyContent"];
+  iconColor?: string;
+  textColor?: string;
+};
+
+const AddRemoveButton: FC<Props> = ({
+  label,
+  placement = "end",
+  ...rest
+}) => (
+  <Stack direction="row" justifyContent={placement} alignItems="center">
+    <ActionButton
+      variant="outlined"
+      type="button"
+      size="small"
+      {...rest}
+    >
+      {label}
+    </ActionButton>
+  </Stack>
+);
+
+export default AddRemoveButton;