From bc9e693faae403a1c30c0ea07c9fc9d50c999c8f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Chy=C5=82a?= <pawel.chyla@saleor.io>
Date: Fri, 27 Sep 2024 12:14:17 +0200
Subject: [PATCH 1/7] Introduce modal Header component

---
 src/components/Modal/Header.tsx | 19 +++++++++++++++++++
 src/components/Modal/Title.tsx  |  2 +-
 src/components/Modal/index.ts   |  2 ++
 3 files changed, 22 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Modal/Header.tsx

diff --git a/src/components/Modal/Header.tsx b/src/components/Modal/Header.tsx
new file mode 100644
index 00000000000..617dc8b1298
--- /dev/null
+++ b/src/components/Modal/Header.tsx
@@ -0,0 +1,19 @@
+import { Box } from "@saleor/macaw-ui-next";
+import React, { ReactNode } from "react";
+
+import { Close } from "./Close";
+import { Title, TitleProps } from "./Title";
+
+interface HeaderProps extends TitleProps {
+  children: ReactNode;
+  onClose: () => void;
+}
+
+export const Header = ({ children, onClose, ...rest }: HeaderProps) => {
+  return (
+    <Box display="flex" justifyContent="space-between">
+      <Title {...rest}>{children}</Title>
+      <Close onClose={onClose} />
+    </Box>
+  );
+};
diff --git a/src/components/Modal/Title.tsx b/src/components/Modal/Title.tsx
index 6d335727c6c..c3f34418ca0 100644
--- a/src/components/Modal/Title.tsx
+++ b/src/components/Modal/Title.tsx
@@ -1,7 +1,7 @@
 import { Text, TextProps } from "@saleor/macaw-ui-next";
 import React, { ReactNode } from "react";
 
