Merge pull request #1630 from Sefaria/feature/sc-20508/allow-backgrou…

…nd-color-as-an-option-for-banners Allow the background color of a banner to be customized in Strapi
Sefaria · Sep 11, 2023 · fda3ca8 · fda3ca8
2 parents 80e4d44 + a812c8c
commit fda3ca8
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 10 deletions.
diff --git a/static/js/Misc.jsx b/static/js/Misc.jsx
@@ -2278,7 +2278,8 @@ const InterruptingMessage = ({
 InterruptingMessage.displayName = "InterruptingMessage";
 
 const Banner = ({ onClose }) => {
-  const [bannerShowDelayHasElapsed, setBannerShowDelayHasElapsed] = useState(false);
+  const [bannerShowDelayHasElapsed, setBannerShowDelayHasElapsed] =
+    useState(false);
   const [hasInteractedWithBanner, setHasInteractedWithBanner] = useState(false);
   const strapi = useContext(StrapiDataContext);
 
@@ -2306,7 +2307,11 @@ const Banner = ({ onClose }) => {
 
   const shouldShow = () => {
     if (!strapi.banner) return false;
-    if (Sefaria.interfaceLang === 'hebrew' && !strapi.banner.locales.includes('he')) return false;
+    if (
+      Sefaria.interfaceLang === "hebrew" &&
+      !strapi.banner.locales.includes("he")
+    )
+      return false;
     if (hasBannerBeenInteractedWith(strapi.banner.internalBannerName))
       return false;
 
@@ -2340,15 +2345,11 @@ const Banner = ({ onClose }) => {
     if (onClose) onClose();
     markBannerAsHasBeenInteractedWith(strapi.banner.internalBannerName);
     setHasInteractedWithBanner(true);
-    trackBannerInteraction(
-      strapi.banner.internalBannerName,
-      eventDescription
-    );
+    trackBannerInteraction(strapi.banner.internalBannerName, eventDescription);
   };
 
   useEffect(() => {
     if (shouldShow()) {
-
       const timeoutId = setTimeout(() => {
         // s2 is the div that contains the React root and needs to be manipulated by traditional DOM methods
         if (document.getElementById("s2").classList.contains("headerOnly")) {
@@ -2365,10 +2366,22 @@ const Banner = ({ onClose }) => {
   if (!hasInteractedWithBanner) {
     return (
       <OnInView onVisible={trackBannerImpression}>
-        <div id="bannerMessage" className={bannerShowDelayHasElapsed ? "" : "hidden"}>
+        <div
+          id="bannerMessage"
+          className={bannerShowDelayHasElapsed ? "" : "hidden"}
+          style={
+            strapi.banner.bannerBackgroundColor && {
+              backgroundColor: strapi.banner.bannerBackgroundColor,
+            }
+          }
+        >
           <div id="bannerMessageContent">
             <div id="bannerTextBox">
-              <InterfaceText markdown={replaceNewLinesWithLinebreaks(strapi.banner.bannerText)} />
+              <InterfaceText
+                markdown={replaceNewLinesWithLinebreaks(
+                  strapi.banner.bannerText
+                )}
+              />
             </div>
             <div id="bannerButtonBox">
               <a
@@ -2385,7 +2398,6 @@ const Banner = ({ onClose }) => {
               </a>
             </div>
           </div>
-          <div id="bannerMessageClose">×</div>
           <div id="bannerMessageClose" onClick={closeBanner}>
             ×
           </div>

diff --git a/static/js/context.js b/static/js/context.js
@@ -56,6 +56,7 @@ function StrapiDataProvider({ children }) {
                 buttonText
                 buttonURL
                 showDelay
+                bannerBackgroundColor
                 createdAt
                 locale
                 localizations {