Andal.LND/frontend-app-learner-dashboard
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source 
- Remove FooterSlot (no footer)
- Add orange brand colors to App.scss
This commit is contained in:
Banu
2026-04-13 14:43:03 +07:00
parent add424ac60
commit 61946f73fc
2 changed files with 104 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
src/App.jsx
View File

@@ -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 (
<>

45
src/App.scss
View File

@@ -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