diy-template-components 2.0.32 → 2.0.34

package/build/index.es.js

@@ -9695,6 +9695,11 @@ const useAboutInstituteStyles = createUseStyles(theme => ({
     fontSize: '24px',
     fontWeight: '400'
   },
+  metaChild: {
+    fontSize: '16px',
+    fontStyle: 'normal',
+    fontWeight: '400'
+  },
   aboutInstWrapper: {
     padding: '64px 128px',
     display: 'flex',
@@ -9713,31 +9718,27 @@ const useAboutInstituteStyles = createUseStyles(theme => ({
   },
   aboutInstHeader: {
     fontSize: theme.typography.fontSize.h2,
-    lineHeight: '70px',
     color: theme?.palette?.font?.default,
-    marginTop: '8px',
-    marginBottom: theme.spacing.margin.tiny,
+    margin: '0px',
+    marginBottom: '56px',
     textAlign: 'center'
   },
   imageContainer: {
-    padding: '24px',
-    flex: '0 0 30%',
-    // height: '240px',
-    borderRadius: '16px',
-    border: '1px solid var(--stroke, #D8E0F0)',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center'
+    width: '240px',
+    height: '240px'
+    // borderRadius: '16px',
+    // border: '1px solid var(--stroke, #D8E0F0)',
   },
+
   image: {
-    maxWidth: '100%',
-    maxHeight: '100%',
-    margin: 'auto',
-    borderRadius: '50%'
+    width: '100%',
+    height: '100%',
+    borderRadius: '16px',
+    border: '1px solid var(--stroke, #D8E0F0)'
   },
   infoContainer: {
     padding: '24px',
-    gap: '24px',
+    gap: '12px',
     display: 'flex',
     flexDirection: 'column',
     borderRadius: '16px',
@@ -9784,44 +9785,61 @@ const useAboutInstituteStyles = createUseStyles(theme => ({
   infoDetails: {
     display: 'flex',
     flexDirection: 'Column',
-    gap: '12px'
+    gap: '2px'
   },
   infoContent: {
     display: 'flex',
     flexDirection: 'Column',
-    gap: '16px'
+    gap: '2px'
   },
   instHeading: {
     color: 'var(--Black, #0A1629)',
-    fontSize: '26px',
+    fontSize: '32px',
+    fontStyle: 'normal',
+    fontWeight: '600'
+  },
+  aboutText: {
+    fontSize: '24px',
     fontStyle: 'normal',
     fontWeight: '600'
   },
   instAbout: {
-    color: 'var(--Black, #333)',
-    fontSize: '22px',
+    fontSize: '14px',
     fontStyle: 'normal',
-    fontWeight: '500',
+    fontWeight: '400',
     wordBreak: 'break-word'
   },
   highlightText: {
     color: 'var(--Black, #0A1629)',
-    fontSize: '26px',
+    fontSize: '24px',
     fontStyle: 'normal',
     fontWeight: '600',
     wordBreak: 'break-word'
   },
+  highlightHeading: {
+    fontSize: '16px',
+    fontStyle: 'normal',
+    fontWeight: '400'
+  },
   // SMALL SCREEN
   '@media screen and (max-width: 767px)': {
+    aboutInstText: {
+      fontSize: '16px'
+    },
     imageContainer: {
-      padding: '15px',
       height: '150px',
+      width: '150px'
+    },
+    image: {
       borderRadius: '10px',
       border: '1px solid var(--stroke, #D8E0F0)'
     },
     infoContainer: {
       gap: '16px'
     },
+    instHeading: {
+      fontSize: '24px'
+    },
     cardWrapper: {
       flexDirection: 'column',
       gap: '8px'
@@ -9830,10 +9848,10 @@ const useAboutInstituteStyles = createUseStyles(theme => ({
       padding: '16px'
     },
     aboutInstHeader: {
-      lineHeight: '36px',
       color: theme?.palette?.font?.default,
-      margin: '0px 0 12px 0',
-      textAlign: 'center'
+      margin: '0px 0 24px 0',
+      textAlign: 'center',
+      fontSize: '20px'
     },
     contentWrapper: {
       gap: '8px'
@@ -9849,6 +9867,21 @@ const useAboutInstituteStyles = createUseStyles(theme => ({
     },
     infoContent: {
       gap: '8px'
+    },
+    metaChild: {
+      fontSize: '12px'
+    },
+    aboutText: {
+      fontSize: '16px'
+    },
+    instAbout: {
+      fontSize: '12px'
+    },
+    highlightText: {
+      fontSize: '16px'
+    },
+    highlightHeading: {
+      fontSize: '12px'
     }
   }
 }));
@@ -9904,6 +9937,7 @@ function ABOUT_INSTITUTE({
     width: '20px',
     height: '20px'
   }), /*#__PURE__*/React.createElement("div", {
+    className: classes.metaChild,
     ref: nodeData?.spec?.refSetter,
     dangerouslySetInnerHTML: {
       __html: nodeData?.spec?.metadata?.value
@@ -9916,6 +9950,7 @@ function ABOUT_INSTITUTE({
     width: '20px',
     height: '20px'
   }), /*#__PURE__*/React.createElement("div", {
+    className: classes.metaChild,
     ref: nodeData?.qual?.refSetter,
     dangerouslySetInnerHTML: {
       __html: nodeData?.qual?.metadata?.value
@@ -9928,6 +9963,7 @@ function ABOUT_INSTITUTE({
     width: '20px',
     height: '20px'
   }), /*#__PURE__*/React.createElement("div", {
+    className: classes.metaChild,
     ref: nodeData?.exp?.refSetter,
     dangerouslySetInnerHTML: {
       __html: nodeData?.exp?.metadata?.value
@@ -9935,8 +9971,9 @@ function ABOUT_INSTITUTE({
   })) : null)), nodeData?.content?.metadata?.value ? /*#__PURE__*/React.createElement("div", {
     className: classes.infoContent
   }, /*#__PURE__*/React.createElement("div", {
-    className: classes.instAbout
+    className: classes.aboutText
   }, "About"), /*#__PURE__*/React.createElement("div", {
+    className: classes.instAbout,
     ref: nodeData?.content?.refSetter,
     dangerouslySetInnerHTML: {
       __html: nodeData?.content?.metadata?.value
@@ -9958,7 +9995,9 @@ function ABOUT_INSTITUTE({
       dangerouslySetInnerHTML: {
         __html: highlightNodeData?.courses?.metadata?.value
       }
-    }), /*#__PURE__*/React.createElement("span", null, "Courses")), /*#__PURE__*/React.createElement(Icon, {
+    }), /*#__PURE__*/React.createElement("span", {
+      className: classes.highlightHeading
+    }, "Courses")), /*#__PURE__*/React.createElement(Icon, {
       name: 'BookSaved',
       color: theme.palette.font.primary,
       width: '32px',
@@ -9973,7 +10012,9 @@ function ABOUT_INSTITUTE({
       dangerouslySetInnerHTML: {
         __html: highlightNodeData?.students?.metadata?.value
       }
-    }), /*#__PURE__*/React.createElement("span", null, "Active Students")), /*#__PURE__*/React.createElement(Icon, {
+    }), /*#__PURE__*/React.createElement("span", {
+      className: classes.highlightHeading
+    }, "Active Students")), /*#__PURE__*/React.createElement(Icon, {
       name: 'GroupProfile',
       color: theme.palette.font.primary,
       width: '32px',