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

Commit bb13c7e

Browse files
committed
Start new login flow implementation
1 parent 3243d21 commit bb13c7e

File tree

26 files changed

+1109
-294
lines changed

26 files changed

+1109
-294
lines changed

res/css/_components.pcss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@
4949
@import "./structures/_BackdropPanel.pcss";
5050
@import "./structures/_CompatibilityPage.pcss";
5151
@import "./structures/_ContextualMenu.pcss";
52+
@import "./structures/_ErrorMessage.pcss";
5253
@import "./structures/_FileDropTarget.pcss";
5354
@import "./structures/_FilePanel.pcss";
5455
@import "./structures/_GenericDropdownMenu.pcss";
@@ -157,6 +158,7 @@
157158
@import "./views/dialogs/_UntrustedDeviceDialog.pcss";
158159
@import "./views/dialogs/_UploadConfirmDialog.pcss";
159160
@import "./views/dialogs/_UserSettingsDialog.pcss";
161+
@import "./views/dialogs/_VerifyEMailDialog.pcss";
160162
@import "./views/dialogs/_WidgetCapabilitiesPromptDialog.pcss";
161163
@import "./views/dialogs/security/_AccessSecretStorageDialog.pcss";
162164
@import "./views/dialogs/security/_CreateCrossSigningDialog.pcss";

