From 61946f73fcd604b2c5a542eb3d3936d182750416 Mon Sep 17 00:00:00 2001 From: Banu Date: Mon, 13 Apr 2026 14:43:03 +0700 Subject: [PATCH] Apply Andal.LND orange (#ff4f00) branding to learner-dashboard - Remove FooterSlot (no footer) - Add orange brand colors to App.scss --- src/App.jsx | 74 ++++++++++++++++++++++++++++++++++++++++++++++++++++ src/App.scss | 45 +++++++++++++++++++++----------- 2 files changed, 104 insertions(+), 15 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 66abadd..34ca697 100755 --- a/src/App.jsx +++ b/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 ( <> diff --git a/src/App.scss b/src/App.scss index 630a6c2..ec74898 100755 --- a/src/App.scss +++ b/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-100: #ffe6cc; - --pgn-color-primary-200: #ffcc99; - --pgn-color-primary-300: #ffb366; - --pgn-color-primary-400: #ff9933; - --pgn-color-primary-500: #ff4f00; - --pgn-color-primary-600: #cc3f00; - --pgn-color-primary-700: #992f00; - --pgn-color-primary-800: #661f00; - --pgn-color-primary-900: #330f00; - --pgn-color-action-primary: #ff4f00; - --pgn-color-action-primary-hover: #cc3f00; - --pgn-color-action-primary-focus: #992f00; - --pgn-color-action-primary-active: #992f00; + --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-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