From 0fb0905d0b89a18735a23ca780421daf7a594e30 Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Wed, 15 Dec 2021 14:28:36 +0100
Subject: [PATCH 1/3] use semantic heading on dialog

Signed-off-by: Kerry Archibald <kerrya@element.io>
---
 res/css/_common.scss                        | 13 +++++++------
 src/components/views/dialogs/BaseDialog.tsx |  5 +++--
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/res/css/_common.scss b/res/css/_common.scss
index e4a5f8ddd06..ce513de5816 100644
--- a/res/css/_common.scss
+++ b/res/css/_common.scss
@@ -355,6 +355,7 @@ legend {
 
 .mx_Dialog_header {
     position: relative;
+    padding: 3px 0;
     margin-bottom: 10px;
 }
 
@@ -367,17 +368,17 @@ legend {
 }
 
 .mx_Dialog_title {
-    font-size: $font-22px;
-    font-weight: $font-semi-bold;
-    line-height: $font-36px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
     color: $dialog-title-fg-color;
 }
 
 .mx_Dialog_header.mx_Dialog_headerWithButton > .mx_Dialog_title {
-    text-align: center;
+    justify-content: center;
 }
-.mx_Dialog_header.mx_Dialog_headerWithCancel > .mx_Dialog_title {
-    margin-right: 20px; // leave space for the 'X' cancel button
+.mx_Dialog_header.mx_Dialog_headerWithCancel {
+    padding-right: 20px; // leave space for the 'X' cancel button
 }
 
 .mx_Dialog_title.danger {
diff --git a/src/components/views/dialogs/BaseDialog.tsx b/src/components/views/dialogs/BaseDialog.tsx
index 15c9114ca2f..abaca1ac4e9 100644
--- a/src/components/views/dialogs/BaseDialog.tsx
+++ b/src/components/views/dialogs/BaseDialog.tsx
@@ -28,6 +28,7 @@ import { _t } from "../../../languageHandler";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { IDialogProps } from "./IDialogProps";
+import Heading from '../typography/Heading';
 
 interface IProps extends IDialogProps {
     // Whether the dialog should have a 'close' button that will
@@ -141,10 +142,10 @@ export default class BaseDialog extends React.Component<IProps> {
                         'mx_Dialog_headerWithButton': !!this.props.headerButton,
                         'mx_Dialog_headerWithCancel': !!cancelButton,
                     })}>
-                        <div className={classNames('mx_Dialog_title', this.props.titleClass)} id='mx_BaseDialog_title'>
+                        <Heading size='h2' className={classNames('mx_Dialog_title', this.props.titleClass)} id='mx_BaseDialog_title'>
                             { headerImage }
                             { this.props.title }
-                        </div>
+                        </Heading>
                         { this.props.headerButton }
                         { cancelButton }
                     </div>

From 6d6d2766c9228242d35e5e1d5eb26dde1cbff131 Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Wed, 15 Dec 2021 15:29:21 +0100
Subject: [PATCH 2/3] tidy styles

Signed-off-by: Kerry Archibald <kerrya@element.io>
---
 res/css/_common.scss                       | 7 ++++---
 res/css/views/dialogs/_SettingsDialog.scss | 4 ----
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/res/css/_common.scss b/res/css/_common.scss
index ce513de5816..a48f9a4dbd0 100644
--- a/res/css/_common.scss
+++ b/res/css/_common.scss
@@ -365,13 +365,14 @@ legend {
     height: 25px;
     margin-left: -2px;
     margin-right: 4px;
+    margin-bottom: 2px;
 }
 
 .mx_Dialog_title {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
     color: $dialog-title-fg-color;
+    display: inline-block;
+    width: 100%;
+    box-sizing: border-box;
 }
 
 .mx_Dialog_header.mx_Dialog_headerWithButton > .mx_Dialog_title {
diff --git a/res/css/views/dialogs/_SettingsDialog.scss b/res/css/views/dialogs/_SettingsDialog.scss
index f9b373c30a1..59aed520fd7 100644
--- a/res/css/views/dialogs/_SettingsDialog.scss
+++ b/res/css/views/dialogs/_SettingsDialog.scss
@@ -36,8 +36,4 @@ limitations under the License.
         // colliding harshly with the dialog when scrolled down.
         padding-bottom: 100px;
     }
-
-    .mx_Dialog_title {
-        margin-bottom: 24px;
-    }
 }

From 273aa3c87bd57f4f76690e4b73dac01cc47857c2 Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Wed, 15 Dec 2021 15:33:29 +0100
Subject: [PATCH 3/3] un-flex text centering

Signed-off-by: Kerry Archibald <kerrya@element.io>
---
 res/css/_common.scss                        | 2 +-
 src/components/views/dialogs/BaseDialog.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/res/css/_common.scss b/res/css/_common.scss
index a48f9a4dbd0..b153d2c3cb8 100644
--- a/res/css/_common.scss
+++ b/res/css/_common.scss
@@ -376,7 +376,7 @@ legend {
 }
 
 .mx_Dialog_header.mx_Dialog_headerWithButton > .mx_Dialog_title {
-    justify-content: center;
+    text-align: center;
 }
 .mx_Dialog_header.mx_Dialog_headerWithCancel {
     padding-right: 20px; // leave space for the 'X' cancel button
diff --git a/src/components/views/dialogs/BaseDialog.tsx b/src/components/views/dialogs/BaseDialog.tsx
index abaca1ac4e9..52773c13b93 100644
--- a/src/components/views/dialogs/BaseDialog.tsx
+++ b/src/components/views/dialogs/BaseDialog.tsx
@@ -27,8 +27,8 @@ import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import { _t } from "../../../languageHandler";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
-import { IDialogProps } from "./IDialogProps";
 import Heading from '../typography/Heading';
+import { IDialogProps } from "./IDialogProps";
 
 interface IProps extends IDialogProps {
     // Whether the dialog should have a 'close' button that will