Improve UI of add manual transaction modal (#4977)

* Migrate to new modal * Ad changeset
saleor · Jun 28, 2024 · f53973f · f53973f
1 parent 345eeb0
commit f53973f
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 48 deletions.
diff --git a/.changeset/calm-mice-stare.md b/.changeset/calm-mice-stare.md
@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Manual transaction modal has now improved design that matches other modals.
diff --git a/src/orders/components/OrderManualTransactionDialog/OrderManualTransactionDialog.tsx b/src/orders/components/OrderManualTransactionDialog/OrderManualTransactionDialog.tsx
@@ -1,16 +1,8 @@
-// @ts-strict-ignore
 import BackButton from "@dashboard/components/BackButton";
+import { DashboardModal } from "@dashboard/components/Modal";
 import { commonMessages } from "@dashboard/intl";
 import { DialogProps } from "@dashboard/types";
-import {
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogContentText,
-  DialogTitle,
-} from "@material-ui/core";
-import { makeStyles } from "@saleor/macaw-ui";
-import { Text } from "@saleor/macaw-ui-next";
+import { Box, Text } from "@saleor/macaw-ui-next";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -20,20 +12,6 @@ import {
 } from "../OrderManualTransactionForm";
 import { manualTransactionMessages } from "./messages";
 
-const useStyles = makeStyles(
-  theme => ({
-    form: {
-      display: "contents",
-    },
-    formWrapper: {
-      display: "flex",
-      flexDirection: "column",
-      gap: theme.spacing(2),
-    },
-  }),
-  { name: "OrderManualTransactionDialog" },
-);
-
 type OrderManualTransactionDialogProps = {
   dialogProps: DialogProps;
 } & OrderManualTransactionFormProps;
@@ -43,23 +21,22 @@ export const OrderManualTransactionDialog: React.FC<OrderManualTransactionDialog
   ...props
 }) => {
   const intl = useIntl();
-  const classes = useStyles();
   const { onClose } = dialogProps;
 
   return (
     <OrderManualTransactionForm {...props}>
-      <Dialog onClose={onClose} {...dialogProps} fullWidth maxWidth="xs">
-        <DialogTitle>
-          <Text size={5} fontWeight="bold">
+      <DashboardModal {...dialogProps}>
+        <DashboardModal.Content __width={"400px"}>
+          <DashboardModal.Title display="flex" justifyContent="space-between" alignItems="center">
             <FormattedMessage {...manualTransactionMessages.dialogTitle} />
-          </Text>
-        </DialogTitle>
-        <OrderManualTransactionForm.Form className={classes.form}>
-          <DialogContent>
-            <DialogContentText>
-              <FormattedMessage {...manualTransactionMessages.dialogDescription} />
-            </DialogContentText>
-            <div className={classes.formWrapper}>
+            <DashboardModal.Close onClose={onClose} />
+          </DashboardModal.Title>
+
+          <OrderManualTransactionForm.Form>
+            <Box display="flex" flexDirection="column" gap={4}>
+              <Text size={2}>
+                <FormattedMessage {...manualTransactionMessages.dialogDescription} />
+              </Text>
               <OrderManualTransactionForm.DescriptionField
                 label={intl.formatMessage(commonMessages.description)}
                 fullWidth
@@ -72,19 +49,20 @@ export const OrderManualTransactionDialog: React.FC<OrderManualTransactionDialog
                 label={intl.formatMessage(manualTransactionMessages.transactionAmount)}
               />
               <OrderManualTransactionForm.ErrorText />
-            </div>
-          </DialogContent>
-          <DialogActions>
-            <BackButton onClick={onClose} />
 
-            <OrderManualTransactionForm.SubmitButton size="medium">
-              <Text fontWeight="medium" color="buttonDefaultPrimary">
-                <FormattedMessage {...manualTransactionMessages.submitButton} />
-              </Text>
-            </OrderManualTransactionForm.SubmitButton>
-          </DialogActions>
-        </OrderManualTransactionForm.Form>
-      </Dialog>
+              <DashboardModal.Actions>
+                <BackButton onClick={onClose} />
+
+                <OrderManualTransactionForm.SubmitButton size="medium">
+                  <Text fontWeight="medium" color="buttonDefaultPrimary">
+                    <FormattedMessage {...manualTransactionMessages.submitButton} />
+                  </Text>
+                </OrderManualTransactionForm.SubmitButton>
+              </DashboardModal.Actions>
+            </Box>
+          </OrderManualTransactionForm.Form>
+        </DashboardModal.Content>
+      </DashboardModal>
     </OrderManualTransactionForm>
   );
 };