Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit 1b426ce

Browse files
luixxiulluixxiul
authored
Organize style rules of AccessSecretStorageDialog to avoid visual bugs (#8395)
* .mx_AccessSecretStorageDialog Signed-off-by: Suguru Hirahara <[email protected]> * .mx_AccessSecretStorageDialog_primaryContainer Signed-off-by: Suguru Hirahara <[email protected]> * .mx_AccessSecretStorageDialog_titleWithIcon Signed-off-by: Suguru Hirahara <[email protected]> * Adopt BEM style Signed-off-by: Suguru Hirahara <[email protected]> * yarn run lint:style --fix Signed-off-by: Suguru Hirahara <[email protected]>
1 parent 78ba5e3 commit 1b426ce

File tree

2 files changed

+108
-102
lines changed

2 files changed

+108
-102
lines changed

‎res/css/views/dialogs/security/_AccessSecretStorageDialog.scss‎

Lines changed: 106 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -14,126 +14,132 @@ See the License for the specific language governing permissions and
1414
limitations under the License.
1515
*/
1616

17-
.mx_AccessSecretStorageDialog_titleWithIcon::before {
18-
content: '';
19-
display: inline-block;
20-
width: 24px;
21-
height: 24px;
22-
margin-inline-end: $spacing-8;
23-
position: relative;
24-
top: 5px; // TODO: spacing variable
25-
background-color: $primary-content;
26-
}
27-
28-
.mx_AccessSecretStorageDialog_resetBadge::before {
29-
// The image isn't capable of masking, so we use a background instead.
30-
background-image: url("$(res)/img/element-icons/warning-badge.svg");
31-
background-size: 24px;
32-
background-color: transparent;
33-
}
34-
35-
.mx_AccessSecretStorageDialog_secureBackupTitle::before {
36-
mask-image: url('$(res)/img/feather-customised/secure-backup.svg');
37-
}
38-
39-
.mx_AccessSecretStorageDialog_securePhraseTitle::before {
40-
mask-image: url('$(res)/img/feather-customised/secure-phrase.svg');
41-
}
17+
.mx_AccessSecretStorageDialog {
18+
.mx_AccessSecretStorageDialog_titleWithIcon {
19+
&::before {
20+
content: '';
21+
display: inline-block;
22+
width: 24px;
23+
height: 24px;
24+
margin-inline-end: $spacing-8;
25+
position: relative;
26+
top: 5px; // TODO: spacing variable
27+
background-color: $primary-content;
28+
}
4229

43-
.mx_AccessSecretStorageDialog_keyStatus {
44-
height: 30px;
45-
}
30+
&.mx_AccessSecretStorageDialog_resetBadge::before {
31+
// The image isn't capable of masking, so we use a background instead.
32+
background-image: url("$(res)/img/element-icons/warning-badge.svg");
33+
background-size: 24px;
34+
background-color: transparent;
35+
}
4636

47-
.mx_AccessSecretStorageDialog_passPhraseInput {
48-
width: 300px;
49-
border: 1px solid $accent;
50-
border-radius: 5px;
51-
}
37+
&.mx_AccessSecretStorageDialog_secureBackupTitle::before {
38+
mask-image: url('$(res)/img/feather-customised/secure-backup.svg');
39+
}
5240

53-
.mx_AccessSecretStorageDialog_recoveryKeyEntry {
54-
display: flex;
55-
align-items: center;
56-
}
41+
&.mx_AccessSecretStorageDialog_securePhraseTitle::before {
42+
mask-image: url('$(res)/img/feather-customised/secure-phrase.svg');
43+
}
44+
}
5745

58-
.mx_AccessSecretStorageDialog_recoveryKeyEntry_textInput {
59-
flex-grow: 1;
60-
}
46+
.mx_AccessSecretStorageDialog_primaryContainer {
47+
.mx_AccessSecretStorageDialog_passPhraseInput {
48+
width: 300px;
49+
border: 1px solid $accent;
50+
border-radius: 5px;
51+
}
6152

62-
.mx_AccessSecretStorageDialog_recoveryKeyEntry_entryControlSeparatorText {
63-
margin: $spacing-16;
64-
}
53+
.mx_AccessSecretStorageDialog_keyStatus {
54+
height: 30px;
55+
}
6556

66-
.mx_AccessSecretStorageDialog_recoveryKeyFeedback {
67-
&::before {
68-
content: "";
69-
display: inline-block;
70-
vertical-align: bottom;
71-
width: 20px;
72-
height: 20px;
73-
mask-repeat: no-repeat;
74-
mask-position: center;
75-
mask-size: 20px;
76-
margin-inline-end: 5px; // TODO: spacing variable
77-
}
78-
}
57+
.mx_AccessSecretStorageDialog_recoveryKeyEntry {
58+
display: flex;
59+
align-items: center;
7960

80-
.mx_AccessSecretStorageDialog_recoveryKeyFeedback_valid {
81-
color: $accent;
82-
&::before {
83-
mask-image: url('$(res)/img/feather-customised/check.svg');
84-
background-color: $accent;
85-
}
86-
}
61+
.mx_AccessSecretStorageDialog_recoveryKeyEntry_textInput {
62+
flex-grow: 1;
63+
}
8764

88-
.mx_AccessSecretStorageDialog_recoveryKeyFeedback_invalid {
89-
color: $alert;
90-
&::before {
91-
mask-image: url('$(res)/img/feather-customised/x.svg');
92-
background-color: $alert;
93-
}
94-
}
65+
.mx_AccessSecretStorageDialog_recoveryKeyEntry_entryControlSeparatorText {
66+
margin: $spacing-16;
67+
}
9568

96-
.mx_AccessSecretStorageDialog_recoveryKeyEntry_fileInput {
97-
display: none;
98-
}
69+
.mx_AccessSecretStorageDialog_recoveryKeyEntry_fileInput {
70+
display: none;
71+
}
72+
}
9973

100-
.mx_AccessSecretStorageDialog_primaryContainer {
101-
.mx_Dialog_buttons {
102-
$spacingStart: $spacing-24; // 16px icon + 8px padding
74+
.mx_AccessSecretStorageDialog_recoveryKeyFeedback {
75+
&::before {
76+
content: "";
77+
display: inline-block;
78+
vertical-align: bottom;
79+
width: 20px;
80+
height: 20px;
81+
mask-repeat: no-repeat;
82+
mask-position: center;
83+
mask-size: 20px;
84+
margin-inline-end: 5px; // TODO: spacing variable
85+
}
10386

104-
text-align: initial;
105-
display: flex;
106-
flex-flow: column;
107-
gap: 14px; // TODO: spacing variable
87+
&.mx_AccessSecretStorageDialog_recoveryKeyFeedback--valid {
88+
color: $accent;
10889

109-
.mx_Dialog_buttons_additive {
110-
float: none;
90+
&::before {
91+
mask-image: url('$(res)/img/feather-customised/check.svg');
92+
background-color: $accent;
93+
}
94+
}
11195

112-
.mx_AccessSecretStorageDialog_reset {
113-
position: relative;
114-
padding-inline-start: $spacingStart;
96+
&.mx_AccessSecretStorageDialog_recoveryKeyFeedback--invalid {
97+
color: $alert;
11598

11699
&::before {
117-
content: "";
118-
display: inline-block;
119-
position: absolute;
120-
height: 16px;
121-
width: 16px;
122-
left: 0;
123-
top: 2px; // alignment
124-
background-image: url("$(res)/img/element-icons/warning-badge.svg");
125-
background-size: contain;
100+
mask-image: url('$(res)/img/feather-customised/x.svg');
101+
background-color: $alert;
126102
}
103+
}
104+
}
127105

128-
.mx_AccessSecretStorageDialog_reset_link {
129-
color: $alert;
106+
.mx_Dialog_buttons {
107+
$spacingStart: $spacing-24; // 16px icon + 8px padding
108+
109+
text-align: initial;
110+
display: flex;
111+
flex-flow: column;
112+
gap: 14px; // TODO: spacing variable
113+
114+
.mx_Dialog_buttons_additive {
115+
float: none;
116+
117+
.mx_AccessSecretStorageDialog_reset {
118+
position: relative;
119+
padding-inline-start: $spacingStart;
120+
121+
&::before {
122+
content: "";
123+
display: inline-block;
124+
position: absolute;
125+
height: 16px;
126+
width: 16px;
127+
left: 0;
128+
top: 2px; // alignment
129+
background-image: url("$(res)/img/element-icons/warning-badge.svg");
130+
background-size: contain;
131+
}
132+
133+
.mx_AccessSecretStorageDialog_reset_link {
134+
color: $alert;
135+
}
130136
}
131137
}
132-
}
133138

134-
.mx_Dialog_buttons_row {
135-
gap: $spacing-16; // TODO: needs normalization
136-
padding-inline-start: $spacingStart;
139+
.mx_Dialog_buttons_row {
140+
gap: $spacing-16; // TODO: needs normalization
141+
padding-inline-start: $spacingStart;
142+
}
137143
}
138144
}
139145
}

‎src/components/views/dialogs/security/AccessSecretStorageDialog.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -366,8 +366,8 @@ export default class AccessSecretStorageDialog extends React.PureComponent<IProp
366366

367367
const feedbackClasses = classNames({
368368
'mx_AccessSecretStorageDialog_recoveryKeyFeedback': true,
369-
'mx_AccessSecretStorageDialog_recoveryKeyFeedback_valid': this.state.recoveryKeyCorrect === true,
370-
'mx_AccessSecretStorageDialog_recoveryKeyFeedback_invalid': this.state.recoveryKeyCorrect === false,
369+
'mx_AccessSecretStorageDialog_recoveryKeyFeedback--valid': this.state.recoveryKeyCorrect === true,
370+
'mx_AccessSecretStorageDialog_recoveryKeyFeedback--invalid': this.state.recoveryKeyCorrect === false,
371371
});
372372
const recoveryKeyFeedback = <div className={feedbackClasses}>
373373
{ this.getKeyValidationText() }

0 commit comments

Comments
 (0)