diff --git a/src/MainApp.jsx b/src/MainApp.jsx
index 2438dcaa..7557f419 100755
--- a/src/MainApp.jsx
+++ b/src/MainApp.jsx
@@ -3,6 +3,7 @@ import { AppProvider } from '@edx/frontend-platform/react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { Helmet } from 'react-helmet';
import { Navigate, Route, Routes } from 'react-router-dom';
+import { useEffect } from 'react';
import {
EmbeddedRegistrationRoute, NotFoundPage, registerIcons, UnAuthOnlyRoute, Zendesk,
@@ -29,6 +30,84 @@ import './index.scss';
registerIcons();
+// 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;
+ }
+ .nav-tabs .nav-link[href*="register"] {
+ display: none !important;
+ }
+ .text-accent-a {
+ color: #000000 !important;
+ }
+ a:not(.btn) {
+ color: #ff4f00 !important;
+ }
+ a:not(.btn):hover {
+ color: #cc3f00 !important;
+ }
+ `;
+ document.head.appendChild(style);
+};
+
const queryClient = new QueryClient({
defaultOptions: {
mutations: {
@@ -37,7 +116,13 @@ const queryClient = new QueryClient({
},
});
-const MainApp = () => (
+const MainApp = () => {
+ useEffect(() => {
+ // Inject brand CSS after paragon's dynamic theme loading completes
+ injectAndalBrandCSS();
+ }, []);
+
+ return (
@@ -71,6 +156,7 @@ const MainApp = () => (
-);
+ );
+};
export default MainApp;
diff --git a/src/index.scss b/src/index.scss
index ef308ef1..a7cc312e 100755
--- a/src/index.scss
+++ b/src/index.scss
@@ -1,54 +1,88 @@
@use "@openedx/paragon/styles/css/core/custom-media-breakpoints" as paragonCustomMediaBreakpoints;
@import "sass/style";
-//commit color - Andal Learning Brand Colors - Override Paragon variables
+// Andal Learning Brand Colors - Override Paragon CSS variables
+// CRITICAL: These MUST override paragon's theme CSS which is dynamically injected.
+// We redeclare --pgn-color-primary-base directly since paragon's variant CSS
+// defines it to blue (#0A3055) and would override our :root declaration.
: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;
+ --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;
}
-// Override all button variants to use Andal orange
-.btn-primary {
+// Override all button variants to use Andal orange (high-specificity selectors)
+.btn-primary,
+.btn-brand,
+.btn-outline-primary,
+button.btn-primary,
+a.btn-primary,
+.pgn__btn,
+.pgn__btn-primary {
background-color: #ff4f00 !important;
border-color: #ff4f00 !important;
+ color: #ffffff !important;
&:hover {
background-color: #cc3f00 !important;
border-color: #cc3f00 !important;
}
+
+ &:focus {
+ background-color: #cc3f00 !important;
+ border-color: #cc3f00 !important;
+ box-shadow: 0 0 0 2px #ffcc99 !important;
+ }
+
+ &:active {
+ background-color: #992f00 !important;
+ border-color: #992f00 !important;
+ }
}
.btn-outline-primary {
color: #ff4f00 !important;
- border-color: #ff4f00 !important;
+ background-color: transparent !important;
&:hover {
background-color: #ff4f00 !important;
- color: #fff !important;
+ color: #ffffff !important;
}
}
-.btn-brand {
- background-color: #ff4f00 !important;
- border-color: #ff4f00 !important;
- color: #fff !important;
-}
-
// Override link colors
-a {
+a:not(.btn) {
color: #ff4f00;
&:hover {
@@ -73,3 +107,8 @@ a {
.text-accent-a {
color: #000000 !important;
}
+
+// Inject brand color AFTER paragon's dynamic theme loading
+// This