@visns-studio/visns-components 6.6.3 → 6.15.0

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

@@ -531,3 +531,106 @@
         }
     }
 }
+
+/* Desktop alerts — the switch at the foot of the dropdown.
+   The switch geometry deliberately matches the one in the messages composer
+   (Sms.module.scss `.toggle`), copied rather than imported so the two
+   stylesheets stay independent of one another. */
+.alertsRow {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    padding: 8px 16px;
+    border-top: 1px solid rgba(0, 0, 0, 0.06);
+    background-color: rgba(0, 0, 0, 0.02);
+}
+
+.alertsLabel {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    color: var(--paragraph-color, #333);
+    font-size: 12px;
+    font-weight: 600;
+    white-space: nowrap;
+}
+
+.alertsBlocked {
+    color: #8a8f98;
+    font-size: 11px;
+    font-style: italic;
+    text-align: right;
+}
+
+.toggle {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: 6px;
+    margin: 0;
+    padding: 3px 8px 3px 5px;
+    border: 1px solid rgba(0, 0, 0, 0.12);
+    border-radius: 999px;
+    background: #fff;
+    color: #6c757d;
+    font-family: inherit;
+    font-size: 11px;
+    font-weight: 600;
+    line-height: 1;
+    white-space: nowrap;
+    cursor: pointer;
+    transition: border-color 0.15s ease, color 0.15s ease;
+}
+
+.toggle:hover {
+    border-color: var(--primary-color, #0056b3);
+    color: var(--primary-color, #0056b3);
+}
+
+.toggle:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb, 0, 86, 179), 0.3);
+}
+
+.toggleTrack {
+    position: relative;
+    display: inline-block;
+    flex: 0 0 auto;
+    width: 22px;
+    height: 12px;
+    border-radius: 999px;
+    background: rgba(0, 0, 0, 0.28);
+    transition: background-color 0.15s ease;
+}
+
+.toggleKnob {
+    position: absolute;
+    top: 1px;
+    left: 1px;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: #fff;
+    transition: transform 0.15s ease;
+}
+
+.toggleOn {
+    border-color: var(--primary-color, #0056b3);
+    color: var(--primary-color, #0056b3);
+}
+
+.toggleOn .toggleTrack {
+    background: var(--primary-color, #0056b3);
+}
+
+.toggleOn .toggleKnob {
+    transform: translateX(10px);
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .toggleTrack,
+    .toggleKnob {
+        transition: none;
+    }
+}

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

@@ -1,199 +1,65 @@
-.formItem {
-    width: 100%;
-    position: relative;
-    box-sizing: border-box;
-    margin-bottom: 1rem;
-
-    h1 {
-        text-align: center;
-        font-size: 1.5rem;
-        font-weight: 600;
-        color: #111827;
-        margin-bottom: 1.5rem;
-    }
-
-    .fi__label {
-        position: relative;
-        display: flex;
-        align-items: center;
-    }
-
-    .fi__span {
-        position: absolute;
-        transition: all 200ms;
-        opacity: 0.7;
-        left: 0;
-        transform-origin: top left;
-        cursor: text;
-        padding: 0 1rem;
-        font-size: 0.9rem;
-        color: #6b7280;
-    }
-
-    .fi__div {
-        transition: all 200ms;
-        opacity: 0.8;
-        left: 0;
-        padding: 19px 13px;
-        border-radius: 0.5rem;
-        border: 1px solid #e5e7eb;
-        box-shadow: none;
-    }
-
-    .fi__toggle {
-        width: max-content;
-        padding: 0 10px 0 0;
-        box-sizing: border-box;
-        display: inline;
-    }
-
-    .fi__toggletxt {
-        position: relative;
-        left: 5px;
-        font-size: 0.95em;
-        top: -5px;
-    }
-}
-
-.fwItem,
-.fwBuilderItem {
-    grid-column: 1 / -1;
-    width: 100%;
-}
-
-.lastItem {
-    .btn {
-        width: 100%;
-    }
-}
-
-.loginlogo {
-    display: block;
-    width: 100%;
-    max-width: 150px;
-    height: auto;
-    margin: 0 auto;
-    padding-bottom: 1.5rem;
-}
-
-.logincontainer {
-    width: 100%;
-    min-height: 100vh;
-    display: grid;
-    place-items: center;
-    padding: 1rem;
-    background-color: #f9fafb;
-}
-
-.login {
-    width: 28rem;
-    padding: 2rem;
-    margin: 0;
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: 1rem;
-    background-color: white;
-    border-radius: 0.75rem;
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
-        0 2px 4px -1px rgba(0, 0, 0, 0.06);
-
-    > .formItem {
-        padding: 0;
-
-        small {
-            position: absolute;
-            width: 18px;
-            height: 18px;
-            right: 14px;
-            top: 14px;
-            opacity: 0.4;
-            color: #6b7280;
-        }
-    }
-
-    > .loginitem {
-        grid-column: 1 / -1;
-        padding: 0.25em 0;
-
-        label {
-            width: 100%;
-        }
-
-        button {
-            width: 100%;
-        }
+/**
+ * Forgot password.
+ *
+ * Replaces the pre-6.1 centred card with the two-pane sign-in language, so the
+ * screen a user reaches from the login form's "Forgot password?" link looks
+ * like the screen they came from.
+ *
+ * Everything shared comes from _authShell.scss; only the back link and the
+ * post-submit confirmation are particular to this screen.
+ */
+
+@use './authShell' as *;
+
+@include auth-shell;
+
+/* Shown in place of the form once the request is in: a reset email either
+   exists or it does not, and re-offering the same field invites people to
+   submit it again while the first one is still arriving. */
+.sent {
+    display: flex;
+    gap: 0.75rem;
+    align-items: flex-start;
+    padding: 1rem 1.1rem;
+    border: 1px solid var(--line);
+    border-left: 3px solid var(--navy);
+    border-radius: 0.6rem;
+    background: var(--warm);
+    font-size: 0.9rem;
+    line-height: 1.55;
+    color: var(--ink);
+
+    svg {
+        flex: none;
+        margin-top: 0.15rem;
+        color: var(--navy);
     }
-}
-
-.forgotten span {
-    display: block;
-    text-align: center;
-    color: var(--paragraph-color);
-    padding: 1rem 0;
 
-    a {
-        color: var(--secondary-color);
-        text-decoration: none;
+    p {
+        margin: 0;
     }
 }
 
-.lcontainer {
-    min-height: 100vh;
-    display: flex;
+.back {
+    display: inline-flex;
     align-items: center;
-    justify-content: center;
-    background-color: #f9fafb;
-}
-
-.lwrap {
-    display: grid;
-    grid-template-columns: 1fr;
-}
-
-.aside {
-    opacity: 1;
-    position: fixed;
-    overflow: hidden;
-    height: 101%;
-    width: var(--sidebar-width);
-}
-
-.btn {
-    width: max-content;
-    display: inline-block;
-    position: relative;
-    padding: 0.75rem 1rem;
-    cursor: pointer;
-    font-size: 0.875rem;
-    font-weight: 500;
-    color: white;
+    gap: 0.35rem;
+    margin-top: 1.4rem;
+    padding: 0;
+    border: none;
+    background: none;
+    font-family: inherit;
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: var(--navy);
     text-decoration: none;
-    overflow: hidden;
-    background: var(--primary-color, #4f46e5);
-    border: 1px solid var(--primary-color, #4f46e5);
-    border-radius: 0.5rem;
-    outline: none;
-    transition: all 0.2s ease;
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    cursor: pointer;
 
     &:hover {
-        background: var(--secondary-color, #3cbf7d);
-        border-color: var(--secondary-color, #3cbf7d);
+        text-decoration: underline;
     }
 
-    &:focus {
-        box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.25);
+    svg {
+        flex: none;
     }
 }
-
-input:not(:placeholder-shown) + .fi__span,
-textarea:not(:placeholder-shown) + .fi__span,
-select:not(:placeholder-shown) + .fi__span {
-    transform: translateY(-135%) translateX(10px) scale(0.85);
-    opacity: 1;
-    padding: 0;
-    background: white;
-    font-weight: 500;
-    transition: all 0.3s ease;
-    color: var(--primary-color, #4f46e5) !important;
-}