Refine styles of menus, toasts, popovers, and modals (#12332)
* Refine styles of menus, toasts, popovers, and modals This is a reintroduction of https://github.com/matrix-org/matrix-react-sdk/pull/12247, with the difference that modal styles have now been refreshed as well. * Restore the fixed heights of some dialogs * Fix formatting and flaky screenshot
This commit is contained in:
Robin
GitHub
parent
0f251d8a55
commit
80c4c3c28c
65 changed files with 323 additions and 414 deletions
Binary file not shown.
|
Before Width: | Height: | Size: 5.5 KiB After Width: | Height: | Size: 5.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.6 KiB After Width: | Height: | Size: 7.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.4 KiB After Width: | Height: | Size: 7.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 MiB After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 31 KiB After Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 51 KiB After Width: | Height: | Size: 52 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 72 KiB After Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 53 KiB After Width: | Height: | Size: 55 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 56 KiB After Width: | Height: | Size: 57 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 62 KiB After Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.5 KiB After Width: | Height: | Size: 7.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 40 KiB |
|
|
@ -329,16 +329,21 @@ legend {
|
|||
justify-content: center;
|
||||
}
|
||||
|
||||
.mx_Dialog_border {
|
||||
z-index: var(--dialog-zIndex-standard);
|
||||
position: relative;
|
||||
max-height: calc(100% - var(--cpd-space-12x));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.mx_Dialog {
|
||||
background-color: $background;
|
||||
color: $light-fg-color;
|
||||
z-index: var(--dialog-zIndex-standard);
|
||||
font-size: $font-15px;
|
||||
position: relative;
|
||||
padding: 24px;
|
||||
max-height: 80%;
|
||||
box-shadow: 2px 15px 30px 0 $dialog-shadow-color;
|
||||
border-radius: 8px;
|
||||
padding: var(--cpd-space-8x) var(--cpd-space-10x);
|
||||
box-sizing: border-box;
|
||||
overflow-y: auto;
|
||||
|
||||
.mx_Dialog_staticWrapper & {
|
||||
|
|
@ -439,7 +444,6 @@ legend {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: $dialog-backdrop-color;
|
||||
opacity: 0.8;
|
||||
z-index: var(--dialog-zIndex-standard-background);
|
||||
|
||||
&.mx_Dialog_staticBackground {
|
||||
|
|
@ -483,21 +487,13 @@ legend {
|
|||
|
||||
.mx_Dialog_header {
|
||||
position: relative;
|
||||
padding: 3px 0;
|
||||
margin-bottom: 10px;
|
||||
padding: 0;
|
||||
padding-inline-end: 20px; /* Reserve room for the close button */
|
||||
margin-bottom: var(--cpd-space-2x);
|
||||
|
||||
&.mx_Dialog_headerWithButton > .mx_Dialog_title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.mx_Dialog_headerWithCancel {
|
||||
padding-right: 20px; /* leave space for the 'X' cancel button */
|
||||
}
|
||||
|
||||
&.mx_Dialog_headerWithCancelOnly {
|
||||
padding: 0 20px 0 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@define-mixin customisedCancelButton {
|
||||
|
|
@ -528,8 +524,8 @@ legend {
|
|||
.mx_Dialog_cancelButton {
|
||||
@mixin customisedCancelButton;
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 0;
|
||||
top: var(--cpd-space-4x);
|
||||
right: var(--cpd-space-4x);
|
||||
}
|
||||
|
||||
.mx_Dialog_content {
|
||||
|
|
|
|||
|
|
@ -30,9 +30,10 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_ContextualMenu {
|
||||
border-radius: 8px;
|
||||
box-shadow: 4px 4px 12px 0 $menu-box-shadow-color;
|
||||
background-color: $menu-bg-color;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.1);
|
||||
background-color: var(--cpd-color-bg-canvas-default);
|
||||
border: var(--cpd-border-width-1) solid var(--cpd-color-border-interactive-secondary);
|
||||
color: $primary-content;
|
||||
position: absolute;
|
||||
z-index: 5001;
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@ limitations under the License.
|
|||
font-weight: var(--cpd-font-weight-semibold);
|
||||
font-size: $font-15px;
|
||||
line-height: $font-24px;
|
||||
color: $primary-content;
|
||||
color: var(--cpd-color-text-secondary);
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
|
||||
|
|
@ -76,7 +76,7 @@ limitations under the License.
|
|||
font-size: $font-12px;
|
||||
line-height: $font-15px;
|
||||
text-transform: uppercase;
|
||||
color: $tertiary-content;
|
||||
color: var(--cpd-color-text-secondary);
|
||||
margin: 20px 0 12px;
|
||||
}
|
||||
|
||||
|
|
@ -97,7 +97,7 @@ limitations under the License.
|
|||
margin-left: 6px;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-24px;
|
||||
color: $secondary-content;
|
||||
color: var(--cpd-color-text-primary);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -106,7 +106,7 @@ limitations under the License.
|
|||
margin-left: 22px;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-24px;
|
||||
color: $secondary-content;
|
||||
color: var(--cpd-color-text-primary);
|
||||
position: relative;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ limitations under the License.
|
|||
|
||||
.mx_TabbedView {
|
||||
margin: 0;
|
||||
padding: 0 0 0 16px;
|
||||
padding: 0 0 0 var(--cpd-space-8x);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
inset: 0;
|
||||
|
|
|
|||
|
|
@ -36,16 +36,17 @@ limitations under the License.
|
|||
.mx_Toast_toast {
|
||||
grid-row: 1 / 3;
|
||||
grid-column: 1;
|
||||
background-color: $system;
|
||||
background-color: var(--cpd-color-bg-canvas-default);
|
||||
color: $primary-content;
|
||||
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.1);
|
||||
border: var(--cpd-border-width-1) solid var(--cpd-color-border-interactive-secondary);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
grid-template-columns: 22px 1fr;
|
||||
column-gap: 8px;
|
||||
row-gap: 4px;
|
||||
padding: 8px;
|
||||
padding: var(--cpd-space-3x);
|
||||
|
||||
&.mx_Toast_hasIcon {
|
||||
&::before,
|
||||
|
|
|
|||
|
|
@ -36,26 +36,7 @@ limitations under the License.
|
|||
/* the notFirst class is for cases where the optionList might be under a header of sorts. */
|
||||
&:nth-child(n + 2),
|
||||
.mx_IconizedContextMenu_optionList_notFirst {
|
||||
/* This is a bit of a hack when we could just use a simple border-top property, */
|
||||
/* however we have a (kinda) good reason for doing it this way: we need opacity. */
|
||||
/* To get the right color, we need an opacity modifier which means we have to work */
|
||||
/* around the problem. PostCSS doesn't support the opacity() function, and if we */
|
||||
/* use something like postcss-functions we quickly run into an issue where the */
|
||||
/* function we would define gets passed a CSS variable for custom themes, which */
|
||||
/* can't be converted easily even when considering https://stackoverflow.com/a/41265350/7037379 */
|
||||
//
|
||||
/* Therefore, we just hack in a line and border the thing ourselves */
|
||||
&::before {
|
||||
border-top: 1px solid $primary-content;
|
||||
opacity: 0.1;
|
||||
content: "";
|
||||
|
||||
/* Counteract the padding problems (width: 100% ignores the 40px padding, */
|
||||
/* unless we position it absolutely then it does the right thing). */
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
border-top: var(--cpd-border-width-1) solid var(--cpd-color-gray-400);
|
||||
}
|
||||
|
||||
/* round the top corners of the top button for the hover effect to be bounded */
|
||||
|
|
@ -87,7 +68,7 @@ limitations under the License.
|
|||
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
background-color: $menu-selected-color;
|
||||
background-color: var(--cpd-color-bg-action-secondary-hovered);
|
||||
}
|
||||
|
||||
&.mx_AccessibleButton_disabled {
|
||||
|
|
@ -137,7 +118,7 @@ limitations under the License.
|
|||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
background-color: $icon-button-color;
|
||||
background-color: var(--cpd-color-icon-primary);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -147,7 +128,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_IconizedContextMenu_icon::before {
|
||||
background-color: $alert;
|
||||
background-color: var(--cpd-color-icon-critical-primary);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -172,7 +153,7 @@ limitations under the License.
|
|||
|
||||
&.mx_IconizedContextMenu_compact {
|
||||
.mx_IconizedContextMenu_optionList > * {
|
||||
padding: 8px 16px 8px 11px;
|
||||
padding: 8px 16px 8px 12px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -29,7 +29,6 @@ limitations under the License.
|
|||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
background: $icon-button-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ limitations under the License.
|
|||
/* -------------------------------------------------------------------------------- */
|
||||
|
||||
/* Override legacy/default styles for dialogs */
|
||||
.mx_Dialog_wrapper.mx_CompoundDialog > .mx_Dialog {
|
||||
.mx_Dialog_wrapper.mx_CompoundDialog .mx_Dialog {
|
||||
padding: 0; /* we'll manage it ourselves */
|
||||
color: $primary-content;
|
||||
}
|
||||
|
|
@ -41,14 +41,14 @@ limitations under the License.
|
|||
font-size: $font-24px;
|
||||
margin: 0; /* managed by header class */
|
||||
}
|
||||
}
|
||||
|
||||
.mx_CompoundDialog_cancelButton {
|
||||
@mixin customisedCancelButton;
|
||||
/* Align with middle of title, 30px from right edge */
|
||||
/* Align with corner radius of dialog */
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
right: 30px;
|
||||
}
|
||||
top: var(--cpd-space-4x);
|
||||
right: var(--cpd-space-4x);
|
||||
}
|
||||
|
||||
.mx_CompoundDialog_form {
|
||||
|
|
|
|||
|
|
@ -16,11 +16,6 @@ limitations under the License.
|
|||
|
||||
.mx_LocationViewDialog_wrapper .mx_Dialog {
|
||||
padding: 0px;
|
||||
|
||||
/* Unset contain and position to allow the close button
|
||||
to appear outside the dialog */
|
||||
contain: unset;
|
||||
position: unset;
|
||||
}
|
||||
|
||||
.mx_LocationViewDialog {
|
||||
|
|
@ -37,16 +32,13 @@ limitations under the License.
|
|||
.mx_Dialog_title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_Dialog_cancelButton {
|
||||
z-index: 4010;
|
||||
position: absolute;
|
||||
right: 5vw;
|
||||
top: 5vh;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: $dialog-close-external-color;
|
||||
}
|
||||
left: var(--cpd-space-4x);
|
||||
top: var(--cpd-space-4x);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -20,12 +20,12 @@ limitations under the License.
|
|||
.mx_SpaceSettingsDialog,
|
||||
.mx_SpacePreferencesDialog {
|
||||
width: 90vw;
|
||||
max-width: 1000px;
|
||||
max-width: 980px;
|
||||
/* set the height too since tabbed view scrolls itself. */
|
||||
height: 80vh;
|
||||
|
||||
.mx_TabbedView {
|
||||
top: 65px;
|
||||
top: 90px;
|
||||
}
|
||||
|
||||
.mx_TabbedView .mx_SettingsTab {
|
||||
|
|
|
|||
|
|
@ -14,7 +14,14 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_SpotlightDialog_wrapper .mx_Dialog {
|
||||
.mx_SpotlightDialog_wrapper {
|
||||
.mx_Dialog_border {
|
||||
/* Disable the glass border as this dialog wasn't designed with it in mind */
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.mx_Dialog {
|
||||
width: fit-content;
|
||||
border-radius: 8px;
|
||||
overflow-y: initial;
|
||||
position: relative;
|
||||
|
|
@ -48,6 +55,7 @@ limitations under the License.
|
|||
font-size: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SpotlightDialog {
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ limitations under the License.
|
|||
* terms dialog sizing when it will appear for the integration manager so that
|
||||
* it gets the same basic size as the IM's own modal.
|
||||
*/
|
||||
.mx_TermsDialog_forIntegrationManager .mx_Dialog {
|
||||
.mx_TermsDialog_forIntegrationManager .mx_Dialog_border {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
box-sizing: border-box;
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ limitations under the License.
|
|||
.mx_MessageActionBar {
|
||||
--MessageActionBar-size-button: 28px;
|
||||
--MessageActionBar-size-box: 32px; /* 28px + 2px (margin) * 2 */
|
||||
--MessageActionBar-item-hover-background: $panel-actions;
|
||||
--MessageActionBar-item-hover-background: var(--cpd-color-bg-subtle-secondary);
|
||||
--MessageActionBar-item-hover-borderRadius: 6px;
|
||||
--MessageActionBar-item-hover-zIndex: 1;
|
||||
|
||||
|
|
@ -30,7 +30,7 @@ limitations under the License.
|
|||
line-height: $font-24px;
|
||||
border-radius: 8px;
|
||||
background: $background;
|
||||
border: 1px solid $input-border-color;
|
||||
border: var(--cpd-border-width-1) solid var(--cpd-color-border-disabled);
|
||||
top: -32px;
|
||||
right: 8px;
|
||||
user-select: none;
|
||||
|
|
@ -96,7 +96,7 @@ limitations under the License.
|
|||
--MessageActionBar-icon-size: 18px;
|
||||
width: var(--MessageActionBar-size-button);
|
||||
height: var(--MessageActionBar-size-button);
|
||||
color: $secondary-content;
|
||||
color: var(--cpd-color-icon-secondary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -114,7 +114,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
&:hover {
|
||||
color: $primary-content;
|
||||
color: var(--cpd-color-icon-primary);
|
||||
}
|
||||
|
||||
&.mx_MessageActionBar_downloadButton {
|
||||
|
|
|
|||
|
|
@ -215,19 +215,19 @@ limitations under the License.
|
|||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
|
||||
border: 1px solid $quinary-content;
|
||||
box-shadow: 0px 1px 3px rgba(23, 25, 28, 0.05);
|
||||
border: var(--cpd-border-width-1) solid var(--cpd-color-border-interactive-secondary);
|
||||
box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.mx_ContextualMenu_chevron_top {
|
||||
left: auto;
|
||||
right: 22px;
|
||||
border-bottom-color: $quinary-content;
|
||||
border-bottom-color: var(--cpd-color-border-interactive-secondary);
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
border: inherit;
|
||||
border-bottom-color: $menu-bg-color;
|
||||
border-bottom-color: var(--cpd-color-bg-canvas-default);
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: -8px;
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ limitations under the License.
|
|||
background: var(--MessageActionBar-item-hover-background);
|
||||
border-radius: var(--MessageActionBar-item-hover-borderRadius);
|
||||
z-index: var(--MessageActionBar-item-hover-zIndex);
|
||||
color: $primary-content;
|
||||
color: var(--cpd-color-icon-primary);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -314,74 +314,6 @@ limitations under the License.
|
|||
}
|
||||
}
|
||||
|
||||
.mx_MessageComposer_formatting {
|
||||
cursor: pointer;
|
||||
margin: 0 11px;
|
||||
width: 24px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.mx_MessageComposer_formatbar_wrapper {
|
||||
width: 100%;
|
||||
background-color: $menu-bg-color;
|
||||
box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.mx_MessageComposer_formatbar {
|
||||
margin: auto;
|
||||
display: flex;
|
||||
|
||||
height: 30px;
|
||||
|
||||
box-sizing: border-box;
|
||||
padding-left: 62px;
|
||||
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
font-size: $font-10px;
|
||||
color: $info-plinth-fg-color;
|
||||
|
||||
* {
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_MessageComposer_format_button,
|
||||
.mx_MessageComposer_formatbar_cancel,
|
||||
.mx_MessageComposer_formatbar_markdown {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mx_MessageComposer_formatbar_cancel {
|
||||
margin-right: 22px;
|
||||
}
|
||||
|
||||
.mx_MessageComposer_formatbar_markdown {
|
||||
height: 17px;
|
||||
width: 30px;
|
||||
margin-right: 64px;
|
||||
}
|
||||
|
||||
.mx_MessageComposer_input_markdownIndicator {
|
||||
height: 10px;
|
||||
width: 12px;
|
||||
padding: 4px 4px 4px 0;
|
||||
}
|
||||
|
||||
.mx_MessageComposer_formatbar_markdown,
|
||||
.mx_MessageComposer_input_markdownIndicator {
|
||||
cursor: pointer;
|
||||
mask-image: url("$(res)/img/markdown.svg");
|
||||
mask-size: contain;
|
||||
mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
background-color: $icon-button-color;
|
||||
|
||||
&.mx_MessageComposer_markdownDisabled {
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_MatrixChat_useCompactLayout {
|
||||
.mx_MessageComposer_input {
|
||||
min-height: 50px;
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ limitations under the License.
|
|||
cursor: pointer;
|
||||
border-radius: 8px;
|
||||
background-color: $background;
|
||||
border: 1px solid $input-border-color;
|
||||
border: var(--cpd-border-width-1) solid var(--cpd-color-border-disabled);
|
||||
user-select: none;
|
||||
/* equal to z-index of mx_ReplyPreview and mx_RoomView_statusArea (1000) */
|
||||
/* but as it appears after them in the DOM, will appear on top. */
|
||||
|
|
@ -48,7 +48,7 @@ limitations under the License.
|
|||
border: none;
|
||||
|
||||
&:hover {
|
||||
background: $panel-actions;
|
||||
background: var(--cpd-color-bg-subtle-secondary);
|
||||
border-radius: 6px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
|
@ -63,11 +63,11 @@ limitations under the License.
|
|||
width: 100%;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
background-color: $secondary-content;
|
||||
background-color: var(--cpd-color-icon-secondary);
|
||||
}
|
||||
|
||||
.mx_MessageComposerFormatBar_button:hover::after {
|
||||
background-color: $primary-content;
|
||||
background-color: var(--cpd-color-icon-primary);
|
||||
}
|
||||
|
||||
.mx_MessageComposerFormatBar_buttonIconBold::after {
|
||||
|
|
|
|||
|
|
@ -15,16 +15,19 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
.mx_IntegrationManager {
|
||||
.mx_Dialog {
|
||||
.mx_Dialog_border {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
overflow: hidden;
|
||||
max-width: initial;
|
||||
max-height: initial;
|
||||
}
|
||||
|
||||
.mx_Dialog {
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
iframe {
|
||||
background-color: #fff;
|
||||
border: 0;
|
||||
|
|
|
|||
|
|
@ -141,7 +141,7 @@ $input-placeholder: var(--cpd-color-text-placeholder);
|
|||
/* Dialog */
|
||||
/* ******************** */
|
||||
$dialog-title-fg-color: $primary-content;
|
||||
$dialog-backdrop-color: $menu-border-color;
|
||||
$dialog-backdrop-color: #00000080;
|
||||
$dialog-close-fg-color: $icon-button-color;
|
||||
$dialog-close-external-color: $primary-content;
|
||||
/* ******************** */
|
||||
|
|
|
|||
|
|
@ -72,8 +72,7 @@ $h3-color: $primary-fg-color;
|
|||
$icon-button-color: var(--cpd-color-icon-tertiary);
|
||||
|
||||
$dialog-title-fg-color: $base-text-color;
|
||||
$dialog-backdrop-color: #000;
|
||||
$dialog-shadow-color: rgba(0, 0, 0, 0.48);
|
||||
$dialog-backdrop-color: #00000080;
|
||||
$dialog-close-fg-color: $icon-button-color;
|
||||
$dialog-close-external-color: $text-primary-color;
|
||||
|
||||
|
|
|
|||
|
|
@ -97,7 +97,6 @@ $icon-button-color: var(--cpd-color-icon-tertiary);
|
|||
|
||||
$dialog-title-fg-color: #45474a;
|
||||
$dialog-backdrop-color: rgba(46, 48, 51, 0.38);
|
||||
$dialog-shadow-color: rgba(0, 0, 0, 0.48);
|
||||
$dialog-close-fg-color: $icon-button-color;
|
||||
$dialog-close-external-color: $primary-bg-color;
|
||||
|
||||
|
|
|
|||
|
|
@ -189,10 +189,9 @@ $input-placeholder: var(--cpd-color-text-placeholder);
|
|||
/* Dialog */
|
||||
/* ******************** */
|
||||
$dialog-title-fg-color: var(--cpd-color-text-primary);
|
||||
$dialog-backdrop-color: rgba(46, 48, 51, 0.38);
|
||||
$dialog-backdrop-color: #030c1b4d;
|
||||
$dialog-close-fg-color: $icon-button-color;
|
||||
$dialog-close-external-color: $background;
|
||||
$dialog-shadow-color: rgba(0, 0, 0, 0.48);
|
||||
/* ******************** */
|
||||
|
||||
/* ImageBody */
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ import ReactDOM from "react-dom";
|
|||
import classNames from "classnames";
|
||||
import { defer, sleep } from "matrix-js-sdk/src/utils";
|
||||
import { TypedEventEmitter } from "matrix-js-sdk/src/matrix";
|
||||
import { TooltipProvider } from "@vector-im/compound-web";
|
||||
import { Glass, TooltipProvider } from "@vector-im/compound-web";
|
||||
|
||||
import dis from "./dispatcher/dispatcher";
|
||||
import AsyncWrapper from "./AsyncWrapper";
|
||||
|
|
@ -376,7 +376,9 @@ export class ModalManager extends TypedEventEmitter<ModalManagerEvent, HandlerMa
|
|||
const staticDialog = (
|
||||
<TooltipProvider>
|
||||
<div className={classes}>
|
||||
<Glass className="mx_Dialog_border">
|
||||
<div className="mx_Dialog">{this.staticModal.elem}</div>
|
||||
</Glass>
|
||||
<div
|
||||
data-testid="dialog-background"
|
||||
className="mx_Dialog_background mx_Dialog_staticBackground"
|
||||
|
|
@ -401,7 +403,9 @@ export class ModalManager extends TypedEventEmitter<ModalManagerEvent, HandlerMa
|
|||
const dialog = (
|
||||
<TooltipProvider>
|
||||
<div className={classes}>
|
||||
<Glass className="mx_Dialog_border">
|
||||
<div className="mx_Dialog">{modal.elem}</div>
|
||||
</Glass>
|
||||
<div
|
||||
data-testid="dialog-background"
|
||||
className="mx_Dialog_background"
|
||||
|
|
|
|||
|
|
@ -155,9 +155,6 @@ export default class BaseDialog extends React.Component<IProps> {
|
|||
lockProps["aria-labelledby"] = "mx_BaseDialog_title";
|
||||
}
|
||||
|
||||
const isHeaderWithCancelOnly =
|
||||
!!cancelButton && !this.props.title && !this.props.headerButton && !this.props.headerImage;
|
||||
|
||||
return (
|
||||
<MatrixClientContext.Provider value={this.matrixClient}>
|
||||
{this.props.screenName && <PosthogScreenTracker screenName={this.props.screenName} />}
|
||||
|
|
@ -172,8 +169,6 @@ export default class BaseDialog extends React.Component<IProps> {
|
|||
<div
|
||||
className={classNames("mx_Dialog_header", {
|
||||
mx_Dialog_headerWithButton: !!this.props.headerButton,
|
||||
mx_Dialog_headerWithCancel: !!cancelButton,
|
||||
mx_Dialog_headerWithCancelOnly: isHeaderWithCancelOnly,
|
||||
})}
|
||||
>
|
||||
{!!(this.props.title || headerImage) && (
|
||||
|
|
@ -188,8 +183,8 @@ export default class BaseDialog extends React.Component<IProps> {
|
|||
</Heading>
|
||||
)}
|
||||
{this.props.headerButton}
|
||||
{cancelButton}
|
||||
</div>
|
||||
{cancelButton}
|
||||
{this.props.children}
|
||||
</FocusLock>
|
||||
</MatrixClientContext.Provider>
|
||||
|
|
|
|||
|
|
@ -94,12 +94,12 @@ export default abstract class ScrollableBaseModal<
|
|||
>
|
||||
<div className="mx_CompoundDialog_header">
|
||||
<h1>{this.state.title}</h1>
|
||||
</div>
|
||||
<AccessibleButton
|
||||
onClick={this.onCancel}
|
||||
className="mx_CompoundDialog_cancelButton"
|
||||
aria-label={_t("dialog_close_label")}
|
||||
/>
|
||||
</div>
|
||||
<form onSubmit={this.onSubmit} className="mx_CompoundDialog_form">
|
||||
<div className="mx_CompoundDialog_content">{this.renderContent()}</div>
|
||||
<div className="mx_CompoundDialog_footer">
|
||||
|
|
|
|||
|
|
@ -325,7 +325,7 @@ exports[`<MatrixChat /> with an existing session onAction() room actions leave_r
|
|||
role="dialog"
|
||||
>
|
||||
<div
|
||||
class="mx_Dialog_header mx_Dialog_headerWithCancel"
|
||||
class="mx_Dialog_header"
|
||||
>
|
||||
<h1
|
||||
class="mx_Heading_h3 mx_Dialog_title"
|
||||
|
|
@ -333,13 +333,13 @@ exports[`<MatrixChat /> with an existing session onAction() room actions leave_r
|
|||
>
|
||||
Leave room
|
||||
</h1>
|
||||
</div>
|
||||
<div
|
||||
aria-label="Close dialog"
|
||||
class="mx_AccessibleButton mx_Dialog_cancelButton"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="mx_Dialog_content"
|
||||
id="mx_Dialog_content"
|
||||
|
|
@ -381,7 +381,7 @@ exports[`<MatrixChat /> with an existing session onAction() room actions leave_r
|
|||
role="dialog"
|
||||
>
|
||||
<div
|
||||
class="mx_Dialog_header mx_Dialog_headerWithCancel"
|
||||
class="mx_Dialog_header"
|
||||
>
|
||||
<h1
|
||||
class="mx_Heading_h3 mx_Dialog_title"
|
||||
|
|
@ -389,13 +389,13 @@ exports[`<MatrixChat /> with an existing session onAction() room actions leave_r
|
|||
>
|
||||
Leave space
|
||||
</h1>
|
||||
</div>
|
||||
<div
|
||||
aria-label="Close dialog"
|
||||
class="mx_AccessibleButton mx_Dialog_cancelButton"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="mx_Dialog_content"
|
||||
id="mx_Dialog_content"
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ exports[`AppDownloadDialog should allow disabling desktop build 1`] = `
|
|||
role="dialog"
|
||||
>
|
||||
<div
|
||||
class="mx_Dialog_header mx_Dialog_headerWithCancel"
|
||||
class="mx_Dialog_header"
|
||||
>
|
||||
<h1
|
||||
class="mx_Heading_h3 mx_Dialog_title"
|
||||
|
|
@ -22,13 +22,13 @@ exports[`AppDownloadDialog should allow disabling desktop build 1`] = `
|
|||
>
|
||||
Download Element
|
||||
</h1>
|
||||
</div>
|
||||
<div
|
||||
aria-label="Close dialog"
|
||||
class="mx_AccessibleButton mx_Dialog_cancelButton"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="mx_AppDownloadDialog_mobile"
|
||||
>
|
||||
|
|
@ -162,7 +162,7 @@ exports[`AppDownloadDialog should allow disabling fdroid build 1`] = `
|
|||
role="dialog"
|
||||
>
|
||||
<div
|
||||
class="mx_Dialog_header mx_Dialog_headerWithCancel"
|
||||
class="mx_Dialog_header"
|
||||
>
|
||||
<h1
|
||||
class="mx_Heading_h3 mx_Dialog_title"
|
||||
|
|
@ -170,13 +170,13 @@ exports[`AppDownloadDialog should allow disabling fdroid build 1`] = `
|
|||
>
|
||||
Download Element
|
||||
</h1>
|
||||
</div>
|
||||
<div
|
||||
aria-label="Close dialog"
|
||||
class="mx_AccessibleButton mx_Dialog_cancelButton"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="mx_AppDownloadDialog_desktop"
|
||||
>
|
||||
|
|
@ -318,7 +318,7 @@ exports[`AppDownloadDialog should allow disabling mobile builds 1`] = `
|
|||
role="dialog"
|
||||
>
|
||||
<div
|
||||
class="mx_Dialog_header mx_Dialog_headerWithCancel"
|
||||
class="mx_Dialog_header"
|
||||
>
|
||||
<h1
|
||||
class="mx_Heading_h3 mx_Dialog_title"
|
||||
|
|
@ -326,13 +326,13 @@ exports[`AppDownloadDialog should allow disabling mobile builds 1`] = `
|
|||
>
|
||||
Download Element
|
||||
</h1>
|
||||
</div>
|
||||
<div
|
||||
aria-label="Close dialog"
|
||||
class="mx_AccessibleButton mx_Dialog_cancelButton"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="mx_AppDownloadDialog_desktop"
|
||||
>
|
||||
|
|
@ -387,7 +387,7 @@ exports[`AppDownloadDialog should render with desktop, ios, android, fdroid butt
|
|||
role="dialog"
|
||||
>
|
||||
<div
|
||||
class="mx_Dialog_header mx_Dialog_headerWithCancel"
|
||||
class="mx_Dialog_header"
|
||||
>
|
||||
<h1
|
||||
class="mx_Heading_h3 mx_Dialog_title"
|
||||
|
|
@ -395,13 +395,13 @@ exports[`AppDownloadDialog should render with desktop, ios, android, fdroid butt
|
|||
>
|
||||
Download Element
|
||||
</h1>
|
||||
</div>
|
||||
<div
|
||||
aria-label="Close dialog"
|
||||
class="mx_AccessibleButton mx_Dialog_cancelButton"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="mx_AppDownloadDialog_desktop"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ exports[`<ChangelogDialog /> should fetch github proxy url for each repo with ol
|
|||
role="dialog"
|
||||
>
|
||||
<div
|
||||
class="mx_Dialog_header mx_Dialog_headerWithCancel"
|
||||
class="mx_Dialog_header"
|
||||
>
|
||||
<h1
|
||||
class="mx_Heading_h3 mx_Dialog_title"
|
||||
|
|
@ -23,13 +23,13 @@ exports[`<ChangelogDialog /> should fetch github proxy url for each repo with ol
|
|||
>
|
||||
Changelog
|
||||
</h1>
|
||||
</div>
|
||||
<div
|
||||
aria-label="Close dialog"
|
||||
class="mx_AccessibleButton mx_Dialog_cancelButton"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="mx_Dialog_content"
|
||||
id="mx_Dialog_content"
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ exports[`ConfirmUserActionDialog renders 1`] = `
|
|||
role="dialog"
|
||||
>
|
||||
<div
|
||||
class="mx_Dialog_header mx_Dialog_headerWithCancel"
|
||||
class="mx_Dialog_header"
|
||||
>
|
||||
<h1
|
||||
class="mx_Heading_h3 mx_Dialog_title"
|
||||
|
|
@ -23,13 +23,13 @@ exports[`ConfirmUserActionDialog renders 1`] = `
|
|||
>
|
||||
Ban this
|
||||
</h1>
|
||||
</div>
|
||||
<div
|
||||
aria-label="Close dialog"
|
||||
class="mx_AccessibleButton mx_Dialog_cancelButton"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="mx_Dialog_content"
|
||||
id="mx_Dialog_content"
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
|
|||
role="dialog"
|
||||
>
|
||||
<div
|
||||
class="mx_Dialog_header mx_Dialog_headerWithCancel"
|
||||
class="mx_Dialog_header"
|
||||
>
|
||||
<h1
|
||||
class="mx_Heading_h3 mx_Dialog_title"
|
||||
|
|
@ -22,13 +22,13 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
|
|||
>
|
||||
Developer Tools
|
||||
</h1>
|
||||
</div>
|
||||
<div
|
||||
aria-label="Close dialog"
|
||||
class="mx_AccessibleButton mx_Dialog_cancelButton"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="mx_DevTools_label_left"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ exports[`<ExportDialog /> renders export dialog 1`] = `
|
|||
role="dialog"
|
||||
>
|
||||
<div
|
||||
class="mx_Dialog_header mx_Dialog_headerWithCancel"
|
||||
class="mx_Dialog_header"
|
||||
>
|
||||
<h1
|
||||
class="mx_Heading_h3 mx_Dialog_title"
|
||||
|
|
@ -17,13 +17,13 @@ exports[`<ExportDialog /> renders export dialog 1`] = `
|
|||
>
|
||||
Export Chat
|
||||
</h1>
|
||||
</div>
|
||||
<div
|
||||
aria-label="Close dialog"
|
||||
class="mx_AccessibleButton mx_Dialog_cancelButton"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
<p>
|
||||
Select from the options below to export chats from your timeline
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ exports[`LogoutDialog Prompts user to connect backup if there is a backup on the
|
|||
role="dialog"
|
||||
>
|
||||
<div
|
||||
class="mx_Dialog_header mx_Dialog_headerWithCancel"
|
||||
class="mx_Dialog_header"
|
||||
>
|
||||
<h1
|
||||
class="mx_Heading_h3 mx_Dialog_title"
|
||||
|
|
@ -23,13 +23,13 @@ exports[`LogoutDialog Prompts user to connect backup if there is a backup on the
|
|||
>
|
||||
You'll lose access to your encrypted messages
|
||||
</h1>
|
||||
</div>
|
||||
<div
|
||||
aria-label="Close dialog"
|
||||
class="mx_AccessibleButton mx_Dialog_cancelButton"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="mx_Dialog_content"
|
||||
|
|
@ -102,7 +102,7 @@ exports[`LogoutDialog Prompts user to set up backup if there is no backup on the
|
|||
role="dialog"
|
||||
>
|
||||
<div
|
||||
class="mx_Dialog_header mx_Dialog_headerWithCancel"
|
||||
class="mx_Dialog_header"
|
||||
>
|
||||
<h1
|
||||
class="mx_Heading_h3 mx_Dialog_title"
|
||||
|
|
@ -110,13 +110,13 @@ exports[`LogoutDialog Prompts user to set up backup if there is no backup on the
|
|||
>
|
||||
You'll lose access to your encrypted messages
|
||||
</h1>
|
||||
</div>
|
||||
<div
|
||||
aria-label="Close dialog"
|
||||
class="mx_AccessibleButton mx_Dialog_cancelButton"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="mx_Dialog_content"
|
||||
|
|
@ -189,7 +189,7 @@ exports[`LogoutDialog shows a regular dialog when crypto is disabled 1`] = `
|
|||
role="dialog"
|
||||
>
|
||||
<div
|
||||
class="mx_Dialog_header mx_Dialog_headerWithCancel"
|
||||
class="mx_Dialog_header"
|
||||
>
|
||||
<h1
|
||||
class="mx_Heading_h3 mx_Dialog_title"
|
||||
|
|
@ -197,13 +197,13 @@ exports[`LogoutDialog shows a regular dialog when crypto is disabled 1`] = `
|
|||
>
|
||||
Sign out
|
||||
</h1>
|
||||
</div>
|
||||
<div
|
||||
aria-label="Close dialog"
|
||||
class="mx_AccessibleButton mx_Dialog_cancelButton"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="mx_Dialog_content"
|
||||
id="mx_Dialog_content"
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ exports[`<ManageRestrictedJoinRuleDialog /> should list spaces which are not par
|
|||
role="dialog"
|
||||
>
|
||||
<div
|
||||
class="mx_Dialog_header mx_Dialog_headerWithCancel"
|
||||
class="mx_Dialog_header"
|
||||
>
|
||||
<h1
|
||||
class="mx_Heading_h3 mx_Dialog_title"
|
||||
|
|
@ -22,13 +22,13 @@ exports[`<ManageRestrictedJoinRuleDialog /> should list spaces which are not par
|
|||
>
|
||||
Select spaces
|
||||
</h1>
|
||||
</div>
|
||||
<div
|
||||
aria-label="Close dialog"
|
||||
class="mx_AccessibleButton mx_Dialog_cancelButton"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
<p>
|
||||
<span>
|
||||
Decide which spaces can access this room. If a space is selected, its members can find and join
|
||||
|
|
@ -164,7 +164,7 @@ exports[`<ManageRestrictedJoinRuleDialog /> should render empty state 1`] = `
|
|||
role="dialog"
|
||||
>
|
||||
<div
|
||||
class="mx_Dialog_header mx_Dialog_headerWithCancel"
|
||||
class="mx_Dialog_header"
|
||||
>
|
||||
<h1
|
||||
class="mx_Heading_h3 mx_Dialog_title"
|
||||
|
|
@ -172,13 +172,13 @@ exports[`<ManageRestrictedJoinRuleDialog /> should render empty state 1`] = `
|
|||
>
|
||||
Select spaces
|
||||
</h1>
|
||||
</div>
|
||||
<div
|
||||
aria-label="Close dialog"
|
||||
class="mx_AccessibleButton mx_Dialog_cancelButton"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
<p>
|
||||
<span>
|
||||
Decide which spaces can access this room. If a space is selected, its members can find and join
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ exports[`ManualDeviceKeyVerificationDialog should display the device 1`] = `
|
|||
role="dialog"
|
||||
>
|
||||
<div
|
||||
class="mx_Dialog_header mx_Dialog_headerWithCancel"
|
||||
class="mx_Dialog_header"
|
||||
>
|
||||
<h1
|
||||
class="mx_Heading_h3 mx_Dialog_title"
|
||||
|
|
@ -23,13 +23,13 @@ exports[`ManualDeviceKeyVerificationDialog should display the device 1`] = `
|
|||
>
|
||||
Verify session
|
||||
</h1>
|
||||
</div>
|
||||
<div
|
||||
aria-label="Close dialog"
|
||||
class="mx_AccessibleButton mx_Dialog_cancelButton"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="mx_Dialog_content"
|
||||
id="mx_Dialog_content"
|
||||
|
|
@ -130,7 +130,7 @@ exports[`ManualDeviceKeyVerificationDialog should display the device of another
|
|||
role="dialog"
|
||||
>
|
||||
<div
|
||||
class="mx_Dialog_header mx_Dialog_headerWithCancel"
|
||||
class="mx_Dialog_header"
|
||||
>
|
||||
<h1
|
||||
class="mx_Heading_h3 mx_Dialog_title"
|
||||
|
|
@ -138,13 +138,13 @@ exports[`ManualDeviceKeyVerificationDialog should display the device of another
|
|||
>
|
||||
Verify session
|
||||
</h1>
|
||||
</div>
|
||||
<div
|
||||
aria-label="Close dialog"
|
||||
class="mx_AccessibleButton mx_Dialog_cancelButton"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="mx_Dialog_content"
|
||||
id="mx_Dialog_content"
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ exports[`<MessageEditHistory /> should match the snapshot 1`] = `
|
|||
role="dialog"
|
||||
>
|
||||
<div
|
||||
class="mx_Dialog_header mx_Dialog_headerWithCancel"
|
||||
class="mx_Dialog_header"
|
||||
>
|
||||
<h1
|
||||
class="mx_Heading_h3 mx_Dialog_title"
|
||||
|
|
@ -22,13 +22,13 @@ exports[`<MessageEditHistory /> should match the snapshot 1`] = `
|
|||
>
|
||||
Message edits
|
||||
</h1>
|
||||
</div>
|
||||
<div
|
||||
aria-label="Close dialog"
|
||||
class="mx_AccessibleButton mx_Dialog_cancelButton"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="mx_AutoHideScrollbar mx_ScrollPanel mx_MessageEditHistoryDialog_scrollPanel"
|
||||
tabindex="-1"
|
||||
|
|
@ -130,7 +130,7 @@ exports[`<MessageEditHistory /> should support events with 1`] = `
|
|||
role="dialog"
|
||||
>
|
||||
<div
|
||||
class="mx_Dialog_header mx_Dialog_headerWithCancel"
|
||||
class="mx_Dialog_header"
|
||||
>
|
||||
<h1
|
||||
class="mx_Heading_h3 mx_Dialog_title"
|
||||
|
|
@ -138,13 +138,13 @@ exports[`<MessageEditHistory /> should support events with 1`] = `
|
|||
>
|
||||
Message edits
|
||||
</h1>
|
||||
</div>
|
||||
<div
|
||||
aria-label="Close dialog"
|
||||
class="mx_AccessibleButton mx_Dialog_cancelButton"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="mx_AutoHideScrollbar mx_ScrollPanel mx_MessageEditHistoryDialog_scrollPanel"
|
||||
tabindex="-1"
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ exports[`<ServerPickerDialog /> should render dialog 1`] = `
|
|||
role="dialog"
|
||||
>
|
||||
<div
|
||||
class="mx_Dialog_header mx_Dialog_headerWithCancel"
|
||||
class="mx_Dialog_header"
|
||||
>
|
||||
<h1
|
||||
class="mx_Heading_h3 mx_Dialog_title"
|
||||
|
|
@ -23,13 +23,13 @@ exports[`<ServerPickerDialog /> should render dialog 1`] = `
|
|||
>
|
||||
Sign into your homeserver
|
||||
</h1>
|
||||
</div>
|
||||
<div
|
||||
aria-label="Close dialog"
|
||||
class="mx_AccessibleButton mx_Dialog_cancelButton"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
<form
|
||||
class="mx_Dialog_content"
|
||||
id="mx_ServerPickerDialog"
|
||||
|
|
|
|||
|
|
@ -121,7 +121,7 @@ exports[`CreateKeyBackupDialog should display the success dialog when the key ba
|
|||
role="dialog"
|
||||
>
|
||||
<div
|
||||
class="mx_Dialog_header mx_Dialog_headerWithCancel"
|
||||
class="mx_Dialog_header"
|
||||
>
|
||||
<h1
|
||||
class="mx_Heading_h3 mx_Dialog_title"
|
||||
|
|
@ -129,13 +129,13 @@ exports[`CreateKeyBackupDialog should display the success dialog when the key ba
|
|||
>
|
||||
Success!
|
||||
</h1>
|
||||
</div>
|
||||
<div
|
||||
aria-label="Close dialog"
|
||||
class="mx_AccessibleButton mx_Dialog_cancelButton"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<p>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ exports[`ExportE2eKeysDialog renders 1`] = `
|
|||
role="dialog"
|
||||
>
|
||||
<div
|
||||
class="mx_Dialog_header mx_Dialog_headerWithCancel"
|
||||
class="mx_Dialog_header"
|
||||
>
|
||||
<h1
|
||||
class="mx_Heading_h3 mx_Dialog_title"
|
||||
|
|
@ -22,13 +22,13 @@ exports[`ExportE2eKeysDialog renders 1`] = `
|
|||
>
|
||||
Export room keys
|
||||
</h1>
|
||||
</div>
|
||||
<div
|
||||
aria-label="Close dialog"
|
||||
class="mx_AccessibleButton mx_Dialog_cancelButton"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
<form>
|
||||
<div
|
||||
class="mx_Dialog_content"
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ exports[`ImportE2eKeysDialog renders 1`] = `
|
|||
role="dialog"
|
||||
>
|
||||
<div
|
||||
class="mx_Dialog_header mx_Dialog_headerWithCancel"
|
||||
class="mx_Dialog_header"
|
||||
>
|
||||
<h1
|
||||
class="mx_Heading_h3 mx_Dialog_title"
|
||||
|
|
@ -22,13 +22,13 @@ exports[`ImportE2eKeysDialog renders 1`] = `
|
|||
>
|
||||
Import room keys
|
||||
</h1>
|
||||
</div>
|
||||
<div
|
||||
aria-label="Close dialog"
|
||||
class="mx_AccessibleButton mx_Dialog_cancelButton"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
<form>
|
||||
<div
|
||||
class="mx_Dialog_content"
|
||||
|
|
|
|||
|
|
@ -20,13 +20,13 @@ exports[`PollCreateDialog renders a blank poll 1`] = `
|
|||
<h1>
|
||||
Create poll
|
||||
</h1>
|
||||
</div>
|
||||
<div
|
||||
aria-label="Close dialog"
|
||||
class="mx_AccessibleButton mx_CompoundDialog_cancelButton"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
<form
|
||||
class="mx_CompoundDialog_form"
|
||||
>
|
||||
|
|
@ -199,13 +199,13 @@ exports[`PollCreateDialog renders a question and some options 1`] = `
|
|||
<h1>
|
||||
Create poll
|
||||
</h1>
|
||||
</div>
|
||||
<div
|
||||
aria-label="Close dialog"
|
||||
class="mx_AccessibleButton mx_CompoundDialog_cancelButton"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
<form
|
||||
class="mx_CompoundDialog_form"
|
||||
>
|
||||
|
|
@ -402,13 +402,13 @@ exports[`PollCreateDialog renders info from a previous event 1`] = `
|
|||
<h1>
|
||||
Edit poll
|
||||
</h1>
|
||||
</div>
|
||||
<div
|
||||
aria-label="Close dialog"
|
||||
class="mx_AccessibleButton mx_CompoundDialog_cancelButton"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
<form
|
||||
class="mx_CompoundDialog_form"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -119,7 +119,7 @@ exports[`<SecurityRoomSettingsTab /> join rule handles error when updating join
|
|||
role="dialog"
|
||||
>
|
||||
<div
|
||||
class="mx_Dialog_header mx_Dialog_headerWithCancel"
|
||||
class="mx_Dialog_header"
|
||||
>
|
||||
<h1
|
||||
class="mx_Heading_h3 mx_Dialog_title"
|
||||
|
|
@ -127,13 +127,13 @@ exports[`<SecurityRoomSettingsTab /> join rule handles error when updating join
|
|||
>
|
||||
Failed to update the join rules
|
||||
</h1>
|
||||
</div>
|
||||
<div
|
||||
aria-label="Close dialog"
|
||||
class="mx_AccessibleButton mx_Dialog_cancelButton"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="mx_Dialog_content"
|
||||
id="mx_Dialog_content"
|
||||
|
|
@ -161,7 +161,7 @@ exports[`<SecurityRoomSettingsTab /> join rule warns when trying to make an encr
|
|||
role="dialog"
|
||||
>
|
||||
<div
|
||||
class="mx_Dialog_header mx_Dialog_headerWithCancel"
|
||||
class="mx_Dialog_header"
|
||||
>
|
||||
<h1
|
||||
class="mx_Heading_h3 mx_Dialog_title"
|
||||
|
|
@ -169,13 +169,13 @@ exports[`<SecurityRoomSettingsTab /> join rule warns when trying to make an encr
|
|||
>
|
||||
Are you sure you want to make this encrypted room public?
|
||||
</h1>
|
||||
</div>
|
||||
<div
|
||||
aria-label="Close dialog"
|
||||
class="mx_AccessibleButton mx_Dialog_cancelButton"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="mx_Dialog_content"
|
||||
id="mx_Dialog_content"
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ exports[`<AddExistingToSpaceDialog /> looks as expected 1`] = `
|
|||
role="dialog"
|
||||
>
|
||||
<div
|
||||
class="mx_Dialog_header mx_Dialog_headerWithCancel"
|
||||
class="mx_Dialog_header"
|
||||
>
|
||||
<h1
|
||||
class="mx_Heading_h3 mx_Dialog_title"
|
||||
|
|
@ -56,13 +56,13 @@ exports[`<AddExistingToSpaceDialog /> looks as expected 1`] = `
|
|||
</div>
|
||||
</div>
|
||||
</h1>
|
||||
</div>
|
||||
<div
|
||||
aria-label="Close dialog"
|
||||
class="mx_AccessibleButton mx_Dialog_cancelButton"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="mx_AddExistingToSpace"
|
||||
>
|
||||
|
|
|
|||
Loading…
Reference in a new issue