Apply Andal.LND orange (#ff4f00) branding to authn MFE
- Inject Andal brand CSS variables after paragon theme loads - Override paragon primary colors with Andal orange - Hide register tab via DISABLE_PUBLIC_ACCOUNT_CREATION
This commit is contained in:
Banu
@@ -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 (
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<AppProvider>
|
||||
<Helmet>
|
||||
@@ -71,6 +156,7 @@ const MainApp = () => (
|
||||
</Routes>
|
||||
</AppProvider>
|
||||
</QueryClientProvider>
|
||||
);
|
||||
);
|
||||
};
|
||||
|
||||
export default MainApp;
|
||||
|
||||
@@ -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 <style> tag is added by JavaScript at runtime to ensure it
|
||||
// comes LAST in the cascade, overriding paragon's dynamic CSS.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user