diy-template-components 0.2.56 → 0.2.58

package/build/index.es.js

@@ -1,12 +1,12 @@
-function ___$insertStyle(css) {
-    if (!css || typeof window === 'undefined') {
-        return;
-    }
-    const style = document.createElement('style');
-    style.setAttribute('type', 'text/css');
-    style.innerHTML = css;
-    document.head.appendChild(style);
-    return css;
+function ___$insertStyle(css) {
+    if (!css || !window) {
+        return;
+    }
+    const style = document.createElement('style');
+    style.setAttribute('type', 'text/css');
+    style.innerHTML = css;
+    document.head.appendChild(style);
+    return css;
 }
 
 import React, { createContext, useContext, forwardRef, useRef, useEffect, useState, useMemo, useLayoutEffect, Suspense, memo, lazy, Fragment } from 'react';
@@ -1599,7 +1599,8 @@ const useSectionStyles$9 = createUseStyles(theme => ({
   footerLogoImage: {
     objectFit: ({
       isCustomWebsite
-    }) => isCustomWebsite ? 'contain' : ''
+    }) => isCustomWebsite ? 'contain' : '',
+    maxHeight: '55px'
   },
   '@media screen and (max-width: 767px)': {
     section: {
@@ -6942,33 +6943,26 @@ const useWebinarPromotionPage = createUseStyles(theme => {
       borderRadius: '10px'
     },
     bannerContainer: {
+      width: '100%',
       background: '#EB5757',
       color: '#fff',
       textAlign: 'center',
-      padding: '6.5px 18px',
+      padding: '10px 10px 23px 40px',
+      wordWrap: 'break-word',
       position: 'relative',
-      '&:after': {
-        width: '0',
-        height: '-webkit-fill-available',
-        border: '11.5px solid transparent',
-        position: 'absolute',
-        content: '""',
-        borderTopColor: '#EB5757',
-        right: '-23px',
-        top: '0px',
-        borderLeftColor: ' #EB5757'
-      },
-      '&:before': {
-        width: 0,
-        height: 0,
-        border: '22.5px solid transparent',
-        position: 'absolute',
-        content: '""',
-        borderBottomColor: '#EB5757',
-        right: '-23px',
-        top: '-10.5px'
+      fontSize: '18px',
+      transform: 'rotate(180deg)',
+      clipPath: 'polygon(0 0, 100% 0, 100% calc(100% - 10px), 0 calc(100% - 10px), 15px calc(50% - 10px/2))',
+      marginBottom: '16px'
+    },
+    '@media screen and (max-width: 1024px)': {
+      bannerContainer: {
+        width: '400px'
       }
     },
+    bannerContainerText: {
+      transform: 'rotate(180deg)'
+    },
     courseDetailsTags: {
       marginTop: '16px',
       display: 'flex'
@@ -7116,11 +7110,15 @@ const SingleVideoSlide$1 = props => {
     className: classes.iframeSuperContainer
   }, /*#__PURE__*/React.createElement("div", {
     className: classes.videoDetails
-  }, data?.isPaid !== 0 && (checkIfOfferIsValid() || data.offerPriceValidFor > 0) && data.offerPriceValidFor > conversions && /*#__PURE__*/React.createElement("div", null, data.offerPriceValidFor - conversions > 0 && data.discount && (data.offerPriceEndDate ? checkIfOfferIsValid() : true) ? /*#__PURE__*/React.createElement("h3", {
+  }, data?.isPaid !== 0 && (checkIfOfferIsValid() || data.offerPriceValidFor > 0) && data.offerPriceValidFor > conversions && /*#__PURE__*/React.createElement("div", null, data.offerPriceValidFor - conversions > 0 && data.discount && (data.offerPriceEndDate ? checkIfOfferIsValid() : true) ? /*#__PURE__*/React.createElement("div", {
     className: classes.bannerContainer
-  }, "Hurry up! Offer left for", ' ', data.offerPriceValidFor - conversions, ' ', data.offerPriceValidFor - conversions > 1 ? 'users now' : 'user only') : checkIfOfferIsValid() && /*#__PURE__*/React.createElement("h3", {
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classes.bannerContainerText
+  }, "Hurry up! Offer left for", ' ', data.offerPriceValidFor - conversions, ' ', data.offerPriceValidFor - conversions > 1 ? 'users now' : 'user only')) : checkIfOfferIsValid() && /*#__PURE__*/React.createElement("div", {
     className: classes.bannerContainer
-  }, "Hurry up! Offer for limited period only")), /*#__PURE__*/React.createElement("h3", {
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classes.bannerContainerText
+  }, "Hurry up! Offer for limited period only"))), /*#__PURE__*/React.createElement("h3", {
     ref: data?.videoTextHeading?.refSetter,
     className: classes.videoDetailsHeading,
     dangerouslySetInnerHTML: {
@@ -7379,33 +7377,26 @@ const useCoursePromotionPage = createUseStyles(theme => {
       paddingTop: '10px'
     },
     bannerContainer: {
+      width: '100%',
       background: '#EB5757',
       color: '#fff',
       textAlign: 'center',
-      padding: '6.5px 18px',
+      padding: '10px 10px 23px 40px',
+      wordWrap: 'break-word',
       position: 'relative',
-      '&:after': {
-        width: '0',
-        height: '0',
-        border: '11.5px solid transparent',
-        position: 'absolute',
-        content: '""',
-        borderTopColor: '#EB5757',
-        right: '-23px',
-        top: '0px',
-        borderLeftColor: ' #EB5757'
-      },
-      '&:before': {
-        width: 0,
-        height: 0,
-        border: '22.5px solid transparent',
-        position: 'absolute',
-        content: '""',
-        borderBottomColor: '#EB5757',
-        right: '-23px',
-        top: '-10.5px'
+      fontSize: '18px',
+      transform: 'rotate(180deg)',
+      clipPath: 'polygon(0 0, 100% 0, 100% calc(100% - 10px), 0 calc(100% - 10px), 15px calc(50% - 10px/2))',
+      marginBottom: '16px'
+    },
+    '@media screen and (max-width: 1024px)': {
+      bannerContainer: {
+        width: '400px'
       }
     },
+    bannerContainerText: {
+      transform: 'rotate(180deg)'
+    },
     emblemContainer: {
       display: 'flex',
       justifyContent: 'space-between',
@@ -7601,11 +7592,15 @@ const SingleVideoSlide = props => {
     className: classes.iframeSuperContainer
   }, /*#__PURE__*/React.createElement("div", {
     className: classes.videoDetails
-  }, (checkIfOfferIsValid() || data.offerPriceValidFor > 0) && data.offerPriceValidFor > conversions && /*#__PURE__*/React.createElement("div", null, data.offerPriceValidFor - conversions > 0 && data.discount && (data.endDate ? checkIfOfferIsValid() : true) ? /*#__PURE__*/React.createElement("h3", {
+  }, (checkIfOfferIsValid() || data.offerPriceValidFor > 0) && data.offerPriceValidFor > conversions && /*#__PURE__*/React.createElement("div", null, data.offerPriceValidFor - conversions > 0 && data.discount && (data.endDate ? checkIfOfferIsValid() : true) ? /*#__PURE__*/React.createElement("div", {
     className: classes.bannerContainer
-  }, "Hurry up! Offer left for", ' ', data.offerPriceValidFor - conversions, " users now") : checkIfOfferIsValid() && /*#__PURE__*/React.createElement("h3", {
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classes.bannerContainerText
+  }, "Hurry up! Offer left for", ' ', data.offerPriceValidFor - conversions, " users now")) : checkIfOfferIsValid() && /*#__PURE__*/React.createElement("div", {
     className: classes.bannerContainer
-  }, "Hurry up! Offer for limited period only")), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classes.bannerContainerText
+  }, "Hurry up! Offer for limited period only"))), /*#__PURE__*/React.createElement("div", {
     className: classes.emblemContainer
   }, data?.courseOverviewData?.courseTagList.length && data?.courseOverviewData?.courseTagList?.map(data => {
     return /*#__PURE__*/React.createElement("div", {
@@ -8154,7 +8149,7 @@ const useTilesStyles = createUseStyles(theme => {
       left: '7%',
       color: 'white',
       fontWeight: '600',
-      fontSize: '28px',
+      fontSize: '20px',
       width: '150px'
     },
     row: {