@visns-studio/visns-components 6.6.4 → 6.15.1

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

@@ -0,0 +1,460 @@
+// ---------------------------------------------------------------------------
+// Call Queue Settings (.cqsettings)
+// ---------------------------------------------------------------------------
+// The admin table of every Zoom call queue with its pickup code and pop
+// exclusion (components/callQueue/CallQueueSettings.jsx). Sibling of
+// CallQueuePop.module.scss because they are two ends of one feature — the
+// codes edited here are what the pop's Pick up button dials.
+//
+// Ported from the `.cqsettings` half of the CRM's resources/css/_call-queue.scss.
+// The sass `config` variables it used do not exist in this library, so every
+// brand value is a CSS custom property with a neutral fallback.
+// ---------------------------------------------------------------------------
+
+$cqsettings-mono: 'SFMono-Regular', 'Menlo', 'Consolas', monospace;
+
+.cqsettings {
+    // Local aliases only — every brand value comes from the consuming app's
+    // token layer so this library stays reusable.
+    --cq-primary: var(--primary-color, #00386c);
+    --cq-secondary: var(--secondary-color, #404040);
+    --cq-tertiary: var(--tertiary-color, #fff);
+    --cq-paragraph: var(--paragraph-color, #2b2b2b);
+    --cq-background: var(--background-color, #fff);
+    --cq-br: var(--br, 5px);
+    --cq-btn-br: var(--btn-br, 5px);
+
+    // Reused from the pop so the two ends of the feature agree on what "good"
+    // and "wrong" look like.
+    --cq-ok: rgb(43, 145, 85);
+    --cq-bad: rgb(214, 100, 100);
+
+    // Full-width layout: the queue-name column absorbs the slack so the
+    // control cluster keeps its size and sits at the row's end.
+    width: 100%;
+    padding: 1rem 1.5rem 2rem;
+
+    // The CRM relied on a global `spin` keyframe from main.scss; this library
+    // has none, so the animation is defined at the bottom of this module and
+    // the helper class is a module class the JSX references as styles.spin.
+    .spin {
+        animation: spin 1s linear infinite;
+    }
+
+    // --- the copy ----------------------------------------------------------
+    // One muted line saying what the page is, then one callout for the single
+    // caveat that actually changes what an admin has to do. Nothing else.
+    .cqsettingsIntro {
+        margin: 0 0 0.75rem;
+        color: color-mix(in srgb, var(--cq-paragraph) 70%, transparent);
+        font-size: 0.82rem;
+        line-height: 1.5;
+    }
+
+    .cqsettingsInfo,
+    .cqsettingsWarning {
+        display: flex;
+        gap: 0.5rem;
+        align-items: flex-start;
+        // Full container width so the callout's edges line up with the table
+        // panel below it instead of stopping mid-page.
+        margin: 0 0 1rem;
+        padding: 0.55rem 0.75rem;
+        border-radius: var(--cq-br);
+        font-size: 0.76rem;
+        line-height: 1.45;
+
+        svg {
+            flex: none;
+            margin-top: 0.12rem;
+        }
+    }
+
+    .cqsettingsInfo {
+        border: 1px solid color-mix(in srgb, var(--cq-primary) 18%, transparent);
+        background-color: color-mix(in srgb, var(--cq-primary) 5%, transparent);
+        color: color-mix(in srgb, var(--cq-paragraph) 80%, transparent);
+
+        svg {
+            color: var(--cq-primary);
+        }
+    }
+
+    .cqsettingsWarning {
+        border: 1px solid color-mix(in srgb, var(--cq-bad) 35%, transparent);
+        background-color: color-mix(in srgb, var(--cq-bad) 8%, transparent);
+        color: color-mix(in srgb, var(--cq-bad) 67%, #000);
+    }
+
+    // --- the table ---------------------------------------------------------
+    // The panel is the scroll container: on a narrow viewport the table slides
+    // inside its own frame instead of pushing the page body sideways.
+    .cqsettingsPanel {
+        border: 1px solid color-mix(in srgb, var(--cq-primary) 14%, transparent);
+        border-radius: var(--cq-br);
+        background: var(--cq-background);
+        overflow-x: auto;
+    }
+
+    .cqsettingsState {
+        display: flex;
+        gap: 0.5rem;
+        align-items: center;
+        padding: 1.25rem;
+        color: color-mix(in srgb, var(--cq-paragraph) 60%, transparent);
+        font-size: 0.82rem;
+    }
+
+    .cqsettingsTable {
+        width: 100%;
+        // Below this the controls start colliding — the panel scrolls instead.
+        min-width: 940px;
+        border-collapse: collapse;
+        table-layout: fixed;
+        font-size: 0.82rem;
+
+        th,
+        td {
+            padding: 0.6rem 1rem;
+            text-align: left;
+            vertical-align: middle;
+        }
+
+        .isCentred {
+            text-align: center;
+        }
+
+        thead th {
+            border-bottom: 1px solid
+                color-mix(in srgb, var(--cq-primary) 18%, transparent);
+            background: #f0f0f0;
+            color: var(--cq-primary);
+            font-size: 0.68rem;
+            font-weight: 700;
+            letter-spacing: 0.06em;
+            text-transform: uppercase;
+            white-space: nowrap;
+        }
+
+        tbody tr {
+            border-bottom: 1px solid
+                color-mix(in srgb, var(--cq-secondary) 12%, transparent);
+            transition: background 0.12s ease;
+
+            &:last-child {
+                border-bottom: none;
+            }
+
+            &:hover {
+                background: color-mix(in srgb, var(--cq-primary) 3.5%, transparent);
+            }
+
+            // An excluded queue never pops; the row reads as switched off.
+            &.isExcluded {
+                background: color-mix(in srgb, var(--cq-secondary) 3.5%, transparent);
+
+                .cqsettingsName,
+                .cqsettingsNumber {
+                    color: color-mix(in srgb, var(--cq-paragraph) 55%, transparent);
+                }
+            }
+        }
+    }
+
+    // The first column has no width: with `table-layout: fixed` it takes
+    // whatever the sized columns leave, so the queue name is the only thing
+    // that flexes.
+    .cqsettingsColNumber {
+        width: 170px;
+    }
+
+    .cqsettingsColStatus {
+        width: 120px;
+    }
+
+    .cqsettingsColCode {
+        width: 190px;
+    }
+
+    .cqsettingsColPop {
+        width: 170px;
+    }
+
+    .cqsettingsColExclude {
+        width: 110px;
+    }
+
+    .cqsettingsColSave {
+        width: 130px;
+    }
+
+    // --- the queue cell ----------------------------------------------------
+    .cqsettingsName {
+        display: flex;
+        gap: 0.4rem;
+        align-items: center;
+        min-width: 0;
+        color: var(--cq-paragraph);
+        font-weight: 600;
+
+        // Queue names come from Zoom admin and can run long; one line, clipped.
+        > span {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    }
+
+    // Gives the phone glyph something to sit in so the name has a left edge to
+    // hang off rather than floating in the cell.
+    .cqsettingsIcon {
+        display: inline-flex;
+        flex: none;
+        align-items: center;
+        justify-content: center;
+        width: 22px;
+        height: 22px;
+        border-radius: var(--cq-br);
+        background: color-mix(in srgb, var(--cq-primary) 10%, transparent);
+        color: var(--cq-primary);
+    }
+
+    // Extension (and the "gone from Zoom" flag) as a quiet second line, indented
+    // to the name's own left edge — 22px badge + the 0.4rem gap.
+    .cqsettingsMeta {
+        display: block;
+        margin-top: 0.1rem;
+        padding-left: 1.775rem;
+        color: color-mix(in srgb, var(--cq-paragraph) 50%, transparent);
+        font-size: 0.68rem;
+        line-height: 1.4;
+    }
+
+    .cqsettingsFlag {
+        color: color-mix(in srgb, var(--cq-bad) 82%, #000);
+        font-weight: 600;
+
+        &::before {
+            content: '·';
+            margin: 0 0.3rem;
+            color: color-mix(in srgb, var(--cq-paragraph) 35%, transparent);
+            font-weight: 400;
+        }
+    }
+
+    .cqsettingsNumber {
+        color: var(--cq-paragraph);
+        font-variant-numeric: tabular-nums;
+        white-space: nowrap;
+    }
+
+    .cqsettingsNone {
+        color: color-mix(in srgb, var(--cq-paragraph) 30%, transparent);
+    }
+
+    // --- pills -------------------------------------------------------------
+    // One shape for both status columns: muted by default, tinted green only
+    // when the answer is "yes, this is working".
+    .cqsettingsPill {
+        display: inline-flex;
+        align-items: center;
+        padding: 0.15rem 0.5rem;
+        border-radius: 999px;
+        background: color-mix(in srgb, var(--cq-secondary) 12%, transparent);
+        color: color-mix(in srgb, var(--cq-paragraph) 60%, transparent);
+        font-size: 0.68rem;
+        font-weight: 700;
+        letter-spacing: 0.02em;
+        line-height: 1.5;
+        white-space: nowrap;
+    }
+
+    .cqsettingsPillOk {
+        background: color-mix(in srgb, var(--cq-ok) 15%, transparent);
+        color: color-mix(in srgb, var(--cq-ok) 88%, #000);
+    }
+
+    // --- pickup code -------------------------------------------------------
+    // An input group, not a text box: the `*` adornment IS the dialled form, so
+    // the row no longer needs a "Dialled as *6439" line under it.
+    .cqsettingsCode {
+        display: inline-flex;
+        align-items: stretch;
+        // Wide enough for the *99 prefix cell plus four spaced monospace
+        // digits without clipping.
+        width: 150px;
+        border: 1px solid color-mix(in srgb, var(--cq-secondary) 35%, transparent);
+        border-radius: var(--cq-br);
+        background: var(--cq-background);
+        overflow: hidden;
+        transition:
+            border-color 0.15s ease,
+            box-shadow 0.15s ease;
+
+        &:focus-within {
+            border-color: var(--cq-primary);
+            box-shadow: 0 0 0 2px color-mix(in srgb, var(--cq-primary) 12%, transparent);
+        }
+
+        &.hasError {
+            border-color: var(--cq-bad);
+
+            &:focus-within {
+                box-shadow: 0 0 0 2px color-mix(in srgb, var(--cq-bad) 15%, transparent);
+            }
+        }
+    }
+
+    .cqsettingsCodePrefix {
+        display: flex;
+        flex: none;
+        align-items: center;
+        padding: 0 0.45rem;
+        border-right: 1px solid
+            color-mix(in srgb, var(--cq-secondary) 22%, transparent);
+        background: color-mix(in srgb, var(--cq-secondary) 7%, transparent);
+        color: color-mix(in srgb, var(--cq-paragraph) 60%, transparent);
+        font-family: $cqsettings-mono;
+        font-size: 0.85rem;
+        font-weight: 700;
+        line-height: 1;
+    }
+
+    .cqsettingsCodeInput {
+        width: 100%;
+        min-width: 0;
+        padding: 0.32rem 0.45rem;
+        border: none;
+        background: none;
+        color: var(--cq-paragraph);
+        font-family: $cqsettings-mono;
+        font-size: 0.85rem;
+        font-weight: 600;
+        letter-spacing: 0.12em;
+
+        &:focus {
+            outline: none;
+        }
+
+        &::placeholder {
+            color: color-mix(in srgb, var(--cq-paragraph) 28%, transparent);
+            font-weight: 400;
+        }
+    }
+
+    // Only rendered while the typed code breaks a Zoom rule, so it can afford to
+    // add a line to the row.
+    .cqsettingsError {
+        display: block;
+        max-width: 120px;
+        margin-top: 0.2rem;
+        color: color-mix(in srgb, var(--cq-bad) 73%, #000);
+        font-size: 0.66rem;
+        line-height: 1.3;
+    }
+
+    // --- exclude switch ----------------------------------------------------
+    // react-toggle is the switch the rest of the CRM uses; scaled down to table
+    // size and recoloured to the house navy, because "on" here means "a setting
+    // is applied", not "all good". react-toggle owns those class names, so they
+    // stay global inside this module.
+    .cqsettingsToggle {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        height: 24px;
+
+        :global(.react-toggle) {
+            transform: scale(0.75);
+        }
+
+        // react-toggle's default unchecked track is near-black (#4D4D4D),
+        // which reads as "on". Off must be unmistakably light.
+        :global(.react-toggle .react-toggle-track) {
+            background-color: color-mix(in srgb, var(--cq-secondary) 35%, transparent);
+        }
+
+        :global(
+                .react-toggle:hover:not(.react-toggle--disabled):not(.react-toggle--checked)
+                    .react-toggle-track
+            ) {
+            background-color: color-mix(in srgb, var(--cq-secondary) 50%, transparent);
+        }
+
+        :global(.react-toggle--checked .react-toggle-track) {
+            background-color: var(--cq-primary);
+        }
+
+        :global(
+                .react-toggle--checked:hover:not(.react-toggle--disabled)
+                    .react-toggle-track
+            ) {
+            background-color: color-mix(in srgb, var(--cq-primary) 91%, #000);
+        }
+
+        :global(.react-toggle--checked .react-toggle-thumb) {
+            border-color: var(--cq-primary);
+        }
+
+        :global(.react-toggle--focus .react-toggle-thumb),
+        :global(.react-toggle:active:not(.react-toggle--disabled) .react-toggle-thumb) {
+            box-shadow: 0 0 2px 3px color-mix(in srgb, var(--cq-primary) 35%, transparent);
+        }
+    }
+
+    // --- save --------------------------------------------------------------
+    // Primary colour while there is something to save, visibly muted (not just
+    // faded) when the row is clean, so "nothing to do" never reads as "broken".
+    .cqsettingsSave {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.35rem;
+        padding: 0.34rem 0.65rem;
+        border: 1px solid color-mix(in srgb, var(--cq-primary) 91%, #000);
+        border-radius: var(--cq-btn-br);
+        background: var(--cq-primary);
+        color: var(--cq-tertiary);
+        font-family: inherit;
+        font-size: 0.74rem;
+        font-weight: 700;
+        line-height: 1.4;
+        cursor: pointer;
+        transition:
+            background 0.15s ease,
+            border-color 0.15s ease,
+            color 0.15s ease;
+
+        svg {
+            flex: none;
+        }
+
+        &:hover:not(:disabled) {
+            background: color-mix(in srgb, var(--cq-primary) 88%, #000);
+        }
+
+        &:focus-visible {
+            outline: 2px solid color-mix(in srgb, var(--cq-primary) 45%, transparent);
+            outline-offset: 1px;
+        }
+
+        &:disabled {
+            border-color: color-mix(in srgb, var(--cq-secondary) 20%, transparent);
+            background: color-mix(in srgb, var(--cq-secondary) 7%, transparent);
+            color: color-mix(in srgb, var(--cq-paragraph) 40%, transparent);
+            cursor: default;
+        }
+    }
+}
+
+// The CRM had this globally in main.scss; the library ships it with the module
+// that needs it so `.spin` is never an animation-less no-op.
+@keyframes spin {
+    from {
+        transform: rotate(0deg);
+    }
+
+    to {
+        transform: rotate(360deg);
+    }
+}

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

@@ -1,3 +1,5 @@
+@use './authBrandPanel' as brand;
+
 // Client Auth styles
 .container {
     min-height: 100vh;
@@ -165,3 +167,230 @@
         color: var(--secondary-color, #3cbf7d);
     }
 }
+
+// --- 6.7.0 additions, all rendered only behind an opt-in prop ---------------
+
+// The live "Email address detected" line under the contact field. Quiet: it
+// confirms what the field already shows, it does not instruct.
+.inputHint {
+    margin: 0.4rem 0 0;
+    font-size: 0.8rem;
+    line-height: 1.4;
+    color: #888;
+}
+
+// Development-only OTP panel. Deliberately loud — it must be impossible to
+// mistake a build showing this for a production one.
+.devOtp {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 0.6rem;
+    padding: 0.5rem 0.7rem;
+    border: 1px dashed #e0a800;
+    border-radius: 4px;
+    background-color: #fff8e1;
+    color: #7a5b00;
+    font-size: 0.82rem;
+
+    strong {
+        font-family: 'SFMono-Regular', 'Menlo', 'Consolas', monospace;
+        letter-spacing: 0.04em;
+    }
+}
+
+.devOtpFill {
+    padding: 0.25rem 0.6rem;
+    border: 1px solid #e0a800;
+    border-radius: 4px;
+    background-color: #ffe9a8;
+    color: #7a5b00;
+    font-family: inherit;
+    font-size: 0.78rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+
+    &:hover {
+        background-color: #ffdf85;
+    }
+}
+
+// The read-only contact echo above the code field (`showContactField`), and
+// its masked caption. Muted rather than greyed to unreadability: it is there to
+// be read, it is simply not there to be edited.
+.disabledInput {
+    background-color: #f4f4f5;
+    color: #666;
+    cursor: default;
+
+    &:disabled {
+        // Safari and Firefox each fade a disabled input differently; stating
+        // the colour keeps the value legible in both.
+        opacity: 1;
+        -webkit-text-fill-color: #666;
+    }
+}
+
+.contactInfo {
+    margin: 0.4rem 0 0;
+    font-size: 0.8rem;
+    line-height: 1.4;
+    color: #888;
+}
+
+
+// ---------------------------------------------------------------------------
+// Split layout (`layout="split"`)
+// ---------------------------------------------------------------------------
+// The card layout above floats a small box in whatever vertical space the host
+// page gives it, which on the portal meant a login card marooned in a tall
+// empty band. This is the staff sign-in's design language brought across: the
+// brand on one side, the task on the other.
+//
+// It is a SECTION, not a screen. The staff `.auth` is `position: fixed;
+// inset: 0` because it owns the whole viewport; this one cannot be, because the
+// consumer keeps its own header and footer and hands this the space between.
+// Hence `height: 100%` with a `flex: 1` fallback and no `100vh` anywhere — the
+// parent decides how tall this is.
+// ---------------------------------------------------------------------------
+
+.split {
+    // Local aliases, same names and same neutral fallbacks as the staff
+    // screens, so one token layer themes the whole product. The brand panel
+    // mixin below reads --navy-deep and --flag from here.
+    --ink: var(--header-color, #10192a);
+    --navy: var(--primary-color, #26364a);
+    --navy-deep: var(--primary-color-darker, #16202e);
+    --flag: var(--accent-color, #8a8f98);
+    --paper: var(--surface-color, #ffffff);
+    --warm: var(--hover-color, #f4f4f2);
+    --line: var(--border-color, #e4e1dc);
+    --muted: var(--muted-color, #6b7688);
+
+    display: grid;
+    // Asymmetric on purpose. A 50/50 split reads as a template; giving the
+    // photograph the larger share makes it the subject and the form the task.
+    grid-template-columns: 52fr 48fr;
+    width: 100%;
+    // Fill the parent, however the parent is laid out: `height` for a sized
+    // block, `flex` for a flex column, `align-self` so a stretch container does
+    // not centre it. `min-height` keeps it honest when the parent has no
+    // height of its own to give.
+    height: 100%;
+    min-height: 24rem;
+    flex: 1 1 auto;
+    align-self: stretch;
+    background: var(--paper);
+    font-family: var(--auth-font-family, 'Barlow', system-ui, sans-serif);
+    color: var(--ink);
+
+    @media (max-width: 900px) {
+        // The brand becomes a header band rather than disappearing: the portal
+        // is a public front door, and on a phone it is the only thing telling
+        // the visitor whose front door it is.
+        grid-template-columns: 1fr;
+        grid-template-rows: auto 1fr;
+    }
+}
+
+@include brand.auth-brand-panel(band);
+@include brand.auth-rise-keyframes;
+
+// The band treatment the mixin leaves to the consumer: the eyebrow and the
+// tagline are the first things to go, because at that width they are two more
+// lines between the visitor and the field they came to fill in.
+@media (max-width: 900px) {
+    .brandInk {
+        left: 1.5rem;
+        right: 1.5rem;
+        bottom: 1.25rem;
+    }
+
+    .eyebrow,
+    .brandSub {
+        display: none;
+    }
+
+    .brandLine {
+        margin: 0;
+        font-size: clamp(1.5rem, 6vw, 2rem);
+    }
+}
+
+// The form side. Scrolls internally rather than growing the section, so a tall
+// step-two — contact field, code field, dev panel, two links — cannot push the
+// consumer's footer off the bottom of the page.
+.splitPane {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem clamp(1.5rem, 5vw, 4.5rem);
+    background: var(--paper);
+    overflow-y: auto;
+    min-width: 0;
+
+    @media (max-width: 900px) {
+        // The warm neutral stops the stacked screen being a blank white sheet.
+        background: linear-gradient(var(--warm), var(--paper) 22rem);
+        padding: 2rem 1.5rem 2.5rem;
+    }
+}
+
+// Holds exactly what the card layout holds — same children, same props, same
+// form. Only the frame around them changed.
+.splitCard {
+    width: 100%;
+    max-width: 24rem;
+    // Left aligned, not centred. Centred text over a form is a template look,
+    // and the eye has to travel back and forth to read labels and fields.
+    text-align: left;
+    animation: rise 0.55s cubic-bezier(0.2, 0.7, 0.3, 1) both;
+    animation-delay: 0.08s;
+
+    // The card layout centres its logo, title and subtitle; this one does not,
+    // so those three are re-aligned here rather than being made conditional in
+    // half a dozen places in the JSX.
+    .logo {
+        max-width: 190px;
+        margin: 0 0 2rem;
+    }
+
+    .title {
+        text-align: left;
+        font-size: 1.9rem;
+        letter-spacing: -0.02em;
+        line-height: 1.1;
+        color: var(--ink);
+    }
+
+    .subtitle {
+        text-align: left;
+        color: var(--muted);
+    }
+
+    // The masked-destination line under a disabled contact field, and the live
+    // contact-type hint, both read as captions here rather than centred notes.
+    .inputHint,
+    .contactInfo {
+        text-align: left;
+    }
+}
+
+// The sign-off, when `branding.footer` is set. Same treatment as the staff
+// panel's, at the foot of the form column.
+.splitFoot {
+    margin: 2.5rem 0 0;
+    font-size: 0.78rem;
+    line-height: 1.5;
+    color: var(--muted);
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .brandInk,
+    .splitCard {
+        animation: none;
+    }
+}