From 1b426ce0c80a2064353485956f26825626095921 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 15 Jun 2022 15:47:25 +0000 Subject: [PATCH] Organize style rules of AccessSecretStorageDialog to avoid visual bugs (#8395) * .mx_AccessSecretStorageDialog Signed-off-by: Suguru Hirahara * .mx_AccessSecretStorageDialog_primaryContainer Signed-off-by: Suguru Hirahara * .mx_AccessSecretStorageDialog_titleWithIcon Signed-off-by: Suguru Hirahara * Adopt BEM style Signed-off-by: Suguru Hirahara * yarn run lint:style --fix Signed-off-by: Suguru Hirahara --- .../security/_AccessSecretStorageDialog.scss | 208 +++++++++--------- .../security/AccessSecretStorageDialog.tsx | 4 +- 2 files changed, 109 insertions(+), 103 deletions(-) diff --git a/res/css/views/dialogs/security/_AccessSecretStorageDialog.scss b/res/css/views/dialogs/security/_AccessSecretStorageDialog.scss index 5756290505..fc24f27858 100644 --- a/res/css/views/dialogs/security/_AccessSecretStorageDialog.scss +++ b/res/css/views/dialogs/security/_AccessSecretStorageDialog.scss @@ -14,126 +14,132 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_AccessSecretStorageDialog_titleWithIcon::before { - content: ''; - display: inline-block; - width: 24px; - height: 24px; - margin-inline-end: $spacing-8; - position: relative; - top: 5px; // TODO: spacing variable - background-color: $primary-content; -} +.mx_AccessSecretStorageDialog { + .mx_AccessSecretStorageDialog_titleWithIcon { + &::before { + content: ''; + display: inline-block; + width: 24px; + height: 24px; + margin-inline-end: $spacing-8; + position: relative; + top: 5px; // TODO: spacing variable + background-color: $primary-content; + } -.mx_AccessSecretStorageDialog_resetBadge::before { - // The image isn't capable of masking, so we use a background instead. - background-image: url("$(res)/img/element-icons/warning-badge.svg"); - background-size: 24px; - background-color: transparent; -} + &.mx_AccessSecretStorageDialog_resetBadge::before { + // The image isn't capable of masking, so we use a background instead. + background-image: url("$(res)/img/element-icons/warning-badge.svg"); + background-size: 24px; + background-color: transparent; + } -.mx_AccessSecretStorageDialog_secureBackupTitle::before { - mask-image: url('$(res)/img/feather-customised/secure-backup.svg'); -} + &.mx_AccessSecretStorageDialog_secureBackupTitle::before { + mask-image: url('$(res)/img/feather-customised/secure-backup.svg'); + } -.mx_AccessSecretStorageDialog_securePhraseTitle::before { - mask-image: url('$(res)/img/feather-customised/secure-phrase.svg'); -} - -.mx_AccessSecretStorageDialog_keyStatus { - height: 30px; -} - -.mx_AccessSecretStorageDialog_passPhraseInput { - width: 300px; - border: 1px solid $accent; - border-radius: 5px; -} - -.mx_AccessSecretStorageDialog_recoveryKeyEntry { - display: flex; - align-items: center; -} - -.mx_AccessSecretStorageDialog_recoveryKeyEntry_textInput { - flex-grow: 1; -} - -.mx_AccessSecretStorageDialog_recoveryKeyEntry_entryControlSeparatorText { - margin: $spacing-16; -} - -.mx_AccessSecretStorageDialog_recoveryKeyFeedback { - &::before { - content: ""; - display: inline-block; - vertical-align: bottom; - width: 20px; - height: 20px; - mask-repeat: no-repeat; - mask-position: center; - mask-size: 20px; - margin-inline-end: 5px; // TODO: spacing variable + &.mx_AccessSecretStorageDialog_securePhraseTitle::before { + mask-image: url('$(res)/img/feather-customised/secure-phrase.svg'); + } } -} -.mx_AccessSecretStorageDialog_recoveryKeyFeedback_valid { - color: $accent; - &::before { - mask-image: url('$(res)/img/feather-customised/check.svg'); - background-color: $accent; - } -} + .mx_AccessSecretStorageDialog_primaryContainer { + .mx_AccessSecretStorageDialog_passPhraseInput { + width: 300px; + border: 1px solid $accent; + border-radius: 5px; + } -.mx_AccessSecretStorageDialog_recoveryKeyFeedback_invalid { - color: $alert; - &::before { - mask-image: url('$(res)/img/feather-customised/x.svg'); - background-color: $alert; - } -} + .mx_AccessSecretStorageDialog_keyStatus { + height: 30px; + } -.mx_AccessSecretStorageDialog_recoveryKeyEntry_fileInput { - display: none; -} + .mx_AccessSecretStorageDialog_recoveryKeyEntry { + display: flex; + align-items: center; -.mx_AccessSecretStorageDialog_primaryContainer { - .mx_Dialog_buttons { - $spacingStart: $spacing-24; // 16px icon + 8px padding + .mx_AccessSecretStorageDialog_recoveryKeyEntry_textInput { + flex-grow: 1; + } - text-align: initial; - display: flex; - flex-flow: column; - gap: 14px; // TODO: spacing variable + .mx_AccessSecretStorageDialog_recoveryKeyEntry_entryControlSeparatorText { + margin: $spacing-16; + } - .mx_Dialog_buttons_additive { - float: none; + .mx_AccessSecretStorageDialog_recoveryKeyEntry_fileInput { + display: none; + } + } - .mx_AccessSecretStorageDialog_reset { - position: relative; - padding-inline-start: $spacingStart; + .mx_AccessSecretStorageDialog_recoveryKeyFeedback { + &::before { + content: ""; + display: inline-block; + vertical-align: bottom; + width: 20px; + height: 20px; + mask-repeat: no-repeat; + mask-position: center; + mask-size: 20px; + margin-inline-end: 5px; // TODO: spacing variable + } + + &.mx_AccessSecretStorageDialog_recoveryKeyFeedback--valid { + color: $accent; &::before { - content: ""; - display: inline-block; - position: absolute; - height: 16px; - width: 16px; - left: 0; - top: 2px; // alignment - background-image: url("$(res)/img/element-icons/warning-badge.svg"); - background-size: contain; + mask-image: url('$(res)/img/feather-customised/check.svg'); + background-color: $accent; } + } - .mx_AccessSecretStorageDialog_reset_link { - color: $alert; + &.mx_AccessSecretStorageDialog_recoveryKeyFeedback--invalid { + color: $alert; + + &::before { + mask-image: url('$(res)/img/feather-customised/x.svg'); + background-color: $alert; } } } - .mx_Dialog_buttons_row { - gap: $spacing-16; // TODO: needs normalization - padding-inline-start: $spacingStart; + .mx_Dialog_buttons { + $spacingStart: $spacing-24; // 16px icon + 8px padding + + text-align: initial; + display: flex; + flex-flow: column; + gap: 14px; // TODO: spacing variable + + .mx_Dialog_buttons_additive { + float: none; + + .mx_AccessSecretStorageDialog_reset { + position: relative; + padding-inline-start: $spacingStart; + + &::before { + content: ""; + display: inline-block; + position: absolute; + height: 16px; + width: 16px; + left: 0; + top: 2px; // alignment + background-image: url("$(res)/img/element-icons/warning-badge.svg"); + background-size: contain; + } + + .mx_AccessSecretStorageDialog_reset_link { + color: $alert; + } + } + } + + .mx_Dialog_buttons_row { + gap: $spacing-16; // TODO: needs normalization + padding-inline-start: $spacingStart; + } } } } diff --git a/src/components/views/dialogs/security/AccessSecretStorageDialog.tsx b/src/components/views/dialogs/security/AccessSecretStorageDialog.tsx index ee6d884b8c..950768e11e 100644 --- a/src/components/views/dialogs/security/AccessSecretStorageDialog.tsx +++ b/src/components/views/dialogs/security/AccessSecretStorageDialog.tsx @@ -366,8 +366,8 @@ export default class AccessSecretStorageDialog extends React.PureComponent { this.getKeyValidationText() }