Prepare for OIDC QR Login PR (#12463)

* 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>
matrix-org · Apr 30, 2024 · 641a20c · 641a20c
1 parent 1c79bbb
commit 641a20c
Show file tree

Hide file tree

Showing 10 changed files with 594 additions and 385 deletions.
diff --git a/res/css/views/auth/_LoginWithQR.pcss b/res/css/views/auth/_LoginWithQR.pcss
@@ -32,55 +32,25 @@ 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 {
         font-size: $font-24px;
         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 {
+            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;
+        }
 
-        li::marker {
-            color: $accent;
+        /* 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 {

diff --git a/src/components/views/auth/LoginWithQR-types.ts b/src/components/views/auth/LoginWithQR-types.ts
@@ -0,0 +1,43 @@
+/*
+Copyright 2024 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+/**
+ * The intention of this enum is to have a mode that scans a QR code instead of generating one.
+ */
+export enum Mode {
+    /**
+     * A QR code with be generated and shown
+     */
+    Show = "show",
+}
+
+export enum Phase {
+    Loading,
+    ShowingQR,
+    Connecting,
+    Connected,
+    WaitingForDevice,
+    Verifying,
+    Error,
+}
+
+export enum Click {
+    Cancel,
+    Decline,
+    Approve,
+    TryAgain,
+    Back,
+}
diff --git a/src/components/views/auth/LoginWithQR.tsx b/src/components/views/auth/LoginWithQR.tsx
@@ -24,34 +24,7 @@ import { HTTPError, MatrixClient } from "matrix-js-sdk/src/matrix";
 import { _t } from "../../../languageHandler";
 import { wrapRequestWithDialog } from "../../../utils/UserInteractiveAuth";
 import LoginWithQRFlow from "./LoginWithQRFlow";
-
-/**
- * The intention of this enum is to have a mode that scans a QR code instead of generating one.
- */
-export enum Mode {
-    /**
-     * A QR code with be generated and shown
-     */
-    Show = "show",
-}
-
-export enum Phase {
-    Loading,
-    ShowingQR,
-    Connecting,
-    Connected,
-    WaitingForDevice,
-    Verifying,
-    Error,
-}
-
-export enum Click {
-    Cancel,
-    Decline,
-    Approve,
-    TryAgain,
-    Back,
-}
+import { Click, Mode, Phase } from "./LoginWithQR-types";
 
 interface IProps {
     client: MatrixClient;