@visns-studio/visns-components 6.32.2 → 6.34.0

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

@@ -1825,6 +1825,26 @@ $sms-mono: 'SFMono-Regular', 'Menlo', 'Consolas', monospace;
 // One card: the text on top, every control in a bar along its bottom edge.
 // Buttons beside a textarea line up with nothing once the box grows; a bar
 // inside the same border always reads as part of the message being written.
+// The opted-out line, above the composer and nothing else.
+//
+// Muted on purpose. It is a fact worth knowing before typing, not a warning
+// about what is being typed — and everything below it stays live, because an
+// opt-out is about bulk sends and this is a person answering a person.
+.optedOutNote {
+    display: flex;
+    gap: 0.4rem;
+    align-items: center;
+    margin: 0 0 0.45rem;
+    color: var(--s-muted);
+    font-size: 0.76rem;
+    line-height: 1.4;
+
+    svg {
+        flex-shrink: 0;
+        color: var(--s-muted);
+    }
+}
+
 .composerBox {
     display: flex;
     flex-direction: column;
@@ -2776,3 +2796,434 @@ $sms-mono: 'SFMono-Regular', 'Menlo', 'Consolas', monospace;
         border-radius: var(--s-br);
     }
 }
+
+// ---------------------------------------------------------------------------
+// SmsCampaigns — the list, the three-step flow, one campaign, the opt-outs
+// ---------------------------------------------------------------------------
+//
+// The page mounts inside `.settings`, so it inherits the tokens and the
+// padding the messaging settings screen already has: a campaign list is a
+// table of records with an action bar over it, which is exactly what that
+// screen is. Everything below is the parts a settings screen has no vocabulary
+// for — a progress bar, a step rail, a drop target and a preview column.
+
+// "Sending" is not a warning.
+//
+// A campaign doing precisely what it was told to do drawn in amber teaches
+// people to stop reading the chips, and then the paused one — the state where
+// nothing is going out and somebody has to act — reads the same as the healthy
+// one. So it takes the brand tint: visibly live, and visibly not a problem.
+.campaignPillLive {
+    background: var(--s-tint);
+    color: var(--s-primary);
+}
+
+// The flag on a number the browser cannot read as one. A pill inside a cell,
+// so it needs the gap the cell does not give it.
+.campaignFlag {
+    margin-left: 0.4rem;
+}
+
+/* ------------------------------------------------------------- progress */
+
+.campaignProgress {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    min-width: 0;
+}
+
+// The track is fixed and the fill is a percentage of it. Both are needed: a
+// bar that shrinks to its own fill has no "how much is left" in it, which is
+// the only question a progress bar answers.
+.campaignBar {
+    flex: 1 1 auto;
+    box-sizing: border-box;
+    min-width: 90px;
+    height: 6px;
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--s-paragraph) 12%, var(--s-background));
+    overflow: hidden;
+}
+
+.campaignBarFill {
+    display: block;
+    height: 100%;
+    border-radius: 999px;
+    background: var(--s-primary);
+    // Short, and only ever forward: the number behind it moves a few percent
+    // every poll, and an unanimated jump reads as the page reloading.
+    transition: width 0.3s ease;
+}
+
+.campaignProgressCount {
+    flex: 0 0 auto;
+    color: var(--s-muted);
+    font-size: 0.78rem;
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+}
+
+// The bar needs room in a table cell that would otherwise size to its text.
+.campaignProgressCell {
+    min-width: 170px;
+}
+
+/* --------------------------------------------------------------- wizard */
+
+.campaignWizard,
+.campaignDetail {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+// The step rail. Numbered, because "Message" on its own does not say whether
+// it comes before or after the list — and the numbers are what the Back button
+// is moving between.
+.campaignSteps {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem 1.25rem;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.campaignStep {
+    display: inline-flex;
+    gap: 0.45rem;
+    align-items: center;
+    color: var(--s-muted);
+    font-size: 0.82rem;
+    font-weight: 600;
+}
+
+.campaignStepOn {
+    color: var(--s-paragraph);
+
+    .campaignStepNumber {
+        border-color: var(--s-primary);
+        background: var(--s-primary);
+        color: #fff;
+    }
+}
+
+.campaignStepNumber {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: 22px;
+    height: 22px;
+    border: 1px solid var(--s-line);
+    border-radius: 50%;
+    background: var(--s-background);
+    color: var(--s-muted);
+    font-size: 0.74rem;
+    font-weight: 700;
+    font-variant-numeric: tabular-nums;
+}
+
+// Two ways in, side by side and of equal weight — neither is the "proper" one.
+// They stack below the tablet breakpoint, where two columns of this leave the
+// paste box too narrow to see a line of `Name, number` in.
+.campaignSources {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 1rem;
+}
+
+.campaignSource {
+    display: flex;
+    flex-direction: column;
+    gap: 0.6rem;
+    box-sizing: border-box;
+    padding: 0.85rem 1rem;
+    border: 1px solid var(--s-line);
+    border-radius: var(--s-br);
+    background: var(--s-background);
+}
+
+.campaignSourceTitle {
+    display: flex;
+    gap: 0.4rem;
+    align-items: center;
+    margin: 0;
+    color: var(--s-paragraph);
+    font-size: 0.92rem;
+    font-weight: 700;
+
+    svg {
+        color: var(--s-primary);
+    }
+}
+
+.campaignDrop {
+    @include sms-focus;
+
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    min-height: 120px;
+    padding: 1rem;
+    border: 1px dashed var(--s-line);
+    border-radius: var(--s-br);
+    background: var(--s-surface);
+    color: var(--s-muted);
+    text-align: center;
+    cursor: pointer;
+
+    p {
+        max-width: 34ch;
+        text-align: center;
+    }
+
+    &:hover {
+        border-color: var(--s-primary);
+    }
+}
+
+.campaignDropOn {
+    border-color: var(--s-primary);
+    background: var(--s-tint);
+    color: var(--s-primary);
+}
+
+// Two selects and the button that takes the rows, on one line where there is
+// room. The button's own width is its label, which grows with the count.
+.campaignColumns {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.6rem;
+    align-items: flex-end;
+
+    > .field {
+        flex: 1 1 140px;
+        min-width: 0;
+    }
+
+    > .help {
+        flex: 1 1 100%;
+    }
+}
+
+.campaignCount {
+    color: var(--s-paragraph);
+    font-size: 0.88rem;
+
+    strong {
+        font-weight: 700;
+    }
+}
+
+/* -------------------------------------------------------------- compose */
+
+// The message on the left, what it becomes on the right. Side by side rather
+// than stacked because the point of the preview is watching it change as the
+// message is typed, and a panel below the fold is a panel nobody sees move.
+.campaignCompose {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
+    gap: 1rem;
+    align-items: start;
+}
+
+.campaignComposeMain {
+    display: flex;
+    flex-direction: column;
+    gap: 0.85rem;
+    min-width: 0;
+}
+
+.campaignPreview {
+    display: flex;
+    flex-direction: column;
+    gap: 0.6rem;
+    box-sizing: border-box;
+    padding: 0.85rem 1rem;
+    border: 1px solid var(--s-line);
+    border-radius: var(--s-br);
+    background: var(--s-surface);
+}
+
+.campaignPreviewList {
+    display: flex;
+    flex-direction: column;
+    gap: 0.6rem;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.campaignPreviewItem {
+    display: flex;
+    flex-direction: column;
+    gap: 0.35rem;
+    box-sizing: border-box;
+    padding: 0.6rem 0.7rem;
+    border: 1px solid var(--s-line);
+    border-radius: var(--s-br);
+    background: var(--s-background);
+}
+
+.campaignPreviewWho {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    min-width: 0;
+
+    strong {
+        display: block;
+        overflow: hidden;
+        color: var(--s-paragraph);
+        font-size: 0.84rem;
+        font-weight: 700;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    small {
+        color: var(--s-muted);
+        font-size: 0.74rem;
+        font-variant-numeric: tabular-nums;
+    }
+}
+
+// The rendered message. `pre-wrap` because a campaign body carries the line
+// breaks somebody typed, and a preview that folded them away would not be one.
+.campaignPreviewBody {
+    margin: 0;
+    color: var(--s-paragraph);
+    font-size: 0.84rem;
+    line-height: 1.5;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+}
+
+.campaignFooter {
+    color: var(--s-paragraph);
+    font-style: italic;
+}
+
+/* --------------------------------------------------------------- review */
+
+.campaignReview,
+.campaignReport {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+// The same card the settings status block is, and deliberately so: a row of
+// labelled figures is a row of labelled figures, and a second design for one
+// would be a second thing to keep in step.
+.campaignFacts {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem 1.5rem;
+    box-sizing: border-box;
+    padding: 0.85rem 1rem;
+    border: 1px solid var(--s-line);
+    border-radius: var(--s-br);
+    background: var(--s-surface);
+}
+
+// The step's own buttons, always at the foot of it, always right-aligned —
+// Back on the left of the pair because that is the order they are read in.
+.campaignFoot {
+    display: flex;
+    gap: 0.6rem;
+    align-items: center;
+    justify-content: flex-end;
+    padding-top: 0.75rem;
+    border-top: 1px solid var(--s-line);
+}
+
+/* --------------------------------------------------------------- detail */
+
+.campaignHeading {
+    display: flex;
+    flex-direction: column;
+    gap: 0.2rem;
+    min-width: 0;
+}
+
+// The message, folded. `details` rather than a button and a piece of state:
+// the browser owns the open/closed, it is keyboard operable for nothing, and
+// the summary is a real heading when it is printed.
+.campaignFold {
+    box-sizing: border-box;
+    padding: 0.6rem 0.85rem;
+    border: 1px solid var(--s-line);
+    border-radius: var(--s-br);
+    background: var(--s-surface);
+    font-size: 0.84rem;
+
+    > summary {
+        color: var(--s-paragraph);
+        font-weight: 600;
+        cursor: pointer;
+    }
+}
+
+.campaignFoldBody {
+    margin: 0.6rem 0 0;
+    color: var(--s-paragraph);
+    line-height: 1.5;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+}
+
+.campaignPager {
+    display: flex;
+    gap: 0.75rem;
+    align-items: center;
+    justify-content: flex-end;
+}
+
+/* ------------------------------------------------------------- opt-outs */
+
+// Number, note, and the button, on one row. The note is given the slack
+// because "asked to stop, 4 September" is the part somebody actually types.
+.optOutAdd {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.6rem;
+    align-items: flex-end;
+    box-sizing: border-box;
+    padding: 0.75rem 0.85rem;
+    border: 1px solid var(--s-line);
+    border-radius: var(--s-br);
+    background: var(--s-surface);
+
+    > .field:first-child {
+        flex: 0 1 12rem;
+    }
+
+    > .field {
+        flex: 1 1 14rem;
+        min-width: 0;
+    }
+}
+
+@media (max-width: 900px) {
+    // The preview stops being a column and becomes a panel under the message.
+    // Below this width the two side by side leave the textarea about forty
+    // characters wide, which is narrower than the message being written in it.
+    .campaignCompose {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .campaignFoot {
+        flex-wrap: wrap;
+    }
+
+    .campaignPager {
+        justify-content: space-between;
+    }
+}