@bento-core/about 1.0.1-CDS.9 → 1.0.1-c3dc.0

package/dist/aboutBodyView.js

@@ -6,10 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _core = require("@material-ui/core");
-var _reactRouterDom = require("react-router-dom");
 var _xoomInOutView = _interopRequireDefault(require("./xoomInOutView"));
+var _AboutTableExternalLink = _interopRequireDefault(require("./assets/About-Table-ExternalLink.svg"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 const AboutBody = _ref => {
   let {
     classes,
@@ -57,9 +56,7 @@ const AboutBody = _ref => {
   // Alphetised sub ordered list
   _react.default.createElement("ol", {
     type: "a"
-  }, listObj.listWithAlpahbets.map(listObj1 => /*#__PURE__*/_react.default.createElement("li", null, listObj1.includes('$$') ? boldText(listObj1) : listObj1))) : /*#__PURE__*/_react.default.createElement("li", null, listObj.includes('$$') ? boldText(listObj) : listObj)))), contentObj.listWithBullets && /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.text
-  }, /*#__PURE__*/_react.default.createElement("ul", null, contentObj.listWithBullets.map(listObj => /*#__PURE__*/_react.default.createElement("li", null, listObj.includes('$$') ? boldText(listObj) : listObj)))), contentObj.listWithAlpahbets && /*#__PURE__*/_react.default.createElement("div", {
+  }, listObj.listWithAlpahbets.map(listObj1 => /*#__PURE__*/_react.default.createElement("li", null, listObj1.includes('$$') ? boldText(listObj1) : listObj1))) : /*#__PURE__*/_react.default.createElement("li", null, listObj.includes('$$') ? boldText(listObj) : listObj)))), contentObj.listWithAlpahbets && /*#__PURE__*/_react.default.createElement("div", {
     className: classes.text
   }, /*#__PURE__*/_react.default.createElement("ol", {
     type: "a"
@@ -68,13 +65,12 @@ const AboutBody = _ref => {
   }, contentObj.paragraph.split('$$').map(splitedParagraph => {
     // Checking for regex ()[] pattern
     if (splitedParagraph != null && (/\[(.+)\]\((.+)\)/g.test(splitedParagraph) || /\((.+)\)\[(.+)\]/g.test(splitedParagraph))) {
-      const defaultTitle = splitedParagraph.match(/\[(.*)\]/).pop();
+      const title = splitedParagraph.match(/\[(.*)\]/).pop();
       const linkAttrs = splitedParagraph.match(/\((.*)\)/).pop().split(' ');
-      const titleMatch = splitedParagraph.match(/title:\s*'([^']+)'/);
-      const title = titleMatch ? titleMatch[1].trim() : defaultTitle;
       const target = linkAttrs.find(link => link.includes('target:'));
       const url = linkAttrs.find(link => link.includes('url:'));
-      const href = linkAttrs[0];
+      const type = linkAttrs.find(link => link.includes('type:')); // 0 : no img
+      const href = splitedParagraph.match(/\((.*)\)/).pop();
       const link = /*#__PURE__*/_react.default.createElement(_core.Link, {
         title: title,
         target: target ? target.replace('target:', '') : '_blank',
@@ -82,8 +78,8 @@ const AboutBody = _ref => {
         href: url ? url.replace('url:', '') : href && href.includes('@') ? "mailto:".concat(href) : href,
         color: "inherit",
         className: classes.link
-      }, defaultTitle);
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, link, href.includes('@') || !href.includes('http') ? '' : /*#__PURE__*/_react.default.createElement("img", {
+      }, title);
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, link, type ? '' : /*#__PURE__*/_react.default.createElement("img", {
         src: externalIconImage
         // externalIconImage: 'https://raw.githubusercontent.com/CBIIT/datacommons-assets/main/common/images/logos/svgs/externalLinkIcon.svg',
         ,
@@ -191,69 +187,20 @@ const AboutBody = _ref => {
       outputHTML = /*#__PURE__*/_react.default.createElement("td", {
         className: classes.tableCell
       }, link, type ? '' : /*#__PURE__*/_react.default.createElement("img", {
-        src: externalIconImage,
+        src: _AboutTableExternalLink.default,
         alt: "outbounnd web site icon",
         className: classes.tablelinkIcon
       }));
     }
     return outputHTML;
-  }))))))), /*#__PURE__*/_react.default.createElement("br", null))) : ''), data.downloadableContentTitle && /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.downloadableContentContainer
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.downloadableContentTitle
-  }, data.downloadableContentTitle), /*#__PURE__*/_react.default.createElement("span", {
-    className: classes.text
-  }, data.downloadableContent ? data.downloadableContent.map(contentObj => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, contentObj.paragraph && /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.text
-  }, contentObj.paragraph.split('$$').map(splitedParagraph => {
-    // Checking for regex ()[] pattern
-    if (splitedParagraph != null && (/\[(.+)\]\((.+)\)/g.test(splitedParagraph) || /\((.+)\)\[(.+)\]/g.test(splitedParagraph))) {
-      const title = splitedParagraph.match(/\[(.*)\]/).pop();
-      const linkAttrs = splitedParagraph.match(/\((.*)\)/).pop().split(' ');
-      const target = linkAttrs.find(link => link.includes('target:'));
-      const url = linkAttrs.find(link => link.includes('url:'));
-      const href = splitedParagraph.match(/\((.*)\)/).pop();
-      const link = /*#__PURE__*/_react.default.createElement(_core.Link, {
-        title: title,
-        target: target ? target.replace('target:', '') : '_blank',
-        rel: "noreferrer",
-        href: url ? url.replace('url:', '') : href && href.includes('@') ? "mailto:".concat(href) : href,
-        color: "inherit",
-        className: classes.link
-      }, title);
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, link, href.includes('@') || !href.includes('http') ? '' : /*#__PURE__*/_react.default.createElement("img", {
-        src: externalIconImage
-        // externalIconImage: 'https://raw.githubusercontent.com/CBIIT/datacommons-assets/main/common/images/logos/svgs/externalLinkIcon.svg',
-        ,
-        alt: "outbounnd web site icon",
-        className: classes.linkIcon
-      }));
-    }
-    return splitedParagraph;
-  })))) : ''))), (data.imageLocation === 'right' || data.actionButtonLabel && data.actionLink) && /*#__PURE__*/_react.default.createElement(_core.Grid, {
+  }))))))), /*#__PURE__*/_react.default.createElement("br", null))) : '')), data.imageLocation === 'right' && /*#__PURE__*/_react.default.createElement(_core.Grid, {
     item: true,
     lg: 3,
     md: 3,
     sm: 12,
     xs: 12,
     className: classes.imageSection
-  }, data.image, data.actionButtonLabel && data.actionLink && /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.actionSection
-  }, data.actionTitle && /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.actionTitle
-  }, data.actionTitle), /*#__PURE__*/_react.default.createElement(_core.Link, _extends({}, data.actionLink && data.actionLink.includes('http') ? {
-    href: data.actionLink,
-    target: '_blank',
-    rel: 'noreferrer'
-  } : {
-    component: _reactRouterDom.Link,
-    to: data.actionLink
-  }, {
-    title: data.actionButtonLabel,
-    color: "inherit",
-    underline: "none",
-    className: classes.actionLink
-  }), data.actionButtonLabel))))), data.secondaryZoomImageTitle && /*#__PURE__*/_react.default.createElement("div", {
+  }, data.image))), data.secondaryZoomImageTitle && /*#__PURE__*/_react.default.createElement("div", {
     className: classes.secondayTitle
   }, data.secondaryZoomImageTitle), data.secondaryImage && /*#__PURE__*/_react.default.createElement(_xoomInOutView.default, null, data.secondaryImageData));
 };
