From 8cd2c627f66fd4826b791e1790b2c45ad49782b5 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 25 Mar 2022 20:23:42 +0000 Subject: [PATCH 1/5] .mx_AccessSecretStorageDialog Signed-off-by: Suguru Hirahara --- res/css/views/dialogs/security/_AccessSecretStorageDialog.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/res/css/views/dialogs/security/_AccessSecretStorageDialog.scss b/res/css/views/dialogs/security/_AccessSecretStorageDialog.scss index 5756290505c..be09ea8bfa1 100644 --- a/res/css/views/dialogs/security/_AccessSecretStorageDialog.scss +++ b/res/css/views/dialogs/security/_AccessSecretStorageDialog.scss @@ -14,6 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ +.mx_AccessSecretStorageDialog { .mx_AccessSecretStorageDialog_titleWithIcon::before { content: ''; display: inline-block; @@ -137,3 +138,4 @@ limitations under the License. } } } +} From fa731801c4ac1a49348f18fdabb8fd67c9b781d6 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 25 Mar 2022 20:39:22 +0000 Subject: [PATCH 2/5] .mx_AccessSecretStorageDialog_primaryContainer Signed-off-by: Suguru Hirahara --- .../security/_AccessSecretStorageDialog.scss | 26 ++++++++++--------- 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/res/css/views/dialogs/security/_AccessSecretStorageDialog.scss b/res/css/views/dialogs/security/_AccessSecretStorageDialog.scss index be09ea8bfa1..99e50c15f67 100644 --- a/res/css/views/dialogs/security/_AccessSecretStorageDialog.scss +++ b/res/css/views/dialogs/security/_AccessSecretStorageDialog.scss @@ -41,20 +41,20 @@ limitations under the License. mask-image: url('$(res)/img/feather-customised/secure-phrase.svg'); } -.mx_AccessSecretStorageDialog_keyStatus { - height: 30px; -} - +.mx_AccessSecretStorageDialog_primaryContainer { .mx_AccessSecretStorageDialog_passPhraseInput { width: 300px; border: 1px solid $accent; border-radius: 5px; } +.mx_AccessSecretStorageDialog_keyStatus { + height: 30px; +} + .mx_AccessSecretStorageDialog_recoveryKeyEntry { display: flex; align-items: center; -} .mx_AccessSecretStorageDialog_recoveryKeyEntry_textInput { flex-grow: 1; @@ -64,6 +64,11 @@ limitations under the License. margin: $spacing-16; } +.mx_AccessSecretStorageDialog_recoveryKeyEntry_fileInput { + display: none; +} +} + .mx_AccessSecretStorageDialog_recoveryKeyFeedback { &::before { content: ""; @@ -76,29 +81,26 @@ limitations under the License. mask-size: 20px; margin-inline-end: 5px; // TODO: spacing variable } -} -.mx_AccessSecretStorageDialog_recoveryKeyFeedback_valid { +&.mx_AccessSecretStorageDialog_recoveryKeyFeedback_valid { color: $accent; + &::before { mask-image: url('$(res)/img/feather-customised/check.svg'); background-color: $accent; } } -.mx_AccessSecretStorageDialog_recoveryKeyFeedback_invalid { +&.mx_AccessSecretStorageDialog_recoveryKeyFeedback_invalid { color: $alert; + &::before { mask-image: url('$(res)/img/feather-customised/x.svg'); background-color: $alert; } } - -.mx_AccessSecretStorageDialog_recoveryKeyEntry_fileInput { - display: none; } -.mx_AccessSecretStorageDialog_primaryContainer { .mx_Dialog_buttons { $spacingStart: $spacing-24; // 16px icon + 8px padding From 02f769c8e6a50b7f25f4116fcfbb967b6561ed18 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 25 Mar 2022 20:46:39 +0000 Subject: [PATCH 3/5] .mx_AccessSecretStorageDialog_titleWithIcon Signed-off-by: Suguru Hirahara --- .../dialogs/security/_AccessSecretStorageDialog.scss | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/res/css/views/dialogs/security/_AccessSecretStorageDialog.scss b/res/css/views/dialogs/security/_AccessSecretStorageDialog.scss index 99e50c15f67..4f7764ca2f6 100644 --- a/res/css/views/dialogs/security/_AccessSecretStorageDialog.scss +++ b/res/css/views/dialogs/security/_AccessSecretStorageDialog.scss @@ -15,7 +15,8 @@ limitations under the License. */ .mx_AccessSecretStorageDialog { -.mx_AccessSecretStorageDialog_titleWithIcon::before { +.mx_AccessSecretStorageDialog_titleWithIcon { +&::before { content: ''; display: inline-block; width: 24px; @@ -26,20 +27,21 @@ limitations under the License. background-color: $primary-content; } -.mx_AccessSecretStorageDialog_resetBadge::before { +&.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 { +&.mx_AccessSecretStorageDialog_secureBackupTitle::before { mask-image: url('$(res)/img/feather-customised/secure-backup.svg'); } -.mx_AccessSecretStorageDialog_securePhraseTitle::before { +&.mx_AccessSecretStorageDialog_securePhraseTitle::before { mask-image: url('$(res)/img/feather-customised/secure-phrase.svg'); } +} .mx_AccessSecretStorageDialog_primaryContainer { .mx_AccessSecretStorageDialog_passPhraseInput { From 22616f3a1667aef590d3b03af4fab3f4a74545f8 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 22 Apr 2022 07:34:53 +0000 Subject: [PATCH 4/5] Adopt BEM style Signed-off-by: Suguru Hirahara --- .../views/dialogs/security/_AccessSecretStorageDialog.scss | 4 ++-- .../views/dialogs/security/AccessSecretStorageDialog.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/res/css/views/dialogs/security/_AccessSecretStorageDialog.scss b/res/css/views/dialogs/security/_AccessSecretStorageDialog.scss index 4f7764ca2f6..1216d2f60b2 100644 --- a/res/css/views/dialogs/security/_AccessSecretStorageDialog.scss +++ b/res/css/views/dialogs/security/_AccessSecretStorageDialog.scss @@ -84,7 +84,7 @@ limitations under the License. margin-inline-end: 5px; // TODO: spacing variable } -&.mx_AccessSecretStorageDialog_recoveryKeyFeedback_valid { +&.mx_AccessSecretStorageDialog_recoveryKeyFeedback--valid { color: $accent; &::before { @@ -93,7 +93,7 @@ limitations under the License. } } -&.mx_AccessSecretStorageDialog_recoveryKeyFeedback_invalid { +&.mx_AccessSecretStorageDialog_recoveryKeyFeedback--invalid { color: $alert; &::before { diff --git a/src/components/views/dialogs/security/AccessSecretStorageDialog.tsx b/src/components/views/dialogs/security/AccessSecretStorageDialog.tsx index ac7eea8e2b6..36bea6d317b 100644 --- a/src/components/views/dialogs/security/AccessSecretStorageDialog.tsx +++ b/src/components/views/dialogs/security/AccessSecretStorageDialog.tsx @@ -369,8 +369,8 @@ export default class AccessSecretStorageDialog extends React.PureComponent { this.getKeyValidationText() } From 6385750a6464e428902ba1b32a5fc461c1febb20 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 12 May 2022 00:11:58 +0900 Subject: [PATCH 5/5] yarn run lint:style --fix Signed-off-by: Suguru Hirahara --- .../security/_AccessSecretStorageDialog.scss | 210 +++++++++--------- 1 file changed, 105 insertions(+), 105 deletions(-) diff --git a/res/css/views/dialogs/security/_AccessSecretStorageDialog.scss b/res/css/views/dialogs/security/_AccessSecretStorageDialog.scss index 1216d2f60b2..fc24f27858e 100644 --- a/res/css/views/dialogs/security/_AccessSecretStorageDialog.scss +++ b/res/css/views/dialogs/security/_AccessSecretStorageDialog.scss @@ -15,131 +15,131 @@ limitations under the License. */ .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_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_primaryContainer { -.mx_AccessSecretStorageDialog_passPhraseInput { - width: 300px; - border: 1px solid $accent; - border-radius: 5px; -} - -.mx_AccessSecretStorageDialog_keyStatus { - height: 30px; -} - -.mx_AccessSecretStorageDialog_recoveryKeyEntry { - display: flex; - align-items: center; - -.mx_AccessSecretStorageDialog_recoveryKeyEntry_textInput { - flex-grow: 1; -} + .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_recoveryKeyEntry_entryControlSeparatorText { - margin: $spacing-16; -} + &.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_recoveryKeyEntry_fileInput { - display: none; -} -} + &.mx_AccessSecretStorageDialog_secureBackupTitle::before { + mask-image: url('$(res)/img/feather-customised/secure-backup.svg'); + } -.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; + .mx_AccessSecretStorageDialog_primaryContainer { + .mx_AccessSecretStorageDialog_passPhraseInput { + width: 300px; + border: 1px solid $accent; + border-radius: 5px; + } - &::before { - mask-image: url('$(res)/img/feather-customised/check.svg'); - background-color: $accent; - } -} + .mx_AccessSecretStorageDialog_keyStatus { + height: 30px; + } -&.mx_AccessSecretStorageDialog_recoveryKeyFeedback--invalid { - color: $alert; + .mx_AccessSecretStorageDialog_recoveryKeyEntry { + display: flex; + align-items: center; - &::before { - mask-image: url('$(res)/img/feather-customised/x.svg'); - background-color: $alert; - } -} -} + .mx_AccessSecretStorageDialog_recoveryKeyEntry_textInput { + flex-grow: 1; + } - .mx_Dialog_buttons { - $spacingStart: $spacing-24; // 16px icon + 8px padding + .mx_AccessSecretStorageDialog_recoveryKeyEntry_entryControlSeparatorText { + margin: $spacing-16; + } - text-align: initial; - display: flex; - flex-flow: column; - gap: 14px; // TODO: spacing variable + .mx_AccessSecretStorageDialog_recoveryKeyEntry_fileInput { + display: none; + } + } - .mx_Dialog_buttons_additive { - float: none; + .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_reset { - position: relative; - padding-inline-start: $spacingStart; + &.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; + } } } } -}