[semver:patch] Customize hat color

strigo · Aug 22, 2022 · fd22e09 · fd22e09
1 parent a293b17
commit fd22e09
Show file tree

Hide file tree

Showing 10 changed files with 71 additions and 22 deletions.
diff --git a/dist/development/strigo.sdk.js b/dist/development/strigo.sdk.js
@@ -11342,6 +11342,13 @@ ${JSON.stringify(parsedContext)}` : "");
     };
     hostingAppWindow?.strigoNavigationObserver?.observer?.observe(hostingAppWindow.document, navigationObserverOptions);
   }
+  function customizeHatColors(academyColors) {
+    const { primaryColor, primaryHoverColor, primaryTextAccent } = academyColors;
+    const wrapper = document.querySelector(":root");
+    wrapper.style.setProperty("--customizable-hat-bg-color", primaryColor);
+    wrapper.style.setProperty("--customizable-hat-bg-hover-color", primaryHoverColor);
+    wrapper.style.setProperty("--customizable-hat-text-color", primaryTextAccent === "dark" /* DARK */ ? "#000000" : "#FFFFFF");
+  }
 
   // src/modules/element-selector/element-profiler.js
   function getElementProfiler() {
@@ -13284,6 +13291,7 @@ ${JSON.stringify(parsedContext)}` : "");
           LoggerInstance.debug("Configuration fetched from Strigo");
           LoggerInstance.setup(loggingConfig);
           setupAssessmentStorage(userAssessments);
