04/16 Update - Fixed login UI issue

static/css/theme-gov.css

@@ -5,23 +5,24 @@
  *
  * HOW IT WORKS
  * ------------
- * This file is loaded AFTER style.css when THEME_NAME=gov is set in .env.
- * It overrides only the CSS custom properties defined in style.css :root,
- * so every component that uses those variables (sidebar, buttons, login page,
- * links, badges, focus rings) automatically adopts the new palette.
- * No existing files are duplicated or heavily modified.
+ * Loaded AFTER style.css but BEFORE page-specific CSS (e.g. auth.css).
+ * Overrides CSS custom properties in :root so every component that uses
+ * those variables (sidebar, buttons, login page, links, focus rings)
+ * adopts the new palette automatically.
  *
- * TO CUSTOMISE
- * ------------
- * 1. Change --primary-color / --primary-hover to your desired brand colors.
- * 2. Adjust --brand-text and --brand-icon-class below if needed.
- * 3. For the original LT Services instance: set THEME_NAME= (empty) in its
- *    .env — this file will not load at all, leaving the default blue intact.
+ * Brand text ("QR Manager" → COMPANY_NAME) is now handled directly in
+ * templates via {{ COMPANY_NAME }} — no CSS tricks needed.
+ *
+ * TO CUSTOMISE COLORS
+ * -------------------
+ * Change --primary-color / --primary-hover below.
+ * All gradients, buttons, focus rings, sidebar, and login page pick
+ * up the new values automatically via CSS variable inheritance.
  *
  * ADDING A THIRD THEME (future)
  * -----------------------------
- * Create static/css/theme-{name}.css and set THEME_NAME={name} in that
- * instance's .env. No code changes required.
+ * Create static/css/theme-{name}.css and set THEME_NAME={name} in
+ * that instance's .env. No code changes required.
  */
 
 /* ------------------------------------------------------------------ */
@@ -37,48 +38,8 @@
 }
 
 /* ------------------------------------------------------------------ */
-/* 2. SIDEBAR BRAND TEXT & ICON                                        */
-/*    Replaces the hardcoded "QR Manager" text in base_authenticated   */
-/* ------------------------------------------------------------------ */
-.brand-text::before {
-  content: "GOV QR";
-}
-.sidebar-brand .brand-content > span.brand-text {
-  /* Hide the original text node rendered by the template,
-     show our pseudo-element instead.                       */
-  font-size: 0;
-}
-.sidebar-brand .brand-content > span.brand-text::before {
-  font-size: 1.125rem; /* matches original brand-text size */
-  font-weight: 700;
-  letter-spacing: 0.02em;
-}
-
-/* ------------------------------------------------------------------ */
-/* 3. LOGIN PAGE HEADER ("QR Manager" h1)                              */
-/*    Replaces the hardcoded h1 in login.html without editing the file */
-/* ------------------------------------------------------------------ */
-.auth-header h1 {
-  font-size: 0 !important; /* hide original text */
-}
-.auth-header h1::before {
-  content: "GOV Services";
-  font-size: 2.25rem !important;
-  font-weight: 700 !important;
-  color: var(--gray-900) !important;
-}
-
-/* ------------------------------------------------------------------ */
-/* 4. FOOTER COPYRIGHT LINE                                            */
-/*    Now handled dynamically in base.html / base_authenticated.html  */
-/*    via {{ CURRENT_YEAR }} and {{ COMPANY_NAME }} — no CSS needed.  */
-/* ------------------------------------------------------------------ */
-
-/* ------------------------------------------------------------------ */
-/* 5. SIDEBAR GRADIENT — re-declare to pick up new variables           */
-/*    (Browsers resolve var() at paint time so this block is only      */
-/*     needed if the gradient was hard-coded; here it is variable-     */
-/*     driven, so this section is a safety net.)                       */
+/* 2. SIDEBAR GRADIENT                                                  */
+/*    Re-declared to consume the new variables above.                  */
 /* ------------------------------------------------------------------ */
 .sidebar {
   background: linear-gradient(
@@ -89,8 +50,12 @@
 }
 
 /* ------------------------------------------------------------------ */
-/* 6. AUTH CONTAINER GRADIENT (login background)                       */
+/* 3. LOGIN PAGE — auth.css loads after this file (via extra_head) so  */
+/*    we must use !important to win the cascade on rules that auth.css */
+/*    also declares with !important.                                   */
 /* ------------------------------------------------------------------ */
+
+/* Login background gradient */
 .auth-container {
   background: linear-gradient(
     135deg,
@@ -99,6 +64,7 @@
   ) !important;
 }
 
+/* Logo circle gradient */
 .auth-logo {
   background: linear-gradient(
     135deg,
@@ -107,6 +73,7 @@
   ) !important;
 }
 
+/* Card top accent stripe */
 .auth-card::before {
   background: linear-gradient(
     90deg,
@@ -115,7 +82,40 @@
   ) !important;
 }
 
+/* Sign In button gradient */
+.auth-form .btn-primary {
+  background: linear-gradient(
+    135deg,
+    var(--primary-color),
+    var(--primary-hover)
+  ) !important;
+}
+
+/* Input focus border colour */
+.auth-form .form-group input:focus {
+  border-color: var(--primary-color) !important;
+  /* Override the hardcoded blue rgba(37,99,235) in auth.css */
+  box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.15) !important;
+}
+
+/* Focused label colour */
+.auth-form .form-group.focused label {
+  color: var(--primary-color) !important;
+}
+
+/* Label icon colour */
+.auth-form .form-group label i {
+  color: var(--primary-color) !important;
+}
+
+/* Focus accessibility outline */
+.auth-form .btn:focus,
+.auth-form .form-group input:focus {
+  outline-color: var(--primary-color) !important;
+}
+
 /* ------------------------------------------------------------------ */
-/* 7. PAGE TITLE / BROWSER TAB — handled via COMPANY_NAME in .env      */
-/*    (no CSS needed; Flask injects it from COMPANY_NAME=GOV. Serv...) */
+/* 4. FOOTER COPYRIGHT                                                  */
+/*    Handled dynamically in templates via {{ CURRENT_YEAR }} and      */
+/*    {{ COMPANY_NAME }} — no CSS override needed here.                */
 /* ------------------------------------------------------------------ */

templates/base_authenticated.html

@@ -44,7 +44,7 @@
         <div class="sidebar-brand">
           <div class="brand-content">
             <i class="fas fa-qrcode"></i>
-            <span class="brand-text">QR Manager</span>
+            <span class="brand-text">{{ COMPANY_NAME }}</span>
           </div>
         </div>
 

templates/login.html

@@ -13,7 +13,7 @@
       <div class="auth-logo">
         <i class="fas fa-qrcode"></i>
       </div>
-      <h1>QR Manager</h1>
+      <h1>{{ COMPANY_NAME }}</h1>
       <p>Sign in to your account</p>
     </div>