diy-template-components 0.2.39 → 0.2.41

package/build/index.es.js

@@ -94,9 +94,11 @@ const useSectionStyles$a = createUseStyles(theme => ({
     }
   },
   imageAnchor: {
-    textDecoration: 'none',
-    display: 'flex',
-    alignItems: 'center'
+    pointerEvents: 'auto',
+    cursor: 'default',
+    position: 'relative',
+    height: '55px',
+    width: 'inherit'
   },
   optionsContainer: {
     display: 'flex',
@@ -137,7 +139,20 @@ const useSectionStyles$a = createUseStyles(theme => ({
   },
   imageDiv: {
     display: 'flex',
-    alignItems: 'center'
+    position: 'relative',
+    maxHeight: '55px',
+    alignItems: 'center',
+    width: '25%'
+  },
+  imageDivImageMobile: {},
+  imageAnchorMobile: {
+    pointerEvents: 'auto',
+    cursor: 'default',
+    width: '100%',
+    maxWidth: '80px',
+    cursor: 'default',
+    height: '46px',
+    position: 'relative'
   },
   appNameClass: {
     fontStyle: 'normal',
@@ -150,6 +165,7 @@ const useSectionStyles$a = createUseStyles(theme => ({
   mobileContent: {
     display: 'flex',
     alignItems: 'center',
+    width: "100%",
     '& img': {
       marginRight: '8px',
       maxWidth: '80px',
@@ -192,7 +208,8 @@ const useSectionStyles$a = createUseStyles(theme => ({
     padding: '8px',
     display: 'flex',
     alignItems: 'center',
-    justifyContent: 'center'
+    justifyContent: 'center',
+    width: "10%"
   },
   '@media screen and (max-width: 767px)': {
     optionsContainer: {
@@ -1083,6 +1100,42 @@ function OptionList({
   }) : null));
 }
 
+const NextImageRenderer = ({
+  src,
+  ...props
+}) => {
+  const {
+    isCustomWebsite
+  } = useContext(PageContext);
+  const imageLoader = ({
+    src,
+    quality,
+    width
+  }) => {
+    return `${process.env.NEXT_PUBLIC_ENV_ASSET_PREFIX}/_next/image?url=${src}&q=${quality || 75}&w=${width}`;
+  };
+  let {
+    refSetter,
+    className
+  } = props;
+  if (isCustomWebsite) {
+    const NextImage = require('next/image').default;
+    return /*#__PURE__*/React.createElement(NextImage, _extends({
+      loader: imageLoader,
+      src: src,
+      layout: 'fill',
+      ref: refSetter,
+      className: className
+    }, props));
+  } else {
+    return /*#__PURE__*/React.createElement("img", {
+      ref: refSetter,
+      className: className,
+      src: src
+    });
+  }
+};
+
 function DesktopHeader({
   header,
   navData,
@@ -1132,9 +1185,12 @@ function DesktopHeader({
       pointerEvents: isLandingPage ? 'none' : 'auto',
       cursor: isLandingPage ? 'not-allowed' : 'default'
     }
-  }, /*#__PURE__*/React.createElement("img", {
-    src: header?.websiteLogo
-  })) : null, isTutorWebsite && header?.appName ? /*#__PURE__*/React.createElement("a", {
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classes?.imageDivImage
+  }, /*#__PURE__*/React.createElement(NextImageRenderer, {
+    src: header?.websiteLogo,
+    className: classes.imageDivImageNext
+  }))) : null, isTutorWebsite && header?.appName ? /*#__PURE__*/React.createElement("a", {
     href: logoUrl
   }, /*#__PURE__*/React.createElement("p", {
     className: classes.appNameClass
@@ -1294,14 +1350,17 @@ function MobileHeader({
     width: '24px'
   })), header?.websiteLogo ? /*#__PURE__*/React.createElement("a", {
     href: logoUrl,
-    className: classes.imageAnchor,
+    className: classes.imageAnchorMobile,
     style: {
       pointerEvents: isLandingPage ? 'none' : 'auto',
       cursor: isLandingPage ? 'not-allowed' : 'default'
     }
-  }, /*#__PURE__*/React.createElement("img", {
-    src: header?.websiteLogo
-  })) : null, isTutorWebsite && header?.appName ? /*#__PURE__*/React.createElement("p", {
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classes?.imageDivImageMobile
+  }, /*#__PURE__*/React.createElement(NextImageRenderer, {
+    src: header?.websiteLogo,
+    className: classes.imageDivImageNext
+  }))) : null, isTutorWebsite && header?.appName ? /*#__PURE__*/React.createElement("p", {
     className: classes.mobileAppNameClass
   }, " ", header?.appName) : null), downloadLink), sideMenu ? /*#__PURE__*/React.createElement("div", {
     className: classes.mobileMenu
@@ -1514,44 +1573,6 @@ const useSectionStyles$9 = createUseStyles(theme => ({
   }
 }));
 
-const NextImageRenderer = ({
-  src,
-  ...props
-}) => {
-  const {
-    isCustomWebsite
-  } = useContext(PageContext);
-  const imageLoader = ({
-    src,
-    quality
-  }) => {
-    return `${process.env.NEXT_PUBLIC_ENV_ASSET_PREFIX}/_next/image?url=${src}&q=${quality || 75}`;
-  };
-
-  // const imageUrl = `${process.env.NEXT_PUBLIC_ENV_ASSET_PREFIX}/_next/image?url=${src}&q=${quality || 75}`;
-
-  let {
-    refSetter,
-    className
-  } = props;
-  if (isCustomWebsite) {
-    const NextImage = require('next/image').default;
-    return /*#__PURE__*/React.createElement(NextImage, _extends({
-      loader: imageLoader,
-      src: src,
-      layout: 'fill',
-      ref: refSetter,
-      className: className
-    }, props));
-  } else {
-    return /*#__PURE__*/React.createElement("img", {
-      ref: refSetter,
-      className: className,
-      src: src
-    });
-  }
-};
-
 function Footer({
   data
 }) {