From 31b7fa56b1a313505300ad322c2879ad1179e118 Mon Sep 17 00:00:00 2001 From: Tim Date: Tue, 27 Aug 2024 09:37:59 -0700 Subject: [PATCH] Build/upgrade mui v4 to v5 (#1522) * build: yarn add @mui/material @mui/styles ; yarn add @mui/lab ; yarn add @mui/icons-material * build: yarn add @emotion/react @emotion/styled * build: npx @mui/codemod@latest v5.0.0/preset-safe src * build: empty commit, for: npx @mui/codemod@latest v5.0.0/variant-prop src * build: npx @mui/codemod@latest v5.0.0/link-underline-hover src * build: npx prettier --write src backend cypress scripts * build: yarn remove @material-ui/core @material-ui/icons @material-ui/lab * build: rm patches/@material-ui+core+4.12.4.patch * build: update renovate.json to use @mui not @material-ui * build: update ThemeProvider import, per https://mui.com/material-ui/migration/v5-style-changes/\#update-themeprovider-import * build: update EventType for Tabs onChange event, per https://mui.com/material-ui/migration/v5-component-changes/\#update-event-type-typescript-5 * fix: Two tabs problems: First, the color changes indicated at https://mui.com/material-ui/migration/v5-component-changes/#update-default-indicatorcolor-and-textcolor-prop-values Second, remove the the trailing "px" a number rather than string when passing values to the react-virtualized List component. See https://mui.com/material-ui/migration/v5-style-changes/\#%E2%9C%85-remove-px-suffix * fix: transaction amount was falling off right edge * fix: indirection of onChange prop of Slider via ownerState this was causing the slider-based cypress tests to fail. * fix: remove zIndex from AppBar to fix drawer issue appBar was still over the date picker in mobile screen size, failing one of the cypress:run:mobile tests. See also https://mui.com/material-ui/migration/v5-component-changes/\#fix-z-index-issues * build: npx @mui/codemod@latest v5.0.0/jss-to-styled src/containers followed by lint fixes and manual review * build: npx @mui/codemod@latest v5.0.0/jss-to-styled src/components/BankAccountForm.tsx linting and review * build: npx @mui/codemod@latest v5.0.0/jss-to-styled src/components/CommentForm.tsx review, lint * build: npx @mui/codemod@latest v5.0.0/jss-to-styled src/components/MainLayout.tsx review, remove class for root and use ampersand instead, adding a flexGrow:1 to get styling as before * build: npx @mui/codemod@latest v5.0.0/jss-to-styled src/components/NavBar.tsx, review, appBarShift was incorrectly considered a child of root; fixed that with removal of space between & and ., lint * build: npx @mui/codemod@latest v5.0.0/jss-to-styled src/components/NavDrawer.tsx review, lint, no issues * build: npx @mui/codemod@latest v5.0.0/jss-to-styled src/components/NotificationListItem.tsx review, lint, no issues * build: npx @mui/codemod@latest v5.0.0/jss-to-styled src/components/SignInForm.tsx lint, cast StyledContainer to typeof Container per https://github.com/mui/material-ui/issues/15695\#ref-commit-7fd1a29 * build: npx @mui/codemod@latest v5.0.0/jss-to-styled src/components/SignUpForm.tsx lint, cast StyledContainer to typeof Container per https://github.com/mui/material-ui/issues/15695\#ref-commit-7fd1a29 * build: npx @mui/codemod@latest v5.0.0/jss-to-styled src/components/SkeletonList.tsx lint, review, no issues * build: npx @mui/codemod@latest v5.0.0/jss-to-styled src/components/TransactionAmount.tsx lint, remove space between & and . because classes are conditionally applied * build: npx @mui/codemod@latest v5.0.0/jss-to-styled src/components/TransactionCreateStepOne.tsx lint and review, no issues * build: npx @mui/codemod@latest v5.0.0/jss-to-styled src/components/TransactionCreateStepTwo.tsx lint, review, no issues * build: npx @mui/codemod@latest v5.0.0/jss-to-styled src/components/TransactionCreateStepThree.tsx lint, review, no issues * build: npx @mui/codemod@latest v5.0.0/jss-to-styled src/components/TransactionDateRangeFilter.tsx lint, review, no issues * build: npx @mui/codemod@latest v5.0.0/jss-to-styled src/components/TransactionDetail.tsx lint, review, no issues * build: npx @mui/codemod@latest v5.0.0/jss-to-styled src/components/TransactionItem.tsx lint, review, problems with SmallAvatar, fixed manually * build: npx @mui/codemod@latest v5.0.0/jss-to-styled src/components/TransactionList.tsx lint, review, no issues * build: npx @mui/codemod@latest v5.0.0/jss-to-styled src/components/TransactionListAmountRangeFilter.tsx lint, review, did not work really at all, fixed by using sx prop rather than classes at all * build: npx @mui/codemod@latest v5.0.0/jss-to-styled src/components/TransactionListFilters.tsx lint, review, no issues * build: npx @mui/codemod@latest v5.0.0/jss-to-styled src/components/TransactionTitle.tsx lint, review, no issues * build: npx @mui/codemod@latest v5.0.0/jss-to-styled src/components/UserSettingsForm.tsx lint, review, form did not want to play nice with classes, fixed with sx for submit button and styled wrapping div for form * build: npx @mui/codemod@latest v5.0.0/jss-to-styled src/components had apparently accidentally failed-to-checkin TransactionInfiniteList and userSearchForm, but both were reviewed and had no issues * build: yarn remove @mui/styles and some minor style fixups to be rid of the dependency causing the peer dependency warning * fix: oops did not mean to modify database.json * build: remove @ts-expect-error annotations no longer used after yarn.lock merge resolution * test: issue 1278 re-enabling test that had failed on firefox, which is not failing after the upgrade to MUI v5. See https://github.com/cypress-io/cypress-realworld-app/issues/1278 * style: npm run prettier * fix: unset flex-direction which is newly set to row-reverse for AvatarGroup in mui5. * fix: undo parent commit fix because avatars were backward and no longer overlapping. Instead eat up space to right of avatars. * fix: get body font size back down to 14, establish knobs for modifying input styles * test: apply force:true to clicks failing due to issue #29776 --------- Co-authored-by: AtofStryker --- backend/graphql/schema.graphql | 12 +- cypress/support/commands.ts | 1 + cypress/support/component-index.html | 10 +- cypress/tests/ui/notifications.spec.ts | 110 ++--- cypress/tests/ui/transaction-view.spec.ts | 9 +- cypress/tsconfig.json | 4 +- package.json | 8 +- patches/@material-ui+core+4.12.4.patch | 103 ---- renovate.json | 2 +- scripts/tsconfig.json | 4 +- src/components/AlertBar.tsx | 4 +- src/components/BankAccountForm.tsx | 35 +- src/components/BankAccountItem.tsx | 4 +- src/components/BankAccountList.tsx | 2 +- src/components/CommentForm.tsx | 22 +- src/components/CommentList.tsx | 2 +- src/components/CommentListItem.tsx | 2 +- src/components/EmptyList.tsx | 4 +- src/components/Footer.tsx | 2 +- src/components/MainLayout.tsx | 35 +- src/components/NavBar.tsx | 63 ++- src/components/NavDrawer.tsx | 151 +++--- src/components/NotificationList.tsx | 2 +- src/components/NotificationListItem.tsx | 35 +- src/components/SignInForm.tsx | 39 +- src/components/SignUpForm.tsx | 63 +-- src/components/SkeletonList.tsx | 18 +- src/components/TransactionAmount.tsx | 29 +- src/components/TransactionCreateStepOne.tsx | 19 +- src/components/TransactionCreateStepThree.tsx | 33 +- src/components/TransactionCreateStepTwo.tsx | 58 ++- src/components/TransactionDateRangeFilter.tsx | 43 +- src/components/TransactionDetail.tsx | 94 ++-- src/components/TransactionInfiniteList.tsx | 40 +- src/components/TransactionItem.tsx | 74 +-- src/components/TransactionList.tsx | 29 +- .../TransactionListAmountRangeFilter.tsx | 34 +- src/components/TransactionListFilters.tsx | 27 +- src/components/TransactionNavTabs.tsx | 5 +- src/components/TransactionTitle.tsx | 34 +- src/components/UserListItem.tsx | 4 +- src/components/UserListSearchForm.tsx | 22 +- src/components/UserSettingsForm.tsx | 221 +++++---- src/components/UsersList.tsx | 2 +- .../oldStylesTransactionRangePopover.txt | 0 src/containers/App.tsx | 27 +- src/containers/AppAuth0.tsx | 28 +- src/containers/AppCognito.tsx | 27 +- src/containers/AppGoogle.tsx | 23 +- src/containers/AppOkta.tsx | 28 +- src/containers/BankAccountsContainer.tsx | 24 +- src/containers/NotificationsContainer.tsx | 18 +- src/containers/TransactionCreateContainer.tsx | 2 +- src/containers/UserOnboardingContainer.tsx | 6 +- src/containers/UserSettingsContainer.tsx | 26 +- src/index.auth0.tsx | 30 +- src/index.cognito.tsx | 30 +- src/index.google.tsx | 30 +- src/index.okta.tsx | 30 +- src/index.tsx | 43 +- yarn.lock | 464 ++++++++++-------- 61 files changed, 1340 insertions(+), 1010 deletions(-) delete mode 100644 patches/@material-ui+core+4.12.4.patch create mode 100644 src/components/oldStylesTransactionRangePopover.txt diff --git a/backend/graphql/schema.graphql b/backend/graphql/schema.graphql index c59d125a5..2a47dafcf 100644 --- a/backend/graphql/schema.graphql +++ b/backend/graphql/schema.graphql @@ -3,14 +3,8 @@ type Query { } type Mutation { - createBankAccount( - bankName: String!, - accountNumber: String!, - routingNumber: String! - ): BankAccount - deleteBankAccount( - id: ID! - ): Boolean + createBankAccount(bankName: String!, accountNumber: String!, routingNumber: String!): BankAccount + deleteBankAccount(id: ID!): Boolean } type BankAccount { @@ -23,4 +17,4 @@ type BankAccount { isDeleted: Boolean createdAt: String modifiedAt: String -} \ No newline at end of file +} diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts index 64e63b6ab..c206e87f8 100644 --- a/cypress/support/commands.ts +++ b/cypress/support/commands.ts @@ -123,6 +123,7 @@ Cypress.Commands.add("setTransactionAmountRange", (min, max) => { .getBySelLike("filter-amount-range-slider") .reactComponent() .its("memoizedProps") + .its("ownerState") .invoke("onChange", null, [min / 10, max / 10]); }); diff --git a/cypress/support/component-index.html b/cypress/support/component-index.html index 1af394f61..faf3b5f43 100644 --- a/cypress/support/component-index.html +++ b/cypress/support/component-index.html @@ -1,14 +1,12 @@ - + - - - + + + Components App - -
diff --git a/cypress/tests/ui/notifications.spec.ts b/cypress/tests/ui/notifications.spec.ts index 4007d7406..12c2faec2 100644 --- a/cypress/tests/ui/notifications.spec.ts +++ b/cypress/tests/ui/notifications.spec.ts @@ -26,65 +26,59 @@ describe("Notifications", function () { }); describe("notifications from user interactions", function () { - it( - "User A likes a transaction of User B; User B gets notification that User A liked transaction ", - // NOTE: this test seems to have issues in Firefox UI/Mobile tests due to an issue with the Base Button component in MUI v4 - // we should try unskipping this test in Firefox once we upgrade MUI to v5+. @see https://github.com/cypress-io/cypress-realworld-app/issues/1278 - { browser: { name: "!firefox" } }, - function () { - cy.loginByXstate(ctx.userA.username); - cy.wait("@getNotifications"); - - cy.database("find", "transactions", { senderId: ctx.userB.id }).then( - (transaction: Transaction) => { - cy.visit(`/transaction/${transaction.id}`); - } - ); - - cy.log("🚩 Renders the notifications badge with count"); - cy.wait("@getNotifications") - .its("response.body.results.length") - .then((notificationCount) => { - cy.getBySel("nav-top-notifications-count").should("have.text", `${notificationCount}`); - }); - cy.visualSnapshot("Renders the notifications badge with count"); - - const likesCountSelector = "[data-test*=transaction-like-count]"; - cy.contains(likesCountSelector, 0); - cy.getBySelLike("like-button").click(); - // a successful "like" should disable the button and increment - // the number of likes - cy.getBySelLike("like-button").should("be.disabled"); - cy.contains(likesCountSelector, 1); - cy.visualSnapshot("Like Count Incremented"); - - cy.switchUserByXstate(ctx.userB.username); - cy.visualSnapshot(`Switch to User ${ctx.userB.username}`); - - cy.wait("@getNotifications") - .its("response.body.results.length") - .as("preDismissedNotificationCount"); - - cy.visit("/notifications"); - - cy.wait("@getNotifications"); - - cy.getBySelLike("notification-list-item") - .should("have.length", 9) - .first() - .should("contain", ctx.userA?.firstName) - .and("contain", "liked"); - - cy.log("🚩 Marks notification as read"); - cy.getBySelLike("notification-mark-read").first().click({ force: true }); - cy.wait("@updateNotification"); - - cy.get("@preDismissedNotificationCount").then((count) => { - cy.getBySelLike("notification-list-item").should("have.length.lessThan", Number(count)); + it("User A likes a transaction of User B; User B gets notification that User A liked transaction ", function () { + cy.loginByXstate(ctx.userA.username); + cy.wait("@getNotifications"); + + cy.database("find", "transactions", { senderId: ctx.userB.id }).then( + (transaction: Transaction) => { + cy.visit(`/transaction/${transaction.id}`); + } + ); + + cy.log("🚩 Renders the notifications badge with count"); + cy.wait("@getNotifications") + .its("response.body.results.length") + .then((notificationCount) => { + cy.getBySel("nav-top-notifications-count").should("have.text", `${notificationCount}`); }); - cy.visualSnapshot("Notification count after notification dismissed"); - } - ); + cy.visualSnapshot("Renders the notifications badge with count"); + + const likesCountSelector = "[data-test*=transaction-like-count]"; + cy.contains(likesCountSelector, 0); + cy.getBySelLike("like-button").click(); + // a successful "like" should disable the button and increment + // the number of likes + cy.getBySelLike("like-button").should("be.disabled"); + cy.contains(likesCountSelector, 1); + cy.visualSnapshot("Like Count Incremented"); + + cy.switchUserByXstate(ctx.userB.username); + cy.visualSnapshot(`Switch to User ${ctx.userB.username}`); + + cy.wait("@getNotifications") + .its("response.body.results.length") + .as("preDismissedNotificationCount"); + + cy.visit("/notifications"); + + cy.wait("@getNotifications"); + + cy.getBySelLike("notification-list-item") + .should("have.length", 9) + .first() + .should("contain", ctx.userA?.firstName) + .and("contain", "liked"); + + cy.log("🚩 Marks notification as read"); + cy.getBySelLike("notification-mark-read").first().click({ force: true }); + cy.wait("@updateNotification"); + + cy.get("@preDismissedNotificationCount").then((count) => { + cy.getBySelLike("notification-list-item").should("have.length.lessThan", Number(count)); + }); + cy.visualSnapshot("Notification count after notification dismissed"); + }); it("User C likes a transaction between User A and User B; User A and User B get notifications that User C liked transaction", function () { cy.loginByXstate(ctx.userC.username); diff --git a/cypress/tests/ui/transaction-view.spec.ts b/cypress/tests/ui/transaction-view.spec.ts index c18b767ae..dd4ae54e4 100644 --- a/cypress/tests/ui/transaction-view.spec.ts +++ b/cypress/tests/ui/transaction-view.spec.ts @@ -40,7 +40,8 @@ describe("Transaction View", function () { }); it("transactions navigation tabs are hidden on a transaction view page", function () { - cy.getBySelLike("transaction-item").first().click(); + // { force: true } is a workaround for https://github.com/cypress-io/cypress/issues/29776 + cy.getBySelLike("transaction-item").first().click({ force: true }); cy.location("pathname").should("include", "/transaction"); cy.getBySel("nav-transaction-tabs").should("not.exist"); cy.getBySel("transaction-detail-header").should("be.visible"); @@ -48,7 +49,8 @@ describe("Transaction View", function () { }); it("likes a transaction", function () { - cy.getBySelLike("transaction-item").first().click(); + // { force: true } is a workaround for https://github.com/cypress-io/cypress/issues/29776 + cy.getBySelLike("transaction-item").first().click({ force: true }); cy.wait("@getTransaction"); cy.getBySelLike("like-button").click(); @@ -58,7 +60,8 @@ describe("Transaction View", function () { }); it("comments on a transaction", function () { - cy.getBySelLike("transaction-item").first().click(); + // { force: true } is a workaround for https://github.com/cypress-io/cypress/issues/29776 + cy.getBySelLike("transaction-item").first().click({ force: true }); cy.wait("@getTransaction"); const comments = ["Thank you!", "Appreciate it."]; diff --git a/cypress/tsconfig.json b/cypress/tsconfig.json index 2810324da..e32dac45f 100644 --- a/cypress/tsconfig.json +++ b/cypress/tsconfig.json @@ -7,6 +7,6 @@ "lib": ["es2015", "dom"], "isolatedModules": false, "allowJs": true, - "noEmit": true - } + "noEmit": true, + }, } diff --git a/package.json b/package.json index e0e9c3244..45494750e 100644 --- a/package.json +++ b/package.json @@ -16,12 +16,14 @@ "@babel/core": "7.23.9", "@babel/plugin-syntax-flow": "^7.14.5", "@babel/plugin-transform-react-jsx": "^7.14.9", + "@emotion/react": "^11.11.4", + "@emotion/styled": "^11.11.0", "@graphql-tools/graphql-file-loader": "7.5.17", "@graphql-tools/load": "7.8.14", - "@material-ui/core": "4.12.4", - "@material-ui/icons": "4.11.3", - "@material-ui/lab": "4.0.0-alpha.61", "@matheusluizn/react-google-login": "^5.1.6", + "@mui/icons-material": "^5.15.12", + "@mui/lab": "^5.0.0-alpha.167", + "@mui/material": "^5.15.12", "@okta/jwt-verifier": "^3.0.1", "@okta/okta-auth-js": "^7.3.0", "@okta/okta-react": "^6.7.0", diff --git a/patches/@material-ui+core+4.12.4.patch b/patches/@material-ui+core+4.12.4.patch deleted file mode 100644 index 696ff8764..000000000 --- a/patches/@material-ui+core+4.12.4.patch +++ /dev/null @@ -1,103 +0,0 @@ -diff --git a/node_modules/@material-ui/core/ButtonBase/ButtonBase.js b/node_modules/@material-ui/core/ButtonBase/ButtonBase.js -index 4972129..6516a00 100644 ---- a/node_modules/@material-ui/core/ButtonBase/ButtonBase.js -+++ b/node_modules/@material-ui/core/ButtonBase/ButtonBase.js -@@ -158,11 +158,23 @@ var ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) { - } - }; - }, []); -+ -+ var _React$useState2 = React.useState(false), -+ mountedState = _React$useState2[0], -+ setMountedState = _React$useState2[1]; -+ -+ React.useEffect(function () { -+ setMountedState(true); -+ }, []); -+ var enableTouchRipple = mountedState && !disableRipple && !disabled; -+ - React.useEffect(function () { -- if (focusVisible && focusRipple && !disableRipple) { -- rippleRef.current.pulsate(); -+ if (focusVisible && focusRipple && !disableRipple && mountedState) { -+ if (rippleRef.current) { -+ rippleRef.current.pulsate(); -+ } - } -- }, [disableRipple, focusRipple, focusVisible]); -+ }, [disableRipple, focusRipple, focusVisible, mountedState]); - - function useRippleHandler(rippleAction, eventCallback) { - var skipRippleAction = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : disableTouchRipple; -@@ -269,7 +281,9 @@ var ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) { - keydownRef.current = false; - event.persist(); - rippleRef.current.stop(event, function () { -- rippleRef.current.pulsate(event); -+ if (rippleRef.current) { -+ rippleRef.current.pulsate(event); -+ } - }); - } - -@@ -305,15 +319,6 @@ var ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) { - var handleOwnRef = (0, _useForkRef.default)(focusVisibleRef, buttonRef); - var handleRef = (0, _useForkRef.default)(handleUserRef, handleOwnRef); - -- var _React$useState2 = React.useState(false), -- mountedState = _React$useState2[0], -- setMountedState = _React$useState2[1]; -- -- React.useEffect(function () { -- setMountedState(true); -- }, []); -- var enableTouchRipple = mountedState && !disableRipple && !disabled; -- - if (process.env.NODE_ENV !== 'production') { - // eslint-disable-next-line react-hooks/rules-of-hooks - React.useEffect(function () { -diff --git a/node_modules/@material-ui/core/es/ButtonBase/ButtonBase.js b/node_modules/@material-ui/core/es/ButtonBase/ButtonBase.js -index b4be26f..06b0d63 100644 ---- a/node_modules/@material-ui/core/es/ButtonBase/ButtonBase.js -+++ b/node_modules/@material-ui/core/es/ButtonBase/ButtonBase.js -@@ -125,7 +125,9 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) - }), []); - React.useEffect(() => { - if (focusVisible && focusRipple && !disableRipple) { -- rippleRef.current.pulsate(); -+ if (rippleRef.current) { -+ rippleRef.current.pulsate(); -+ } - } - }, [disableRipple, focusRipple, focusVisible]); - -diff --git a/node_modules/@material-ui/core/esm/ButtonBase/ButtonBase.js b/node_modules/@material-ui/core/esm/ButtonBase/ButtonBase.js -index 58cfc64..de2db57 100644 ---- a/node_modules/@material-ui/core/esm/ButtonBase/ButtonBase.js -+++ b/node_modules/@material-ui/core/esm/ButtonBase/ButtonBase.js -@@ -136,7 +136,9 @@ var ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) { - }, []); - React.useEffect(function () { - if (focusVisible && focusRipple && !disableRipple) { -- rippleRef.current.pulsate(); -+ if (rippleRef.current) { -+ rippleRef.current.pulsate(); -+ } - } - }, [disableRipple, focusRipple, focusVisible]); - -diff --git a/node_modules/@material-ui/core/umd/material-ui.development.js b/node_modules/@material-ui/core/umd/material-ui.development.js -index ad23fd3..fb4cb53 100644 ---- a/node_modules/@material-ui/core/umd/material-ui.development.js -+++ b/node_modules/@material-ui/core/umd/material-ui.development.js -@@ -11208,7 +11208,9 @@ - }, []); - React.useEffect(function () { - if (focusVisible && focusRipple && !disableRipple) { -- rippleRef.current.pulsate(); -+ if (rippleRef.current) { -+ rippleRef.current.pulsate(); -+ } - } - }, [disableRipple, focusRipple, focusVisible]); - diff --git a/renovate.json b/renovate.json index ec472d9b1..7bac9ce56 100644 --- a/renovate.json +++ b/renovate.json @@ -68,7 +68,7 @@ }, { "groupName": "Material UI", - "matchPackagePatterns": ["^@material-ui/"] + "matchPackagePatterns": ["^@mui/"] }, { "groupName": "Graphql", diff --git a/scripts/tsconfig.json b/scripts/tsconfig.json index 555eec32d..8ad4852db 100644 --- a/scripts/tsconfig.json +++ b/scripts/tsconfig.json @@ -4,6 +4,6 @@ "exclude": [], "compilerOptions": { "types": ["node"], - "isolatedModules": false - } + "isolatedModules": false, + }, } diff --git a/src/components/AlertBar.tsx b/src/components/AlertBar.tsx index 41fb79282..293d4703e 100644 --- a/src/components/AlertBar.tsx +++ b/src/components/AlertBar.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { Snackbar } from "@material-ui/core"; +import { Snackbar } from "@mui/material"; import { BaseActionObject, Interpreter, @@ -9,7 +9,7 @@ import { } from "xstate"; import { SnackbarContext, SnackbarSchema, SnackbarEvents } from "../machines/snackbarMachine"; import { useActor } from "@xstate/react"; -import { Alert } from "@material-ui/lab"; +import { Alert } from "@mui/material"; interface Props { snackbarService: Interpreter< diff --git a/src/components/BankAccountForm.tsx b/src/components/BankAccountForm.tsx index d360362dc..aa67eb6be 100644 --- a/src/components/BankAccountForm.tsx +++ b/src/components/BankAccountForm.tsx @@ -1,5 +1,6 @@ import React from "react"; -import { makeStyles, TextField, Button, Grid } from "@material-ui/core"; +import { styled } from "@mui/material/styles"; +import { TextField, Button, Grid } from "@mui/material"; import { Formik, Form, Field, FieldProps } from "formik"; import { string, object } from "yup"; import { BankAccountPayload, User } from "../models"; @@ -16,18 +17,28 @@ const validationSchema = object({ .required("Enter a valid bank account number"), }); -const useStyles = makeStyles((theme) => ({ - paper: { +const PREFIX = "BankAccountForm"; + +const classes = { + paper: `${PREFIX}-paper`, + form: `${PREFIX}-form`, + submit: `${PREFIX}-submit`, +}; + +const StyledFormik = styled(Formik)(({ theme }) => ({ + [`& .${classes.paper}`]: { marginTop: theme.spacing(8), display: "flex", flexDirection: "column", alignItems: "center", }, - form: { + + [`& .${classes.form}`]: { width: "100%", // Fix IE 11 issue. marginTop: theme.spacing(1), }, - submit: { + + [`& .${classes.submit}`]: { margin: theme.spacing(3, 0, 2), }, })); @@ -44,7 +55,7 @@ const BankAccountForm: React.FC = ({ onboarding, }) => { const history = useHistory(); - const classes = useStyles(); + const initialValues: BankAccountPayload = { userId, bankName: "", @@ -53,7 +64,7 @@ const BankAccountForm: React.FC = ({ }; return ( - { @@ -119,7 +130,13 @@ const BankAccountForm: React.FC = ({ /> )} - + )} - + ); }; diff --git a/src/components/SignInForm.tsx b/src/components/SignInForm.tsx index e2c641a43..95a99f4e2 100644 --- a/src/components/SignInForm.tsx +++ b/src/components/SignInForm.tsx @@ -1,4 +1,5 @@ import React from "react"; +import { styled } from "@mui/material/styles"; import { Interpreter } from "xstate"; import { useActor } from "@xstate/react"; import { Link } from "react-router-dom"; @@ -11,9 +12,8 @@ import { Grid, Box, Typography, - makeStyles, Container, -} from "@material-ui/core"; +} from "@mui/material"; import { Formik, Form, Field, FieldProps } from "formik"; import { string, object } from "yup"; @@ -21,7 +21,7 @@ import RWALogo from "./SvgRwaLogo"; import Footer from "./Footer"; import { SignInPayload } from "../models"; import { AuthMachineContext, AuthMachineEvents, AuthMachineSchema } from "../machines/authMachine"; -import { Alert } from "@material-ui/lab"; +import { Alert } from "@mui/material"; const validationSchema = object({ username: string().required("Username is required"), @@ -30,34 +30,47 @@ const validationSchema = object({ .required("Enter your password"), }); -const useStyles = makeStyles((theme) => ({ - paper: { +const PREFIX = "SignInForm"; + +const classes = { + paper: `${PREFIX}-paper`, + logo: `${PREFIX}-logo`, + form: `${PREFIX}-form`, + submit: `${PREFIX}-submit`, + alertMessage: `${PREFIX}-alertMessage`, +}; + +const StyledContainer = styled(Container)(({ theme }) => ({ + [`& .${classes.paper}`]: { marginTop: theme.spacing(8), display: "flex", flexDirection: "column", alignItems: "center", }, - logo: { + + [`& .${classes.logo}`]: { color: theme.palette.primary.main, }, - form: { + + [`& .${classes.form}`]: { width: "100%", // Fix IE 11 issue. marginTop: theme.spacing(1), }, - submit: { + + [`& .${classes.submit}`]: { margin: theme.spacing(3, 0, 2), }, - alertMessage: { + + [`& .${classes.alertMessage}`]: { marginBottom: theme.spacing(2), }, -})); +})) as typeof Container; export interface Props { authService: Interpreter; } const SignInForm: React.FC = ({ authService }) => { - const classes = useStyles(); const [authState, sendAuth] = useActor(authService); const initialValues: SignInPayload = { username: "", @@ -68,7 +81,7 @@ const SignInForm: React.FC = ({ authService }) => { const signInPending = (payload: SignInPayload) => sendAuth({ type: "LOGIN", ...payload }); return ( - +
{authState.context?.message && ( @@ -164,7 +177,7 @@ const SignInForm: React.FC = ({ authService }) => {