OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Use semantic heading on dialog component (#7383) 

* use semantic heading on dialog

Signed-off-by: Kerry Archibald <kerrya@element.io>

* tidy styles

Signed-off-by: Kerry Archibald <kerrya@element.io>

* un-flex text centering

Signed-off-by: Kerry Archibald <kerrya@element.io>
pull/21833/head
Kerry 2021-12-15 17:05:58 +01:00 committed by GitHub
parent 43839adec0
commit b174cc8963
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 10 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
res/css/_common.scss
View File

@ -355,6 +355,7 @@ legend {
.mx_Dialog_header { .mx_Dialog_header {
position: relative; position: relative;
padding: 3px 0;
margin-bottom: 10px; margin-bottom: 10px;
} }
@ -364,20 +365,21 @@ legend {
height: 25px; height: 25px;
margin-left: -2px; margin-left: -2px;
margin-right: 4px; margin-right: 4px;
margin-bottom: 2px;
} }
.mx_Dialog_title { .mx_Dialog_title {
font-size: $font-22px;
font-weight: $font-semi-bold;
line-height: $font-36px;
color: $dialog-title-fg-color; color: $dialog-title-fg-color;
display: inline-block;
width: 100%;
box-sizing: border-box;
} }
.mx_Dialog_header.mx_Dialog_headerWithButton > .mx_Dialog_title { .mx_Dialog_header.mx_Dialog_headerWithButton > .mx_Dialog_title {
text-align: center; text-align: center;
} }
.mx_Dialog_header.mx_Dialog_headerWithCancel > .mx_Dialog_title { .mx_Dialog_header.mx_Dialog_headerWithCancel {
margin-right: 20px; // leave space for the 'X' cancel button padding-right: 20px; // leave space for the 'X' cancel button
} }
.mx_Dialog_title.danger { .mx_Dialog_title.danger {

4
res/css/views/dialogs/_SettingsDialog.scss
View File

@ -36,8 +36,4 @@ limitations under the License.
// colliding harshly with the dialog when scrolled down. // colliding harshly with the dialog when scrolled down.
padding-bottom: 100px; padding-bottom: 100px;
} }
.mx_Dialog_title {
margin-bottom: 24px;
}
} }

5
src/components/views/dialogs/BaseDialog.tsx
View File

@ -27,6 +27,7 @@ import { MatrixClientPeg } from '../../../MatrixClientPeg';
import { _t } from "../../../languageHandler"; import { _t } from "../../../languageHandler";
import MatrixClientContext from "../../../contexts/MatrixClientContext"; import MatrixClientContext from "../../../contexts/MatrixClientContext";
import { replaceableComponent } from "../../../utils/replaceableComponent"; import { replaceableComponent } from "../../../utils/replaceableComponent";
import Heading from '../typography/Heading';
import { IDialogProps } from "./IDialogProps"; import { IDialogProps } from "./IDialogProps";
interface IProps extends IDialogProps { interface IProps extends IDialogProps {
@ -141,10 +142,10 @@ export default class BaseDialog extends React.Component<IProps> {
'mx_Dialog_headerWithButton': !!this.props.headerButton, 'mx_Dialog_headerWithButton': !!this.props.headerButton,
'mx_Dialog_headerWithCancel': !!cancelButton, '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 } { headerImage }
{ this.props.title } { this.props.title }
</div> </Heading>
{ this.props.headerButton } { this.props.headerButton }
{ cancelButton } { cancelButton }
</div> </div>