@visns-studio/visns-components 6.34.0 → 6.35.0

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

@@ -1068,19 +1068,48 @@ $sms-mono: 'SFMono-Regular', 'Menlo', 'Consolas', monospace;
 
 .pageTitle {
     display: flex;
-    gap: 0.5rem;
+    flex-wrap: wrap;
+    column-gap: 0.3em;
     align-items: center;
     margin: 0;
-    color: var(--s-paragraph);
-    font-size: 1.5rem;
+    /* The same title every other screen of a host CRM draws: `.crmtitle h1` in
+       GenericDetail/GenericIndex and PageHeader's `.title` all read
+       --page-header-title-size and the heading colour. This was 1.5rem in the
+       paragraph colour, a size larger than every page around it. */
+    color: var(--heading-color, var(--s-paragraph));
+    font-size: var(--page-header-title-size, 1.25rem);
     font-weight: 700;
-    line-height: 1.2;
+    line-height: 1.25;
+    letter-spacing: -0.02em;
 
     svg {
         color: var(--s-primary);
     }
 }
 
+/* A breadcrumb inside the title — `Messages › SMS campaigns`. The library's
+   trail spec (`.crmtitle h1 a` / `h1 svg` in GenericDetail.module.scss):
+   the parent muted at 500, a 16px chevron, the current page at 700. */
+.pageTitleParent {
+    color: var(--muted-color, var(--s-muted));
+    font-weight: 500;
+    text-decoration: none;
+    transition: color 0.15s ease;
+
+    &:hover,
+    &:focus-visible {
+        color: var(--paragraph-color, var(--s-paragraph));
+        text-decoration: underline;
+    }
+}
+
+.pageTitle .pageTitleChevron {
+    flex: 0 0 auto;
+    max-width: 15px;
+    margin: 0 0.4rem;
+    color: var(--muted-color, var(--s-muted));
+}
+
 .headActions {
     display: flex;
     flex-wrap: wrap;

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

@@ -1746,10 +1746,12 @@ input.checkControl {
 
 .pageTitle {
     margin: 0;
-    color: var(--v-paragraph);
-    font-size: 1.5rem;
+    /* One title size across a host CRM — see `.pageTitle` in Sms.module.scss. */
+    color: var(--heading-color, var(--v-paragraph));
+    font-size: var(--page-header-title-size, 1.25rem);
     font-weight: 700;
-    line-height: 1.2;
+    line-height: 1.25;
+    letter-spacing: -0.02em;
 }
 
 .pageIntro {

package/src/components/styles/global.css

@@ -280,7 +280,9 @@ input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
         .react-datepicker__year-select
     ):not(.visns-native-date-filter__input):not([type='date']):not(
         [type='datetime-local']
-    ):not([type='time']):not([class*='searchInput']):not([class*='filterInput']):not([class*='rowActionPickerSearch']) {
+    ):not([type='time']):not([class*='searchInput']):not([class*='filterInput']):not([class*='rowActionPickerSearch']):not(
+        .visns-auth-input
+    ) {
     background: white;
     border-radius: var(--br);
     border: 1px solid rgba(var(--paragraph-color-rgb, 43, 43, 43), 0.15);
@@ -310,6 +312,14 @@ input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
     font-size: 0.85rem;
 }
 
+/* `.visns-auth-input` is the floating-label field on the auth screens (login,
+   reset, verify, 2FA). Its module gives it a 3.35rem box with a top-heavy
+   padding so the value clears the label sitting inside it, and that rule is
+   `.field input` — (0,1,1), which this chain outranks twenty times over. So
+   the chain used to win: the box shrank to `--field-height`, the padding went
+   horizontal-only, and the value was drawn straight through the label. The
+   auth inputs carry the class for exactly this opt-out. */
+
 /* The focus border, as its own rule and NOT nested under the list above.
 
    Nested `&:focus` is `:is(<the whole list>):focus`, and `:is()` takes the
@@ -333,7 +343,9 @@ input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
         .react-datepicker__year-select
     ):not(.visns-native-date-filter__input):not([type='date']):not(
         [type='datetime-local']
-    ):not([type='time']):not([class*='searchInput']):not([class*='filterInput']):not([class*='rowActionPickerSearch']):focus {
+    ):not([type='time']):not([class*='searchInput']):not([class*='filterInput']):not([class*='rowActionPickerSearch']):not(
+        .visns-auth-input
+    ):focus {
     border: 1px solid var(--primary-color);
 }
 

package/src/index.js

@@ -288,6 +288,9 @@ import SmsCampaigns, {
 import SmsClientConversations from './components/sms/SmsClientConversations';
 import SmsComposeModal from './components/sms/SmsComposeModal';
 import SmsInbox from './components/sms/SmsInbox';
+// Email campaigns — Resend Broadcasts, the screen for visns-packages'
+// `email_campaigns` module. Mount it at a route and pass `canManage`.
+import EmailCampaigns from './components/emailCampaigns/EmailCampaigns';
 import SmsInboxBadge from './components/sms/SmsInboxBadge';
 import SmsLineSettings from './components/sms/SmsLineSettings';
 import SmsThreadPanel from './components/sms/SmsThreadPanel';
@@ -528,6 +531,7 @@ export {
     SmsClientConversations,
     SmsComposeModal,
     SmsInbox,
+    EmailCampaigns,
     SmsInboxBadge,
     SmsLineSettings,
     SmsThreadPanel,