@visns-studio/visns-components 6.32.3 → 6.34.3

package/src/components/styles/PasskeyEnrolPrompt.module.scss

@@ -0,0 +1,105 @@
+@use 'controls' as *;
+
+/* ============================================================================
+   PasskeyEnrolPrompt — the offer made once, after signing in
+   ----------------------------------------------------------------------------
+   Inside a StandardModal at `size="small"`, so the panel's width, its phone
+   geometry and its z-index all come from StandardModal.module.scss and none of
+   it is restated here. What is here is the inside of the panel: a line of
+   explanation and a row of three buttons whose weights say what they are.
+
+   The three are deliberately NOT three equal buttons. "Add passkey" is the
+   thing being offered; "Not now" is the way out anybody can take without
+   thinking about it; "Don't ask again" is quieter still and reads as a link,
+   because a permanent decision should not be the easiest button on the screen
+   to hit by accident.
+
+   Every measurement is `var(--hook, <value>)` so an app can retune it from
+   `:root` without forking the component, the same way Profile.module.scss
+   does.
+   ========================================================================= */
+
+.body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-md, 1rem);
+    padding: var(--spacing-md, 1rem) 0 0;
+}
+
+/* The mark. A key in a tinted disc — enough to say "this is about signing in"
+   without an illustration nobody asked to download. */
+.mark {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    /* A column flex parent stretches its children; without this the disc
+       becomes a lozenge the width of the panel. */
+    align-self: flex-start;
+    width: 2.75rem;
+    height: 2.75rem;
+    border-radius: 50%;
+    background: var(--primary-color-light, rgba(0, 0, 0, 0.06));
+    color: var(--primary-color, #1b3a57);
+    flex: 0 0 auto;
+}
+
+.text {
+    margin: 0;
+    font-size: var(--font-size-sm, 0.875rem);
+    line-height: 1.55;
+    color: var(--text-color, #333);
+}
+
+/* The row of choices. It wraps rather than scrolls: on a 320px phone three
+   buttons do not fit side by side, and a row that overflows puts the way out
+   off the edge of the sheet. */
+.actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--spacing-sm, 0.5rem);
+    padding-top: var(--spacing-sm, 0.5rem);
+}
+
+.primary {
+    @include button-primary;
+}
+
+.later {
+    @include button-secondary;
+}
+
+/* Pushed to the far end of the row, and styled as text: the permanent answer
+   should be available, findable, and never the thing a thumb lands on. */
+.never {
+    @include button-base;
+
+    margin-left: auto;
+    background: none;
+    border-color: transparent;
+    color: var(--muted-color, #6b7280);
+    text-decoration: underline;
+    text-underline-offset: 0.2em;
+
+    &:hover:not(:disabled) {
+        background: none;
+        color: var(--text-color, #333);
+    }
+}
+
+/* Phones: one full-width button per line, in the order they are read, and the
+   quiet one loses its auto margin — `margin-left: auto` in a column pushes it
+   to the right edge of a stack, which is where nothing else is. */
+@media (max-width: 640px) {
+    .actions {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .primary,
+    .later,
+    .never {
+        width: 100%;
+        margin-left: 0;
+    }
+}

package/src/components/styles/Profile.module.scss

@@ -580,6 +580,44 @@
     }
 }
 
+/* The passkey list. A stack of rows rather than a table: each row is a name,
+   a quiet line of context and the one control that acts on it, and at phone
+   width a table of three columns is a table that scrolls sideways. The row
+   wraps instead, so the Remove button drops under the name rather than off
+   the edge. */
+.passkeyList {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-sm, 0.5rem);
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.passkeyItem {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--spacing-sm, 0.5rem);
+    padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
+    border: 1px solid var(--border-color, #e1e1e1);
+    border-radius: var(--radius-sm, 8px);
+}
+
+.passkeyName {
+    font-weight: var(--font-weight-semibold, 600);
+    /* Takes the slack so the button sits at the far edge of the row. */
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow-wrap: anywhere;
+}
+
+.passkeyMeta {
+    font-size: var(--font-size-xs, 0.75rem);
+    color: var(--muted-color, #6b7280);
+}
+
 /* The setup walkthrough. It used to be a bordered, shadowed card inside the
    panel card, carrying a heading that repeated the heading above it. The
    section owns the title and the separation now, so this is only the steps. */
@@ -902,3 +940,122 @@
         color: rgba(var(--paragraph-color-rgb, 43, 43, 43), 0.65);
     }
 }
