Apply Andal.LND orange (#ff4f00) branding to learner-dashboard

- Remove FooterSlot (no footer)
- Add orange brand colors to App.scss

src/App.jsx

@@ -19,6 +19,78 @@ import { useMasquerade } from 'data/context';
 import messages from './messages';
 import './App.scss';
 
+// Inject Andal Learning brand CSS AFTER paragon's dynamic theme CSS loads.
+// ParagonWebpackPlugin injects theme CSS via JavaScript after page load, which
+// overrides our CSS custom properties. This ensures our orange brand colors win
+// the CSS cascade by injecting them after paragon's styles.
+const injectAndalBrandCSS = () => {
+  if (document.getElementById('andal-brand-css')) return;
+  const style = document.createElement('style');
+  style.id = 'andal-brand-css';
+  style.textContent = `
+    :root {
+      --pgn-color-primary-base: #ff4f00 !important;
+      --pgn-color-primary-100: #ffe6cc !important;
+      --pgn-color-primary-200: #ffcc99 !important;
+      --pgn-color-primary-300: #ffb366 !important;
+      --pgn-color-primary-400: #ff9933 !important;
+      --pgn-color-primary: #ff4f00 !important;
+      --pgn-color-primary-500: #ff4f00 !important;
+      --pgn-color-primary-600: #cc3f00 !important;
+      --pgn-color-primary-700: #992f00 !important;
+      --pgn-color-primary-800: #661f00 !important;
+      --pgn-color-primary-900: #330f00 !important;
+      --pgn-color-action-primary: #ff4f00 !important;
+      --pgn-color-action-primary-hover: #cc3f00 !important;
+      --pgn-color-action-primary-focus: #992f00 !important;
+      --pgn-color-action-primary-active: #992f00 !important;
+      --pgn-color-action-default-primary-base: #ff4f00 !important;
+      --pgn-color-action-default-primary-hover: #cc3f00 !important;
+      --pgn-color-action-default-primary-focus: #992f00 !important;
+      --pgn-color-action-default-primary-active: #992f00 !important;
+      --pgn-color-btn-bg-primary: #ff4f00 !important;
+      --pgn-color-btn-hover-bg-primary: #cc3f00 !important;
+      --pgn-color-btn-focus-bg-primary: #cc3f00 !important;
+      --pgn-color-btn-active-bg-primary: #992f00 !important;
+      --pgn-color-btn-border-primary: #ff4f00 !important;
+      --pgn-color-btn-hover-border-primary: #cc3f00 !important;
+      --pgn-color-btn-focus-border-primary: #cc3f00 !important;
+      --pgn-color-btn-active-border-primary: #992f00 !important;
+      --pgn-color-btn-text-primary: #ffffff !important;
+      --pgn-color-btn-hover-text-primary: #ffffff !important;
+      --pgn-color-btn-focus-text-primary: #ffffff !important;
+      --pgn-color-btn-active-text-primary: #ffffff !important;
+      --pgn-color-btn-disabled-bg-primary: #cc3f00 !important;
+      --pgn-color-btn-disabled-text-primary: #ffffff !important;
+      --pgn-color-btn-disabled-border-primary: #cc3f00 !important;
+    }
+    .btn-primary, .btn-brand, .btn-outline-primary, button.btn-primary, a.btn-primary {
+      background-color: #ff4f00 !important;
+      border-color: #ff4f00 !important;
+      color: #ffffff !important;
+    }
+    .btn-primary:hover, .btn-brand:hover, .btn-outline-primary:hover, button.btn-primary:hover, a.btn-primary:hover {
+      background-color: #cc3f00 !important;
+      border-color: #cc3f00 !important;
+    }
+    .btn-outline-primary {
+      color: #ff4f00 !important;
+      background-color: transparent !important;
+    }
+    .btn-outline-primary:hover {
+      background-color: #ff4f00 !important;
+      color: #ffffff !important;
+    }
+    a:not(.btn) {
+      color: #ff4f00 !important;
+    }
+    a:not(.btn):hover {
+      color: #cc3f00 !important;
+    }
+  `;
+  document.head.appendChild(style);
+};
+
 export const App = () => {
   const { formatMessage } = useIntl();
   const { masqueradeUser } = useMasquerade();
@@ -39,6 +111,8 @@ export const App = () => {
         logError(error);
       }
     }
+    // Inject brand CSS after paragon's dynamic theme loading completes
+    injectAndalBrandCSS();
   }, []);
   return (
     <>

src/App.scss

@@ -4,22 +4,37 @@
 $fa-font-path: "~font-awesome/fonts";
 @import "~font-awesome/scss/font-awesome";
 
-// Andal Learning Brand Colors - Override Paragon variables
+// Andal Learning Brand Colors - Override Paragon CSS variables
+// MUST use !important to override paragon's dynamic theme CSS cascade
 :root {
-  --pgn-color-primary: #ff4f00;
+  --pgn-color-primary-base: #ff4f00 !important;
-  --pgn-color-primary-100: #ffe6cc;
+  --pgn-color-primary-100: #ffe6cc !important;
-  --pgn-color-primary-200: #ffcc99;
+  --pgn-color-primary-200: #ffcc99 !important;
-  --pgn-color-primary-300: #ffb366;
+  --pgn-color-primary-300: #ffb366 !important;
-  --pgn-color-primary-400: #ff9933;
+  --pgn-color-primary-400: #ff9933 !important;
-  --pgn-color-primary-500: #ff4f00;
+  --pgn-color-primary: #ff4f00 !important;
-  --pgn-color-primary-600: #cc3f00;
+  --pgn-color-primary-500: #ff4f00 !important;
-  --pgn-color-primary-700: #992f00;
+  --pgn-color-primary-600: #cc3f00 !important;
-  --pgn-color-primary-800: #661f00;
+  --pgn-color-primary-700: #992f00 !important;
-  --pgn-color-primary-900: #330f00;
+  --pgn-color-primary-800: #661f00 !important;
-  --pgn-color-action-primary: #ff4f00;
+  --pgn-color-primary-900: #330f00 !important;
-  --pgn-color-action-primary-hover: #cc3f00;
+  --pgn-color-action-primary: #ff4f00 !important;
-  --pgn-color-action-primary-focus: #992f00;
+  --pgn-color-action-primary-hover: #cc3f00 !important;
-  --pgn-color-action-primary-active: #992f00;
+  --pgn-color-action-primary-focus: #992f00 !important;
+  --pgn-color-action-primary-active: #992f00 !important;
+  --pgn-color-action-default-primary-base: #ff4f00 !important;
+  --pgn-color-btn-bg-primary: #ff4f00 !important;
+  --pgn-color-btn-hover-bg-primary: #cc3f00 !important;
+  --pgn-color-btn-focus-bg-primary: #cc3f00 !important;
+  --pgn-color-btn-active-bg-primary: #992f00 !important;
+  --pgn-color-btn-border-primary: #ff4f00 !important;
+  --pgn-color-btn-hover-border-primary: #cc3f00 !important;
+  --pgn-color-btn-focus-border-primary: #cc3f00 !important;
+  --pgn-color-btn-active-border-primary: #992f00 !important;
+  --pgn-color-btn-text-primary: #ffffff !important;
+  --pgn-color-btn-hover-text-primary: #ffffff !important;
+  --pgn-color-btn-focus-text-primary: #ffffff !important;
+  --pgn-color-btn-active-text-primary: #ffffff !important;
 }
 
 // Override all button variants to use Andal orange