@@ -266,9 +213,6 @@ const styles = () => ({
     lineHeight: '22px',
     maxWidth: '1440px'
   },
-  tabbedParag: {
-    paddingLeft: '40px'
-  },
   maxWidthContainer: {
     margin: '0px auto 0px auto',
     maxWidth: '1440px'
@@ -292,83 +236,32 @@ const styles = () => ({
   },
   title: props => ({
     color: props.titleColor,
-    fontWeight: '500',
-    fontSize: '24px'
+    fontWeight: 'bold'
   }),
   email: props => ({
     color: props.linkColor,
     fontWeight: 'bold'
   }),
   contentSection: {
-    padding: props => props.data.imageLocation === 'right' || props.data.actionButtonLabel && props.data.actionLink ? '8px 25px 8px 25px !important' : '8px 0px 8px 25px !important',
-    marginBottom: props => props.data.marginBottom ? props.data.marginBottom : 0,
-    float: 'left',
-    background: 'white'
+    padding: props => props.data.imageLocation === 'right' ? '8px 25px 8px 0px !important' : '8px 0px 8px 25px !important',
+    float: 'left'
   },
   imageSection: {
     float: 'left'
   },
-  actionSection: {
-    display: 'flex',
-    width: '100%',
-    padding: '25px 25px 35px',
-    flexDirection: 'column',
-    alignItems: 'center',
-    flexShrink: 0,
-    border: '0.5px solid #98B5CB',
-    background: '#EBF3F7',
-    marginTop: '19px'
-  },
-  actionTitle: {
-    color: '#7A9BB1',
-    textAlign: 'center',
-    fontFamily: 'Lato',
-    fontSize: '19px',
-    fontStyle: 'normal',
-    fontWeight: '700',
-    lineHeight: '25px',
-    letterSpacing: '0.15px',
-    textTransform: 'uppercase',
-    wordBreak: 'break-word',
-    marginBottom: '22px'
-  },
-  actionLink: {
-    display: 'flex',
-    width: '210px',
-    height: 'fit-content',
-    minHeight: '45px',
-    justifyContent: 'center',
-    alignItems: 'center',
-    gap: '10px',
-    flexShrink: '0',
-    borderRadius: '10px',
-    border: '1px solid #42779A',
-    background: '#0E6292',
-    color: '#FFF',
-    textAlign: 'center',
-    fontFamily: 'Lato',
-    fontSize: '12px',
-    fontStyle: 'normal',
-    fontWeight: 600,
-    lineHeight: 'normal',
-    letterSpacing: '1px',
-    wordBreak: 'break-word',
-    padding: '15.5px'
-  },
   aboutSection: {
-    padding: '0px 45px'
+    padding: '60px 45px'
   },
   img: {
     width: '100%'
   },
   linkIcon: {
-    width: '1em',
+    width: '20px',
     verticalAlign: 'sub',
-    margin: '0px 0px 2px 2px'
+    margin: '0px 0px 0px 2px'
   },
   link: props => ({
     color: props.linkColor,
-    fontWeight: '600',
     '&:hover': {
       color: props.linkColor
     }
@@ -390,6 +283,7 @@ const styles = () => ({
     borderCollapse: 'collapse',
     fontSize: '12px',
     fontWeight: 'bold',
+    letterSpacing: '0.025em',
     lineHeight: '30px',
     textAlign: 'left',
     width: '100%'
@@ -418,19 +312,6 @@ const styles = () => ({
   },
   MyCasesWizardStep4: {
     width: '600px'
-  },
-  downloadableContentContainer: {
-    background: '#ebebeb',
-    padding: '32px',
-    borderRadius: '8px'
-  },
-  downloadableContentTitle: {
-    fontWeight: 'bold',
-    marginBottom: '20px',
-    color: '#1280AE',
-    fontSize: '20px',
-    fontFamily: 'Lato',
-    letterSpacing: '0.025em'
   }
 });
 AboutBody.defaultProps = {

package/dist/aboutHeaderView.js

@@ -7,11 +7,6 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _core = require("@material-ui/core");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 const AboutHeader = _ref => {
   let {
     classes,
@@ -24,7 +19,7 @@ const AboutHeader = _ref => {
   }, /*#__PURE__*/_react.default.createElement("div", {
     id: "about_title",
     className: classes.titleBody
-  }, /*#__PURE__*/_react.default.createElement("h1", {
+  }, /*#__PURE__*/_react.default.createElement("span", {
     className: classes.titleText
   }, title))), /*#__PURE__*/_react.default.createElement("div", {
     className: classes.whitePadding
@@ -34,13 +29,13 @@ const styles = () => ({
   header: {
     padding: '45px'
   },
-  container: props => _objectSpread({
+  container: props => ({
     background: props.background
-  }, props.container),
-  whitePadding: props => _objectSpread({
-    height: props.whitePadding ? props.whitePadding.height : 0,
-    background: props.background
-  }, props.whitePadding),
+  }),
+  whitePadding: {
+    height: '6px',
+    background: 'white'
+  },
   titleBody: {
     textAlign: 'center'
   },
@@ -50,8 +45,7 @@ const styles = () => ({
     color: props.titleColor,
     fontFamily: 'Lato',
     fontSize: '35px',
-    fontWeight: 'bold',
-    display: 'inline'
+    fontWeight: 'bold'
   })
 });
 AboutHeader.defaultProps = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bento-core/about",
-  "version": "1.0.1-CDS.9",
+  "version": "1.0.1-c3dc.0",
   "description": "",
   "main": "dist/index.js",
   "scripts": {
@@ -13,7 +13,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@bento-core/facet-filter": "^1.0.1-CDS.5",
+    "@bento-core/facet-filter": "^1.0.1-c3dc.3",
     "lodash": "^4.17.20",
     "react-zoom-pan-pinch": "*"
   },
@@ -22,10 +22,8 @@
     "clsx": "^1.2.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.0",
-    "react-redux": "^7.2.1",
-    "react-router-dom": "^5.1.2"
+    "react-redux": "^7.2.1"
   },
   "author": "CTOS Bento Team",
-  "license": "ISC",
-  "gitHead": "61639923b9c77418e4b96267b0e4e430d0756b55"
+  "license": "ISC"
 }

package/src/aboutBodyView.js

@@ -1,11 +1,9 @@
 import React from 'react';
 import { Grid, Link, withStyles } from '@material-ui/core';
-import { Link as RouterLink } from 'react-router-dom';
 import XoomInOut from './xoomInOutView';
+import tableExternalIcon from './assets/About-Table-ExternalLink.svg';
 
-const AboutBody = ({
-  classes, data, externalIconImage,
-}) => {
+const AboutBody = ({ classes, data, externalIconImage }) => {
   function boldText(text) {
     const boldedText = text.split('$$').map((splitedText) => {
       if (splitedText != null && (/\*(.*)\*/.test(splitedText))) {
@@ -46,14 +44,6 @@ const AboutBody = ({
                       </ol>
                     </div>
                   )}
-                  {contentObj.listWithBullets && (
-                    <div className={classes.text}>
-                      {/* Alphabetised ordered list */}
-                      <ul>
-                        { contentObj.listWithBullets.map((listObj) => <li>{listObj.includes('$$') ? boldText(listObj) : listObj}</li>)}
-                      </ul>
-                    </div>
-                  )}
                   {/* Ordered List with Alphabets logic */}
                   {contentObj.listWithAlpahbets && (
                     <div className={classes.text}>
@@ -70,13 +60,12 @@ const AboutBody = ({
                       { contentObj.paragraph.split('$$').map((splitedParagraph) => {
                         // Checking for regex ()[] pattern
                         if (splitedParagraph != null && ((/\[(.+)\]\((.+)\)/g.test(splitedParagraph)) || (/\((.+)\)\[(.+)\]/g.test(splitedParagraph)))) {
-                          const defaultTitle = splitedParagraph.match(/\[(.*)\]/).pop();
+                          const title = splitedParagraph.match(/\[(.*)\]/).pop();
                           const linkAttrs = splitedParagraph.match(/\((.*)\)/).pop().split(' ');
-                          const titleMatch = splitedParagraph.match(/title:\s*'([^']+)'/);
-                          const title = titleMatch ? titleMatch[1].trim() : defaultTitle;
                           const target = linkAttrs.find((link) => link.includes('target:'));
                           const url = linkAttrs.find((link) => link.includes('url:'));
-                          const href = linkAttrs[0];
+                          const type = linkAttrs.find((link) => link.includes('type:')); // 0 : no img
+                          const href = splitedParagraph.match(/\((.*)\)/).pop();
 
                           const link = (
                             <Link
@@ -87,14 +76,14 @@ const AboutBody = ({
                               color="inherit"
                               className={classes.link}
                             >
-                              {defaultTitle}
+                              {title}
                             </Link>
                           );
 
                           return (
                             <>
                               {link}
-                              {href.includes('@') || !href.includes('http') ? '' : (
+                              {type ? '' : (
                                 <img
                                   src={externalIconImage}
                                   // externalIconImage: 'https://raw.githubusercontent.com/CBIIT/datacommons-assets/main/common/images/logos/svgs/externalLinkIcon.svg',
@@ -218,7 +207,7 @@ const AboutBody = ({
                                         {link}
                                         {type ? '' : (
                                           <img
-                                            src={externalIconImage}
+                                            src={tableExternalIcon}
                                             alt="outbounnd web site icon"
                                             className={classes.tablelinkIcon}
                                           />
@@ -240,93 +229,12 @@ const AboutBody = ({
                 </>
               )) : ''}
             </span>
-            {data.downloadableContentTitle
-        && (
-        <div className={classes.downloadableContentContainer}>
-          <div className={classes.downloadableContentTitle}>{data.downloadableContentTitle}</div>
-          <span className={classes.text}>
-            {data.downloadableContent ? data.downloadableContent.map((contentObj) => (
-              <>
-                {/* Ordered List with Numbers logic */}
-
-                {/* Paragraphs */}
-                {contentObj.paragraph && (
-                <div className={classes.text}>
-                  { contentObj.paragraph.split('$$').map((splitedParagraph) => {
-                    // Checking for regex ()[] pattern
-                    if (splitedParagraph != null && ((/\[(.+)\]\((.+)\)/g.test(splitedParagraph)) || (/\((.+)\)\[(.+)\]/g.test(splitedParagraph)))) {
-                      const title = splitedParagraph.match(/\[(.*)\]/).pop();
-                      const linkAttrs = splitedParagraph.match(/\((.*)\)/).pop().split(' ');
-                      const target = linkAttrs.find((link) => link.includes('target:'));
-                      const url = linkAttrs.find((link) => link.includes('url:'));
-                      const href = splitedParagraph.match(/\((.*)\)/).pop();
-
-                      const link = (
-                        <Link
-                          title={title}
-                          target={target ? target.replace('target:', '') : '_blank'}
-                          rel="noreferrer"
-                          href={url ? url.replace('url:', '') : (href && href.includes('@') ? `mailto:${href}` : href)}
-                          color="inherit"
-                          className={classes.link}
-                        >
-                          {title}
-                        </Link>
-                      );
-
-                      return (
-                        <>
-                          {link}
-                          {href.includes('@') || !href.includes('http') ? '' : (
-                            <img
-                              src={externalIconImage}
-                                  // externalIconImage: 'https://raw.githubusercontent.com/CBIIT/datacommons-assets/main/common/images/logos/svgs/externalLinkIcon.svg',
-                              alt="outbounnd web site icon"
-                              className={classes.linkIcon}
-                            />
-                          )}
-
-                        </>
-                      );
-                    }
-
-                    return splitedParagraph;
-                  })}
-                </div>
-                )}
-              </>
-            )) : ''}
-          </span>
-        </div>
-        )}
           </Grid>
-          {(data.imageLocation === 'right'
-            || (data.actionButtonLabel && data.actionLink))
+          {data.imageLocation === 'right'
             && (
-            <Grid item lg={3} md={3} sm={12} xs={12} className={classes.imageSection}>
-              {data.image}
-
-              {data.actionButtonLabel && data.actionLink && (
-                <div className={classes.actionSection}>
-                  {data.actionTitle && (
-                    <div className={classes.actionTitle}>
-                      {data.actionTitle}
-                    </div>
-                  )}
-                  <Link
-                    {...(data.actionLink && data.actionLink.includes('http')
-                      ? { href: data.actionLink, target: '_blank', rel: 'noreferrer' }
-                      : { component: RouterLink, to: data.actionLink })}
-                    title={data.actionButtonLabel}
-                    color="inherit"
-                    underline="none"
-                    className={classes.actionLink}
-                  >
-                    {data.actionButtonLabel}
-                  </Link>
-                </div>
-              )}
-            </Grid>
+              <Grid item lg={3} md={3} sm={12} xs={12} className={classes.imageSection}>
+                {data.image}
+              </Grid>
             )}
         </Grid>
       </div>
@@ -346,9 +254,6 @@ const styles = () => ({
     lineHeight: '22px',
     maxWidth: '1440px',
   },
-  tabbedParag: {
-    paddingLeft: '40px',
-  },
   maxWidthContainer: {
     margin: '0px auto 0px auto',
     maxWidth: '1440px',
@@ -372,84 +277,33 @@ const styles = () => ({
   },
   title: (props) => ({
     color: props.titleColor,
-    fontWeight: '500',
-    fontSize: '24px',
+    fontWeight: 'bold',
   }),
   email: (props) => ({
     color: props.linkColor,
     fontWeight: 'bold',
   }),
   contentSection: {
-    padding: (props) => ((props.data.imageLocation === 'right' || (props.data.actionButtonLabel && props.data.actionLink))
-      ? '8px 25px 8px 25px !important' : '8px 0px 8px 25px !important'),
-    marginBottom: (props) => (props.data.marginBottom ? props.data.marginBottom : 0),
+    padding: (props) => (props.data.imageLocation === 'right'
+      ? '8px 25px 8px 0px !important' : '8px 0px 8px 25px !important'),
     float: 'left',
-    background: 'white',
   },
   imageSection: {
     float: 'left',
   },
-  actionSection: {
-    display: 'flex',
-    width: '100%',
-    padding: '25px 25px 35px',
-    flexDirection: 'column',
-    alignItems: 'center',
-    flexShrink: 0,
-    border: '0.5px solid #98B5CB',
-    background: '#EBF3F7',
-    marginTop: '19px',
-  },
-  actionTitle: {
-    color: '#7A9BB1',
-    textAlign: 'center',
-    fontFamily: 'Lato',
-    fontSize: '19px',
-    fontStyle: 'normal',
-    fontWeight: '700',
-    lineHeight: '25px',
-    letterSpacing: '0.15px',
-    textTransform: 'uppercase',
-    wordBreak: 'break-word',
-    marginBottom: '22px',
-  },
-  actionLink: {
-    display: 'flex',
-    width: '210px',
-    height: 'fit-content',
-    minHeight: '45px',
-    justifyContent: 'center',
-    alignItems: 'center',
-    gap: '10px',
-    flexShrink: '0',
-    borderRadius: '10px',
-    border: '1px solid #42779A',
-    background: '#0E6292',
-    color: '#FFF',
-    textAlign: 'center',
-    fontFamily: 'Lato',
-    fontSize: '12px',
-    fontStyle: 'normal',
-    fontWeight: 600,
-    lineHeight: 'normal',
-    letterSpacing: '1px',
-    wordBreak: 'break-word',
-    padding: '15.5px',
-  },
   aboutSection: {
-    padding: '0px 45px',
+    padding: '60px 45px',
   },
   img: {
     width: '100%',
   },
   linkIcon: {
-    width: '1em',
+    width: '20px',
     verticalAlign: 'sub',
-    margin: '0px 0px 2px 2px',
+    margin: '0px 0px 0px 2px',
   },
   link: (props) => ({
     color: props.linkColor,
-    fontWeight: '600',
     '&:hover': {
       color: props.linkColor,
     },
@@ -471,6 +325,7 @@ const styles = () => ({
     borderCollapse: 'collapse',
     fontSize: '12px',
     fontWeight: 'bold',
+    letterSpacing: '0.025em',
     lineHeight: '30px',
     textAlign: 'left',
     width: '100%',
@@ -501,19 +356,6 @@ const styles = () => ({
   MyCasesWizardStep4: {
     width: '600px',
   },
-  downloadableContentContainer: {
-    background: '#ebebeb',
-    padding: '32px',
-    borderRadius: '8px',
-  },
-  downloadableContentTitle: {
-    fontWeight: 'bold',
-    marginBottom: '20px',
-    color: '#1280AE',
-    fontSize: '20px',
-    fontFamily: 'Lato',
-    letterSpacing: '0.025em',
-  },
 });
 
 AboutBody.defaultProps = {

package/src/aboutHeaderView.js

@@ -4,7 +4,7 @@ import { withStyles } from '@material-ui/core';
 const AboutHeader = ({ classes, title }) => (
   <div className={classes.container}>
     <div className={classes.header}>
-      <div id="about_title" className={classes.titleBody}><h1 className={classes.titleText}>{title}</h1></div>
+      <div id="about_title" className={classes.titleBody}><span className={classes.titleText}>{title}</span></div>
     </div>
     <div className={classes.whitePadding} />
   </div>
@@ -16,13 +16,11 @@ const styles = () => ({
   },
   container: (props) => ({
     background: props.background,
-    ...props.container,
-  }),
-  whitePadding: (props) => ({
-    height: props.whitePadding ? props.whitePadding.height : 0,
-    background: props.background,
-    ...props.whitePadding,
   }),
+  whitePadding: {
+    height: '6px',
+    background: 'white',
+  },
   titleBody: {
     textAlign: 'center',
   },
@@ -33,7 +31,6 @@ const styles = () => ({
     fontFamily: 'Lato',
     fontSize: '35px',
     fontWeight: 'bold',
-    display: 'inline',
   }),
 });