Skip to content

Commit 97b9f95

Browse files
floriandurosflorianduros
committed
Add recovery section
1 parent 514b0b2 commit 97b9f95

File tree

11 files changed

+697
-10
lines changed

11 files changed

+697
-10
lines changed

‎res/css/_common.pcss

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -596,7 +596,9 @@ legend {
596596
.mx_Dialog
597597
button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
598598
.mx_UserProfileSettings button
599-
):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button),
599+
):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button):not(
600+
.mx_EncryptionUserSettingsTab button
601+
),
600602
.mx_Dialog input[type="submit"],
601603
.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton),
602604
.mx_Dialog_buttons input[type="submit"] {
@@ -616,16 +618,18 @@ legend {
616618
.mx_Dialog
617619
button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
618620
.mx_UserProfileSettings button
619-
):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(
620-
.mx_ShareDialog button
621+
):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button):not(
622+
.mx_EncryptionUserSettingsTab button
621623
):last-child {
622624
margin-right: 0px;
623625
}
624626

625627
.mx_Dialog
626628
button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
627629
.mx_UserProfileSettings button
628-
):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button):focus,
630+
):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button):not(
631+
.mx_EncryptionUserSettingsTab button
632+
):focus,
629633
.mx_Dialog input[type="submit"]:focus,
630634
.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):focus,
631635
.mx_Dialog_buttons input[type="submit"]:focus {
@@ -637,7 +641,9 @@ legend {
637641
.mx_Dialog_buttons
638642
button.mx_Dialog_primary:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):not(
639643
.mx_UserProfileSettings button
640-
):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button),
644+
):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button):not(
645+
.mx_EncryptionUserSettingsTab button
646+
),
641647
.mx_Dialog_buttons input[type="submit"].mx_Dialog_primary {
642648
color: var(--cpd-color-text-on-solid-primary);
643649
background-color: var(--cpd-color-bg-action-primary-rest);
@@ -650,7 +656,7 @@ legend {
650656
.mx_Dialog_buttons
651657
button.danger:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):not(.mx_UserProfileSettings button):not(
652658
.mx_ThemeChoicePanel_CustomTheme button
653-
):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button),
659+
):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button):not(.mx_EncryptionUserSettingsTab button),
654660
.mx_Dialog_buttons input[type="submit"].danger {
655661
background-color: var(--cpd-color-bg-critical-primary);
656662
border: solid 1px var(--cpd-color-bg-critical-primary);
@@ -666,7 +672,9 @@ legend {
666672
.mx_Dialog
667673
button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
668674
.mx_UserProfileSettings button
669-
):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button):disabled,
675+
):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button):not(
676+
.mx_EncryptionUserSettingsTab button
677+
):disabled,
670678
.mx_Dialog input[type="submit"]:disabled,
671679
.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):disabled,
672680
.mx_Dialog_buttons input[type="submit"]:disabled {

‎res/css/_components.pcss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -351,6 +351,9 @@
351351
@import "./views/settings/_ThemeChoicePanel.pcss";
352352
@import "./views/settings/_UpdateCheckButton.pcss";
353353
@import "./views/settings/_UserProfileSettings.pcss";
354+
@import "./views/settings/encryption/_ChangeRecoveryKey.pcss";
355+
@import "./views/settings/encryption/_EncryptionCard.pcss";
356+
@import "./views/settings/encryption/_RecoveryPanel.pcss";
354357
@import "./views/settings/tabs/_SettingsBanner.pcss";
355358
@import "./views/settings/tabs/_SettingsIndent.pcss";
356359
@import "./views/settings/tabs/_SettingsSection.pcss";

‎res/css/views/settings/encryption/_ChangeRecoveryKey.pcss

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
/*
2+
* Copyright 2024 New Vector Ltd.
3+
*
4+
* SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
5+
* Please see LICENSE files in the repository root for full details.
6+
*/
7+
8+
.mx_ChangeRecoveryKey {
9+
.mx_WarningPanel_description {
10+
text-align: center;
11+
}
12+
13+
.mx_ChangeRecoveryKey_Form {
14+
display: flex;
15+
flex-direction: column;
16+
gap: var(--cpd-space-8x);
17+
18+
.mx_ChangeRecoveryKey_footer {
19+
display: flex;
20+
flex-direction: column;
21+
gap: var(--cpd-space-4x);
22+
justify-content: center;
23+
}
24+
}
25+
26+
.mx_KeyPanel {
27+
display: grid;
28+
grid-template:
29+
"header button" auto
30+
"content button" auto;
31+
32+
column-gap: var(--cpd-space-3x);
33+
row-gap: var(--cpd-space-1x);
34+
align-items: center;
35+
36+
> span {
37+
grid-area: header;
38+
}
39+
40+
> div {
41+
grid-area: content;
42+
display: flex;
43+
flex-direction: column;
44+
gap: var(--cpd-space-2x);
45+
color: var(--cpd-color-text-secondary);
46+
47+
.mx_KeyPanel_key {
48+
border-radius: var(--cpd-space-2x);
49+
padding: var(--cpd-space-3x) var(--cpd-space-4x);
50+
background-color: var(--cpd-color-bg-subtle-secondary);
51+
}
52+
}
53+
54+
> button {
55+
margin: 0 var(--cpd-space-1x);
56+
grid-area: button;
57+
color: var(--cpd-color-icon-secondary-alpha);
58+
}
59+
}
60+
61+
.mx_KeyForm {
62+
display: flex;
63+
flex-direction: column;
64+
gap: var(--cpd-space-8x);
65+
}
66+
67+
.mx_ChangeRecoveryKey_footer {
68+
display: flex;
69+
flex-direction: column;
70+
gap: var(--cpd-space-4x);
71+
justify-content: center;
72+
}
73+
}

‎res/css/views/settings/encryption/_EncryptionCard.pcss

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
/*
2+
* Copyright 2024 New Vector Ltd.
3+
*
4+
* SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
5+
* Please see LICENSE files in the repository root for full details.
6+
*/
7+
8+
.mx_EncryptionCard {
9+
display: flex;
10+
flex-direction: column;
11+
gap: var(--cpd-space-8x);
12+
padding: var(--cpd-space-10x);
13+
border-radius: var(--cpd-space-4x);
14+
/* From figma */
15+
box-shadow: 0 1.2px 2.4px 0 rgba(27, 29, 34, 0.15);
16+
border: 1px solid var(--cpd-color-gray-400);
17+
18+
.mx_EncryptionCard_header {
19+
display: flex;
20+
flex-direction: column;
21+
gap: var(--cpd-space-4x);
22+
align-items: center;
23+
24+
> h2 {
25+
margin: 0;
26+
}
27+
28+
> span {
29+
color: var(--cpd-color-text-secondary);
30+
text-align: center;
31+
}
32+
}
33+
}

‎res/css/views/settings/encryption/_RecoveryPanel.pcss

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
/*
2+
* Copyright 2024 New Vector Ltd.
3+
*
4+
* SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
5+
* Please see LICENSE files in the repository root for full details.
6+
*/
7+
8+
.mx_RecoveryPanel {
9+
.mx_RecoveryPanel_Subheader {
10+
display: flex;
11+
flex-direction: column;
12+
gap: var(--cpd-space-2x);
13+
14+
> span {
15+
display: flex;
16+
align-items: center;
17+
gap: var(--cpd-space-2x);
18+
font: var(--cpd-font-body-sm-medium);
19+
color: var(--cpd-color-text-success-primary);
20+
}
21+
}
22+
}

‎res/css/views/settings/tabs/_SettingsTab.pcss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ Please see LICENSE files in the repository root for full details.
1414
color: $links;
1515
}
1616

17-
form {
17+
form:not(.mx_EncryptionUserSettingsTab form) {
1818
display: flex;
1919
flex-direction: column;
2020
gap: $spacing-8;

0 commit comments

Comments
 (0)