Added support for non-string header, refactoring.

packages/client/src/components/dialogs/ChangePricingPlanDialog/index.js

@@ -97,11 +97,7 @@ const ChangePricingPlanDialog = ({
       isLarge
       isLoading={!ready}
     >
-      <ModalDialog.Header>
-        <Text isBold fontSize="21px">
-          {t("ChangePricingPlan")}
-        </Text>
-      </ModalDialog.Header>
+      <ModalDialog.Header>{t("ChangePricingPlan")}</ModalDialog.Header>
       <ModalDialog.Body>
         <Text fontSize="13px" isBold className="cannot-downgrade-plan">
           {t("CannotChangePlan")}

packages/client/src/pages/PortalSettings/categories/data-management/backup/restore-backup/sub-components/backup-list/index.js

@@ -230,11 +230,7 @@ const BackupListModalDialog = (props) => {
       onClose={onModalClose}
       withFooterBorder
     >
-      <ModalDialog.Header>
-        <Text fontSize="21px" fontWeight={700}>
-          {t("BackupList")}
-        </Text>
-      </ModalDialog.Header>
+      <ModalDialog.Header>{t("BackupList")}</ModalDialog.Header>
       <ModalDialog.Body>
         <StyledBackupList
           isCopyingToLocal={isCopyingToLocal}

packages/login/src/components/LoginForm/sub-components/ForgotPasswordModalDialog.tsx

@@ -118,11 +118,7 @@ const ForgotPasswordModalDialog = ({
       onClose={onDialogClose}
       id="forgot-password-modal"
     >
-      <ModalDialog.Header>
-        <Text isBold fontSize="21px">
-          {t("PasswordRecoveryTitle")}
-        </Text>
-      </ModalDialog.Header>
+      <ModalDialog.Header>{t("PasswordRecoveryTitle")}</ModalDialog.Header>
       <ModalDialog.Body>
         <Text
           key="text-body"

packages/login/src/components/Register/sub-components/RegisterModalDialog.tsx

@@ -97,11 +97,7 @@ const RegisterModalDialog = ({
       onClose={onRegisterModalClose}
       isLarge
     >
-      <ModalDialog.Header>
-        <Text isBold fontSize="21px">
-          {t("RegisterTitle")}
-        </Text>
-      </ModalDialog.Header>
+      <ModalDialog.Header>{t("RegisterTitle")}</ModalDialog.Header>
       <ModalDialog.Body>
         <Text key="text-body" isBold={false} fontSize="13px" noSelect>
           {getDomainsBlock()}

packages/shared/components/aside/Aside.styled.tsx

@@ -126,6 +126,14 @@ const StyledHeaderContainer = styled.div`
     margin-inline: 16px 16px;
     gap: 16px;
   }
+
+  .heading {
+    font-family: ${(props) => props.theme.fontFamily};
+    color: ${(props) => props.theme.modalDialog.textColor};
+    font-weight: 700;
+    font-size: 21px;
+  }
+
   .arrow-button {
     margin-inline: 0 12px;
   }
@@ -145,13 +153,6 @@ const StyledHeaderContainer = styled.div`
     position: absolute;
     left: -16px;
     bottom: 0;
-
-    /* content: "";
-    border-bottom: ${(props) => props.theme.filesPanels.sharing.borderBottom};
-    width: 100%;
-    position: fixed;
-    left: 0;
-    top: 53px; */
   }
 `;
 export { StyledAside, StyledHeaderContainer };

packages/shared/components/aside/AsideHeader.tsx

@@ -32,7 +32,7 @@ import { Text } from "../text";
 import { AsideHeaderProps } from "./Aside.types";
 import { StyledHeaderContainer } from "./Aside.styled";
 import { RectangleSkeleton } from "../../skeletons/rectangle";
-
+import { Heading, HeadingSize } from "../heading";
 const AsideHeader = (props: AsideHeaderProps) => {
   const {
     isBackButton = false,
@@ -66,6 +66,8 @@ const AsideHeader = (props: AsideHeaderProps) => {
     />
   );
 
+  // TODO: Heading is temporary until all dialogues are checked
+
   const mainComponent = (
     <>
       {isBackButton && backButtonRender}
@@ -74,7 +76,9 @@ const AsideHeader = (props: AsideHeaderProps) => {
           {header}
         </Text>
       ) : (
-        header
+        <Heading className="heading" size={HeadingSize.medium} truncate>
+          {header}
+        </Heading>
       )}
       {headerIcons.length > 0 && (
         <div className="additional-icons-container">

packages/shared/components/recover-access-modal-dialog/RecoverAccessModalDialog.tsx

@@ -127,11 +127,7 @@ const RecoverAccessModalDialog: React.FC<IRecoverAccessModalDialogProps> = ({
       onClose={onRecoverModalClose}
       displayType={ModalDialogType.modal}
     >
-      <ModalDialog.Header>
-        <Text isBold fontSize="21px">
-          {t("Common:RecoverTitle")}
-        </Text>
-      </ModalDialog.Header>
+      <ModalDialog.Header>{t("Common:RecoverTitle")}</ModalDialog.Header>
       <ModalDialog.Body>
         <Text
           key="text-body"