+          customizeHatColors(configuration?.academyColors);
         }
         setupLocalStorageConfig({
           user: {

diff --git a/dist/development/styles/strigo-academy-hat.css b/dist/development/styles/strigo-academy-hat.css
@@ -1,4 +1,9 @@
 /* src/styles/strigo-academy-hat.scss */
+:root {
+  --customizable-hat-bg-color: #3d408f;
+  --customizable-hat-bg-hover-color: #696cbf;
+  --customizable-hat-text-color: #e2e2e7;
+}
 .strigo-academy-hat {
   position: fixed;
   top: 50%;
@@ -13,7 +18,7 @@
   border-right: none;
   box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2), 0px 8px 24px rgba(0, 0, 0, 0.14);
   border-radius: 8px 0px 0px 8px;
-  background-color: #3d408f;
+  background-color: var(--customizable-hat-bg-color);
   z-index: 9999999999;
   opacity: 0;
   -webkit-transition: -webkit-transform 0.3s 0.3s;
@@ -42,10 +47,10 @@
   transform: translate3d(0, 0, 0);
 }
 .strigo-academy-hat:hover {
-  background-color: #696cbf;
+  background-color: var(--customizable-hat-bg-hover-color);
 }
 .strigo-academy-hat .strigo-academy-hat-icon {
   width: 13px;
   padding-bottom: 2px;
-  fill: #e2e2e7;
+  fill: var(--customizable-hat-text-color);
 }
diff --git a/dist/production/strigo.sdk.min.js b/dist/production/strigo.sdk.min.js
diff --git a/dist/production/styles/strigo-academy-hat.min.css b/dist/production/styles/strigo-academy-hat.min.css
diff --git a/esbuild-dev-extension.js b/esbuild-dev-extension.js
@@ -23,6 +23,7 @@ esbuild
     entryPoints: [
       'src/styles/strigo.scss',
       'src/styles/strigo-widget.scss',
+      'src/styles/strigo-academy-hat.scss',
       'src/styles/strigo-assessment-recorder.scss',
       'src/strigo.sdk.ts',
     ],

diff --git a/esbuild-dev.js b/esbuild-dev.js
@@ -13,6 +13,7 @@ esbuild
     entryPoints: [
       'src/styles/strigo.scss',
       'src/styles/strigo-widget.scss',
+      'src/styles/strigo-academy-hat.scss',
       'src/styles/strigo-assessment-recorder.scss',
       'src/strigo.sdk.ts',
     ],

diff --git a/src/modules/config/config.types.ts b/src/modules/config/config.types.ts
@@ -1,6 +1,19 @@
 import { Assessment } from '../no-code-assessment/no-code-assessment.types';
 import { WidgetFlavors } from '../widgets/widget.types';
 
+export enum TextAccents {
+  LIGHT = 'light',
+  DARK = 'dark',
+}
+
+export interface OrganizationAcademyColors {
+  headerColor: string;
+  primaryColor: string;
+  primaryHoverColor: string;
+  headerTextAccent: TextAccents;
+  primaryTextAccent: TextAccents;
+}
+
 export interface SiteConfig {
   host: string;
   pathName: string;
@@ -19,6 +32,7 @@ export interface StrigoProtectedConfig {
   userAssessments: Assessment[];
   allowedAcademyDomains: string[];
   isAcademyAssessmentDebug: boolean;
+  academyColors?: OrganizationAcademyColors;
 }
 
 export interface User {

diff --git a/src/modules/document/document.ts b/src/modules/document/document.ts
@@ -1,7 +1,7 @@
 import { ACADEMY_HAT } from '../../strigo/consts';
 import * as sessionManager from '../session/session';
 import * as configManager from '../config/config';
-import { DockingSide } from '../config/config.types';
+import { DockingSide, OrganizationAcademyColors, TextAccents } from '../config/config.types';
 
 import { AppendCSSFileParams, AppendIframeParams } from './document.types';
 
@@ -237,3 +237,15 @@ export function initNavigationObserver(hostingAppWindow: Window): void {
 
   hostingAppWindow?.strigoNavigationObserver?.observer?.observe(hostingAppWindow.document, navigationObserverOptions);
 }
+
+export function customizeHatColors(academyColors: OrganizationAcademyColors): void {
+  const { primaryColor, primaryHoverColor, primaryTextAccent } = academyColors;
+
+  const wrapper: HTMLElement = document.querySelector(':root');
+  wrapper.style.setProperty('--customizable-hat-bg-color', primaryColor);
+  wrapper.style.setProperty('--customizable-hat-bg-hover-color', primaryHoverColor);
+  wrapper.style.setProperty(
+    '--customizable-hat-text-color',
+    primaryTextAccent === TextAccents.DARK ? '#000000' : '#FFFFFF'
+  );
+}
diff --git a/src/strigo/index.ts b/src/strigo/index.ts
@@ -8,6 +8,7 @@ import * as widgetFactory from '../modules/widgets/widget-factory';
 import { MessageTypes } from '../modules/listeners/listeners.types';
 import { DockingSide, User } from '../modules/config/config.types';
 import { getElementSelection } from '../modules/element-selector/element-selector';
+import { customizeHatColors } from '../modules/document/document';
 
 import { IStrigoSDK, SdkConfig, SDKSetupData, SdkTypes } from './types';
 
@@ -105,6 +106,7 @@ class StrigoSDK implements IStrigoSDK {
         Logger.setup(loggingConfig);
 
         assessmentsStorage.setupAssessmentStorage(userAssessments);
+        customizeHatColors(configuration?.academyColors);
       }
 
       configManager.setupLocalStorageConfig({

diff --git a/src/styles/strigo-academy-hat.scss b/src/styles/strigo-academy-hat.scss
@@ -1,3 +1,9 @@
+
+:root {
+  --customizable-hat-bg-color: #3d408f;
+  --customizable-hat-bg-hover-color: #696cbf;
+  --customizable-hat-text-color: #e2e2e7;
+}
 .strigo-academy-hat {
   position: fixed;
   top: 50%;
@@ -14,7 +20,7 @@
   box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2), 0px 8px 24px rgba(0, 0, 0, 0.14);
   border-radius: 8px 0px 0px 8px;
 
-  background-color: #3d408f;
+  background-color: var(--customizable-hat-bg-color);
   z-index: 9999999999;
   opacity: 0;
 
@@ -48,12 +54,12 @@
   }
 
   &:hover {
-    background-color: #696cbf;
+    background-color: var(--customizable-hat-bg-hover-color);
   }
 
   .strigo-academy-hat-icon {
     width: 13px;
     padding-bottom: 2px;
-    fill: #e2e2e7;
+    fill: var(--customizable-hat-text-color);
   }
 }