-interface TitleProps extends TextProps {
+export interface TitleProps extends TextProps {
   children: ReactNode;
 }
 
diff --git a/src/components/Modal/index.ts b/src/components/Modal/index.ts
index fbcb28fd223..0a2cf217007 100644
--- a/src/components/Modal/index.ts
+++ b/src/components/Modal/index.ts
@@ -2,6 +2,7 @@ import { Actions } from "./Actions";
 import { Close } from "./Close";
 import { Content, ContentSize } from "./Content";
 import { Grid } from "./Grid";
+import { Header } from "./Header";
 import { Root } from "./Root";
 import { Title } from "./Title";
 
@@ -13,4 +14,5 @@ export const DashboardModal = Object.assign(Root, {
   Actions,
   Close,
   Grid,
+  Header,
 });

From 42f9ce5fcbfbf95eb2154cee64e6af33bae4e609 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Chy=C5=82a?= <pawel.chyla@saleor.io>
Date: Fri, 27 Sep 2024 12:14:50 +0200
Subject: [PATCH 2/7] Migrate modals to use Header component

---
 src/apps/components/AppDialog/AppDialog.tsx    | 10 ++--------
 .../AppPermissionsDialog.tsx                   |  4 +++-
 .../AttributeValueEditDialog.tsx               |  4 ++--
 src/components/ActionDialog/ActionDialog.tsx   |  2 +-
 .../AssignAttributeDialog.tsx                  |  4 ++--
 .../AssignContainerDialog.tsx                  |  2 +-
 .../AssignProductDialog.tsx                    |  4 ++--
 .../AssignVariantDialog.tsx                    |  4 ++--
 src/components/DevModePanel/DevModePanel.tsx   |  5 ++---
 src/components/DryRun/DryRun.tsx               | 10 ++++------
 src/components/Form/ExitFormDialog.tsx         |  5 ++---
 .../SaveFilterTabDialog.tsx                    |  4 ++--
 .../TypeDeleteWarningDialog.tsx                |  6 ++----
 .../TokenCreateDialog/TokenCreateDialog.tsx    |  4 ++--
 .../CustomerAddressDialog.tsx                  |  4 ++--
 .../DiscountCountrySelectDialog.tsx            |  4 ++--
 .../DiscountDeleteModal.tsx                    |  4 ++--
 .../RuleDeleteModal/RuleDeleteModal.tsx        |  5 ++---
 .../RuleFormModal/RuleFormModal.tsx            |  5 ++---
 .../VoucherCodesDeleteDialog.tsx               |  4 ++--
 .../VoucherCodesGenerateDialog.tsx             |  4 +++-
 .../VoucherCodesManualDialog.tsx               |  4 ++--
 .../GiftCardBulkCreateDialog.tsx               |  4 +++-
 .../GiftCardBulkCreateSuccessDialog.tsx        |  4 ++--
 .../GiftCardCreateDialogContent.tsx            |  4 +++-
 .../GiftCardExportDialogContent.tsx            |  4 ++--
 .../MenuCreateDialog/MenuCreateDialog.tsx      |  4 ++--
 .../MenuItemDialog/MenuItemDialog.tsx          |  4 ++--
 .../OrderCancelDialog/OrderCancelDialog.tsx    |  4 ++--
 .../OrderCannotCancelOrderDialog.tsx           |  4 ++--
 .../OrderChangeWarehouseDialog.tsx             | 12 ++++--------
 .../OrderCustomerAddressesEditDialog.tsx       |  4 ++--
 .../OrderCustomerChangeDialog.tsx              |  4 ++--
 .../OrderFulfillmentApproveDialog.tsx          |  4 ++--
 .../OrderFulfillmentCancelDialog.tsx           |  4 ++--
 .../OrderFulfillmentTrackingDialog.tsx         |  4 ++--
 .../OrderInvoiceEmailSendDialog.tsx            |  4 ++--
 .../OrderManualTransactionDialog.tsx           |  5 ++---
 .../OrderMetadataDialog.tsx                    |  4 ++--
 .../OrderPaymentDialog/OrderPaymentDialog.tsx  |  4 ++--
 .../OrderPaymentVoidDialog.tsx                 |  4 ++--
 .../OrderProductAddDialog.tsx                  |  4 ++--
 .../OrderRefundDialog/OrderRefundDialog.tsx    |  4 ++--
 .../OrderShippingMethodEditDialog.tsx          |  4 ++--
 .../OrderTransactionActionDialog.tsx           |  4 ++--
 .../OrderTransactionReasonModal.tsx            |  5 ++---
 .../PageTypePickerDialog.tsx                   |  4 ++--
 .../AssignMembersDialog.tsx                    |  4 ++--
 .../PluginSecretFieldDialog.tsx                |  4 ++--
 .../ProductExportDialog.tsx                    |  4 ++--
 .../ProductExternalMediaDialog.tsx             |  4 ++--
 .../ProductVariantDeleteDialog.tsx             |  6 +++---
 .../ProductVariantMediaSelectDialog.tsx        |  4 ++--
 .../ShippingMethodProductsAddDialog.tsx        |  4 ++--
 .../ShippingWeightUnitDialog.tsx               | 18 +++++++-----------
 .../ShippingZoneAddWarehouseDialog.tsx         |  4 ++--
 .../ShippingZoneCountriesAssignDialog.tsx      |  4 ++--
 .../ShippingZonePostalCodeRangeDialog.tsx      |  4 ++--
 .../StaffAddMemberDialog.tsx                   |  4 ++--
 .../StaffPasswordResetDialog.tsx               |  4 ++--
 .../TaxCountryDialog/TaxCountryDialog.tsx      |  5 ++---
 61 files changed, 134 insertions(+), 151 deletions(-)

diff --git a/src/apps/components/AppDialog/AppDialog.tsx b/src/apps/components/AppDialog/AppDialog.tsx
index c79af3ad4b5..9f03d5d7920 100644
--- a/src/apps/components/AppDialog/AppDialog.tsx
+++ b/src/apps/components/AppDialog/AppDialog.tsx
@@ -12,15 +12,9 @@ export const AppDialog: React.FC<AppDialogProps> = ({ children, title, onClose,
   return (
     <DashboardModal aria-labelledby="extension app dialog" {...props} onChange={onClose}>
       <DashboardModal.Content size="lg">
-        <DashboardModal.Title
-          display="flex"
-          justifyContent="space-between"
-          alignItems="center"
-          as="h2"
-        >
+        <DashboardModal.Header onClose={onClose} as="h2">
           {title}
-          <DashboardModal.Close onClose={onClose}></DashboardModal.Close>
-        </DashboardModal.Title>
+        </DashboardModal.Header>
         <Box width="100%" __height={600}>
           {children}
         </Box>
diff --git a/src/apps/components/AppPermissionsDialog/AppPermissionsDialog.tsx b/src/apps/components/AppPermissionsDialog/AppPermissionsDialog.tsx
index ae22228eb7c..b08d684560d 100644
--- a/src/apps/components/AppPermissionsDialog/AppPermissionsDialog.tsx
+++ b/src/apps/components/AppPermissionsDialog/AppPermissionsDialog.tsx
@@ -111,7 +111,9 @@ export const AppPermissionsDialog = ({
   return (
     <DashboardModal open={true} onChange={onClose}>
       <DashboardModal.Content size="sm">
-        <DashboardModal.Title>{formatMessage(messages.heading)}</DashboardModal.Title>
+        <DashboardModal.Header onClose={onClose}>
+          {formatMessage(messages.heading)}
+        </DashboardModal.Header>
         <Box display={"grid"} gridAutoFlow={"row"}>
           <Text as={"p"}>{formatMessage(messages.info)}</Text>
           <Box
diff --git a/src/attributes/components/AttributeValueEditDialog/AttributeValueEditDialog.tsx b/src/attributes/components/AttributeValueEditDialog/AttributeValueEditDialog.tsx
index d15683b48c9..b751337e137 100644
--- a/src/attributes/components/AttributeValueEditDialog/AttributeValueEditDialog.tsx
+++ b/src/attributes/components/AttributeValueEditDialog/AttributeValueEditDialog.tsx
@@ -52,7 +52,7 @@ const AttributeValueEditDialog: React.FC<AttributeValueEditDialogProps> = ({
         <Form initial={initialForm} onSubmit={onSubmit}>
           {({ errors, set, change, clearErrors, setError, data, submit }) => (
             <DashboardModal.Grid>
-              <DashboardModal.Title>
+              <DashboardModal.Header onClose={onClose}>
                 {attributeValue === null ? (
                   <FormattedMessage
                     id="PqMbma"
@@ -66,7 +66,7 @@ const AttributeValueEditDialog: React.FC<AttributeValueEditDialogProps> = ({
                     description="edit attribute value"
                   />
                 )}
-              </DashboardModal.Title>
+              </DashboardModal.Header>
 
               <TextField
                 data-test-id="value-name"
diff --git a/src/components/ActionDialog/ActionDialog.tsx b/src/components/ActionDialog/ActionDialog.tsx
index 396ff400014..19d81953f89 100644
--- a/src/components/ActionDialog/ActionDialog.tsx
+++ b/src/components/ActionDialog/ActionDialog.tsx
@@ -39,7 +39,7 @@ const ActionDialog = ({
   return (
     <DashboardModal onChange={onClose} open={open}>
       <DashboardModal.Content size={size}>
-        <DashboardModal.Title>{title}</DashboardModal.Title>
+        <DashboardModal.Header onClose={onClose}>{title}</DashboardModal.Header>
         <Box fontSize={3}>{children}</Box>
         <DashboardModal.Actions>
           <BackButton onClick={onClose}>{backButtonText}</BackButton>
diff --git a/src/components/AssignAttributeDialog/AssignAttributeDialog.tsx b/src/components/AssignAttributeDialog/AssignAttributeDialog.tsx
index 68d52fac640..9845afd5c4e 100644
--- a/src/components/AssignAttributeDialog/AssignAttributeDialog.tsx
+++ b/src/components/AssignAttributeDialog/AssignAttributeDialog.tsx
@@ -82,9 +82,9 @@ const AssignAttributeDialog: React.FC<AssignAttributeDialogProps> = ({
   return (
     <DashboardModal onChange={onClose} open={open}>
       <DashboardModal.Content size="sm" __gridTemplateRows="auto auto 1fr auto auto">
-        <DashboardModal.Title>
+        <DashboardModal.Header onClose={onClose}>
           <FormattedMessage {...messages.title} />
-        </DashboardModal.Title>
+        </DashboardModal.Header>
 
         <TextField
           data-test-id="attribute-search-input"
diff --git a/src/components/AssignContainerDialog/AssignContainerDialog.tsx b/src/components/AssignContainerDialog/AssignContainerDialog.tsx
index 5915a0fa8ac..6c207d05d72 100644
--- a/src/components/AssignContainerDialog/AssignContainerDialog.tsx
+++ b/src/components/AssignContainerDialog/AssignContainerDialog.tsx
@@ -75,7 +75,7 @@ const AssignContainerDialog: React.FC<AssignContainerDialogProps> = props => {
   return (
     <DashboardModal onChange={handleClose} open={open}>
       <DashboardModal.Content size="sm" __gridTemplateRows="auto auto 1fr auto">
-        <DashboardModal.Title>{labels.title}</DashboardModal.Title>
+        <DashboardModal.Header onClose={onClose}>{labels.title}</DashboardModal.Header>
 
         <TextField
           name="query"
diff --git a/src/components/AssignProductDialog/AssignProductDialog.tsx b/src/components/AssignProductDialog/AssignProductDialog.tsx
index 967a55f2bb0..613f4d6b983 100644
--- a/src/components/AssignProductDialog/AssignProductDialog.tsx
+++ b/src/components/AssignProductDialog/AssignProductDialog.tsx
@@ -107,9 +107,9 @@ const AssignProductDialog: React.FC<AssignProductDialogProps> = props => {
   return (
     <DashboardModal onChange={handleClose} open={open}>
       <DashboardModal.Content size="sm" __gridTemplateRows="auto auto 1fr auto">
-        <DashboardModal.Title>
+        <DashboardModal.Header onClose={onClose}>
           <FormattedMessage {...messages.assignVariantDialogHeader} />
-        </DashboardModal.Title>
+        </DashboardModal.Header>
 
         <TextField
           name="query"
diff --git a/src/components/AssignVariantDialog/AssignVariantDialog.tsx b/src/components/AssignVariantDialog/AssignVariantDialog.tsx
index 16b6583a26d..81660c8919d 100644
--- a/src/components/AssignVariantDialog/AssignVariantDialog.tsx
+++ b/src/components/AssignVariantDialog/AssignVariantDialog.tsx
@@ -84,9 +84,9 @@ const AssignVariantDialog: React.FC<AssignVariantDialogProps> = props => {
   return (
     <DashboardModal onChange={handleClose} open={open}>
       <DashboardModal.Content size="sm" __gridTemplateRows="auto auto 1fr auto">
-        <DashboardModal.Title>
+        <DashboardModal.Header onClose={onClose}>
           <FormattedMessage {...messages.assignVariantDialogHeader} />
-        </DashboardModal.Title>
+        </DashboardModal.Header>
 
         <TextField
           name="query"
diff --git a/src/components/DevModePanel/DevModePanel.tsx b/src/components/DevModePanel/DevModePanel.tsx
index 3bf057ddb73..77ec78390d9 100644
--- a/src/components/DevModePanel/DevModePanel.tsx
+++ b/src/components/DevModePanel/DevModePanel.tsx
@@ -36,10 +36,9 @@ export const DevModePanel: React.FC = () => {
     <DashboardModal open={isDevModeVisible} onChange={() => setDevModeVisibility(false)}>
       <DashboardModal.Content size="xl" __gridTemplateRows="auto 1fr" height="100%">
         <style dangerouslySetInnerHTML={overwriteCodeMirrorCSSVariables}></style>
-        <DashboardModal.Title display="flex" justifyContent="space-between">
+        <DashboardModal.Header onClose={() => setDevModeVisibility(false)}>
           {intl.formatMessage(messages.title)}
-          <DashboardModal.Close onClose={() => setDevModeVisibility(false)} />
-        </DashboardModal.Title>
+        </DashboardModal.Header>
 
         <PlainGraphiQL query={devModeContent} variables={variables} fetcher={fetcher} />
       </DashboardModal.Content>
diff --git a/src/components/DryRun/DryRun.tsx b/src/components/DryRun/DryRun.tsx
index f3965f02d8c..a9ef6f186f9 100644
--- a/src/components/DryRun/DryRun.tsx
+++ b/src/components/DryRun/DryRun.tsx
@@ -69,10 +69,9 @@ const DryRun: React.FC<DryRunProps> = ({
     return (
       <DashboardModal onChange={closeDialog} open={showDialog}>
         <DashboardModal.Content size="lg" data-test-id="dry-run">
-          <DashboardModal.Title display="flex" justifyContent="space-between">
+          <DashboardModal.Header onClose={closeDialog}>
             {intl.formatMessage(messages.header)}
-            <DashboardModal.Close onClose={closeDialog} />
-          </DashboardModal.Title>
+          </DashboardModal.Header>
 
           <Alert variant="error" close={false}>
             <Text>{intl.formatMessage(messages.unavailableSyncEvents)}</Text>
@@ -85,10 +84,9 @@ const DryRun: React.FC<DryRunProps> = ({
   return (
     <DashboardModal onChange={closeDialog} open={showDialog}>
       <DashboardModal.Content size="lg" data-test-id="dry-run">
-        <DashboardModal.Title display="flex" justifyContent="space-between">
+        <DashboardModal.Header onClose={closeDialog}>
           {intl.formatMessage(messages.header)}
-          <DashboardModal.Close onClose={closeDialog} />
-        </DashboardModal.Title>
+        </DashboardModal.Header>
 
         <Text>{intl.formatMessage(messages.selectObject)}</Text>
 
diff --git a/src/components/Form/ExitFormDialog.tsx b/src/components/Form/ExitFormDialog.tsx
index 1589fc605b5..7a8849480c0 100644
--- a/src/components/Form/ExitFormDialog.tsx
+++ b/src/components/Form/ExitFormDialog.tsx
@@ -18,10 +18,9 @@ const ExitFormDialog: React.FC<ExitFormDialogProps> = ({ onLeave, onClose, isOpe
   return (
     <DashboardModal open={isOpen} onChange={onClose}>
       <DashboardModal.Content size="sm">
-        <DashboardModal.Title display="flex" justifyContent="space-between">
+        <DashboardModal.Header onClose={onClose}>
           {intl.formatMessage(messages.unableToSaveTitle)}
-          <DashboardModal.Close onClose={onClose} />
-        </DashboardModal.Title>
+        </DashboardModal.Header>
 
         <DashboardModal.Actions>
           <BackButton onClick={onClose}>{intl.formatMessage(messages.keepEditing)}</BackButton>
diff --git a/src/components/SaveFilterTabDialog/SaveFilterTabDialog.tsx b/src/components/SaveFilterTabDialog/SaveFilterTabDialog.tsx
index 10ad42860ce..37c5d818da9 100644
--- a/src/components/SaveFilterTabDialog/SaveFilterTabDialog.tsx
+++ b/src/components/SaveFilterTabDialog/SaveFilterTabDialog.tsx
@@ -47,13 +47,13 @@ const SaveFilterTabDialog: React.FC<SaveFilterTabDialogProps> = ({
         <Form initial={initialForm} onSubmit={handleErrors}>
           {({ change, data, submit }) => (
             <DashboardModal.Grid>
-              <DashboardModal.Title>
+              <DashboardModal.Header onClose={onClose}>
                 <FormattedMessage
                   id="P9YktI"
                   defaultMessage="Save view preset"
                   description="save preset, header"
                 />
-              </DashboardModal.Title>
+              </DashboardModal.Header>
 
               <TextField
                 autoFocus
diff --git a/src/components/TypeDeleteWarningDialog/TypeDeleteWarningDialog.tsx b/src/components/TypeDeleteWarningDialog/TypeDeleteWarningDialog.tsx
index 97f8b536d49..2c1ea3036b0 100644
--- a/src/components/TypeDeleteWarningDialog/TypeDeleteWarningDialog.tsx
+++ b/src/components/TypeDeleteWarningDialog/TypeDeleteWarningDialog.tsx
@@ -86,13 +86,11 @@ function TypeDeleteWarningDialog<T extends TypeBaseData>({
   return (
     <DashboardModal open={isOpen} onChange={onClose}>
       <DashboardModal.Content size="sm">
-        <DashboardModal.Title display="flex" justifyContent="space-between" alignItems="center">
+        <DashboardModal.Header onClose={onClose}>
           {intl.formatMessage(baseMessages.title, {
             selectedTypesCount: typesToDelete.length,
           })}
-
-          <DashboardModal.Close onClose={onClose} />
-        </DashboardModal.Title>
+        </DashboardModal.Header>
 
         {isLoading ? (
           <Box display="flex" width="100%" justifyContent="center" paddingY={10}>
diff --git a/src/custom-apps/components/TokenCreateDialog/TokenCreateDialog.tsx b/src/custom-apps/components/TokenCreateDialog/TokenCreateDialog.tsx
index 6990828d6e3..bbbe7565482 100644
--- a/src/custom-apps/components/TokenCreateDialog/TokenCreateDialog.tsx
+++ b/src/custom-apps/components/TokenCreateDialog/TokenCreateDialog.tsx
@@ -61,9 +61,9 @@ const TokenCreateDialog: React.FC<TokenCreateDialogProps> = props => {
         <Form initial={{ name: "" }} onSubmit={data => onCreate(data.name)}>
           {({ change, data, submit }) => (
             <DashboardModal.Grid>
-              <DashboardModal.Title>
+              <DashboardModal.Header onClose={onClose}>
                 <FormattedMessage id="T5nU7u" defaultMessage="Create Token" description="header" />
-              </DashboardModal.Title>
+              </DashboardModal.Header>
 
               {step === "form" ? (
                 <>
diff --git a/src/customers/components/CustomerAddressDialog/CustomerAddressDialog.tsx b/src/customers/components/CustomerAddressDialog/CustomerAddressDialog.tsx
index da5eb20ef81..5d5b11004fa 100644
--- a/src/customers/components/CustomerAddressDialog/CustomerAddressDialog.tsx
+++ b/src/customers/components/CustomerAddressDialog/CustomerAddressDialog.tsx
@@ -82,7 +82,7 @@ const CustomerAddressDialog: React.FC<CustomerAddressDialogProps> = ({
 
             return (
               <DashboardModal.Grid>
-                <DashboardModal.Title>
+                <DashboardModal.Header onClose={onClose}>
                   {variant === "create" ? (
                     <FormattedMessage
                       id="W0kQd+"
@@ -96,7 +96,7 @@ const CustomerAddressDialog: React.FC<CustomerAddressDialogProps> = ({
                       description="dialog title"
                     />
                   )}
-                </DashboardModal.Title>
+                </DashboardModal.Header>
 
                 <AddressEdit
                   countries={countryChoices}
diff --git a/src/discounts/components/DiscountCountrySelectDialog/DiscountCountrySelectDialog.tsx b/src/discounts/components/DiscountCountrySelectDialog/DiscountCountrySelectDialog.tsx
index 4897486b9ce..01976467c78 100644
--- a/src/discounts/components/DiscountCountrySelectDialog/DiscountCountrySelectDialog.tsx
+++ b/src/discounts/components/DiscountCountrySelectDialog/DiscountCountrySelectDialog.tsx
@@ -62,13 +62,13 @@ const DiscountCountrySelectDialog: React.FC<DiscountCountrySelectDialogProps> =
                 __gridTemplateRows="auto auto auto auto auto 1fr auto"
                 height="100%"
               >
-                <DashboardModal.Title>
+                <DashboardModal.Header onClose={onClose}>
                   <FormattedMessage
                     id="cvVIV/"
                     defaultMessage="Assign Countries"
                     description="dialog header"
                   />
-                </DashboardModal.Title>
+                </DashboardModal.Header>
 
                 <Text>
                   <FormattedMessage
diff --git a/src/discounts/components/DiscountDeleteModal/DiscountDeleteModal.tsx b/src/discounts/components/DiscountDeleteModal/DiscountDeleteModal.tsx
index 52663812c6a..a9ef3abeec2 100644
--- a/src/discounts/components/DiscountDeleteModal/DiscountDeleteModal.tsx
+++ b/src/discounts/components/DiscountDeleteModal/DiscountDeleteModal.tsx
@@ -21,9 +21,9 @@ export const DiscountDeleteModal = ({
   return (
     <DashboardModal open={open} onChange={onChange}>
       <DashboardModal.Content size="xs">
-        <DashboardModal.Title>
+        <DashboardModal.Header onClose={onChange}>
           <FormattedMessage defaultMessage="Delete discount" id="ZrIt1W" />
-        </DashboardModal.Title>
+        </DashboardModal.Header>
 
         <Text>
           <FormattedMessage
diff --git a/src/discounts/components/DiscountRules/componenets/RuleDeleteModal/RuleDeleteModal.tsx b/src/discounts/components/DiscountRules/componenets/RuleDeleteModal/RuleDeleteModal.tsx
index 012abd8fd4f..293fe1b0d69 100644
--- a/src/discounts/components/DiscountRules/componenets/RuleDeleteModal/RuleDeleteModal.tsx
+++ b/src/discounts/components/DiscountRules/componenets/RuleDeleteModal/RuleDeleteModal.tsx
@@ -25,10 +25,9 @@ export const RuleDeleteModal = ({
   return (
     <DashboardModal open={open} onChange={onClose}>
       <DashboardModal.Content size="xs" data-test-id="delete-rule-dialog">
-        <DashboardModal.Title display="flex" justifyContent="space-between" alignItems="center">
+        <DashboardModal.Header onClose={onClose}>
           {intl.formatMessage(messages.deleteRule)}
-          <DashboardModal.Close onClose={onClose} />
-        </DashboardModal.Title>
+        </DashboardModal.Header>
 
         <Text>
           <FormattedMessage {...messages.deleteRuleDescription} />
diff --git a/src/discounts/components/DiscountRules/componenets/RuleFormModal/RuleFormModal.tsx b/src/discounts/components/DiscountRules/componenets/RuleFormModal/RuleFormModal.tsx
index 31d3d501e42..38b9570f1f3 100644
--- a/src/discounts/components/DiscountRules/componenets/RuleFormModal/RuleFormModal.tsx
+++ b/src/discounts/components/DiscountRules/componenets/RuleFormModal/RuleFormModal.tsx
@@ -39,10 +39,9 @@ export const RuleFormModal = ({
   return (
     <DashboardModal open={true} onChange={onClose}>
       <DashboardModal.Content size="sm" data-test-id="add-rule-dialog">
-        <DashboardModal.Title display="flex" justifyContent="space-between" alignItems="center">
+        <DashboardModal.Header onClose={onClose}>
           <FormattedMessage {...(initialFormValues ? messages.editRule : messages.addRule)} />
-          <DashboardModal.Close onClose={onClose} />
-        </DashboardModal.Title>
+        </DashboardModal.Header>
         <FormProvider {...methods}>
           <form onSubmit={methods.handleSubmit(onSubmit)}>{children}</form>
         </FormProvider>
diff --git a/src/discounts/components/VoucherCodesDeleteDialog/VoucherCodesDeleteDialog.tsx b/src/discounts/components/VoucherCodesDeleteDialog/VoucherCodesDeleteDialog.tsx
index 58f42296cb8..eb8a1ef694d 100644
--- a/src/discounts/components/VoucherCodesDeleteDialog/VoucherCodesDeleteDialog.tsx
+++ b/src/discounts/components/VoucherCodesDeleteDialog/VoucherCodesDeleteDialog.tsx
@@ -24,9 +24,9 @@ export const VoucherCodesDeleteDialog = ({
   return (
     <DashboardModal open={open} onChange={onClose}>
       <DashboardModal.Content size="xs">
-        <DashboardModal.Title>
+        <DashboardModal.Header onClose={onClose}>
           <FormattedMessage id="WMN0q+" defaultMessage="Delete voucher codes" />
-        </DashboardModal.Title>
+        </DashboardModal.Header>
 
         <Text as="p">
           <FormattedMessage
diff --git a/src/discounts/components/VoucherCodesGenerateDialog/VoucherCodesGenerateDialog.tsx b/src/discounts/components/VoucherCodesGenerateDialog/VoucherCodesGenerateDialog.tsx
index 785b55b1fe6..aa7f330860b 100644
--- a/src/discounts/components/VoucherCodesGenerateDialog/VoucherCodesGenerateDialog.tsx
+++ b/src/discounts/components/VoucherCodesGenerateDialog/VoucherCodesGenerateDialog.tsx
@@ -57,7 +57,9 @@ export const VoucherCodesGenerateDialog = ({
   return (
     <DashboardModal open={open} onChange={handleModalClose}>
       <DashboardModal.Content size="xs">
-        <DashboardModal.Title>{intl.formatMessage(messages.title)}</DashboardModal.Title>
+        <DashboardModal.Header onClose={onClose}>
+          {intl.formatMessage(messages.title)}
+        </DashboardModal.Header>
         <Box display="grid" gap={3} __width={390}>
           <Input
             name="quantity"
diff --git a/src/discounts/components/VoucherCodesManualDialog/VoucherCodesManualDialog.tsx b/src/discounts/components/VoucherCodesManualDialog/VoucherCodesManualDialog.tsx
index 9c845512285..9d9c461cfaf 100644
--- a/src/discounts/components/VoucherCodesManualDialog/VoucherCodesManualDialog.tsx
+++ b/src/discounts/components/VoucherCodesManualDialog/VoucherCodesManualDialog.tsx
@@ -45,9 +45,9 @@ export const VoucherCodesManualDialog = ({
   return (
     <DashboardModal open={open} onChange={handleModalClose}>
       <DashboardModal.Content size="xs">
-        <DashboardModal.Title>
+        <DashboardModal.Header onClose={onClose}>
           <FormattedMessage defaultMessage="Enter Voucher Code" id="giVGCH" />
-        </DashboardModal.Title>
+        </DashboardModal.Header>
         <Box display="grid" gap={3} __width={390}>
           <Input
             data-test-id="enter-code-input"
diff --git a/src/giftCards/GiftCardBulkCreateDialog/GiftCardBulkCreateDialog.tsx b/src/giftCards/GiftCardBulkCreateDialog/GiftCardBulkCreateDialog.tsx
index c2645dab02f..06d76b52235 100644
--- a/src/giftCards/GiftCardBulkCreateDialog/GiftCardBulkCreateDialog.tsx
+++ b/src/giftCards/GiftCardBulkCreateDialog/GiftCardBulkCreateDialog.tsx
@@ -109,7 +109,9 @@ const GiftCardBulkCreateDialog: React.FC<DialogProps> = ({ onClose, open }) => {
     <>
       <DashboardModal open={open} onChange={onClose}>
         <DashboardModal.Content size="sm">
-          <DashboardModal.Title>{intl.formatMessage(messages.title)}</DashboardModal.Title>
+          <DashboardModal.Header onClose={onClose}>
+            {intl.formatMessage(messages.title)}
+          </DashboardModal.Header>
           <ContentWithProgress>
             {!loadingChannelCurrencies && (
               <GiftCardBulkCreateDialogForm
diff --git a/src/giftCards/GiftCardCreateDialog/GiftCardBulkCreateSuccessDialog.tsx b/src/giftCards/GiftCardCreateDialog/GiftCardBulkCreateSuccessDialog.tsx
index 1052e065c0b..583c8d5260c 100644
--- a/src/giftCards/GiftCardCreateDialog/GiftCardBulkCreateSuccessDialog.tsx
+++ b/src/giftCards/GiftCardCreateDialog/GiftCardBulkCreateSuccessDialog.tsx
@@ -27,9 +27,9 @@ const GiftCardBulkCreateSuccessDialog: React.FC<GiftCardBulkCreateSuccessDialogP
     <>
       <DashboardModal open={open} onChange={onClose}>
         <DashboardModal.Content size="sm">
-          <DashboardModal.Title>
+          <DashboardModal.Header onClose={onClose}>
             {intl.formatMessage(messages.bulkCreateIssuedTitle)}
-          </DashboardModal.Title>
+          </DashboardModal.Header>
 
           <Text>{intl.formatMessage(messages.bulkCreateIssuedExplanation)}</Text>
 
diff --git a/src/giftCards/GiftCardCreateDialog/GiftCardCreateDialogContent.tsx b/src/giftCards/GiftCardCreateDialog/GiftCardCreateDialogContent.tsx
index 070ca314457..fffaf608c8d 100644
--- a/src/giftCards/GiftCardCreateDialog/GiftCardCreateDialogContent.tsx
+++ b/src/giftCards/GiftCardCreateDialog/GiftCardCreateDialogContent.tsx
@@ -78,7 +78,9 @@ const GiftCardCreateDialogContent: React.FC<GiftCardCreateDialogContentProps> =
 
   return (
     <DashboardModal.Content size="sm" data-test-id="gift-card-dialog">
-      <DashboardModal.Title>{intl.formatMessage(messages.title)}</DashboardModal.Title>
+      <DashboardModal.Header onClose={onClose}>
+        {intl.formatMessage(messages.title)}
+      </DashboardModal.Header>
       {cardCode ? (
         <GiftCardCreateDialogCodeContent cardCode={cardCode} onClose={handleClose} />
       ) : (
diff --git a/src/giftCards/GiftCardExportDialogContent/GiftCardExportDialogContent.tsx b/src/giftCards/GiftCardExportDialogContent/GiftCardExportDialogContent.tsx
index 270e5b2d80c..099184789e2 100644
--- a/src/giftCards/GiftCardExportDialogContent/GiftCardExportDialogContent.tsx
+++ b/src/giftCards/GiftCardExportDialogContent/GiftCardExportDialogContent.tsx
@@ -97,9 +97,9 @@ const GiftCardExportDialog: React.FC<
 
   return (
     <DashboardModal.Content size="sm">
-      <DashboardModal.Title>
+      <DashboardModal.Header onClose={onClose}>
         <FormattedMessage {...messages.title} />
-      </DashboardModal.Title>
+      </DashboardModal.Header>
 
       <ContentWithProgress>
         {!loading && (
diff --git a/src/navigation/components/MenuCreateDialog/MenuCreateDialog.tsx b/src/navigation/components/MenuCreateDialog/MenuCreateDialog.tsx
index 17421a42c50..8d5a677d2c4 100644
--- a/src/navigation/components/MenuCreateDialog/MenuCreateDialog.tsx
+++ b/src/navigation/components/MenuCreateDialog/MenuCreateDialog.tsx
@@ -44,13 +44,13 @@ const MenuCreateDialog: React.FC<MenuCreateDialogProps> = ({
         <Form initial={initialForm} onSubmit={onConfirm}>
           {({ change, data, submit }) => (
             <Box display="grid" gap={6}>
-              <DashboardModal.Title data-test-id="create-menu-dialog-title">
+              <DashboardModal.Header onClose={onClose} data-test-id="create-menu-dialog-title">
                 <FormattedMessage
                   id="0OtaXa"
                   defaultMessage="Create Menu"
                   description="dialog header"
                 />
-              </DashboardModal.Title>
+              </DashboardModal.Header>
 
               <TextField
                 data-test-id="menu-name-input"
diff --git a/src/navigation/components/MenuItemDialog/MenuItemDialog.tsx b/src/navigation/components/MenuItemDialog/MenuItemDialog.tsx
index 2f2416e405d..2fbd6f4af9b 100644
--- a/src/navigation/components/MenuItemDialog/MenuItemDialog.tsx
+++ b/src/navigation/components/MenuItemDialog/MenuItemDialog.tsx
@@ -98,7 +98,7 @@ const MenuItemDialog: React.FC<MenuItemDialogProps> = ({
       <DashboardModal.Content size="sm">
         <form onSubmit={handleSubmit(onSubmit)}>
           <DashboardModal.Grid>
-            <DashboardModal.Title data-test-id="add-menu-item-dialog-title">
+            <DashboardModal.Header onClose={onClose} data-test-id="add-menu-item-dialog-title">
               {initial
                 ? intl.formatMessage({
                     id: "KKQUMK",
@@ -110,7 +110,7 @@ const MenuItemDialog: React.FC<MenuItemDialogProps> = ({
                     defaultMessage: "Add Item",
                     description: "create new menu item, header",
                   })}
-            </DashboardModal.Title>
+            </DashboardModal.Header>
 
             <Controller
               control={control}
diff --git a/src/orders/components/OrderCancelDialog/OrderCancelDialog.tsx b/src/orders/components/OrderCancelDialog/OrderCancelDialog.tsx
index b570201cb71..6e6974231c9 100644
--- a/src/orders/components/OrderCancelDialog/OrderCancelDialog.tsx
+++ b/src/orders/components/OrderCancelDialog/OrderCancelDialog.tsx
@@ -34,9 +34,9 @@ export const OrderCancelDialog: React.FC<OrderCancelDialogProps> = props => {
   return (
     <DashboardModal onChange={onClose} open={open}>
       <DashboardModal.Content size="sm">
-        <DashboardModal.Title data-test-id="dialog-title">
+        <DashboardModal.Header onClose={onClose} data-test-id="dialog-title">
           <FormattedMessage {...cancelOrderDialogMessages.dialogTitle} values={{ orderNumber }} />
-        </DashboardModal.Title>
+        </DashboardModal.Header>
         <Text>
           <FormattedMessage
             {...cancelOrderDialogMessages.dialogContent}
diff --git a/src/orders/components/OrderCannotCancelOrderDialog/OrderCannotCancelOrderDialog.tsx b/src/orders/components/OrderCannotCancelOrderDialog/OrderCannotCancelOrderDialog.tsx
index 5734cc952f0..121e84aca32 100644
--- a/src/orders/components/OrderCannotCancelOrderDialog/OrderCannotCancelOrderDialog.tsx
+++ b/src/orders/components/OrderCannotCancelOrderDialog/OrderCannotCancelOrderDialog.tsx
@@ -9,13 +9,13 @@ const OrderCannotCancelOrderDialog: React.FC<DialogProps> = ({ open, onClose })
   return (
     <DashboardModal onChange={onClose} open={open}>
       <DashboardModal.Content size="sm">
-        <DashboardModal.Title>
+        <DashboardModal.Header onClose={onClose}>
           <FormattedMessage
             id="NhQboB"
             defaultMessage="Saleor couldn’t cancel order"
             description="dialog header"
           />
-        </DashboardModal.Title>
+        </DashboardModal.Header>
 
         <Text>
           <FormattedMessage
diff --git a/src/orders/components/OrderChangeWarehouseDialog/OrderChangeWarehouseDialog.tsx b/src/orders/components/OrderChangeWarehouseDialog/OrderChangeWarehouseDialog.tsx
index b53aee503a7..050574c08df 100644
--- a/src/orders/components/OrderChangeWarehouseDialog/OrderChangeWarehouseDialog.tsx
+++ b/src/orders/components/OrderChangeWarehouseDialog/OrderChangeWarehouseDialog.tsx
@@ -84,13 +84,9 @@ export const OrderChangeWarehouseDialog: React.FC<OrderChangeWarehouseDialogProp
   return (
     <DashboardModal open={open} onChange={onClose}>
       <DashboardModal.Content size="sm" __gridTemplateRows="auto auto auto auto 1fr">
-        <DashboardModal.Title>
-          <Box display="flex" justifyContent="space-between">
-            <FormattedMessage {...messages.dialogTitle} />
-            <DashboardModal.Close onClose={onClose} />
-          </Box>
-
-          <Text size={3}>
+        <DashboardModal.Header onClose={onClose}>
+          <FormattedMessage {...messages.dialogTitle} />
+          <Text size={3} display="block">
             <FormattedMessage
               {...messages.dialogDescription}
               values={{
@@ -98,7 +94,7 @@ export const OrderChangeWarehouseDialog: React.FC<OrderChangeWarehouseDialogProp
               }}
             />
           </Text>
-        </DashboardModal.Title>
+        </DashboardModal.Header>
 
         <Debounce debounceFn={search}>
           {debounceSearchChange => {
diff --git a/src/orders/components/OrderCustomerAddressesEditDialog/OrderCustomerAddressesEditDialog.tsx b/src/orders/components/OrderCustomerAddressesEditDialog/OrderCustomerAddressesEditDialog.tsx
index 6dc3c0a1d3f..628b76c1fac 100644
--- a/src/orders/components/OrderCustomerAddressesEditDialog/OrderCustomerAddressesEditDialog.tsx
+++ b/src/orders/components/OrderCustomerAddressesEditDialog/OrderCustomerAddressesEditDialog.tsx
@@ -253,9 +253,9 @@ const OrderCustomerAddressesEditDialog: React.FC<OrderCustomerAddressesEditDialo
 
             return (
               <DashboardModal.Grid>
-                <DashboardModal.Title>
+                <DashboardModal.Header onClose={onClose}>
                   <FormattedMessage {...getDialogTitle()} />
-                </DashboardModal.Title>
+                </DashboardModal.Header>
 
                 {addressSearchState.open ? (
                   <OrderCustomerAddressesSearch
diff --git a/src/orders/components/OrderCustomerChangeDialog/OrderCustomerChangeDialog.tsx b/src/orders/components/OrderCustomerChangeDialog/OrderCustomerChangeDialog.tsx
index 5f917d3cef0..256868bfd61 100644
--- a/src/orders/components/OrderCustomerChangeDialog/OrderCustomerChangeDialog.tsx
+++ b/src/orders/components/OrderCustomerChangeDialog/OrderCustomerChangeDialog.tsx
@@ -27,9 +27,9 @@ const OrderCustomerChangeDialog: React.FC<OrderCustomerChangeDialogProps> = prop
         <OrderCustomerChangeForm onSubmit={onConfirm}>
           {({ change, data }) => (
             <Box display="grid" gap={6}>
-              <DashboardModal.Title>
+              <DashboardModal.Header onClose={onClose}>
                 <FormattedMessage {...messages.title} />
-              </DashboardModal.Title>
+              </DashboardModal.Header>
               <Text>
                 <FormattedMessage {...messages.description} />
               </Text>
diff --git a/src/orders/components/OrderFulfillmentApproveDialog/OrderFulfillmentApproveDialog.tsx b/src/orders/components/OrderFulfillmentApproveDialog/OrderFulfillmentApproveDialog.tsx
index d3c18068202..8dfc5911cb5 100644
--- a/src/orders/components/OrderFulfillmentApproveDialog/OrderFulfillmentApproveDialog.tsx
+++ b/src/orders/components/OrderFulfillmentApproveDialog/OrderFulfillmentApproveDialog.tsx
@@ -35,9 +35,9 @@ const OrderFulfillmentApproveDialog: React.FC<OrderFulfillmentAcceptDialogProps>
         <Form initial={{ notifyCustomer: true }} onSubmit={onConfirm}>
           {({ change, data, submit }) => (
             <DashboardModal.Grid>
-              <DashboardModal.Title>
+              <DashboardModal.Header onClose={onClose}>
                 <FormattedMessage {...messages.title} />
-              </DashboardModal.Title>
+              </DashboardModal.Header>
 
               <Text>
                 <FormattedMessage {...messages.description} />
diff --git a/src/orders/components/OrderFulfillmentCancelDialog/OrderFulfillmentCancelDialog.tsx b/src/orders/components/OrderFulfillmentCancelDialog/OrderFulfillmentCancelDialog.tsx
index 03639f2777f..8d19dcaa03a 100644
--- a/src/orders/components/OrderFulfillmentCancelDialog/OrderFulfillmentCancelDialog.tsx
+++ b/src/orders/components/OrderFulfillmentCancelDialog/OrderFulfillmentCancelDialog.tsx
@@ -63,13 +63,13 @@ const OrderFulfillmentCancelDialog: React.FC<OrderFulfillmentCancelDialogProps>
 
           return (
             <DashboardModal.Content size="sm">
-              <DashboardModal.Title>
+              <DashboardModal.Header onClose={onClose}>
                 <FormattedMessage
                   id="bb4nSp"
                   defaultMessage="Cancel Fulfillment"
                   description="dialog header"
                 />
-              </DashboardModal.Title>
+              </DashboardModal.Header>
 
               <Text>
                 <FormattedMessage
diff --git a/src/orders/components/OrderFulfillmentTrackingDialog/OrderFulfillmentTrackingDialog.tsx b/src/orders/components/OrderFulfillmentTrackingDialog/OrderFulfillmentTrackingDialog.tsx
index 0a1211edaf7..e1714fc994a 100644
--- a/src/orders/components/OrderFulfillmentTrackingDialog/OrderFulfillmentTrackingDialog.tsx
+++ b/src/orders/components/OrderFulfillmentTrackingDialog/OrderFulfillmentTrackingDialog.tsx
@@ -48,13 +48,13 @@ const OrderFulfillmentTrackingDialog: React.FC<OrderFulfillmentTrackingDialogPro
         <Form initial={initialData} onSubmit={onConfirm}>
           {({ change, data, submit }) => (
             <DashboardModal.Grid>
-              <DashboardModal.Title>
+              <DashboardModal.Header onClose={onClose}>
                 <FormattedMessage
                   id="/BJQIq"
                   defaultMessage="Add Tracking Code"
                   description="dialog header"
                 />
-              </DashboardModal.Title>
+              </DashboardModal.Header>
 
               <TextField
                 error={!!formErrors.trackingNumber}
diff --git a/src/orders/components/OrderInvoiceEmailSendDialog/OrderInvoiceEmailSendDialog.tsx b/src/orders/components/OrderInvoiceEmailSendDialog/OrderInvoiceEmailSendDialog.tsx
index 85a7d380e20..5db225e9b27 100644
--- a/src/orders/components/OrderInvoiceEmailSendDialog/OrderInvoiceEmailSendDialog.tsx
+++ b/src/orders/components/OrderInvoiceEmailSendDialog/OrderInvoiceEmailSendDialog.tsx
@@ -30,13 +30,13 @@ const OrderInvoiceEmailSendDialog: React.FC<OrderInvoiceEmailSendDialogProps> =
   return (
     <DashboardModal onChange={onClose} open={open}>
       <DashboardModal.Content size="sm">
-        <DashboardModal.Title>
+        <DashboardModal.Header onClose={onClose}>
           {intl.formatMessage({
             id: "5JT4v2",
             defaultMessage: "Send Invoice",
             description: "dialog header",
           })}
-        </DashboardModal.Title>
+        </DashboardModal.Header>
 
         <Text>
           <FormattedMessage
diff --git a/src/orders/components/OrderManualTransactionDialog/OrderManualTransactionDialog.tsx b/src/orders/components/OrderManualTransactionDialog/OrderManualTransactionDialog.tsx
index cc135991c2f..a228f98610b 100644
--- a/src/orders/components/OrderManualTransactionDialog/OrderManualTransactionDialog.tsx
+++ b/src/orders/components/OrderManualTransactionDialog/OrderManualTransactionDialog.tsx
@@ -27,10 +27,9 @@ export const OrderManualTransactionDialog: React.FC<OrderManualTransactionDialog
     <OrderManualTransactionForm {...props}>
       <DashboardModal {...dialogProps}>
         <DashboardModal.Content size="xs">
-          <DashboardModal.Title display="flex" justifyContent="space-between" alignItems="center">
+          <DashboardModal.Header onClose={onClose}>
             <FormattedMessage {...manualTransactionMessages.dialogTitle} />
-            <DashboardModal.Close onClose={onClose} />
-          </DashboardModal.Title>
+          </DashboardModal.Header>
 
           <OrderManualTransactionForm.Form>
             <Box display="flex" flexDirection="column" gap={4}>
diff --git a/src/orders/components/OrderMetadataDialog/OrderMetadataDialog.tsx b/src/orders/components/OrderMetadataDialog/OrderMetadataDialog.tsx
index 932c73f6250..83f1ff336d3 100644
--- a/src/orders/components/OrderMetadataDialog/OrderMetadataDialog.tsx
+++ b/src/orders/components/OrderMetadataDialog/OrderMetadataDialog.tsx
@@ -20,9 +20,9 @@ export const OrderMetadataDialog = ({ onClose, open, data, loading }: OrderMetad
   return (
     <DashboardModal open={open} onChange={onClose}>
       <DashboardModal.Content size="md">
-        <DashboardModal.Title paddingX={6}>
+        <DashboardModal.Header onClose={onClose} paddingX={6}>
           <FormattedMessage {...commonMessages.metadata} />: {data?.productName ?? ""}
-        </DashboardModal.Title>
+        </DashboardModal.Header>
 
         <Metadata
           readonly={true}
diff --git a/src/orders/components/OrderPaymentDialog/OrderPaymentDialog.tsx b/src/orders/components/OrderPaymentDialog/OrderPaymentDialog.tsx
index 5f4ca645f56..804302683e2 100644
--- a/src/orders/components/OrderPaymentDialog/OrderPaymentDialog.tsx
+++ b/src/orders/components/OrderPaymentDialog/OrderPaymentDialog.tsx
@@ -48,13 +48,13 @@ const OrderPaymentDialog: React.FC<OrderPaymentDialogProps> = ({
       >
         {({ data, change, submit }) => (
           <DashboardModal.Content size="sm">
-            <DashboardModal.Title>
+            <DashboardModal.Header onClose={onClose}>
               {intl.formatMessage({
                 id: "+PbHKD",
                 defaultMessage: "Capture Payment",
                 description: "dialog header",
               })}
-            </DashboardModal.Title>
+            </DashboardModal.Header>
 
             <TextField
               error={!!formErrors.payment}
diff --git a/src/orders/components/OrderPaymentVoidDialog/OrderPaymentVoidDialog.tsx b/src/orders/components/OrderPaymentVoidDialog/OrderPaymentVoidDialog.tsx
index 6ef0214df8e..a90386738d3 100644
--- a/src/orders/components/OrderPaymentVoidDialog/OrderPaymentVoidDialog.tsx
+++ b/src/orders/components/OrderPaymentVoidDialog/OrderPaymentVoidDialog.tsx
@@ -30,9 +30,9 @@ const OrderPaymentVoidDialog: React.FC<OrderPaymentVoidDialogProps> = ({
   return (
     <DashboardModal onChange={onClose} open={open}>
       <DashboardModal.Content size="sm">
-        <DashboardModal.Title>
+        <DashboardModal.Header onClose={onClose}>
           <FormattedMessage id="KszPFx" defaultMessage="Void Payment" description="dialog header" />
-        </DashboardModal.Title>
+        </DashboardModal.Header>
 
         <Text>
           <FormattedMessage
diff --git a/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx b/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx
index 63e5649d6b7..024de1e211a 100644
--- a/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx
+++ b/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx
@@ -90,14 +90,14 @@ const OrderProductAddDialog: React.FC<OrderProductAddDialogProps> = props => {
   return (
     <DashboardModal onChange={onClose} open={open}>
       <DashboardModal.Content size="sm" __gridTemplateRows="auto auto auto 1fr">
-        <DashboardModal.Title>
+        <DashboardModal.Header onClose={onClose}>
           <FormattedMessage
             {...messages.title}
             values={{
               channelName,
             }}
           />
-        </DashboardModal.Title>
+        </DashboardModal.Header>
 
         <Text size={2} color="default2">
           <FormattedMessage {...messages.subtitle} />
diff --git a/src/orders/components/OrderRefundDialog/OrderRefundDialog.tsx b/src/orders/components/OrderRefundDialog/OrderRefundDialog.tsx
index a9834fe48bd..52e67dc9dc3 100644
--- a/src/orders/components/OrderRefundDialog/OrderRefundDialog.tsx
+++ b/src/orders/components/OrderRefundDialog/OrderRefundDialog.tsx
@@ -28,9 +28,9 @@ export const OrderRefundDialog = ({
   return (
     <DashboardModal open={open} onChange={onClose}>
       <DashboardModal.Content size="xs" data-test-id="order-refund-dialog">
-        <DashboardModal.Title>
+        <DashboardModal.Header onClose={onClose}>
           {intl.formatMessage(orderRefundDialogMesages.title)}
-        </DashboardModal.Title>
+        </DashboardModal.Header>
         <Text>{intl.formatMessage(orderRefundDialogMesages.subtitle)}</Text>
         <RadioTiles asChild value={selectedRefundType} onValueChange={handleChangeRefundType}>
           <Box
diff --git a/src/orders/components/OrderShippingMethodEditDialog/OrderShippingMethodEditDialog.tsx b/src/orders/components/OrderShippingMethodEditDialog/OrderShippingMethodEditDialog.tsx
index b80f1eac399..1349f395206 100644
--- a/src/orders/components/OrderShippingMethodEditDialog/OrderShippingMethodEditDialog.tsx
+++ b/src/orders/components/OrderShippingMethodEditDialog/OrderShippingMethodEditDialog.tsx
@@ -79,13 +79,13 @@ const OrderShippingMethodEditDialog: React.FC<OrderShippingMethodEditDialogProps
         {({ change, data, submit }) => (
           <>
             <DashboardModal.Content size="sm">
-              <DashboardModal.Title>
+              <DashboardModal.Header onClose={onClose}>
                 <FormattedMessage
                   id="V/YxJa"
                   defaultMessage="Edit Shipping Method"
                   description="dialog header"
                 />
-              </DashboardModal.Title>
+              </DashboardModal.Header>
 
               <Select
                 options={choices as unknown as Option[]}
diff --git a/src/orders/components/OrderTransactionActionDialog/OrderTransactionActionDialog.tsx b/src/orders/components/OrderTransactionActionDialog/OrderTransactionActionDialog.tsx
index 447d5f29966..ba2db178c89 100644
--- a/src/orders/components/OrderTransactionActionDialog/OrderTransactionActionDialog.tsx
+++ b/src/orders/components/OrderTransactionActionDialog/OrderTransactionActionDialog.tsx
@@ -32,14 +32,14 @@ export const OrderTransactionActionDialog: React.FC<OrderTransactionActionDialog
   return (
     <DashboardModal open={open} onChange={onClose}>
       <DashboardModal.Content size="sm">
-        <DashboardModal.Title>
+        <DashboardModal.Header onClose={onClose}>
           <FormattedMessage
             {...messages.title}
             values={{
               actionType,
             }}
           />
-        </DashboardModal.Title>
+        </DashboardModal.Header>
 
         <Text>
           <FormattedMessage {...messages.warningText} values={{ actionType }} />
diff --git a/src/orders/components/OrderTransactionRefundPage/components/OrderTransactionReasonModal/OrderTransactionReasonModal.tsx b/src/orders/components/OrderTransactionRefundPage/components/OrderTransactionReasonModal/OrderTransactionReasonModal.tsx
index 05e970a8d90..23cf95d8341 100644
--- a/src/orders/components/OrderTransactionRefundPage/components/OrderTransactionReasonModal/OrderTransactionReasonModal.tsx
+++ b/src/orders/components/OrderTransactionRefundPage/components/OrderTransactionReasonModal/OrderTransactionReasonModal.tsx
@@ -28,12 +28,11 @@ export const OrderTransactionReasonModal = ({
   return (
     <DashboardModal open={open} onChange={onClose}>
       <DashboardModal.Content data-test-id="refund-reason-dialog" size="xs">
-        <DashboardModal.Title display="flex" justifyContent="space-between" alignItems="center">
+        <DashboardModal.Header onClose={onClose}>
           <FormattedMessage
             {...(reason ? refundTableMessages.editReason : refundTableMessages.addReason)}
           />
-          <DashboardModal.Close onClose={onClose} />
-        </DashboardModal.Title>
+        </DashboardModal.Header>
 
         <Textarea
           data-test-id="line-refund-reason-input"
diff --git a/src/pages/components/PageTypePickerDialog/PageTypePickerDialog.tsx b/src/pages/components/PageTypePickerDialog/PageTypePickerDialog.tsx
index 8c25b4cff4d..ec1a95e096b 100644
--- a/src/pages/components/PageTypePickerDialog/PageTypePickerDialog.tsx
+++ b/src/pages/components/PageTypePickerDialog/PageTypePickerDialog.tsx
@@ -43,9 +43,9 @@ const PageTypePickerDialog: React.FC<PageTypePickerDialogProps> = ({
   return (
     <DashboardModal open={open} onChange={onClose}>
       <DashboardModal.Content size="xs">
-        <DashboardModal.Title>
+        <DashboardModal.Header onClose={onClose}>
           <FormattedMessage {...messages.selectPageType} />
-        </DashboardModal.Title>
+        </DashboardModal.Header>
 
         <Combobox
           name="pageType"
diff --git a/src/permissionGroups/components/AssignMembersDialog/AssignMembersDialog.tsx b/src/permissionGroups/components/AssignMembersDialog/AssignMembersDialog.tsx
index 80c84f39046..e2d7ae84542 100644
--- a/src/permissionGroups/components/AssignMembersDialog/AssignMembersDialog.tsx
+++ b/src/permissionGroups/components/AssignMembersDialog/AssignMembersDialog.tsx
@@ -129,9 +129,9 @@ const AssignMembersDialog: React.FC<AssignMembersDialogProps> = ({
   return (
     <DashboardModal onChange={onClose} open={open}>
       <DashboardModal.Content size="sm" __gridTemplateRows="auto auto 1fr">
-        <DashboardModal.Title>
+        <DashboardModal.Header onClose={onClose}>
           <FormattedMessage {...messages.title} />
-        </DashboardModal.Title>
+        </DashboardModal.Header>
 
         <TextField
           data-test-id="search-members-input"
diff --git a/src/plugins/components/PluginSecretFieldDialog/PluginSecretFieldDialog.tsx b/src/plugins/components/PluginSecretFieldDialog/PluginSecretFieldDialog.tsx
index 285f75222bf..b855cc82478 100644
--- a/src/plugins/components/PluginSecretFieldDialog/PluginSecretFieldDialog.tsx
+++ b/src/plugins/components/PluginSecretFieldDialog/PluginSecretFieldDialog.tsx
@@ -38,7 +38,7 @@ const PluginSecretFieldDialog: React.FC<PluginSecretFieldDialogProps> = ({
         <Form initial={initialForm} onSubmit={onConfirm}>
           {({ change, data, submit }) => (
             <DashboardModal.Grid>
-              <DashboardModal.Title>
+              <DashboardModal.Header onClose={onClose}>
                 {field ? (
                   field.value === null ? (
                     intl.formatMessage({
@@ -56,7 +56,7 @@ const PluginSecretFieldDialog: React.FC<PluginSecretFieldDialogProps> = ({
                 ) : (
                   <Skeleton />
                 )}
-              </DashboardModal.Title>
+              </DashboardModal.Header>
 
               <TextField
                 multiline={field?.type === ConfigurationTypeFieldEnum.SECRETMULTILINE}
diff --git a/src/products/components/ProductExportDialog/ProductExportDialog.tsx b/src/products/components/ProductExportDialog/ProductExportDialog.tsx
index f3c0f55cbdc..0db9627fa3b 100644
--- a/src/products/components/ProductExportDialog/ProductExportDialog.tsx
+++ b/src/products/components/ProductExportDialog/ProductExportDialog.tsx
@@ -213,9 +213,9 @@ const ProductExportDialog: React.FC<ProductExportDialogProps> = ({
   return (
     <DashboardModal onChange={onClose} open={open}>
       <DashboardModal.Content size="sm">
-        <DashboardModal.Title>
+        <DashboardModal.Header onClose={onClose}>
           <FormattedMessage {...messages.title} />
-        </DashboardModal.Title>
+        </DashboardModal.Header>
 
         <ProductExportSteps currentStep={step} steps={steps} onStepClick={setStep} />
         {step === ProductExportStep.INFO && (
diff --git a/src/products/components/ProductExternalMediaDialog/ProductExternalMediaDialog.tsx b/src/products/components/ProductExternalMediaDialog/ProductExternalMediaDialog.tsx
index e241b920609..8352d7ed540 100644
--- a/src/products/components/ProductExternalMediaDialog/ProductExternalMediaDialog.tsx
+++ b/src/products/components/ProductExternalMediaDialog/ProductExternalMediaDialog.tsx
@@ -45,11 +45,11 @@ const ProductExternalMediaDialog: React.FC<ProductExternalMediaDialogProps> = ({
         <Form initial={initialValues} onSubmit={handleOnSubmit}>
           {({ change, data, submit }) => (
             <DashboardModal.Grid>
-              <DashboardModal.Title>
+              <DashboardModal.Header onClose={onClose}>
                 <Text size={5} fontWeight="bold">
                   {intl.formatMessage(messages.buttonMessage)}
                 </Text>
-              </DashboardModal.Title>
+              </DashboardModal.Header>
 
               <Text size={2}>
                 <FormattedMessage
diff --git a/src/products/components/ProductVariantDeleteDialog/ProductVariantDeleteDialog.tsx b/src/products/components/ProductVariantDeleteDialog/ProductVariantDeleteDialog.tsx
index f606c2f4884..b2585b402fa 100644
--- a/src/products/components/ProductVariantDeleteDialog/ProductVariantDeleteDialog.tsx
+++ b/src/products/components/ProductVariantDeleteDialog/ProductVariantDeleteDialog.tsx
@@ -9,7 +9,7 @@ export interface ProductVariantDeleteDialogProps {
   confirmButtonState: ConfirmButtonTransitionState;
   open: boolean;
   name: string;
-  onClose?: () => any;
+  onClose: () => any;
   onConfirm?: () => any;
 }
 
@@ -19,13 +19,13 @@ const ProductVariantDeleteDialog: React.FC<ProductVariantDeleteDialogProps> = pr
   return (
     <DashboardModal onChange={onClose} open={open}>
       <DashboardModal.Content size="sm">
-        <DashboardModal.Title>
+        <DashboardModal.Header onClose={onClose}>
           <FormattedMessage
             id="GFJabu"
             defaultMessage="Delete Variant"
             description="dialog header"
           />
-        </DashboardModal.Title>
+        </DashboardModal.Header>
 
         <Text>
           <FormattedMessage
diff --git a/src/products/components/ProductVariantImageSelectDialog/ProductVariantMediaSelectDialog.tsx b/src/products/components/ProductVariantImageSelectDialog/ProductVariantMediaSelectDialog.tsx
index 751fa2fdc77..a29535acdbe 100644
--- a/src/products/components/ProductVariantImageSelectDialog/ProductVariantMediaSelectDialog.tsx
+++ b/src/products/components/ProductVariantImageSelectDialog/ProductVariantMediaSelectDialog.tsx
@@ -42,13 +42,13 @@ const ProductVariantMediaSelectDialog: React.FC<ProductVariantImageSelectDialogP
   return (
     <DashboardModal onChange={onClose} open={open}>
       <DashboardModal.Content size="md" __gridTemplateRows="auto 1fr">
-        <DashboardModal.Title>
+        <DashboardModal.Header onClose={onClose}>
           <FormattedMessage
             id="iPk640"
             defaultMessage="Media Selection"
             description="dialog header"
           />
-        </DashboardModal.Title>
+        </DashboardModal.Header>
 
         <Box
           overflowY="auto"
diff --git a/src/shipping/components/ShippingMethodProductsAddDialog/ShippingMethodProductsAddDialog.tsx b/src/shipping/components/ShippingMethodProductsAddDialog/ShippingMethodProductsAddDialog.tsx
index a097ed9a636..be176c005bc 100644
--- a/src/shipping/components/ShippingMethodProductsAddDialog/ShippingMethodProductsAddDialog.tsx
+++ b/src/shipping/components/ShippingMethodProductsAddDialog/ShippingMethodProductsAddDialog.tsx
@@ -98,13 +98,13 @@ const ShippingMethodProductsAddDialog: React.FC<ShippingMethodProductsAddDialogP
   return (
     <DashboardModal onChange={handleClose} open={open}>
       <DashboardModal.Content size="sm" __gridTemplateRows="auto auto 1fr">
-        <DashboardModal.Title>
+        <DashboardModal.Header onClose={onClose}>
           <FormattedMessage
             id="xZhxBJ"
             defaultMessage="Assign Products"
             description="dialog header"
           />
-        </DashboardModal.Title>
+        </DashboardModal.Header>
 
         <Box data-test-id="assign-products-dialog-content">
           <TextField
diff --git a/src/shipping/components/ShippingWeightUnitDialog/ShippingWeightUnitDialog.tsx b/src/shipping/components/ShippingWeightUnitDialog/ShippingWeightUnitDialog.tsx
index c26021889f8..54adf99884a 100644
--- a/src/shipping/components/ShippingWeightUnitDialog/ShippingWeightUnitDialog.tsx
+++ b/src/shipping/components/ShippingWeightUnitDialog/ShippingWeightUnitDialog.tsx
@@ -1,7 +1,6 @@
 import { DashboardModal } from "@dashboard/components/Modal";
 import { WeightUnitsEnum } from "@dashboard/graphql";
 import { SubmitPromise } from "@dashboard/hooks/useForm";
-import { Box } from "@saleor/macaw-ui-next";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
@@ -25,16 +24,13 @@ export const ShippingWeightUnitDialog: React.FC<ShippingWeightUnitDialogProps> =
   return (
     <DashboardModal open={open} onChange={onClose}>
       <DashboardModal.Content size="sm">
-        <Box alignItems="center" display="flex" gap={3} justifyContent="space-between">
-          <DashboardModal.Title>
-            <FormattedMessage
-              description="weight config modal title"
-              defaultMessage="Default weight unit configuration"
-              id="9WmA6z"
-            />
-          </DashboardModal.Title>
-          <DashboardModal.Close onClose={onClose} />
-        </Box>
+        <DashboardModal.Header onClose={onClose}>
+          <FormattedMessage
+            description="weight config modal title"
+            defaultMessage="Default weight unit configuration"
+            id="9WmA6z"
+          />
+        </DashboardModal.Header>
         <ShippingWeightUnitForm
           defaultWeightUnit={defaultWeightUnit}
           onSubmit={onSubmit}
diff --git a/src/shipping/components/ShippingZoneAddWarehouseDialog/ShippingZoneAddWarehouseDialog.tsx b/src/shipping/components/ShippingZoneAddWarehouseDialog/ShippingZoneAddWarehouseDialog.tsx
index a86949b1d08..d35f5806b69 100644
--- a/src/shipping/components/ShippingZoneAddWarehouseDialog/ShippingZoneAddWarehouseDialog.tsx
+++ b/src/shipping/components/ShippingZoneAddWarehouseDialog/ShippingZoneAddWarehouseDialog.tsx
@@ -75,13 +75,13 @@ const ShippingZoneAddWarehouseDialog: React.FC<ShippingZoneAddWarehouseDialogPro
 
           return (
             <DashboardModal.Content size="sm">
-              <DashboardModal.Title>
+              <DashboardModal.Header onClose={onClose}>
                 <FormattedMessage
                   id="yzYXW/"
                   defaultMessage="Create New Warehouse"
                   description="header, dialog"
                 />
-              </DashboardModal.Title>
+              </DashboardModal.Header>
 
               <TextField
                 fullWidth
diff --git a/src/shipping/components/ShippingZoneCountriesAssignDialog/ShippingZoneCountriesAssignDialog.tsx b/src/shipping/components/ShippingZoneCountriesAssignDialog/ShippingZoneCountriesAssignDialog.tsx
index 5fd1e4c16ea..df56f217c33 100644
--- a/src/shipping/components/ShippingZoneCountriesAssignDialog/ShippingZoneCountriesAssignDialog.tsx
+++ b/src/shipping/components/ShippingZoneCountriesAssignDialog/ShippingZoneCountriesAssignDialog.tsx
@@ -66,9 +66,9 @@ const ShippingZoneCountriesAssignDialog: React.FC<
 
             return (
               <DashboardModal.Grid>
-                <DashboardModal.Title>
+                <DashboardModal.Header onClose={onClose}>
                   <FormattedMessage {...messages.assignCountriesTitle} />
-                </DashboardModal.Title>
+                </DashboardModal.Header>
 
                 <Text>
                   <FormattedMessage {...messages.assignCountriesDescription} />
diff --git a/src/shipping/components/ShippingZonePostalCodeRangeDialog/ShippingZonePostalCodeRangeDialog.tsx b/src/shipping/components/ShippingZonePostalCodeRangeDialog/ShippingZonePostalCodeRangeDialog.tsx
index d7809373dee..870e5e6f62c 100644
--- a/src/shipping/components/ShippingZonePostalCodeRangeDialog/ShippingZonePostalCodeRangeDialog.tsx
+++ b/src/shipping/components/ShippingZonePostalCodeRangeDialog/ShippingZonePostalCodeRangeDialog.tsx
@@ -33,13 +33,13 @@ const ShippingZonePostalCodeRangeDialog: React.FC<ShippingZonePostalCodeRangeDia
         <Form initial={initial} onSubmit={onSubmit}>
           {({ change, data }) => (
             <DashboardModal.Grid>
-              <DashboardModal.Title>
+              <DashboardModal.Header onClose={onClose}>
                 <FormattedMessage
                   id="2Xt+sw"
                   defaultMessage="Add postal codes"
                   description="dialog header"
                 />
-              </DashboardModal.Title>
+              </DashboardModal.Header>
 
               <Text>
                 <FormattedMessage
diff --git a/src/staff/components/StaffAddMemberDialog/StaffAddMemberDialog.tsx b/src/staff/components/StaffAddMemberDialog/StaffAddMemberDialog.tsx
index cae269e0ad3..f839a37b72c 100644
--- a/src/staff/components/StaffAddMemberDialog/StaffAddMemberDialog.tsx
+++ b/src/staff/components/StaffAddMemberDialog/StaffAddMemberDialog.tsx
@@ -63,13 +63,13 @@ const StaffAddMemberDialog: React.FC<StaffAddMemberDialogProps> = props => {
       >
         {({ change, data: formData, submit }) => (
           <DashboardModal.Content size="sm">
-            <DashboardModal.Title>
+            <DashboardModal.Header onClose={onClose}>
               <FormattedMessage
                 id="23g7PY"
                 defaultMessage="Invite Staff Member"
                 description="dialog header"
               />
-            </DashboardModal.Title>
+            </DashboardModal.Header>
 
             <Box display="flex" gap={3} justifyContent="space-between">
               <TextField
diff --git a/src/staff/components/StaffPasswordResetDialog/StaffPasswordResetDialog.tsx b/src/staff/components/StaffPasswordResetDialog/StaffPasswordResetDialog.tsx
index e5e802a8696..7daf968d5ba 100644
--- a/src/staff/components/StaffPasswordResetDialog/StaffPasswordResetDialog.tsx
+++ b/src/staff/components/StaffPasswordResetDialog/StaffPasswordResetDialog.tsx
@@ -44,13 +44,13 @@ const StaffPasswordResetDialog: React.FC<StaffPasswordResetDialogProps> = ({
       <Form initial={initialForm} onSubmit={onSubmit}>
         {({ change, data }) => (
           <DashboardModal.Content size="sm">
-            <DashboardModal.Title>
+            <DashboardModal.Header onClose={onClose}>
               <FormattedMessage
                 id="+kb2lM"
                 defaultMessage="Change Password"
                 description="dialog header"
               />
-            </DashboardModal.Title>
+            </DashboardModal.Header>
 
             <TextField
               error={!!formErrors.oldPassword}
diff --git a/src/taxes/components/TaxCountryDialog/TaxCountryDialog.tsx b/src/taxes/components/TaxCountryDialog/TaxCountryDialog.tsx
index 18c1b1f49ec..db8248a40bf 100644
--- a/src/taxes/components/TaxCountryDialog/TaxCountryDialog.tsx
+++ b/src/taxes/components/TaxCountryDialog/TaxCountryDialog.tsx
@@ -46,10 +46,9 @@ export const TaxCountryDialog: React.FC<TaxCountryDialogProps> = ({
   return (
     <DashboardModal open={open} onChange={onClose}>
       <DashboardModal.Content size="sm">
-        <DashboardModal.Title display="flex" justifyContent="space-between" alignItems="center">
+        <DashboardModal.Header onClose={onClose}>
           <FormattedMessage {...taxesMessages.chooseCountryDialogTitle} />
-          <DashboardModal.Close onClose={onClose} />
-        </DashboardModal.Title>
+        </DashboardModal.Header>
 
         <TextField
           data-test-id="search-country-input"

From 18d874e80d290cd55ec9144a3973d46cd7781ebb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Chy=C5=82a?= <pawel.chyla@saleor.io>
Date: Fri, 27 Sep 2024 12:16:38 +0200
Subject: [PATCH 3/7] Add changeset

---
 .changeset/tall-trainers-approve.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/tall-trainers-approve.md

diff --git a/.changeset/tall-trainers-approve.md b/.changeset/tall-trainers-approve.md
new file mode 100644
index 00000000000..0d5b09d00a6
--- /dev/null
+++ b/.changeset/tall-trainers-approve.md
@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Modals in the Dashboard have been aligned, so that all contains close button

From f29121cdbf9abcabda57f77d13e9e57aae9e1dff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Chy=C5=82a?= <pawel.chyla@saleor.io>
Date: Fri, 4 Oct 2024 11:44:42 +0200
Subject: [PATCH 4/7] Introduce Modal context

---
 src/components/Modal/Header.tsx  |  8 +++++---
 src/components/Modal/Root.tsx    | 13 +++++++++++--
 src/components/Modal/context.tsx | 30 ++++++++++++++++++++++++++++++
 3 files changed, 46 insertions(+), 5 deletions(-)
 create mode 100644 src/components/Modal/context.tsx

diff --git a/src/components/Modal/Header.tsx b/src/components/Modal/Header.tsx
index 617dc8b1298..f9c54336d48 100644
--- a/src/components/Modal/Header.tsx
+++ b/src/components/Modal/Header.tsx
@@ -1,3 +1,4 @@
+import { useModalContext } from "@dashboard/components/Modal/context";
 import { Box } from "@saleor/macaw-ui-next";
 import React, { ReactNode } from "react";
 
@@ -6,14 +7,15 @@ import { Title, TitleProps } from "./Title";
 
 interface HeaderProps extends TitleProps {
   children: ReactNode;
-  onClose: () => void;
 }
 
-export const Header = ({ children, onClose, ...rest }: HeaderProps) => {
+export const Header = ({ children, ...rest }: HeaderProps) => {
+  const { onChange } = useModalContext();
+
   return (
     <Box display="flex" justifyContent="space-between">
       <Title {...rest}>{children}</Title>
-      <Close onClose={onClose} />
+      <Close onClose={() => onChange?.(false)} />
     </Box>
   );
 };
diff --git a/src/components/Modal/Root.tsx b/src/components/Modal/Root.tsx
index 3b423af088b..1536b01f801 100644
--- a/src/components/Modal/Root.tsx
+++ b/src/components/Modal/Root.tsx
@@ -1,6 +1,15 @@
+import { ModalContextProvider } from "@dashboard/components/Modal/context";
 import { Modal, ModalRootProps } from "@saleor/macaw-ui-next";
 import React from "react";
 
-export const Root = ({ children, ...rest }: ModalRootProps) => {
-  return <Modal {...rest}>{children}</Modal>;
+type RootProps = ModalRootProps;
+
+export const Root = ({ children, onChange, open, ...rest }: RootProps) => {
+  return (
+    <ModalContextProvider onChange={onChange} open={open}>
+      <Modal onChange={onChange} {...rest}>
+        {children}
+      </Modal>
+    </ModalContextProvider>
+  );
 };
diff --git a/src/components/Modal/context.tsx b/src/components/Modal/context.tsx
new file mode 100644
index 00000000000..d51ce9aabd0
--- /dev/null
+++ b/src/components/Modal/context.tsx
@@ -0,0 +1,30 @@
+import React, { createContext } from "react";
+
+interface ModalContext {
+  open?: boolean;
+  onChange?: (open: boolean) => void;
+}
+
+const modalContext = createContext<ModalContext | null>(null);
+
+export const ModalContextProvider = ({
+  children,
+  onChange,
+  open,
+}: {
+  children: React.ReactNode;
+  onChange?: (open: boolean) => void;
+  open?: boolean;
+}) => {
+  return <modalContext.Provider value={{ open, onChange }}>{children}</modalContext.Provider>;
+};
+
+export const useModalContext = () => {
+  const context = React.useContext(modalContext);
+
+  if (!context) {
+    throw new Error("useModalContext must be used within a ModalContextProvider");
+  }
+
+  return context;
+};

From d30677df1c4dfbe84100678e0b696707aab002a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Chy=C5=82a?= <pawel.chyla@saleor.io>
Date: Fri, 4 Oct 2024 11:45:24 +0200
Subject: [PATCH 5/7] Remove onClose from DashboardModal.Header

---
 src/apps/components/AppDialog/AppDialog.tsx               | 4 +---
 .../AppPermissionsDialog/AppPermissionsDialog.tsx         | 4 +---
 .../AttributeValueEditDialog/AttributeValueEditDialog.tsx | 2 +-
 src/components/ActionDialog/ActionDialog.tsx              | 2 +-
 .../AssignAttributeDialog/AssignAttributeDialog.tsx       | 2 +-
 .../AssignContainerDialog/AssignContainerDialog.tsx       | 2 +-
 .../AssignProductDialog/AssignProductDialog.tsx           | 2 +-
 .../AssignVariantDialog/AssignVariantDialog.tsx           | 2 +-
 src/components/DevModePanel/DevModePanel.tsx              | 4 +---
 src/components/DryRun/DryRun.tsx                          | 8 ++------
 src/components/Form/ExitFormDialog.tsx                    | 2 +-
 .../SaveFilterTabDialog/SaveFilterTabDialog.tsx           | 2 +-
 .../TypeDeleteWarningDialog/TypeDeleteWarningDialog.tsx   | 2 +-
 .../components/TokenCreateDialog/TokenCreateDialog.tsx    | 2 +-
 .../CustomerAddressDialog/CustomerAddressDialog.tsx       | 2 +-
 .../DiscountCountrySelectDialog.tsx                       | 2 +-
 .../DiscountDeleteModal/DiscountDeleteModal.tsx           | 2 +-
 .../componenets/RuleDeleteModal/RuleDeleteModal.tsx       | 4 +---
 .../componenets/RuleFormModal/RuleFormModal.tsx           | 2 +-
 .../VoucherCodesDeleteDialog/VoucherCodesDeleteDialog.tsx | 2 +-
 .../VoucherCodesGenerateDialog.tsx                        | 4 +---
 .../VoucherCodesManualDialog/VoucherCodesManualDialog.tsx | 2 +-
 .../GiftCardBulkCreateDialog/GiftCardBulkCreateDialog.tsx | 4 +---
 .../GiftCardBulkCreateSuccessDialog.tsx                   | 2 +-
 .../GiftCardCreateDialog/GiftCardCreateDialogContent.tsx  | 4 +---
 .../GiftCardExportDialogContent.tsx                       | 2 +-
 .../components/MenuCreateDialog/MenuCreateDialog.tsx      | 2 +-
 .../components/MenuItemDialog/MenuItemDialog.tsx          | 2 +-
 .../components/OrderCancelDialog/OrderCancelDialog.tsx    | 2 +-
 .../OrderCannotCancelOrderDialog.tsx                      | 2 +-
 .../OrderChangeWarehouseDialog.tsx                        | 2 +-
 .../OrderCustomerAddressesEditDialog.tsx                  | 2 +-
 .../OrderCustomerChangeDialog.tsx                         | 2 +-
 .../OrderFulfillmentApproveDialog.tsx                     | 2 +-
 .../OrderFulfillmentCancelDialog.tsx                      | 2 +-
 .../OrderFulfillmentTrackingDialog.tsx                    | 2 +-
 .../OrderInvoiceEmailSendDialog.tsx                       | 2 +-
 .../OrderManualTransactionDialog.tsx                      | 2 +-
 .../OrderMetadataDialog/OrderMetadataDialog.tsx           | 2 +-
 .../components/OrderPaymentDialog/OrderPaymentDialog.tsx  | 2 +-
 .../OrderPaymentVoidDialog/OrderPaymentVoidDialog.tsx     | 2 +-
 .../OrderProductAddDialog/OrderProductAddDialog.tsx       | 2 +-
 .../components/OrderRefundDialog/OrderRefundDialog.tsx    | 2 +-
 .../OrderShippingMethodEditDialog.tsx                     | 2 +-
 .../OrderTransactionActionDialog.tsx                      | 2 +-
 .../OrderTransactionReasonModal.tsx                       | 2 +-
 .../PageTypePickerDialog/PageTypePickerDialog.tsx         | 2 +-
 .../AssignMembersDialog/AssignMembersDialog.tsx           | 2 +-
 .../PluginSecretFieldDialog/PluginSecretFieldDialog.tsx   | 2 +-
 .../ProductExportDialog/ProductExportDialog.tsx           | 2 +-
 .../ProductExternalMediaDialog.tsx                        | 2 +-
 .../ProductVariantDeleteDialog.tsx                        | 2 +-
 .../ProductVariantMediaSelectDialog.tsx                   | 2 +-
 .../ShippingMethodProductsAddDialog.tsx                   | 2 +-
 .../ShippingWeightUnitDialog/ShippingWeightUnitDialog.tsx | 2 +-
 .../ShippingZoneAddWarehouseDialog.tsx                    | 2 +-
 .../ShippingZoneCountriesAssignDialog.tsx                 | 2 +-
 .../ShippingZonePostalCodeRangeDialog.tsx                 | 2 +-
 .../StaffAddMemberDialog/StaffAddMemberDialog.tsx         | 2 +-
 .../StaffPasswordResetDialog/StaffPasswordResetDialog.tsx | 2 +-
 .../components/TaxCountryDialog/TaxCountryDialog.tsx      | 2 +-
 61 files changed, 62 insertions(+), 80 deletions(-)

diff --git a/src/apps/components/AppDialog/AppDialog.tsx b/src/apps/components/AppDialog/AppDialog.tsx
index 9f03d5d7920..f7991d6da8a 100644
--- a/src/apps/components/AppDialog/AppDialog.tsx
+++ b/src/apps/components/AppDialog/AppDialog.tsx
@@ -12,9 +12,7 @@ export const AppDialog: React.FC<AppDialogProps> = ({ children, title, onClose,
   return (
     <DashboardModal aria-labelledby="extension app dialog" {...props} onChange={onClose}>
       <DashboardModal.Content size="lg">
-        <DashboardModal.Header onClose={onClose} as="h2">
-          {title}
-        </DashboardModal.Header>
+        <DashboardModal.Header as="h2">{title}</DashboardModal.Header>
         <Box width="100%" __height={600}>
           {children}
         </Box>
diff --git a/src/apps/components/AppPermissionsDialog/AppPermissionsDialog.tsx b/src/apps/components/AppPermissionsDialog/AppPermissionsDialog.tsx
index b08d684560d..b645ef21db9 100644
--- a/src/apps/components/AppPermissionsDialog/AppPermissionsDialog.tsx
+++ b/src/apps/components/AppPermissionsDialog/AppPermissionsDialog.tsx
@@ -111,9 +111,7 @@ export const AppPermissionsDialog = ({
   return (
     <DashboardModal open={true} onChange={onClose}>
       <DashboardModal.Content size="sm">
-        <DashboardModal.Header onClose={onClose}>
-          {formatMessage(messages.heading)}
-        </DashboardModal.Header>
+        <DashboardModal.Header>{formatMessage(messages.heading)}</DashboardModal.Header>
         <Box display={"grid"} gridAutoFlow={"row"}>
           <Text as={"p"}>{formatMessage(messages.info)}</Text>
           <Box
diff --git a/src/attributes/components/AttributeValueEditDialog/AttributeValueEditDialog.tsx b/src/attributes/components/AttributeValueEditDialog/AttributeValueEditDialog.tsx
index b751337e137..bd473d98b19 100644
--- a/src/attributes/components/AttributeValueEditDialog/AttributeValueEditDialog.tsx
+++ b/src/attributes/components/AttributeValueEditDialog/AttributeValueEditDialog.tsx
@@ -52,7 +52,7 @@ const AttributeValueEditDialog: React.FC<AttributeValueEditDialogProps> = ({
         <Form initial={initialForm} onSubmit={onSubmit}>
           {({ errors, set, change, clearErrors, setError, data, submit }) => (
             <DashboardModal.Grid>
-              <DashboardModal.Header onClose={onClose}>
+              <DashboardModal.Header>
                 {attributeValue === null ? (
                   <FormattedMessage
                     id="PqMbma"
diff --git a/src/components/ActionDialog/ActionDialog.tsx b/src/components/ActionDialog/ActionDialog.tsx
index 19d81953f89..67e1791976b 100644
--- a/src/components/ActionDialog/ActionDialog.tsx
+++ b/src/components/ActionDialog/ActionDialog.tsx
@@ -39,7 +39,7 @@ const ActionDialog = ({
   return (
     <DashboardModal onChange={onClose} open={open}>
       <DashboardModal.Content size={size}>
-        <DashboardModal.Header onClose={onClose}>{title}</DashboardModal.Header>
+        <DashboardModal.Header>{title}</DashboardModal.Header>
         <Box fontSize={3}>{children}</Box>
         <DashboardModal.Actions>
           <BackButton onClick={onClose}>{backButtonText}</BackButton>
diff --git a/src/components/AssignAttributeDialog/AssignAttributeDialog.tsx b/src/components/AssignAttributeDialog/AssignAttributeDialog.tsx
index 9845afd5c4e..b6acf1c2910 100644
--- a/src/components/AssignAttributeDialog/AssignAttributeDialog.tsx
+++ b/src/components/AssignAttributeDialog/AssignAttributeDialog.tsx
@@ -82,7 +82,7 @@ const AssignAttributeDialog: React.FC<AssignAttributeDialogProps> = ({
   return (
     <DashboardModal onChange={onClose} open={open}>
       <DashboardModal.Content size="sm" __gridTemplateRows="auto auto 1fr auto auto">
-        <DashboardModal.Header onClose={onClose}>
+        <DashboardModal.Header>
           <FormattedMessage {...messages.title} />
         </DashboardModal.Header>
 
diff --git a/src/components/AssignContainerDialog/AssignContainerDialog.tsx b/src/components/AssignContainerDialog/AssignContainerDialog.tsx
index 6c207d05d72..24ebe0dc2a9 100644
--- a/src/components/AssignContainerDialog/AssignContainerDialog.tsx
+++ b/src/components/AssignContainerDialog/AssignContainerDialog.tsx
@@ -75,7 +75,7 @@ const AssignContainerDialog: React.FC<AssignContainerDialogProps> = props => {
   return (
     <DashboardModal onChange={handleClose} open={open}>
       <DashboardModal.Content size="sm" __gridTemplateRows="auto auto 1fr auto">
-        <DashboardModal.Header onClose={onClose}>{labels.title}</DashboardModal.Header>
+        <DashboardModal.Header>{labels.title}</DashboardModal.Header>
 
         <TextField
           name="query"
diff --git a/src/components/AssignProductDialog/AssignProductDialog.tsx b/src/components/AssignProductDialog/AssignProductDialog.tsx
index 613f4d6b983..2bf629c5c71 100644
--- a/src/components/AssignProductDialog/AssignProductDialog.tsx
+++ b/src/components/AssignProductDialog/AssignProductDialog.tsx
@@ -107,7 +107,7 @@ const AssignProductDialog: React.FC<AssignProductDialogProps> = props => {
   return (
     <DashboardModal onChange={handleClose} open={open}>
       <DashboardModal.Content size="sm" __gridTemplateRows="auto auto 1fr auto">
-        <DashboardModal.Header onClose={onClose}>
+        <DashboardModal.Header>
           <FormattedMessage {...messages.assignVariantDialogHeader} />
         </DashboardModal.Header>
 
diff --git a/src/components/AssignVariantDialog/AssignVariantDialog.tsx b/src/components/AssignVariantDialog/AssignVariantDialog.tsx
index 81660c8919d..3481aa04096 100644
--- a/src/components/AssignVariantDialog/AssignVariantDialog.tsx
+++ b/src/components/AssignVariantDialog/AssignVariantDialog.tsx
@@ -84,7 +84,7 @@ const AssignVariantDialog: React.FC<AssignVariantDialogProps> = props => {
   return (
     <DashboardModal onChange={handleClose} open={open}>
       <DashboardModal.Content size="sm" __gridTemplateRows="auto auto 1fr auto">
-        <DashboardModal.Header onClose={onClose}>
+        <DashboardModal.Header>
           <FormattedMessage {...messages.assignVariantDialogHeader} />
         </DashboardModal.Header>
 
diff --git a/src/components/DevModePanel/DevModePanel.tsx b/src/components/DevModePanel/DevModePanel.tsx
index 77ec78390d9..f7ca6627d62 100644
--- a/src/components/DevModePanel/DevModePanel.tsx
+++ b/src/components/DevModePanel/DevModePanel.tsx
@@ -36,9 +36,7 @@ export const DevModePanel: React.FC = () => {
     <DashboardModal open={isDevModeVisible} onChange={() => setDevModeVisibility(false)}>
       <DashboardModal.Content size="xl" __gridTemplateRows="auto 1fr" height="100%">
         <style dangerouslySetInnerHTML={overwriteCodeMirrorCSSVariables}></style>
-        <DashboardModal.Header onClose={() => setDevModeVisibility(false)}>
-          {intl.formatMessage(messages.title)}
-        </DashboardModal.Header>
+        <DashboardModal.Header>{intl.formatMessage(messages.title)}</DashboardModal.Header>
 
         <PlainGraphiQL query={devModeContent} variables={variables} fetcher={fetcher} />
       </DashboardModal.Content>
diff --git a/src/components/DryRun/DryRun.tsx b/src/components/DryRun/DryRun.tsx
index a9ef6f186f9..56346ff84e1 100644
--- a/src/components/DryRun/DryRun.tsx
+++ b/src/components/DryRun/DryRun.tsx
@@ -69,9 +69,7 @@ const DryRun: React.FC<DryRunProps> = ({
     return (
       <DashboardModal onChange={closeDialog} open={showDialog}>
         <DashboardModal.Content size="lg" data-test-id="dry-run">
-          <DashboardModal.Header onClose={closeDialog}>
-            {intl.formatMessage(messages.header)}
-          </DashboardModal.Header>
+          <DashboardModal.Header>{intl.formatMessage(messages.header)}</DashboardModal.Header>
 
           <Alert variant="error" close={false}>
             <Text>{intl.formatMessage(messages.unavailableSyncEvents)}</Text>
@@ -84,9 +82,7 @@ const DryRun: React.FC<DryRunProps> = ({
   return (
     <DashboardModal onChange={closeDialog} open={showDialog}>
       <DashboardModal.Content size="lg" data-test-id="dry-run">
-        <DashboardModal.Header onClose={closeDialog}>
-          {intl.formatMessage(messages.header)}
-        </DashboardModal.Header>
+        <DashboardModal.Header>{intl.formatMessage(messages.header)}</DashboardModal.Header>
 
         <Text>{intl.formatMessage(messages.selectObject)}</Text>
 
diff --git a/src/components/Form/ExitFormDialog.tsx b/src/components/Form/ExitFormDialog.tsx
index 7a8849480c0..f31590aad3c 100644
--- a/src/components/Form/ExitFormDialog.tsx
+++ b/src/components/Form/ExitFormDialog.tsx
@@ -18,7 +18,7 @@ const ExitFormDialog: React.FC<ExitFormDialogProps> = ({ onLeave, onClose, isOpe
   return (
     <DashboardModal open={isOpen} onChange={onClose}>
       <DashboardModal.Content size="sm">
-        <DashboardModal.Header onClose={onClose}>
+        <DashboardModal.Header>
           {intl.formatMessage(messages.unableToSaveTitle)}
         </DashboardModal.Header>
 
diff --git a/src/components/SaveFilterTabDialog/SaveFilterTabDialog.tsx b/src/components/SaveFilterTabDialog/SaveFilterTabDialog.tsx
index 37c5d818da9..4fa000981f1 100644
--- a/src/components/SaveFilterTabDialog/SaveFilterTabDialog.tsx
+++ b/src/components/SaveFilterTabDialog/SaveFilterTabDialog.tsx
@@ -47,7 +47,7 @@ const SaveFilterTabDialog: React.FC<SaveFilterTabDialogProps> = ({
         <Form initial={initialForm} onSubmit={handleErrors}>
           {({ change, data, submit }) => (
             <DashboardModal.Grid>
-              <DashboardModal.Header onClose={onClose}>
+              <DashboardModal.Header>
                 <FormattedMessage
                   id="P9YktI"
                   defaultMessage="Save view preset"
diff --git a/src/components/TypeDeleteWarningDialog/TypeDeleteWarningDialog.tsx b/src/components/TypeDeleteWarningDialog/TypeDeleteWarningDialog.tsx
index 2c1ea3036b0..8c0347f77a5 100644
--- a/src/components/TypeDeleteWarningDialog/TypeDeleteWarningDialog.tsx
+++ b/src/components/TypeDeleteWarningDialog/TypeDeleteWarningDialog.tsx
@@ -86,7 +86,7 @@ function TypeDeleteWarningDialog<T extends TypeBaseData>({
   return (
     <DashboardModal open={isOpen} onChange={onClose}>
       <DashboardModal.Content size="sm">
-        <DashboardModal.Header onClose={onClose}>
+        <DashboardModal.Header>
           {intl.formatMessage(baseMessages.title, {
             selectedTypesCount: typesToDelete.length,
           })}
diff --git a/src/custom-apps/components/TokenCreateDialog/TokenCreateDialog.tsx b/src/custom-apps/components/TokenCreateDialog/TokenCreateDialog.tsx
index bbbe7565482..80a1838af7a 100644
--- a/src/custom-apps/components/TokenCreateDialog/TokenCreateDialog.tsx
+++ b/src/custom-apps/components/TokenCreateDialog/TokenCreateDialog.tsx
@@ -61,7 +61,7 @@ const TokenCreateDialog: React.FC<TokenCreateDialogProps> = props => {
         <Form initial={{ name: "" }} onSubmit={data => onCreate(data.name)}>
           {({ change, data, submit }) => (
             <DashboardModal.Grid>
-              <DashboardModal.Header onClose={onClose}>
+              <DashboardModal.Header>
                 <FormattedMessage id="T5nU7u" defaultMessage="Create Token" description="header" />
               </DashboardModal.Header>
 
diff --git a/src/customers/components/CustomerAddressDialog/CustomerAddressDialog.tsx b/src/customers/components/CustomerAddressDialog/CustomerAddressDialog.tsx
index 5d5b11004fa..d7152c5b9fb 100644
--- a/src/customers/components/CustomerAddressDialog/CustomerAddressDialog.tsx
+++ b/src/customers/components/CustomerAddressDialog/CustomerAddressDialog.tsx
@@ -82,7 +82,7 @@ const CustomerAddressDialog: React.FC<CustomerAddressDialogProps> = ({
 
             return (
               <DashboardModal.Grid>
-                <DashboardModal.Header onClose={onClose}>
+                <DashboardModal.Header>
                   {variant === "create" ? (
                     <FormattedMessage
                       id="W0kQd+"
diff --git a/src/discounts/components/DiscountCountrySelectDialog/DiscountCountrySelectDialog.tsx b/src/discounts/components/DiscountCountrySelectDialog/DiscountCountrySelectDialog.tsx
index 01976467c78..20276769f34 100644
--- a/src/discounts/components/DiscountCountrySelectDialog/DiscountCountrySelectDialog.tsx
+++ b/src/discounts/components/DiscountCountrySelectDialog/DiscountCountrySelectDialog.tsx
@@ -62,7 +62,7 @@ const DiscountCountrySelectDialog: React.FC<DiscountCountrySelectDialogProps> =
                 __gridTemplateRows="auto auto auto auto auto 1fr auto"
                 height="100%"
               >
-                <DashboardModal.Header onClose={onClose}>
+                <DashboardModal.Header>
                   <FormattedMessage
                     id="cvVIV/"
                     defaultMessage="Assign Countries"
diff --git a/src/discounts/components/DiscountDeleteModal/DiscountDeleteModal.tsx b/src/discounts/components/DiscountDeleteModal/DiscountDeleteModal.tsx
index a9ef3abeec2..ef1ced399ce 100644
--- a/src/discounts/components/DiscountDeleteModal/DiscountDeleteModal.tsx
+++ b/src/discounts/components/DiscountDeleteModal/DiscountDeleteModal.tsx
@@ -21,7 +21,7 @@ export const DiscountDeleteModal = ({
   return (
     <DashboardModal open={open} onChange={onChange}>
       <DashboardModal.Content size="xs">
-        <DashboardModal.Header onClose={onChange}>
+        <DashboardModal.Header>
           <FormattedMessage defaultMessage="Delete discount" id="ZrIt1W" />
         </DashboardModal.Header>
 
diff --git a/src/discounts/components/DiscountRules/componenets/RuleDeleteModal/RuleDeleteModal.tsx b/src/discounts/components/DiscountRules/componenets/RuleDeleteModal/RuleDeleteModal.tsx
index 293fe1b0d69..f2280c8a4a1 100644
--- a/src/discounts/components/DiscountRules/componenets/RuleDeleteModal/RuleDeleteModal.tsx
+++ b/src/discounts/components/DiscountRules/componenets/RuleDeleteModal/RuleDeleteModal.tsx
@@ -25,9 +25,7 @@ export const RuleDeleteModal = ({
   return (
     <DashboardModal open={open} onChange={onClose}>
       <DashboardModal.Content size="xs" data-test-id="delete-rule-dialog">
-        <DashboardModal.Header onClose={onClose}>
-          {intl.formatMessage(messages.deleteRule)}
-        </DashboardModal.Header>
+        <DashboardModal.Header>{intl.formatMessage(messages.deleteRule)}</DashboardModal.Header>
 
         <Text>
           <FormattedMessage {...messages.deleteRuleDescription} />
diff --git a/src/discounts/components/DiscountRules/componenets/RuleFormModal/RuleFormModal.tsx b/src/discounts/components/DiscountRules/componenets/RuleFormModal/RuleFormModal.tsx
index 38b9570f1f3..e53a0f2cce9 100644
--- a/src/discounts/components/DiscountRules/componenets/RuleFormModal/RuleFormModal.tsx
+++ b/src/discounts/components/DiscountRules/componenets/RuleFormModal/RuleFormModal.tsx
@@ -39,7 +39,7 @@ export const RuleFormModal = ({
   return (
     <DashboardModal open={true} onChange={onClose}>
       <DashboardModal.Content size="sm" data-test-id="add-rule-dialog">
-        <DashboardModal.Header onClose={onClose}>
+        <DashboardModal.Header>
           <FormattedMessage {...(initialFormValues ? messages.editRule : messages.addRule)} />
         </DashboardModal.Header>
         <FormProvider {...methods}>
diff --git a/src/discounts/components/VoucherCodesDeleteDialog/VoucherCodesDeleteDialog.tsx b/src/discounts/components/VoucherCodesDeleteDialog/VoucherCodesDeleteDialog.tsx
index eb8a1ef694d..477a2f52865 100644
--- a/src/discounts/components/VoucherCodesDeleteDialog/VoucherCodesDeleteDialog.tsx
+++ b/src/discounts/components/VoucherCodesDeleteDialog/VoucherCodesDeleteDialog.tsx
@@ -24,7 +24,7 @@ export const VoucherCodesDeleteDialog = ({
   return (
     <DashboardModal open={open} onChange={onClose}>
       <DashboardModal.Content size="xs">
-        <DashboardModal.Header onClose={onClose}>
+        <DashboardModal.Header>
           <FormattedMessage id="WMN0q+" defaultMessage="Delete voucher codes" />
         </DashboardModal.Header>
 
diff --git a/src/discounts/components/VoucherCodesGenerateDialog/VoucherCodesGenerateDialog.tsx b/src/discounts/components/VoucherCodesGenerateDialog/VoucherCodesGenerateDialog.tsx
index aa7f330860b..6629d51a5bb 100644
--- a/src/discounts/components/VoucherCodesGenerateDialog/VoucherCodesGenerateDialog.tsx
+++ b/src/discounts/components/VoucherCodesGenerateDialog/VoucherCodesGenerateDialog.tsx
@@ -57,9 +57,7 @@ export const VoucherCodesGenerateDialog = ({
   return (
     <DashboardModal open={open} onChange={handleModalClose}>
       <DashboardModal.Content size="xs">
-        <DashboardModal.Header onClose={onClose}>
-          {intl.formatMessage(messages.title)}
-        </DashboardModal.Header>
+        <DashboardModal.Header>{intl.formatMessage(messages.title)}</DashboardModal.Header>
         <Box display="grid" gap={3} __width={390}>
           <Input
             name="quantity"
diff --git a/src/discounts/components/VoucherCodesManualDialog/VoucherCodesManualDialog.tsx b/src/discounts/components/VoucherCodesManualDialog/VoucherCodesManualDialog.tsx
index 9d9c461cfaf..cf54688065c 100644
--- a/src/discounts/components/VoucherCodesManualDialog/VoucherCodesManualDialog.tsx
+++ b/src/discounts/components/VoucherCodesManualDialog/VoucherCodesManualDialog.tsx
@@ -45,7 +45,7 @@ export const VoucherCodesManualDialog = ({
   return (
     <DashboardModal open={open} onChange={handleModalClose}>
       <DashboardModal.Content size="xs">
-        <DashboardModal.Header onClose={onClose}>
+        <DashboardModal.Header>
           <FormattedMessage defaultMessage="Enter Voucher Code" id="giVGCH" />
         </DashboardModal.Header>
         <Box display="grid" gap={3} __width={390}>
diff --git a/src/giftCards/GiftCardBulkCreateDialog/GiftCardBulkCreateDialog.tsx b/src/giftCards/GiftCardBulkCreateDialog/GiftCardBulkCreateDialog.tsx
index 06d76b52235..dd7318214aa 100644
--- a/src/giftCards/GiftCardBulkCreateDialog/GiftCardBulkCreateDialog.tsx
+++ b/src/giftCards/GiftCardBulkCreateDialog/GiftCardBulkCreateDialog.tsx
@@ -109,9 +109,7 @@ const GiftCardBulkCreateDialog: React.FC<DialogProps> = ({ onClose, open }) => {
     <>
       <DashboardModal open={open} onChange={onClose}>
         <DashboardModal.Content size="sm">
-          <DashboardModal.Header onClose={onClose}>
-            {intl.formatMessage(messages.title)}
-          </DashboardModal.Header>
+          <DashboardModal.Header>{intl.formatMessage(messages.title)}</DashboardModal.Header>
           <ContentWithProgress>
             {!loadingChannelCurrencies && (
               <GiftCardBulkCreateDialogForm
diff --git a/src/giftCards/GiftCardCreateDialog/GiftCardBulkCreateSuccessDialog.tsx b/src/giftCards/GiftCardCreateDialog/GiftCardBulkCreateSuccessDialog.tsx
index 583c8d5260c..c5a8d6de876 100644
--- a/src/giftCards/GiftCardCreateDialog/GiftCardBulkCreateSuccessDialog.tsx
+++ b/src/giftCards/GiftCardCreateDialog/GiftCardBulkCreateSuccessDialog.tsx
@@ -27,7 +27,7 @@ const GiftCardBulkCreateSuccessDialog: React.FC<GiftCardBulkCreateSuccessDialogP
     <>
       <DashboardModal open={open} onChange={onClose}>
         <DashboardModal.Content size="sm">
-          <DashboardModal.Header onClose={onClose}>
+          <DashboardModal.Header>
             {intl.formatMessage(messages.bulkCreateIssuedTitle)}
           </DashboardModal.Header>
 
diff --git a/src/giftCards/GiftCardCreateDialog/GiftCardCreateDialogContent.tsx b/src/giftCards/GiftCardCreateDialog/GiftCardCreateDialogContent.tsx
index fffaf608c8d..829089ae410 100644
--- a/src/giftCards/GiftCardCreateDialog/GiftCardCreateDialogContent.tsx
+++ b/src/giftCards/GiftCardCreateDialog/GiftCardCreateDialogContent.tsx
@@ -78,9 +78,7 @@ const GiftCardCreateDialogContent: React.FC<GiftCardCreateDialogContentProps> =
 
   return (
     <DashboardModal.Content size="sm" data-test-id="gift-card-dialog">
-      <DashboardModal.Header onClose={onClose}>
-        {intl.formatMessage(messages.title)}
-      </DashboardModal.Header>
+      <DashboardModal.Header>{intl.formatMessage(messages.title)}</DashboardModal.Header>
       {cardCode ? (
         <GiftCardCreateDialogCodeContent cardCode={cardCode} onClose={handleClose} />
       ) : (
diff --git a/src/giftCards/GiftCardExportDialogContent/GiftCardExportDialogContent.tsx b/src/giftCards/GiftCardExportDialogContent/GiftCardExportDialogContent.tsx
index 099184789e2..7a1956b634d 100644
--- a/src/giftCards/GiftCardExportDialogContent/GiftCardExportDialogContent.tsx
+++ b/src/giftCards/GiftCardExportDialogContent/GiftCardExportDialogContent.tsx
@@ -97,7 +97,7 @@ const GiftCardExportDialog: React.FC<
 
   return (
     <DashboardModal.Content size="sm">
-      <DashboardModal.Header onClose={onClose}>
+      <DashboardModal.Header>
         <FormattedMessage {...messages.title} />
       </DashboardModal.Header>
 
diff --git a/src/navigation/components/MenuCreateDialog/MenuCreateDialog.tsx b/src/navigation/components/MenuCreateDialog/MenuCreateDialog.tsx
index 8d5a677d2c4..8788167c53e 100644
--- a/src/navigation/components/MenuCreateDialog/MenuCreateDialog.tsx
+++ b/src/navigation/components/MenuCreateDialog/MenuCreateDialog.tsx
@@ -44,7 +44,7 @@ const MenuCreateDialog: React.FC<MenuCreateDialogProps> = ({
         <Form initial={initialForm} onSubmit={onConfirm}>
           {({ change, data, submit }) => (
             <Box display="grid" gap={6}>
-              <DashboardModal.Header onClose={onClose} data-test-id="create-menu-dialog-title">
+              <DashboardModal.Header data-test-id="create-menu-dialog-title">
                 <FormattedMessage
                   id="0OtaXa"
                   defaultMessage="Create Menu"
diff --git a/src/navigation/components/MenuItemDialog/MenuItemDialog.tsx b/src/navigation/components/MenuItemDialog/MenuItemDialog.tsx
index 2fbd6f4af9b..941be675893 100644
--- a/src/navigation/components/MenuItemDialog/MenuItemDialog.tsx
+++ b/src/navigation/components/MenuItemDialog/MenuItemDialog.tsx
@@ -98,7 +98,7 @@ const MenuItemDialog: React.FC<MenuItemDialogProps> = ({
       <DashboardModal.Content size="sm">
         <form onSubmit={handleSubmit(onSubmit)}>
           <DashboardModal.Grid>
-            <DashboardModal.Header onClose={onClose} data-test-id="add-menu-item-dialog-title">
+            <DashboardModal.Header data-test-id="add-menu-item-dialog-title">
               {initial
                 ? intl.formatMessage({
                     id: "KKQUMK",
diff --git a/src/orders/components/OrderCancelDialog/OrderCancelDialog.tsx b/src/orders/components/OrderCancelDialog/OrderCancelDialog.tsx
index 6e6974231c9..dd0b46702cd 100644
--- a/src/orders/components/OrderCancelDialog/OrderCancelDialog.tsx
+++ b/src/orders/components/OrderCancelDialog/OrderCancelDialog.tsx
@@ -34,7 +34,7 @@ export const OrderCancelDialog: React.FC<OrderCancelDialogProps> = props => {
   return (
     <DashboardModal onChange={onClose} open={open}>
       <DashboardModal.Content size="sm">
-        <DashboardModal.Header onClose={onClose} data-test-id="dialog-title">
+        <DashboardModal.Header data-test-id="dialog-title">
           <FormattedMessage {...cancelOrderDialogMessages.dialogTitle} values={{ orderNumber }} />
         </DashboardModal.Header>
         <Text>
diff --git a/src/orders/components/OrderCannotCancelOrderDialog/OrderCannotCancelOrderDialog.tsx b/src/orders/components/OrderCannotCancelOrderDialog/OrderCannotCancelOrderDialog.tsx
index 121e84aca32..3be9d23b714 100644
--- a/src/orders/components/OrderCannotCancelOrderDialog/OrderCannotCancelOrderDialog.tsx
+++ b/src/orders/components/OrderCannotCancelOrderDialog/OrderCannotCancelOrderDialog.tsx
@@ -9,7 +9,7 @@ const OrderCannotCancelOrderDialog: React.FC<DialogProps> = ({ open, onClose })
   return (
     <DashboardModal onChange={onClose} open={open}>
       <DashboardModal.Content size="sm">
-        <DashboardModal.Header onClose={onClose}>
+        <DashboardModal.Header>
           <FormattedMessage
             id="NhQboB"
             defaultMessage="Saleor couldn’t cancel order"
diff --git a/src/orders/components/OrderChangeWarehouseDialog/OrderChangeWarehouseDialog.tsx b/src/orders/components/OrderChangeWarehouseDialog/OrderChangeWarehouseDialog.tsx
index 050574c08df..0ef1cbf2283 100644
--- a/src/orders/components/OrderChangeWarehouseDialog/OrderChangeWarehouseDialog.tsx
+++ b/src/orders/components/OrderChangeWarehouseDialog/OrderChangeWarehouseDialog.tsx
@@ -84,7 +84,7 @@ export const OrderChangeWarehouseDialog: React.FC<OrderChangeWarehouseDialogProp
   return (
     <DashboardModal open={open} onChange={onClose}>
       <DashboardModal.Content size="sm" __gridTemplateRows="auto auto auto auto 1fr">
-        <DashboardModal.Header onClose={onClose}>
+        <DashboardModal.Header>
           <FormattedMessage {...messages.dialogTitle} />
           <Text size={3} display="block">
             <FormattedMessage
diff --git a/src/orders/components/OrderCustomerAddressesEditDialog/OrderCustomerAddressesEditDialog.tsx b/src/orders/components/OrderCustomerAddressesEditDialog/OrderCustomerAddressesEditDialog.tsx
index 628b76c1fac..e7a4789bb03 100644
--- a/src/orders/components/OrderCustomerAddressesEditDialog/OrderCustomerAddressesEditDialog.tsx
+++ b/src/orders/components/OrderCustomerAddressesEditDialog/OrderCustomerAddressesEditDialog.tsx
@@ -253,7 +253,7 @@ const OrderCustomerAddressesEditDialog: React.FC<OrderCustomerAddressesEditDialo
 
             return (
               <DashboardModal.Grid>
-                <DashboardModal.Header onClose={onClose}>
+                <DashboardModal.Header>
                   <FormattedMessage {...getDialogTitle()} />
                 </DashboardModal.Header>
 
diff --git a/src/orders/components/OrderCustomerChangeDialog/OrderCustomerChangeDialog.tsx b/src/orders/components/OrderCustomerChangeDialog/OrderCustomerChangeDialog.tsx
index 256868bfd61..9dc4f60e675 100644
--- a/src/orders/components/OrderCustomerChangeDialog/OrderCustomerChangeDialog.tsx
+++ b/src/orders/components/OrderCustomerChangeDialog/OrderCustomerChangeDialog.tsx
@@ -27,7 +27,7 @@ const OrderCustomerChangeDialog: React.FC<OrderCustomerChangeDialogProps> = prop
         <OrderCustomerChangeForm onSubmit={onConfirm}>
           {({ change, data }) => (
             <Box display="grid" gap={6}>
-              <DashboardModal.Header onClose={onClose}>
+              <DashboardModal.Header>
                 <FormattedMessage {...messages.title} />
               </DashboardModal.Header>
               <Text>
diff --git a/src/orders/components/OrderFulfillmentApproveDialog/OrderFulfillmentApproveDialog.tsx b/src/orders/components/OrderFulfillmentApproveDialog/OrderFulfillmentApproveDialog.tsx
index 8dfc5911cb5..71328d69e90 100644
--- a/src/orders/components/OrderFulfillmentApproveDialog/OrderFulfillmentApproveDialog.tsx
+++ b/src/orders/components/OrderFulfillmentApproveDialog/OrderFulfillmentApproveDialog.tsx
@@ -35,7 +35,7 @@ const OrderFulfillmentApproveDialog: React.FC<OrderFulfillmentAcceptDialogProps>
         <Form initial={{ notifyCustomer: true }} onSubmit={onConfirm}>
           {({ change, data, submit }) => (
             <DashboardModal.Grid>
-              <DashboardModal.Header onClose={onClose}>
+              <DashboardModal.Header>
                 <FormattedMessage {...messages.title} />
               </DashboardModal.Header>
 
diff --git a/src/orders/components/OrderFulfillmentCancelDialog/OrderFulfillmentCancelDialog.tsx b/src/orders/components/OrderFulfillmentCancelDialog/OrderFulfillmentCancelDialog.tsx
index 8d19dcaa03a..c03b8fbf9e8 100644
--- a/src/orders/components/OrderFulfillmentCancelDialog/OrderFulfillmentCancelDialog.tsx
+++ b/src/orders/components/OrderFulfillmentCancelDialog/OrderFulfillmentCancelDialog.tsx
@@ -63,7 +63,7 @@ const OrderFulfillmentCancelDialog: React.FC<OrderFulfillmentCancelDialogProps>
 
           return (
             <DashboardModal.Content size="sm">
-              <DashboardModal.Header onClose={onClose}>
+              <DashboardModal.Header>
                 <FormattedMessage
                   id="bb4nSp"
                   defaultMessage="Cancel Fulfillment"
diff --git a/src/orders/components/OrderFulfillmentTrackingDialog/OrderFulfillmentTrackingDialog.tsx b/src/orders/components/OrderFulfillmentTrackingDialog/OrderFulfillmentTrackingDialog.tsx
index e1714fc994a..b5af241da44 100644
--- a/src/orders/components/OrderFulfillmentTrackingDialog/OrderFulfillmentTrackingDialog.tsx
+++ b/src/orders/components/OrderFulfillmentTrackingDialog/OrderFulfillmentTrackingDialog.tsx
@@ -48,7 +48,7 @@ const OrderFulfillmentTrackingDialog: React.FC<OrderFulfillmentTrackingDialogPro
         <Form initial={initialData} onSubmit={onConfirm}>
           {({ change, data, submit }) => (
             <DashboardModal.Grid>
-              <DashboardModal.Header onClose={onClose}>
+              <DashboardModal.Header>
                 <FormattedMessage
                   id="/BJQIq"
                   defaultMessage="Add Tracking Code"
diff --git a/src/orders/components/OrderInvoiceEmailSendDialog/OrderInvoiceEmailSendDialog.tsx b/src/orders/components/OrderInvoiceEmailSendDialog/OrderInvoiceEmailSendDialog.tsx
index 5db225e9b27..ec94d041ad0 100644
--- a/src/orders/components/OrderInvoiceEmailSendDialog/OrderInvoiceEmailSendDialog.tsx
+++ b/src/orders/components/OrderInvoiceEmailSendDialog/OrderInvoiceEmailSendDialog.tsx
@@ -30,7 +30,7 @@ const OrderInvoiceEmailSendDialog: React.FC<OrderInvoiceEmailSendDialogProps> =
   return (
     <DashboardModal onChange={onClose} open={open}>
       <DashboardModal.Content size="sm">
-        <DashboardModal.Header onClose={onClose}>
+        <DashboardModal.Header>
           {intl.formatMessage({
             id: "5JT4v2",
             defaultMessage: "Send Invoice",
diff --git a/src/orders/components/OrderManualTransactionDialog/OrderManualTransactionDialog.tsx b/src/orders/components/OrderManualTransactionDialog/OrderManualTransactionDialog.tsx
index a228f98610b..524d8904cf4 100644
--- a/src/orders/components/OrderManualTransactionDialog/OrderManualTransactionDialog.tsx
+++ b/src/orders/components/OrderManualTransactionDialog/OrderManualTransactionDialog.tsx
@@ -27,7 +27,7 @@ export const OrderManualTransactionDialog: React.FC<OrderManualTransactionDialog
     <OrderManualTransactionForm {...props}>
       <DashboardModal {...dialogProps}>
         <DashboardModal.Content size="xs">
-          <DashboardModal.Header onClose={onClose}>
+          <DashboardModal.Header>
             <FormattedMessage {...manualTransactionMessages.dialogTitle} />
           </DashboardModal.Header>
 
diff --git a/src/orders/components/OrderMetadataDialog/OrderMetadataDialog.tsx b/src/orders/components/OrderMetadataDialog/OrderMetadataDialog.tsx
index 83f1ff336d3..392eb861ede 100644
--- a/src/orders/components/OrderMetadataDialog/OrderMetadataDialog.tsx
+++ b/src/orders/components/OrderMetadataDialog/OrderMetadataDialog.tsx
@@ -20,7 +20,7 @@ export const OrderMetadataDialog = ({ onClose, open, data, loading }: OrderMetad
   return (
     <DashboardModal open={open} onChange={onClose}>
       <DashboardModal.Content size="md">
-        <DashboardModal.Header onClose={onClose} paddingX={6}>
+        <DashboardModal.Header paddingX={6}>
           <FormattedMessage {...commonMessages.metadata} />: {data?.productName ?? ""}
         </DashboardModal.Header>
 
diff --git a/src/orders/components/OrderPaymentDialog/OrderPaymentDialog.tsx b/src/orders/components/OrderPaymentDialog/OrderPaymentDialog.tsx
index 804302683e2..47bab54a919 100644
--- a/src/orders/components/OrderPaymentDialog/OrderPaymentDialog.tsx
+++ b/src/orders/components/OrderPaymentDialog/OrderPaymentDialog.tsx
@@ -48,7 +48,7 @@ const OrderPaymentDialog: React.FC<OrderPaymentDialogProps> = ({
       >
         {({ data, change, submit }) => (
           <DashboardModal.Content size="sm">
-            <DashboardModal.Header onClose={onClose}>
+            <DashboardModal.Header>
               {intl.formatMessage({
                 id: "+PbHKD",
                 defaultMessage: "Capture Payment",
diff --git a/src/orders/components/OrderPaymentVoidDialog/OrderPaymentVoidDialog.tsx b/src/orders/components/OrderPaymentVoidDialog/OrderPaymentVoidDialog.tsx
index a90386738d3..cd38e36782a 100644
--- a/src/orders/components/OrderPaymentVoidDialog/OrderPaymentVoidDialog.tsx
+++ b/src/orders/components/OrderPaymentVoidDialog/OrderPaymentVoidDialog.tsx
@@ -30,7 +30,7 @@ const OrderPaymentVoidDialog: React.FC<OrderPaymentVoidDialogProps> = ({
   return (
     <DashboardModal onChange={onClose} open={open}>
       <DashboardModal.Content size="sm">
-        <DashboardModal.Header onClose={onClose}>
+        <DashboardModal.Header>
           <FormattedMessage id="KszPFx" defaultMessage="Void Payment" description="dialog header" />
         </DashboardModal.Header>
 
diff --git a/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx b/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx
index 024de1e211a..ba500b973bd 100644
--- a/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx
+++ b/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx
@@ -90,7 +90,7 @@ const OrderProductAddDialog: React.FC<OrderProductAddDialogProps> = props => {
   return (
     <DashboardModal onChange={onClose} open={open}>
       <DashboardModal.Content size="sm" __gridTemplateRows="auto auto auto 1fr">
-        <DashboardModal.Header onClose={onClose}>
+        <DashboardModal.Header>
           <FormattedMessage
             {...messages.title}
             values={{
diff --git a/src/orders/components/OrderRefundDialog/OrderRefundDialog.tsx b/src/orders/components/OrderRefundDialog/OrderRefundDialog.tsx
index 52e67dc9dc3..626524bd182 100644
--- a/src/orders/components/OrderRefundDialog/OrderRefundDialog.tsx
+++ b/src/orders/components/OrderRefundDialog/OrderRefundDialog.tsx
@@ -28,7 +28,7 @@ export const OrderRefundDialog = ({
   return (
     <DashboardModal open={open} onChange={onClose}>
       <DashboardModal.Content size="xs" data-test-id="order-refund-dialog">
-        <DashboardModal.Header onClose={onClose}>
+        <DashboardModal.Header>
           {intl.formatMessage(orderRefundDialogMesages.title)}
         </DashboardModal.Header>
         <Text>{intl.formatMessage(orderRefundDialogMesages.subtitle)}</Text>
diff --git a/src/orders/components/OrderShippingMethodEditDialog/OrderShippingMethodEditDialog.tsx b/src/orders/components/OrderShippingMethodEditDialog/OrderShippingMethodEditDialog.tsx
index 1349f395206..a743be50018 100644
--- a/src/orders/components/OrderShippingMethodEditDialog/OrderShippingMethodEditDialog.tsx
+++ b/src/orders/components/OrderShippingMethodEditDialog/OrderShippingMethodEditDialog.tsx
@@ -79,7 +79,7 @@ const OrderShippingMethodEditDialog: React.FC<OrderShippingMethodEditDialogProps
         {({ change, data, submit }) => (
           <>
             <DashboardModal.Content size="sm">
-              <DashboardModal.Header onClose={onClose}>
+              <DashboardModal.Header>
                 <FormattedMessage
                   id="V/YxJa"
                   defaultMessage="Edit Shipping Method"
diff --git a/src/orders/components/OrderTransactionActionDialog/OrderTransactionActionDialog.tsx b/src/orders/components/OrderTransactionActionDialog/OrderTransactionActionDialog.tsx
index ba2db178c89..dd77eb70258 100644
--- a/src/orders/components/OrderTransactionActionDialog/OrderTransactionActionDialog.tsx
+++ b/src/orders/components/OrderTransactionActionDialog/OrderTransactionActionDialog.tsx
@@ -32,7 +32,7 @@ export const OrderTransactionActionDialog: React.FC<OrderTransactionActionDialog
   return (
     <DashboardModal open={open} onChange={onClose}>
       <DashboardModal.Content size="sm">
-        <DashboardModal.Header onClose={onClose}>
+        <DashboardModal.Header>
           <FormattedMessage
             {...messages.title}
             values={{
diff --git a/src/orders/components/OrderTransactionRefundPage/components/OrderTransactionReasonModal/OrderTransactionReasonModal.tsx b/src/orders/components/OrderTransactionRefundPage/components/OrderTransactionReasonModal/OrderTransactionReasonModal.tsx
index 23cf95d8341..4c290109d32 100644
--- a/src/orders/components/OrderTransactionRefundPage/components/OrderTransactionReasonModal/OrderTransactionReasonModal.tsx
+++ b/src/orders/components/OrderTransactionRefundPage/components/OrderTransactionReasonModal/OrderTransactionReasonModal.tsx
@@ -28,7 +28,7 @@ export const OrderTransactionReasonModal = ({
   return (
     <DashboardModal open={open} onChange={onClose}>
       <DashboardModal.Content data-test-id="refund-reason-dialog" size="xs">
-        <DashboardModal.Header onClose={onClose}>
+        <DashboardModal.Header>
           <FormattedMessage
             {...(reason ? refundTableMessages.editReason : refundTableMessages.addReason)}
           />
diff --git a/src/pages/components/PageTypePickerDialog/PageTypePickerDialog.tsx b/src/pages/components/PageTypePickerDialog/PageTypePickerDialog.tsx
index ec1a95e096b..0c10f4c63a3 100644
--- a/src/pages/components/PageTypePickerDialog/PageTypePickerDialog.tsx
+++ b/src/pages/components/PageTypePickerDialog/PageTypePickerDialog.tsx
@@ -43,7 +43,7 @@ const PageTypePickerDialog: React.FC<PageTypePickerDialogProps> = ({
   return (
     <DashboardModal open={open} onChange={onClose}>
       <DashboardModal.Content size="xs">
-        <DashboardModal.Header onClose={onClose}>
+        <DashboardModal.Header>
           <FormattedMessage {...messages.selectPageType} />
         </DashboardModal.Header>
 
diff --git a/src/permissionGroups/components/AssignMembersDialog/AssignMembersDialog.tsx b/src/permissionGroups/components/AssignMembersDialog/AssignMembersDialog.tsx
index e2d7ae84542..112da5c5957 100644
--- a/src/permissionGroups/components/AssignMembersDialog/AssignMembersDialog.tsx
+++ b/src/permissionGroups/components/AssignMembersDialog/AssignMembersDialog.tsx
@@ -129,7 +129,7 @@ const AssignMembersDialog: React.FC<AssignMembersDialogProps> = ({
   return (
     <DashboardModal onChange={onClose} open={open}>
       <DashboardModal.Content size="sm" __gridTemplateRows="auto auto 1fr">
-        <DashboardModal.Header onClose={onClose}>
+        <DashboardModal.Header>
           <FormattedMessage {...messages.title} />
         </DashboardModal.Header>
 
diff --git a/src/plugins/components/PluginSecretFieldDialog/PluginSecretFieldDialog.tsx b/src/plugins/components/PluginSecretFieldDialog/PluginSecretFieldDialog.tsx
index b855cc82478..7ece809f2b5 100644
--- a/src/plugins/components/PluginSecretFieldDialog/PluginSecretFieldDialog.tsx
+++ b/src/plugins/components/PluginSecretFieldDialog/PluginSecretFieldDialog.tsx
@@ -38,7 +38,7 @@ const PluginSecretFieldDialog: React.FC<PluginSecretFieldDialogProps> = ({
         <Form initial={initialForm} onSubmit={onConfirm}>
           {({ change, data, submit }) => (
             <DashboardModal.Grid>
-              <DashboardModal.Header onClose={onClose}>
+              <DashboardModal.Header>
                 {field ? (
                   field.value === null ? (
                     intl.formatMessage({
diff --git a/src/products/components/ProductExportDialog/ProductExportDialog.tsx b/src/products/components/ProductExportDialog/ProductExportDialog.tsx
index 0db9627fa3b..383126d9c23 100644
--- a/src/products/components/ProductExportDialog/ProductExportDialog.tsx
+++ b/src/products/components/ProductExportDialog/ProductExportDialog.tsx
@@ -213,7 +213,7 @@ const ProductExportDialog: React.FC<ProductExportDialogProps> = ({
   return (
     <DashboardModal onChange={onClose} open={open}>
       <DashboardModal.Content size="sm">
-        <DashboardModal.Header onClose={onClose}>
+        <DashboardModal.Header>
           <FormattedMessage {...messages.title} />
         </DashboardModal.Header>
 
diff --git a/src/products/components/ProductExternalMediaDialog/ProductExternalMediaDialog.tsx b/src/products/components/ProductExternalMediaDialog/ProductExternalMediaDialog.tsx
index 8352d7ed540..c6655ef7ef3 100644
--- a/src/products/components/ProductExternalMediaDialog/ProductExternalMediaDialog.tsx
+++ b/src/products/components/ProductExternalMediaDialog/ProductExternalMediaDialog.tsx
@@ -45,7 +45,7 @@ const ProductExternalMediaDialog: React.FC<ProductExternalMediaDialogProps> = ({
         <Form initial={initialValues} onSubmit={handleOnSubmit}>
           {({ change, data, submit }) => (
             <DashboardModal.Grid>
-              <DashboardModal.Header onClose={onClose}>
+              <DashboardModal.Header>
                 <Text size={5} fontWeight="bold">
                   {intl.formatMessage(messages.buttonMessage)}
                 </Text>
diff --git a/src/products/components/ProductVariantDeleteDialog/ProductVariantDeleteDialog.tsx b/src/products/components/ProductVariantDeleteDialog/ProductVariantDeleteDialog.tsx
index b2585b402fa..e9a63e70f2a 100644
--- a/src/products/components/ProductVariantDeleteDialog/ProductVariantDeleteDialog.tsx
+++ b/src/products/components/ProductVariantDeleteDialog/ProductVariantDeleteDialog.tsx
@@ -19,7 +19,7 @@ const ProductVariantDeleteDialog: React.FC<ProductVariantDeleteDialogProps> = pr
   return (
     <DashboardModal onChange={onClose} open={open}>
       <DashboardModal.Content size="sm">
-        <DashboardModal.Header onClose={onClose}>
+        <DashboardModal.Header>
           <FormattedMessage
             id="GFJabu"
             defaultMessage="Delete Variant"
diff --git a/src/products/components/ProductVariantImageSelectDialog/ProductVariantMediaSelectDialog.tsx b/src/products/components/ProductVariantImageSelectDialog/ProductVariantMediaSelectDialog.tsx
index a29535acdbe..a7f0ea11688 100644
--- a/src/products/components/ProductVariantImageSelectDialog/ProductVariantMediaSelectDialog.tsx
+++ b/src/products/components/ProductVariantImageSelectDialog/ProductVariantMediaSelectDialog.tsx
@@ -42,7 +42,7 @@ const ProductVariantMediaSelectDialog: React.FC<ProductVariantImageSelectDialogP
   return (
     <DashboardModal onChange={onClose} open={open}>
       <DashboardModal.Content size="md" __gridTemplateRows="auto 1fr">
-        <DashboardModal.Header onClose={onClose}>
+        <DashboardModal.Header>
           <FormattedMessage
             id="iPk640"
             defaultMessage="Media Selection"
diff --git a/src/shipping/components/ShippingMethodProductsAddDialog/ShippingMethodProductsAddDialog.tsx b/src/shipping/components/ShippingMethodProductsAddDialog/ShippingMethodProductsAddDialog.tsx
index be176c005bc..f6087747f8d 100644
--- a/src/shipping/components/ShippingMethodProductsAddDialog/ShippingMethodProductsAddDialog.tsx
+++ b/src/shipping/components/ShippingMethodProductsAddDialog/ShippingMethodProductsAddDialog.tsx
@@ -98,7 +98,7 @@ const ShippingMethodProductsAddDialog: React.FC<ShippingMethodProductsAddDialogP
   return (
     <DashboardModal onChange={handleClose} open={open}>
       <DashboardModal.Content size="sm" __gridTemplateRows="auto auto 1fr">
-        <DashboardModal.Header onClose={onClose}>
+        <DashboardModal.Header>
           <FormattedMessage
             id="xZhxBJ"
             defaultMessage="Assign Products"
diff --git a/src/shipping/components/ShippingWeightUnitDialog/ShippingWeightUnitDialog.tsx b/src/shipping/components/ShippingWeightUnitDialog/ShippingWeightUnitDialog.tsx
index 54adf99884a..d051e69862e 100644
--- a/src/shipping/components/ShippingWeightUnitDialog/ShippingWeightUnitDialog.tsx
+++ b/src/shipping/components/ShippingWeightUnitDialog/ShippingWeightUnitDialog.tsx
@@ -24,7 +24,7 @@ export const ShippingWeightUnitDialog: React.FC<ShippingWeightUnitDialogProps> =
   return (
     <DashboardModal open={open} onChange={onClose}>
       <DashboardModal.Content size="sm">
-        <DashboardModal.Header onClose={onClose}>
+        <DashboardModal.Header>
           <FormattedMessage
             description="weight config modal title"
             defaultMessage="Default weight unit configuration"
diff --git a/src/shipping/components/ShippingZoneAddWarehouseDialog/ShippingZoneAddWarehouseDialog.tsx b/src/shipping/components/ShippingZoneAddWarehouseDialog/ShippingZoneAddWarehouseDialog.tsx
index d35f5806b69..4315f7d9f63 100644
--- a/src/shipping/components/ShippingZoneAddWarehouseDialog/ShippingZoneAddWarehouseDialog.tsx
+++ b/src/shipping/components/ShippingZoneAddWarehouseDialog/ShippingZoneAddWarehouseDialog.tsx
@@ -75,7 +75,7 @@ const ShippingZoneAddWarehouseDialog: React.FC<ShippingZoneAddWarehouseDialogPro
 
           return (
             <DashboardModal.Content size="sm">
-              <DashboardModal.Header onClose={onClose}>
+              <DashboardModal.Header>
                 <FormattedMessage
                   id="yzYXW/"
                   defaultMessage="Create New Warehouse"
diff --git a/src/shipping/components/ShippingZoneCountriesAssignDialog/ShippingZoneCountriesAssignDialog.tsx b/src/shipping/components/ShippingZoneCountriesAssignDialog/ShippingZoneCountriesAssignDialog.tsx
index df56f217c33..012584299ce 100644
--- a/src/shipping/components/ShippingZoneCountriesAssignDialog/ShippingZoneCountriesAssignDialog.tsx
+++ b/src/shipping/components/ShippingZoneCountriesAssignDialog/ShippingZoneCountriesAssignDialog.tsx
@@ -66,7 +66,7 @@ const ShippingZoneCountriesAssignDialog: React.FC<
 
             return (
               <DashboardModal.Grid>
-                <DashboardModal.Header onClose={onClose}>
+                <DashboardModal.Header>
                   <FormattedMessage {...messages.assignCountriesTitle} />
                 </DashboardModal.Header>
 
diff --git a/src/shipping/components/ShippingZonePostalCodeRangeDialog/ShippingZonePostalCodeRangeDialog.tsx b/src/shipping/components/ShippingZonePostalCodeRangeDialog/ShippingZonePostalCodeRangeDialog.tsx
index 870e5e6f62c..c00ba55061c 100644
--- a/src/shipping/components/ShippingZonePostalCodeRangeDialog/ShippingZonePostalCodeRangeDialog.tsx
+++ b/src/shipping/components/ShippingZonePostalCodeRangeDialog/ShippingZonePostalCodeRangeDialog.tsx
@@ -33,7 +33,7 @@ const ShippingZonePostalCodeRangeDialog: React.FC<ShippingZonePostalCodeRangeDia
         <Form initial={initial} onSubmit={onSubmit}>
           {({ change, data }) => (
             <DashboardModal.Grid>
-              <DashboardModal.Header onClose={onClose}>
+              <DashboardModal.Header>
                 <FormattedMessage
                   id="2Xt+sw"
                   defaultMessage="Add postal codes"
diff --git a/src/staff/components/StaffAddMemberDialog/StaffAddMemberDialog.tsx b/src/staff/components/StaffAddMemberDialog/StaffAddMemberDialog.tsx
index f839a37b72c..c4b7aad51d4 100644
--- a/src/staff/components/StaffAddMemberDialog/StaffAddMemberDialog.tsx
+++ b/src/staff/components/StaffAddMemberDialog/StaffAddMemberDialog.tsx
@@ -63,7 +63,7 @@ const StaffAddMemberDialog: React.FC<StaffAddMemberDialogProps> = props => {
       >
         {({ change, data: formData, submit }) => (
           <DashboardModal.Content size="sm">
-            <DashboardModal.Header onClose={onClose}>
+            <DashboardModal.Header>
               <FormattedMessage
                 id="23g7PY"
                 defaultMessage="Invite Staff Member"
diff --git a/src/staff/components/StaffPasswordResetDialog/StaffPasswordResetDialog.tsx b/src/staff/components/StaffPasswordResetDialog/StaffPasswordResetDialog.tsx
index 7daf968d5ba..b0de8e889bd 100644
--- a/src/staff/components/StaffPasswordResetDialog/StaffPasswordResetDialog.tsx
+++ b/src/staff/components/StaffPasswordResetDialog/StaffPasswordResetDialog.tsx
@@ -44,7 +44,7 @@ const StaffPasswordResetDialog: React.FC<StaffPasswordResetDialogProps> = ({
       <Form initial={initialForm} onSubmit={onSubmit}>
         {({ change, data }) => (
           <DashboardModal.Content size="sm">
-            <DashboardModal.Header onClose={onClose}>
+            <DashboardModal.Header>
               <FormattedMessage
                 id="+kb2lM"
                 defaultMessage="Change Password"
diff --git a/src/taxes/components/TaxCountryDialog/TaxCountryDialog.tsx b/src/taxes/components/TaxCountryDialog/TaxCountryDialog.tsx
index db8248a40bf..ba1f9b86bea 100644
--- a/src/taxes/components/TaxCountryDialog/TaxCountryDialog.tsx
+++ b/src/taxes/components/TaxCountryDialog/TaxCountryDialog.tsx
@@ -46,7 +46,7 @@ export const TaxCountryDialog: React.FC<TaxCountryDialogProps> = ({
   return (
     <DashboardModal open={open} onChange={onClose}>
       <DashboardModal.Content size="sm">
-        <DashboardModal.Header onClose={onClose}>
+        <DashboardModal.Header>
           <FormattedMessage {...taxesMessages.chooseCountryDialogTitle} />
         </DashboardModal.Header>
 

From 65cbe1e68b605bf3698448cea4ff04f39a3666e4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Chy=C5=82a?= <pawel.chyla@saleor.io>
Date: Fri, 4 Oct 2024 11:53:18 +0200
Subject: [PATCH 6/7] Pass open

---
 src/components/Modal/Root.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Modal/Root.tsx b/src/components/Modal/Root.tsx
index 1536b01f801..cd05e5b0cba 100644
--- a/src/components/Modal/Root.tsx
+++ b/src/components/Modal/Root.tsx
@@ -7,7 +7,7 @@ type RootProps = ModalRootProps;
 export const Root = ({ children, onChange, open, ...rest }: RootProps) => {
   return (
     <ModalContextProvider onChange={onChange} open={open}>
-      <Modal onChange={onChange} {...rest}>
+      <Modal onChange={onChange} open={open} {...rest}>
         {children}
       </Modal>
     </ModalContextProvider>

From d39f023d9a632e66db03ca9db39c30cec4601a6f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Chy=C5=82a?= <pawel.chyla@saleor.io>
Date: Tue, 8 Oct 2024 16:02:26 +0200
Subject: [PATCH 7/7] Fix typo

---
 src/components/Modal/context.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Modal/context.tsx b/src/components/Modal/context.tsx
index d51ce9aabd0..60bc8692c7b 100644
--- a/src/components/Modal/context.tsx
+++ b/src/components/Modal/context.tsx
@@ -1,11 +1,11 @@
 import React, { createContext } from "react";
 
-interface ModalContext {
+interface ModalContextValues {
   open?: boolean;
   onChange?: (open: boolean) => void;
 }
 
-const modalContext = createContext<ModalContext | null>(null);
+const ModalContext = createContext<ModalContextValues | null>(null);
 
 export const ModalContextProvider = ({
   children,
@@ -16,11 +16,11 @@ export const ModalContextProvider = ({
   onChange?: (open: boolean) => void;
   open?: boolean;
 }) => {
-  return <modalContext.Provider value={{ open, onChange }}>{children}</modalContext.Provider>;
+  return <ModalContext.Provider value={{ open, onChange }}>{children}</ModalContext.Provider>;
 };
 
 export const useModalContext = () => {
-  const context = React.useContext(modalContext);
+  const context = React.useContext(ModalContext);
 
   if (!context) {
     throw new Error("useModalContext must be used within a ModalContextProvider");