res/css/compound/_Icon.pcss

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,3 +30,12 @@ limitations under the License.
3030
flex: 0 0 16px;
3131
width: 16px;
3232
}
33+
34+
.mx_Icon_32 {
35+
height: 32px;
36+
width: 32px;
37+
}
38+
39+
.mx_Icon_accent {
40+
color: $accent;
41+
}
Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
/*
2+
Copyright 2022 The Matrix.org Foundation C.I.C.
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
.mx_ErrorMessage {
18+
align-items: center;
19+
color: $alert;
20+
display: flex;
21+
font-size: $font-12px;
22+
gap: $spacing-8;
23+
line-height: 1.2em;
24+
min-height: 2.4em;
25+
}

res/css/structures/auth/_Login.pcss

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ limitations under the License.
1717

1818
.mx_Login_submit {
1919
@mixin mx_DialogButton;
20+
font-size: 15px;
21+
font-weight: 600;
2022
width: 100%;
2123
margin-top: 24px;
2224
margin-bottom: 24px;
@@ -87,7 +89,7 @@ limitations under the License.
8789

8890
div.mx_AccessibleButton_kind_link.mx_Login_forgot {
8991
display: block;
90-
margin: 0 auto;
92+
margin-top: 24px;
9193

9294
&.mx_AccessibleButton_disabled {
9395
cursor: not-allowed;

res/css/views/auth/_AuthBody.pcss

Lines changed: 74 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,17 @@ limitations under the License.
1717

1818
.mx_AuthBody {
1919
width: 500px;
20-
font-size: $font-12px;
21-
color: $authpage-secondary-color;
20+
font-size: $font-14px;
21+
color: $primary-content;
2222
background-color: $background;
2323
border-radius: 0 4px 4px 0;
24-
padding: 25px 60px;
24+
padding: 50px 32px;
2525
box-sizing: border-box;
26+
min-height: 600px;
27+
28+
b {
29+
font-weight: 600;
30+
}
2631

2732
&.mx_AuthBody_flex {
2833
display: flex;
@@ -32,7 +37,8 @@ limitations under the License.
3237
h1 {
3338
font-size: $font-24px;
3439
font-weight: $font-semi-bold;
35-
margin-top: 8px;
40+
margin-bottom: $spacing-20;
41+
margin-top: $spacing-24;
3642
color: $authpage-primary-color;
3743
}
3844

@@ -52,6 +58,23 @@ limitations under the License.
5258
@mixin mx_Dialog_link;
5359
}
5460

61+
fieldset {
62+
display: block;
63+
}
64+
65+
.mx_AuthBody_icon {
66+
width: 40px;
67+
}
68+
69+
.mx_AuthBody_lockIcon {
70+
height: 29px;
71+
}
72+
73+
.mx_AuthBody_text {
74+
margin-bottom: $spacing-48;
75+
margin-top: 0;
76+
}
77+
5578
input[type="text"],
5679
input[type="password"] {
5780
color: $authpage-primary-color;
@@ -76,6 +99,16 @@ limitations under the License.
7699
color: $alert;
77100
}
78101

102+
.mx_Login_submit {
103+
height: 33px;
104+
margin-top: $spacing-16;
105+
}
106+
107+
.mx_ErrorMessage {
108+
margin-bottom: 12px;
109+
margin-top: 2px;
110+
}
111+
79112
.mx_Field input {
80113
box-sizing: border-box;
81114
}
@@ -101,6 +134,43 @@ limitations under the License.
101134
}
102135
}
103136

137+
.mx_AuthBody_did-not-receive {
138+
align-items: center;
139+
color: $secondary-content;
140+
display: flex;
141+
gap: $spacing-8;
142+
margin-bottom: 10px;
143+
margin-top: $spacing-24;
144+
}
145+
146+
.mx_AuthBody_did-not-receive--centered {
147+
justify-content: center;
148+
}
149+
150+
.mx_AuthBody_resend-button {
151+
align-items: center;
152+
border-radius: 8px;
153+
color: $accent;
154+
display: flex;
155+
gap: $spacing-4;
156+
padding: 4px;
157+
158+
&:hover {
159+
background-color: $system;
160+
}
161+
}
162+
163+
.mx_AuthBody_emailPromptIcon {
164+
width: 57px;
165+
}
166+
167+
.mx_AuthBody_emailPromptIcon--shifted {
168+
margin-bottom: -17px; // Prevent layout jump by relative positioning.
169+
position: relative;
170+
top: -17px; // This icon is higher than the other icons. Shift up to prevent icon jumping.
171+
width: 57px;
172+
}
173+
104174
.mx_AuthBody_fieldRow {
105175
display: flex;
106176
margin-bottom: 10px;
Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
/*
2+
Copyright 2022 The Matrix.org Foundation C.I.C.
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
.mx_VerifyEMailDialog {
18+
.mx_Dialog {
19+
color: $primary-content;
20+
font-size: 14px;
21+
padding: 16px;
22+
text-align: center;
23+
width: 485px;
24+
25+
h1 {
26+
font-size: $font-24px;
27+
font-weight: 600;
28+
}
29+
30+
.mx_VerifyEMailDialog_text-light {
31+
color: $secondary-content;
32+
line-height: 20px;
33+
}
34+
}
35+
}

res/css/views/elements/_AccessibleButton.pcss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ limitations under the License.
2424
&.mx_AccessibleButton_kind_primary_outline,
2525
&.mx_AccessibleButton_kind_primary_sm,
2626
&.mx_AccessibleButton_kind_link,
27+
&.mx_AccessibleButton_kind_link_accent,
2728
&.mx_AccessibleButton_kind_link_inline,
2829
&.mx_AccessibleButton_kind_danger_inline,
2930
&.mx_AccessibleButton_kind_content_inline,

res/css/views/elements/_Field.pcss

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -174,8 +174,6 @@ limitations under the License.
174174
}
175175

176176
.mx_Field_tooltip {
177-
margin-top: -12px;
178-
margin-left: 4px;
179177
width: 200px;
180178
}
181179

res/css/views/elements/_Tooltip.pcss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ limitations under the License.
3838
.mx_Tooltip_chevron {
3939
position: absolute;
4040
left: -7px;
41-
top: 10px;
41+
top: calc(50% - 6px);
4242
width: 0;
4343
height: 0;
4444
border-top: 7px solid transparent;

res/img/element-icons/Checkbox.svg

Lines changed: 3 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)