feat(project): get header background from config

jwplayer · Jun 8, 2021 · 16b134c · 16b134c
1 parent 61b0b1f
commit 16b134c
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 1 deletion.
diff --git a/src/components/Header/Header.module.scss b/src/components/Header/Header.module.scss
@@ -10,6 +10,7 @@
 .header {
   height: variables.$header-height;
   padding: 10px variables.$base-spacing * 4;
+  background: var(--header-background);
 
   //
   // Make header fixed

diff --git a/src/providers/ConfigProvider.tsx b/src/providers/ConfigProvider.tsx
@@ -58,7 +58,7 @@ const ConfigProvider: FunctionComponent<ProviderProps> = ({
     loadAndValidateConfig(configLocation);
   }, [configLocation, onLoading, onValidationError]);
 
-  const setCssVariables = ({ backgroundColor, highlightColor }: Options) => {
+  const setCssVariables = ({ backgroundColor, highlightColor, headerBackground }: Options) => {
     const root = document.querySelector(':root') as HTMLElement;
 
     if (root && backgroundColor) {
@@ -68,6 +68,9 @@ const ConfigProvider: FunctionComponent<ProviderProps> = ({
     if (root && highlightColor) {
       root.style.setProperty('--highlight-color', highlightColor);
     }
+    if (root && headerBackground) {
+      root.style.setProperty('--header-background', headerBackground);
+    }
   };
 
   return (