Use semantic headings in user settings - account (#10972)
* account password section * account email and phone numbers * update cypress selectors
This commit is contained in:
parent
8d77d6e4cc
commit
d0d9a36d07
9 changed files with 103 additions and 105 deletions
|
@ -17,16 +17,12 @@ limitations under the License.
|
|||
.mx_TagComposer {
|
||||
.mx_TagComposer_input {
|
||||
display: flex;
|
||||
|
||||
.mx_Field {
|
||||
flex: 1;
|
||||
margin: 0; /* override from field styles */
|
||||
}
|
||||
flex-direction: row;
|
||||
|
||||
.mx_AccessibleButton {
|
||||
min-width: 70px;
|
||||
padding: 0 8px; /* override from button styles */
|
||||
margin-left: 16px; /* distance from <Field> */
|
||||
align-self: stretch; /* override default settingstab style */
|
||||
}
|
||||
|
||||
.mx_Field,
|
||||
|
|
|
@ -24,6 +24,24 @@ limitations under the License.
|
|||
a {
|
||||
color: $links;
|
||||
}
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacing-8;
|
||||
flex-grow: 1;
|
||||
}
|
||||
// never want full width buttons
|
||||
// event when other content is 100% width
|
||||
.mx_AccessibleButton {
|
||||
align-self: flex-start;
|
||||
justify-self: flex-start;
|
||||
}
|
||||
|
||||
.mx_Field {
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SettingsTab_warningText {
|
||||
|
|
|
@ -14,41 +14,9 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_GeneralUserSettingsTab_section--account_changePassword {
|
||||
.mx_Field {
|
||||
margin-inline-end: var(--SettingsTab_fullWidthField-margin-inline-end);
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* TODO: Make this selector less painful */
|
||||
.mx_GeneralUserSettingsTab_section--account .mx_SettingsTab_subheading:nth-child(n + 1),
|
||||
.mx_GeneralUserSettingsTab_section--discovery .mx_SettingsTab_subheading:nth-child(n + 2),
|
||||
.mx_SetIdServer .mx_SettingsTab_subheading {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.mx_GeneralUserSettingsTab_section--account,
|
||||
.mx_GeneralUserSettingsTab_section--discovery {
|
||||
.mx_Spinner {
|
||||
/* Move the spinner to the left side of the container (default center) */
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_GeneralUserSettingsTab_section--account .mx_EmailAddresses,
|
||||
.mx_GeneralUserSettingsTab_section--account .mx_PhoneNumbers,
|
||||
.mx_GeneralUserSettingsTab_section--discovery .mx_GeneralUserSettingsTab_section--discovery_existing {
|
||||
margin-inline-end: var(--SettingsTab_fullWidthField-margin-inline-end);
|
||||
}
|
||||
|
||||
.mx_GeneralUserSettingsTab_section--discovery_existing {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.mx_GeneralUserSettingsTab_section--discovery_existing_address,
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue