imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Prepare for OIDC QR Login PR (#12463)

Browse source 
* Move LoginWithQRSection to the top of the settings tab

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Refactor LoginWithQRSection to a Functional Component

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Extract LoginWithQR types

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update LoginWithQRFlow styling & copy

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Re-add missing buttons and update snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Use compound spacings

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2024-04-30 18:18:55 +01:00 • committed by GitHub
parent 1c79bbb1ae
commit 641a20ce63
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 598 additions and 389 deletions
Download patch file Download diff file Expand all files Collapse all files

132
res/css/views/auth/_LoginWithQR.pcss
View file

@ -32,36 +32,10 @@ limitations under the License.
margin-top: $spacing-8;
}
.mx_LoginWithQR_separator {
display: flex;
align-items: center;
text-align: center;
&::before,
&::after {
content: "";
flex: 1;
border-bottom: 1px solid $quinary-content;
}
&:not(:empty) {
&::before {
margin-right: 1em;
}
&::after {
margin-left: 1em;
}
}
}
font-size: $font-15px;
}
.mx_UserSettingsDialog .mx_LoginWithQR {
.mx_AccessibleButton + .mx_AccessibleButton {
margin-left: $spacing-12;
}
font: var(--cpd-font-body-md-regular);
h1 {
@ -69,18 +43,14 @@ limitations under the License.
margin-bottom: 0;
}
li {
line-height: 1.8;
h2 {
margin-top: $spacing-24;
}
.mx_QRCode {
margin: $spacing-28 0;
}
.mx_LoginWithQR_buttons {
text-align: center;
}
.mx_LoginWithQR_qrWrapper {
display: flex;
}
@ -91,12 +61,6 @@ limitations under the License.
display: flex;
flex-direction: column;
.mx_LoginWithQR_centreTitle {
h1 {
text-align: center;
}
}
h1 > svg {
&.normal {
color: $secondary-content;
@ -137,11 +101,69 @@ limitations under the License.
}
ol {
list-style-position: inside;
padding-inline-start: 0;
list-style: none; /* list markers do not support the outlined number styling we need */
li::marker {
color: $accent;
li {
position: relative;
padding-left: var(--cpd-space-7x);
color: 1px solid $input-placeholder;
margin-bottom: var(--cpd-space-4x);
line-height: 20px;
text-align: initial;
}
/* Circled number list item marker */
li::before {
content: counter(list-item);
position: absolute;
left: 0;
display: inline-block;
width: 20px;
height: 20px;
line-height: 20px;
border-radius: 50%;
border: 1px solid $input-placeholder;
box-sizing: border-box;
text-align: center;
}
}
label[for="mx_LoginWithQR_checkCode"] {
margin-top: var(--cpd-space-6x);
color: var(--cpd-color-text-primary);
margin-bottom: var(--cpd-space-1x);
}
.mx_LoginWithQR_icon {
width: 56px;
height: 56px;
border-radius: 8px;
box-sizing: border-box;
padding: var(--cpd-space-3x);
gap: 10px;
background-color: var(--cpd-color-bg-success-subtle);
svg {
color: var(--cpd-color-icon-success-primary);
}
&.mx_LoginWithQR_icon--critical {
background-color: var(--cpd-color-bg-critical-subtle);
svg {
color: var(--cpd-color-icon-critical-primary);
}
}
}
.mx_LoginWithQR_checkCode_input {
margin-bottom: var(--cpd-space-1x);
text-align: initial;
input {
/* Workaround for one of the input rules in _common.pcss being not specific enough */
padding: 0;
padding-inline-start: calc(40px / 2 - (1ch / 2));
}
}
@ -164,13 +186,39 @@ limitations under the License.
.mx_LoginWithQR_breadcrumbs {
font-size: $font-13px;
color: var(--cpd-color-text-secondary);
color: $secondary-content;
}
.mx_LoginWithQR_main {
display: flex;
flex-direction: column;
flex-grow: 1;
align-items: center;
color: $primary-content;
text-align: center;
p {
color: $secondary-content;
}
}
&.mx_LoginWithQR_error .mx_LoginWithQR_main {
max-width: 400px;
margin: 0 auto;
}
.mx_LoginWithQR_buttons {
display: flex;
flex-direction: column;
align-items: center;
gap: $spacing-16;
margin-top: var(--cpd-space-6x);
.mx_AccessibleButton {
width: 300px;
height: 48px;
box-sizing: border-box;
}
}
.mx_QRCode {