+
+/* ============================================================================
+ * Tabs as a strip
+ * ----------------------------------------------------------------------------
+ * The rail above is the layout this screen has always had, and on a top-bar
+ * app it is still the one it gets. In a SIDEBAR app the page already has a
+ * vertical navigation column two centimetres to the left, and a second one
+ * beside it spends a fifth of the content width to show two words. Profile
+ * asks for the strip there (see profileLayout.js for the rule, Profile.jsx
+ * for where the classes below are applied) and for the same three shapes
+ * GenericIndex and GenericDetail use for it, so the three pages agree:
+ *
+ *   `.crmtitle--flat`            the page title as type on the page ground.
+ *   `.grid__subrow--stacked`     one column instead of rail + panel.
+ *   `.grid__subnav--underline`   the rail's card undone; TableFilter's
+ *                                `variant="underline"` draws what is inside.
+ *
+ * Appended rather than merged into the rules above, and every selector here
+ * carries a modifier class: with none of them applied — which is every
+ * `layout="full"` app, and any app that passes `tabLayout="rail"` — not one
+ * declaration in this block matches anything.
+ * ==========================================================================*/
+
+/* `.crmtitle` is applied to the same element as `.grid__full`, so this has to
+   undo that card's surface, border, radius, shadow and 2px padding as well as
+   the title card's own. Matched to `.crmtitle` in GenericIndex.module.scss —
+   the same inset, the same type size — so the account screen sits on the same
+   baseline as every index page. */
+.crmtitle--flat {
+    padding: 0 0.25rem 0.85rem;
+    margin: 8px 0 0;
+    background: none;
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+
+    h1 {
+        font-size: 1.375rem;
+        font-weight: 700;
+        letter-spacing: -0.01em;
+        line-height: 1.25;
+        color: var(--heading-color, var(--primary-color, #1b3933));
+    }
+}
+
+/* Two grid tracks become one flow column: `grid-template-columns: none` is
+   what hands the rail's 14rem back to the panel rather than leaving a hole
+   beside it. */
+.grid__subrow--stacked {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    grid-template-columns: none;
+    align-items: stretch;
+    gap: 0;
+}
+
+.grid__subrow--stacked > .grid__subnav,
+.grid__subrow--stacked > .grid__subcontent {
+    flex: 0 0 auto;
+    width: 100%;
+    /* Without this the strip's min-content width floors the flex item, so a
+       row of tabs widens the page instead of scrolling inside it. */
+    min-width: 0;
+}
+
+/* The strip and the card it labels are one object: no gap, and the card's top
+   corners squared off under it. The `8px 0` margin `.grid__subcontent` carries
+   for the rail layout would put a hairline gap between the two. */
+.grid__subrow--stacked > .grid__subcontent {
+    margin: 0;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+}
+
+.grid__subnav--underline {
+    /* Not a card. */
+    padding: 0;
+    margin: 0;
+    background: none;
+    border: none;
+    border-radius: 0;
+    box-shadow: none;
+    /* The one hairline under the whole strip; the selected tab's accent edge
+       sits on top of it, and the content card below continues it. */
+    border-bottom: 1px solid var(--border-color, #e1e1e1);
+    display: block;
+    min-width: 0;
+}
+
+/* `.grid__subnav > div` above only zeroes a margin; the strip needs the
+   wrapper to stay a plain block, which is what TableFilter's own stylesheet
+   expects around its scroller. */
+.grid__subnav--underline > div {
+    display: block;
+    min-width: 0;
+    margin-bottom: 0;
+    padding: 0;
+    background: none;
+}
+
+/* The panel header named the tab — "Overview" under a rail whose selected
+   item also said "Overview". Beside a strip that is the same word twice, half
+   a centimetre apart, so the strip is the only place the tab is named.
+
+   Hidden rather than dropped from the markup: the rail layout renders this
+   element and must keep rendering it, the heading is the same string the
+   selected tab already publishes (with real tab semantics — see TableFilter's
+   underline variant), and one class in one place is easier to be sure about
+   than a branch inside a memoised renderer with sixteen dependencies. */
+.grid__subrow--stacked .gridtxt__header {
+    display: none;
+}
+
+/* With the header gone the sections would start hard against the card's top
+   edge. The header's own vertical padding, given back to the body. */
+.grid__subrow--stacked .form {
+    padding-top: var(--spacing-md, 1rem);
+}