@visns-studio/visns-components 6.1.2 → 6.1.3

package/package.json

@@ -91,7 +91,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "6.1.2",
+    "version": "6.1.3",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/auth/Login.jsx

@@ -19,6 +19,12 @@ const Login = ({
 }) => {
     const location = useLocation();
     const navigate = useNavigate();
+
+    // Brand copy comes from the consuming project — this library is shared
+    // across every VISNS CRM, so nothing project-specific may be hardcoded
+    // here. Absent entries simply don't render (except the sign-in hint,
+    // which falls back to a generic line).
+    const branding = config.branding || {};
     const [isLoading, setIsLoading] = useState(false);
     const [showPassword, setShowPassword] = useState(false);
 
@@ -189,28 +195,39 @@ const Login = ({
                 }
                 aria-hidden="true"
             >
-                <div className={styles.brandInk}>
-                    <p className={styles.eyebrow}>Construction Management</p>
-                    <p className={styles.brandLine}>Prime Builders</p>
-                    <p className={styles.brandSub}>
-                        Job tracking, inspections, site forms and labour
-                        scheduling — in one place.
-                    </p>
-                </div>
+                {(branding.eyebrow || branding.name || branding.tagline) && (
+                    <div className={styles.brandInk}>
+                        {branding.eyebrow && (
+                            <p className={styles.eyebrow}>{branding.eyebrow}</p>
+                        )}
+                        {branding.name && (
+                            <p className={styles.brandLine}>{branding.name}</p>
+                        )}
+                        {branding.tagline && (
+                            <p className={styles.brandSub}>{branding.tagline}</p>
+                        )}
+                    </div>
+                )}
             </aside>
 
             <main className={styles.panel}>
                 <div className={styles.panelInner}>
-                    <img src={logo} alt="Prime Builders" className={styles.logo} />
+                    <img
+                        src={logo}
+                        alt={branding.name || 'Logo'}
+                        className={styles.logo}
+                    />
 
                     <h1 className={styles.title}>Sign in</h1>
                     <p className={styles.subtitle}>
-                        Use your Prime Microsoft account to continue.
+                        {branding.signInHint ||
+                            (ssoAvailable
+                                ? 'Use your Microsoft account to continue.'
+                                : 'Sign in with your email and password.')}
                     </p>
 
-                    {/* Primary: this is how Prime staff actually sign in. The
-                        email form stays available underneath for accounts
-                        without a Microsoft sign-in. */}
+                    {/* SSO leads when configured; the email form stays
+                        available underneath for accounts without it. */}
                     {renderSsoButton()}
 
                     {ssoAvailable && !showEmail && (
@@ -320,9 +337,9 @@ const Login = ({
                       </div>
                     </div>
 
-                    <p className={styles.foot}>
-                        Prime Builders · Perth, Western Australia
-                    </p>
+                    {branding.footer && (
+                        <p className={styles.foot}>{branding.footer}</p>
+                    )}
                 </div>
             </main>
         </div>

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

@@ -1,5 +1,5 @@
 /**
- * Prime Builders sign in.
+ * Sign in.
  *
  * An asymmetric split: the company's own completed work on the left, the form
  * on the right. Colours are taken from that photograph and the logo rather
@@ -15,7 +15,7 @@
     /* Local aliases only — every brand value comes from the consuming app's
        token layer so this library stays reusable. The fallbacks are neutral
        on purpose: a project that defines nothing gets a plain, working sign
-       in rather than Prime's colours. */
+       in rather than any one project's colours. */
     --ink: var(--header-color, #10192a);
     --navy: var(--primary-color, #26364a);
     --navy-deep: var(--primary-color-darker, #16202e);
@@ -55,8 +55,8 @@
     //
     // The foot is a near-solid plate rather than a fade. The brand line has to
     // hold against whatever the photograph is doing behind it, and this one is
-    // bright exactly where the type sits, which left "Prime Builders" washing
-    // into the render. Held high — 0.88 still at 18%, which is where the ink
+    // bright exactly where the type sits, which left the brand line washing
+    // into the photograph. Held high — 0.88 still at 18%, which is where the ink
     // block ends — so the whole block reads on one ground, then released
     // quickly to 0.06 at the top, so the sky above is still a photograph and
     // not a tint.
@@ -439,7 +439,7 @@
     }
 }
 
-/* Primary. This is how Prime staff actually sign in, so it carries the fill
+/* Primary. SSO is the main way in when configured, so it carries the fill
    and sits above the fold of the form. */
 .sso {
     display: flex;

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

@@ -431,7 +431,7 @@
             appearance: none;
 
             /* Brand red on hover, matching the rest of the bar. A neutral
-               white lift read as a system default rather than a Prime
+               white lift read as a system default rather than a project
                control, and left this cluster looking unrelated to everything
                around it. */
             &:hover,