fix: replace injected Plugins directory with dependency

---------

Co-authored-by: jsnwesson <jsnwesson@users.noreply.github.com>

.github/workflows/ci.yml

@@ -14,10 +14,10 @@ jobs:
         - lint
         - test
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v3
     - name: Setup Nodejs Env
       run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
-    - uses: actions/setup-node@v4
+    - uses: actions/setup-node@v3
       with:
         node-version: ${{ env.NODE_VER }}
     - run: make requirements

Makefile

@@ -60,14 +60,13 @@ pull_translations:
 	rm -rf src/i18n/messages
 	mkdir src/i18n/messages
 	cd src/i18n/messages \
-      && atlas pull $(ATLAS_OPTIONS) \
+      && atlas pull --filter=$(transifex_langs) \
-               translations/frontend-platform/src/i18n/messages:frontend-platform \
                translations/paragon/src/i18n/messages:paragon \
                translations/frontend-component-header/src/i18n/messages:frontend-component-header \
                translations/frontend-component-footer/src/i18n/messages:frontend-component-footer \
                translations/frontend-app-profile/src/i18n/messages:frontend-app-profile
 
-	$(intl_imports) frontend-platform paragon frontend-component-header frontend-component-footer frontend-app-profile
+	$(intl_imports) paragon frontend-component-header frontend-component-footer frontend-app-profile
 endif
 
 # This target is used by Travis.

catalog-info.yaml

@@ -3,7 +3,7 @@
 apiVersion: backstage.io/v1alpha1
 kind: Component
 metadata:
-  name: 'frontend-app-profile'
+  name: 'Profile'
   description: 'This is a micro-frontend application responsible for the display and updating of user profiles.'
   links:
     - url: 'https://github.com/openedx/frontend-app-profile/blob/master/README.rst'

jest.config.js

@@ -1,7 +1,7 @@
 const { createConfig } = require('@edx/frontend-build');
 
 module.exports = createConfig('jest', {
-  setupFilesAfterEnv: [
+  setupFiles: [
     '<rootDir>/src/setupTest.js',
   ],
 });

package.json

@@ -29,20 +29,19 @@
   ],
   "dependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/frontend-component-footer": "12.7.0",
+    "@edx/frontend-component-footer": "12.5.1",
-    "@edx/frontend-component-header": "4.11.0",
+    "@edx/frontend-component-header": "4.8.0",
-    
     "@edx/frontend-platform": "5.6.1",
-    "@edx/openedx-atlas": "^0.6.0",
+    "@edx/frontend-plugin-framework": "openedx/frontend-plugin-framework#jwesson/install-plugins",
     "@edx/paragon": "^20.44.0",
-    "@fortawesome/fontawesome-svg-core": "6.5.1",
+    "@fortawesome/fontawesome-svg-core": "1.2.36",
-    "@fortawesome/free-brands-svg-icons": "6.5.1",
+    "@fortawesome/free-brands-svg-icons": "5.15.4",
-    "@fortawesome/free-regular-svg-icons": "6.5.1",
+    "@fortawesome/free-regular-svg-icons": "5.15.4",
-    "@fortawesome/free-solid-svg-icons": "6.5.1",
+    "@fortawesome/free-solid-svg-icons": "5.15.4",
     "@fortawesome/react-fontawesome": "0.2.0",
     "@pact-foundation/pact": "^11.0.2",
-    "classnames": "2.5.1",
+    "classnames": "2.3.2",
-    "core-js": "3.35.1",
+    "core-js": "3.33.1",
     "history": "5.3.0",
     "lodash.camelcase": "4.3.0",
     "lodash.get": "4.4.2",
@@ -51,16 +50,17 @@
     "prop-types": "15.8.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",
+    "react-error-boundary": "^4.0.11",
     "react-helmet": "6.1.0",
     "react-redux": "7.2.9",
-    "react-router": "6.22.0",
+    "react-router": "6.16.0",
-    "react-router-dom": "6.22.0",
+    "react-router-dom": "6.16.0",
     "redux": "4.2.1",
-    "@redux-devtools/extension": "3.0.0",
+    "redux-devtools-extension": "2.13.9",
     "redux-logger": "3.0.6",
-    "redux-saga": "1.3.0",
+    "redux-saga": "1.2.3",
     "redux-thunk": "2.4.2",
-    "regenerator-runtime": "0.14.1",
+    "regenerator-runtime": "0.14.0",
     "reselect": "4.1.8",
     "universal-cookie": "4.0.4"
   },
@@ -68,11 +68,14 @@
     "@commitlint/cli": "17.8.1",
     "@commitlint/config-angular": "17.8.1",
     "@edx/browserslist-config": "^1.1.1",
-    "@edx/frontend-build": "13.0.14",
+    "@edx/frontend-build": "13.0.4",
     "@edx/reactifex": "2.2.0",
-    "@testing-library/jest-dom": "5.17.0",
     "@testing-library/react": "12.1.5",
+    "@wojtekmaj/enzyme-adapter-react-17": "0.8.0",
+    "codecov": "3.8.3",
+    "enzyme": "3.11.0",
     "glob": "10.3.10",
+    "react-test-renderer": "17.0.2",
     "reactifex": "1.1.1",
     "redux-mock-store": "1.5.4"
   }

plugins/Plugin.jsx

@@ -0,0 +1,93 @@
+'use client';
+
+import React, {
+  useEffect, useMemo, useState,
+} from 'react';
+import PropTypes from 'prop-types';
+import { ErrorBoundary } from 'react-error-boundary';
+import { logError } from '@edx/frontend-platform/logging';
+import {
+  dispatchMountedEvent, dispatchReadyEvent, dispatchUnmountedEvent, useHostEvent,
+} from './data/hooks';
+import { PLUGIN_RESIZE } from './data/constants';
+
+// see example-plugin-app/src/PluginOne.jsx for example of customizing errorFallback
+function errorFallbackDefault() {
+  return (
+    <div>
+      <h2>
+        Oops! An error occurred. Please refresh the screen to try again.
+      </h2>
+    </div>
+  );
+}
+
+// eslint-disable-next-line react/function-component-definition
+export default function Plugin({
+  children, className, style, ready, errorFallbackProp,
+}) {
+  const [dimensions, setDimensions] = useState({
+    width: null,
+    height: null,
+  });
+
+  const finalStyle = useMemo(() => ({
+    ...dimensions,
+    ...style,
+  }), [dimensions, style]);
+
+  const errorFallback = errorFallbackProp || errorFallbackDefault;
+
+  // Error logging function
+  // Need to confirm: When an error is caught here, the logging will be sent to the child MFE's logging service
+  const logErrorToService = (error, info) => {
+    logError(error, { stack: info.componentStack });
+  };
+
+  useHostEvent(PLUGIN_RESIZE, ({ payload }) => {
+    setDimensions({
+      width: payload.width,
+      height: payload.height,
+    });
+  });
+
+  useEffect(() => {
+    dispatchMountedEvent();
+
+    return () => {
+      dispatchUnmountedEvent();
+    };
+  }, []);
+
+  useEffect(() => {
+    if (ready) {
+      dispatchReadyEvent();
+    }
+  }, [ready]);
+
+  return (
+    <div className={className} style={finalStyle}>
+      <ErrorBoundary
+        FallbackComponent={errorFallback}
+        onError={logErrorToService}
+      >
+        {children}
+      </ErrorBoundary>
+    </div>
+  );
+}
+
+Plugin.propTypes = {
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+  errorFallbackProp: PropTypes.func,
+  ready: PropTypes.bool,
+  style: PropTypes.object, // eslint-disable-line
+};
+
+Plugin.defaultProps = {
+  className: null,
+  errorFallbackProp: null,
+  style: {},
+  ready: true,
+};

plugins/PluginContainer.jsx

@@ -0,0 +1,42 @@
+'use client';
+
+import React from 'react';
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+import PluginContainerIframe from './PluginContainerIframe';
+
+import {
+  IFRAME_PLUGIN,
+} from './data/constants';
+import { pluginConfigShape } from './data/shapes';
+
+// eslint-disable-next-line react/function-component-definition
+export default function PluginContainer({ config, ...props }) {
+  if (config === null) {
+    return null;
+  }
+
+  // this will allow for future plugin types to be inserted in the PluginErrorBoundary
+  let renderer = null;
+  switch (config.type) {
+    case IFRAME_PLUGIN:
+      renderer = (
+        <PluginContainerIframe config={config} {...props} />
+      );
+      break;
+    // istanbul ignore next: default isn't meaningful, just satisfying linter
+    default:
+  }
+
+  return (
+    renderer
+  );
+}
+
+PluginContainer.propTypes = {
+  config: pluginConfigShape,
+};
+
+PluginContainer.defaultProps = {
+  config: null,
+};

plugins/PluginContainerIframe.jsx

@@ -0,0 +1,99 @@
+import React, {
+  useEffect, useState,
+} from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import {
+  PLUGIN_MOUNTED,
+  PLUGIN_READY,
+  PLUGIN_RESIZE,
+} from './data/constants';
+import {
+  dispatchPluginEvent,
+  useElementSize,
+  usePluginEvent,
+} from './data/hooks';
+import { pluginConfigShape } from './data/shapes';
+
+/**
+ * Feature policy for iframe, allowing access to certain courseware-related media.
+ *
+ * We must use the wildcard (*) origin for each feature, as courseware content
+ * may be embedded in external iframes. Notably, xblock-lti-consumer is a popular
+ * block that iframes external course content.
+
+ * This policy was selected in conference with the edX Security Working Group.
+ * Changes to it should be vetted by them (security@edx.org).
+ */
+export const IFRAME_FEATURE_POLICY = (
+  'fullscreen; microphone *; camera *; midi *; geolocation *; encrypted-media *'
+);
+
+// eslint-disable-next-line react/function-component-definition
+export default function PluginContainerIframe({
+  config, fallback, className, ...props
+}) {
+  const { url } = config;
+  const { title, scrolling } = props;
+  const [mounted, setMounted] = useState(false);
+  const [ready, setReady] = useState(false);
+
+  const [iframeRef, iframeElement, width, height] = useElementSize();
+
+  useEffect(() => {
+    if (mounted) {
+      dispatchPluginEvent(iframeElement, {
+        type: PLUGIN_RESIZE,
+        payload: {
+          width,
+          height,
+        },
+      }, url);
+    }
+  }, [iframeElement, mounted, width, height, url]);
+
+  usePluginEvent(iframeElement, PLUGIN_MOUNTED, () => {
+    setMounted(true);
+  });
+
+  usePluginEvent(iframeElement, PLUGIN_READY, () => {
+    setReady(true);
+  });
+
+  return (
+    <>
+      <iframe
+        ref={iframeRef}
+        title={title}
+        src={url}
+        allow={IFRAME_FEATURE_POLICY}
+        scrolling={scrolling}
+        referrerPolicy="origin" // The sent referrer will be limited to the origin of the referring page: its scheme, host, and port.
+        className={classNames(
+          'border border-0',
+          { 'd-none': !ready },
+          className,
+        )}
+        {...props}
+      />
+      {!ready && fallback}
+    </>
+  );
+}
+
+PluginContainerIframe.propTypes = {
+  config: pluginConfigShape,
+  fallback: PropTypes.node,
+  scrolling: PropTypes.oneOf(['auto', 'yes', 'no']),
+  title: PropTypes.string,
+  className: PropTypes.string,
+};
+
+PluginContainerIframe.defaultProps = {
+  config: null,
+  fallback: null,
+  scrolling: 'auto',
+  title: null,
+  className: null,
+};

plugins/PluginErrorBoundary.jsx

@@ -0,0 +1,45 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { FormattedMessage } from 'react-intl';
+
+import { logError } from '@edx/frontend-platform/logging';
+
+export default class PluginErrorBoundary extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError() {
+    // Update state so the next render will show the fallback UI.
+    return { hasError: true };
+  }
+
+  componentDidCatch(error, info) {
+    logError(error, { stack: info.componentStack });
+  }
+
+  render() {
+    if (this.state.hasError) {
+      // You can render any custom fallback UI
+      return (
+        <FormattedMessage
+          id="plugin.load.failure.text"
+          defaultMessage="This content failed to load."
+          description="error message when an unexpected error occurs"
+        />
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+PluginErrorBoundary.propTypes = {
+  children: PropTypes.node,
+};
+
+PluginErrorBoundary.defaultProps = {
+  children: null,
+};

plugins/PluginSlot.jsx

@@ -0,0 +1,75 @@
+/* eslint-disable no-unused-vars */
+import React, { forwardRef } from 'react';
+
+import classNames from 'classnames';
+import { Spinner } from '@edx/paragon';
+import PropTypes from 'prop-types';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+
+// import { usePluginSlot } from './data/hooks';
+import PluginContainer from './PluginContainer';
+
+const PluginSlot = forwardRef(({
+  as, id, intl, pluginProps, children, ...props
+}, ref) => {
+  /* the plugins below are obtained by the id passed into PluginSlot by the Host MFE. See example/src/PluginsPage.jsx
+  for an example of how PluginSlot is populated, and example/src/index.jsx for a dummy JS config that holds all plugins
+  */
+  // const { plugins, keepDefault } = usePluginSlot(id);
+
+  const { fallback } = pluginProps;
+
+  // TODO: Add internationalization to the "Loading" text on the spinner.
+  let finalFallback = (
+    <div className={classNames(pluginProps.className, 'd-flex justify-content-center align-items-center')}>
+      <Spinner animation="border" screenReaderText="Loading" />
+    </div>
+  );
+  if (fallback !== undefined) {
+    finalFallback = fallback;
+  }
+
+  let finalChildren = [];
+  // if (plugins.length > 0) {
+  // if (keepDefault) {
+  //   finalChildren.push(children);
+  // }
+  // plugins.forEach((pluginConfig) => {
+  //   finalChildren.push(
+  //     <PluginContainer
+  //       key={pluginConfig.url}
+  //       config={pluginConfig}
+  //       fallback={finalFallback}
+  //       {...pluginProps}
+  //     />,
+  //   );
+  // });
+  // } else {
+  finalChildren = children;
+  // }
+
+  return React.createElement(
+    as,
+    {
+      ...props,
+      ref,
+    },
+    finalChildren,
+  );
+});
+
+export default injectIntl(PluginSlot);
+
+PluginSlot.propTypes = {
+  as: PropTypes.elementType,
+  children: PropTypes.node,
+  id: PropTypes.string.isRequired,
+  intl: intlShape.isRequired,
+  pluginProps: PropTypes.object, // eslint-disable-line
+};
+
+PluginSlot.defaultProps = {
+  as: 'div',
+  children: null,
+  pluginProps: {},
+};

plugins/data/constants.js

@@ -0,0 +1,8 @@
+// TODO: We expect other plugin types to be added here, such as LTI_PLUGIN and BUILD_TIME_PLUGIN.
+export const IFRAME_PLUGIN = 'IFRAME_PLUGIN'; // loads iframe at the URL, rather than loading a JS file.
+
+// Plugin lifecycle events
+export const PLUGIN_MOUNTED = 'PLUGIN_MOUNTED';
+export const PLUGIN_READY = 'PLUGIN_READY';
+export const PLUGIN_UNMOUNTED = 'PLUGIN_UNMOUNTED';
+export const PLUGIN_RESIZE = 'PLUGIN_RESIZE';

plugins/data/hooks.js

@@ -0,0 +1,96 @@
+import {
+  useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState,
+} from 'react';
+import { PLUGIN_MOUNTED, PLUGIN_READY, PLUGIN_UNMOUNTED } from './constants';
+
+export function useMessageEvent(srcWindow, type, callback) {
+  useLayoutEffect(() => {
+    const listener = (event) => {
+      // Filter messages to those from our source window.
+      if (event.source === srcWindow) {
+        if (event.data.type === type) {
+          callback({ type, payload: event.data.payload });
+        }
+      }
+    };
+    if (srcWindow !== null) {
+      global.addEventListener('message', listener);
+    }
+    return () => {
+      global.removeEventListener('message', listener);
+    };
+  }, [srcWindow, type, callback]);
+}
+
+export function useHostEvent(type, callback) {
+  useMessageEvent(global.parent, type, callback);
+}
+
+export function usePluginEvent(iframeElement, type, callback) {
+  const contentWindow = iframeElement ? iframeElement.contentWindow : null;
+  useMessageEvent(contentWindow, type, callback);
+}
+
+export function dispatchMessageEvent(targetWindow, message, targetOrigin) {
+  // Checking targetOrigin falsiness here since '', null or undefined would all be reasons not to
+  // try to post a message to the origin.
+  if (targetOrigin) {
+    targetWindow.postMessage(message, targetOrigin);
+  }
+}
+
+export function dispatchPluginEvent(iframeElement, message, targetOrigin) {
+  dispatchMessageEvent(iframeElement.contentWindow, message, targetOrigin);
+}
+
+export function dispatchHostEvent(message) {
+  dispatchMessageEvent(global.parent, message, global.document.referrer);
+}
+
+export function dispatchReadyEvent() {
+  dispatchHostEvent({ type: PLUGIN_READY });
+}
+
+export function dispatchMountedEvent() {
+  dispatchHostEvent({ type: PLUGIN_MOUNTED });
+}
+
+export function dispatchUnmountedEvent() {
+  dispatchHostEvent({ type: PLUGIN_UNMOUNTED });
+}
+
+export function useElementSize() {
+  const observerRef = useRef();
+
+  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
+  const [offset, setOffset] = useState({ x: 0, y: 0 });
+
+  const [element, setElement] = useState(null);
+
+  const measuredRef = useCallback(_element => {
+    setElement(_element);
+  }, []);
+
+  useEffect(() => {
+    observerRef.current = new ResizeObserver(() => {
+      if (element) {
+        setDimensions({
+          width: element.clientWidth,
+          height: element.clientHeight,
+        });
+        setOffset({
+          x: element.offsetLeft,
+          y: element.offsetTop,
+        });
+      }
+    });
+    if (element) {
+      observerRef.current.observe(element);
+    }
+  }, [element]);
+
+  return useMemo(
+    () => ([measuredRef, element, dimensions.width, dimensions.height, offset.x, offset.y]),
+    [measuredRef, element, dimensions, offset],
+  );
+}

plugins/data/shapes.js

@@ -0,0 +1,10 @@
+/* eslint-disable import/prefer-default-export */
+import PropTypes from 'prop-types';
+import { IFRAME_PLUGIN } from './constants';
+
+export const pluginConfigShape = PropTypes.shape({
+  url: PropTypes.string.isRequired,
+  type: PropTypes.oneOf([IFRAME_PLUGIN]).isRequired,
+  // This is a place for us to put any generic props we want to pass to the component.  We need it.
+  props: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+});

plugins/index.js

@@ -0,0 +1,18 @@
+// export {
+//   usePluginSlot,
+// } from './data/hooks';
+export {
+  default as Plugin,
+} from './Plugin';
+export {
+  default as PluginContainer,
+} from './PluginContainer';
+export {
+  default as PluginSlot,
+} from './PluginSlot';
+export {
+  IFRAME_PLUGIN,
+} from './data/constants';
+export {
+  default as PluginErrorBoundary,
+} from './PluginErrorBoundary';

src/data/configureStore.js

@@ -1,7 +1,7 @@
 import { getConfig } from '@edx/frontend-platform';
 import { applyMiddleware, createStore, compose } from 'redux';
 import thunkMiddleware from 'redux-thunk';
-import { composeWithDevTools } from '@redux-devtools/extension';
+import { composeWithDevTools } from 'redux-devtools-extension';
 import { createLogger } from 'redux-logger';
 import createSagaMiddleware from 'redux-saga';
 

src/head/Head.test.jsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { Helmet } from 'react-helmet';
-import { render } from '@testing-library/react';
+import { mount } from 'enzyme';
 import { getConfig } from '@edx/frontend-platform';
 import Head from './Head';
 
 describe('Head', () => {
   const props = {};
   it('should match render title tag and favicon with the site configuration values', () => {
-    render(<IntlProvider locale="en"><Head {...props} /></IntlProvider>);
+    mount(<IntlProvider locale="en"><Head {...props} /></IntlProvider>);
     const helmet = Helmet.peek();
     expect(helmet.title).toEqual(`Profile | ${getConfig().SITE_NAME}`);
     expect(helmet.linkTags[0].rel).toEqual('shortcut icon');

src/i18n/messages/ar.json

@@ -3,10 +3,6 @@
   "profile.age.details": "لمشاركة ملفك الشخصي مع بقية متعلمي {siteName}، يجب أن تؤكد أنك عمرك يفوق 13 عامًا.",
   "profile.age.set.date": "ضيط تاريخ ميلادك",
   "profile.datejoined.member.since": "عضو منذ {year}",
-  "profile.notfound.message": "الصفحة التي تبحث عنها غير متوفرة أو هناك خطأ في العنوان. رجاءً تحقق من العنوان و حاول مجدّدًا.",
-  "profile.viewMyRecords": "عرض سجلّاتي",
-  "profile.loading": "يتم تحميل الملف الشخصي...",
-  "profile.username.description": "معلومات ملفك الشخصي تظهر لك فقط. وحده اسم المستخدم الخاص بك يظهر للآخرين على {siteName}.",
   "profile.bio.empty": "إضافة نبذة قصيرة",
   "profile.bio.about.me": "نبذة عنّي",
   "profile.certificate.organization.label": "من طرف",
@@ -30,6 +26,14 @@
   "profile.education.levels.el": "المدرسة الابتدائية / الأساسية",
   "profile.education.levels.none": "دون تعليم رسمي",
   "profile.education.levels.o": "نوع آخر من التعليم",
+  "profile.editbutton.edit": "تعديل",
+  "profile.formcontrols.who.can.see": "من يستطيع رؤية هذا:",
+  "profile.formcontrols.button.cancel": "إلغاء",
+  "profile.formcontrols.button.save": "حفظ",
+  "profile.formcontrols.button.saving": "الحفظ جارٍ",
+  "profile.formcontrols.button.saved": "تم الحفظ",
+  "profile.visibility.who.just.me": "أنا فقط",
+  "profile.visibility.who.everyone": "جميع من على {siteName}",
   "profile.learningGoal.learningGoal": "هدف التعلم",
   "profile.learningGoal.options.start_career": "أريد أن أبدأ مسيرتي المهنية",
   "profile.learningGoal.options.advance_career": "أريد أن ارتقي في مسيرتي المهنية",
@@ -46,12 +50,8 @@
   "profile.profileavatar.change-button": "تغيير",
   "profile.sociallinks.add": "إضافة {network}",
   "profile.sociallinks.social.links": "روابط التواصل الاجتماعي",
-  "profile.editbutton.edit": "تعديل",
+  "profile.notfound.message": "الصفحة التي تبحث عنها غير متوفرة أو هناك خطأ في العنوان. رجاءً تحقق من العنوان و حاول مجدّدًا.",
-  "profile.formcontrols.who.can.see": "من يستطيع رؤية هذا:",
+  "profile.viewMyRecords": "عرض سجلّاتي",
-  "profile.formcontrols.button.cancel": "إلغاء",
+  "profile.loading": "يتم تحميل الملف الشخصي...",
-  "profile.formcontrols.button.save": "حفظ",
+  "profile.username.description": "معلومات ملفك الشخصي تظهر لك فقط. وحده اسم المستخدم الخاص بك يظهر للآخرين على {siteName}."
-  "profile.formcontrols.button.saving": "الحفظ جارٍ",
-  "profile.formcontrols.button.saved": "تم الحفظ",
-  "profile.visibility.who.just.me": "أنا فقط",
-  "profile.visibility.who.everyone": "جميع من على {siteName}"
 }

src/i18n/messages/de.json

@@ -3,10 +3,6 @@
   "profile.age.details": "To share your profile with other {siteName} learners, you must confirm that you are over the age of 13.",
   "profile.age.set.date": "Set your date of birth",
   "profile.datejoined.member.since": "Member since {year}",
-  "profile.notfound.message": "The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again.",
-  "profile.viewMyRecords": "View My Records",
-  "profile.loading": "Profile loading...",
-  "profile.username.description": "Your profile information is only visible to you. Only your username is visible to others on {siteName}.",
   "profile.bio.empty": "Add a short bio",
   "profile.bio.about.me": "About Me",
   "profile.certificate.organization.label": "From",
@@ -30,6 +26,14 @@
   "profile.education.levels.el": "Elementary/primary school",
   "profile.education.levels.none": "No formal education",
   "profile.education.levels.o": "Other education",
+  "profile.editbutton.edit": "Edit",
+  "profile.formcontrols.who.can.see": "Who can see this:",
+  "profile.formcontrols.button.cancel": "Cancel",
+  "profile.formcontrols.button.save": "Save",
+  "profile.formcontrols.button.saving": "Saving",
+  "profile.formcontrols.button.saved": "Saved",
+  "profile.visibility.who.just.me": "Just me",
+  "profile.visibility.who.everyone": "Everyone on {siteName}",
   "profile.learningGoal.learningGoal": "Learning Goal",
   "profile.learningGoal.options.start_career": "I want to start my career",
   "profile.learningGoal.options.advance_career": "I want to advance my career",
@@ -46,12 +50,8 @@
   "profile.profileavatar.change-button": "Change",
   "profile.sociallinks.add": "Add {network}",
   "profile.sociallinks.social.links": "Social Links",
-  "profile.editbutton.edit": "Edit",
+  "profile.notfound.message": "The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again.",
-  "profile.formcontrols.who.can.see": "Who can see this:",
+  "profile.viewMyRecords": "View My Records",
-  "profile.formcontrols.button.cancel": "Cancel",
+  "profile.loading": "Profile loading...",
-  "profile.formcontrols.button.save": "Save",
+  "profile.username.description": "Your profile information is only visible to you. Only your username is visible to others on {siteName}."
-  "profile.formcontrols.button.saving": "Saving",
-  "profile.formcontrols.button.saved": "Saved",
-  "profile.visibility.who.just.me": "Just me",
-  "profile.visibility.who.everyone": "Everyone on {siteName}"
 }

src/i18n/messages/de_DE.json

@@ -3,10 +3,6 @@
   "profile.age.details": "Um Ihr Profil mit anderen {siteName}-Lernern zu teilen, müssen Sie bestätigen, dass Sie über 13 Jahre alt sind.",
   "profile.age.set.date": "Legen Sie Ihr Geburtsdatum fest",
   "profile.datejoined.member.since": "Mitglied seit {year}",
-  "profile.notfound.message": "Die gesuchte Seite ist nicht verfügbar oder es liegt ein Fehler in der URL vor. Bitte überprüfen Sie die URL und versuchen Sie es erneut.",
-  "profile.viewMyRecords": "Meine Aufzeichnungen anzeigen",
-  "profile.loading": "Profil lädt...",
-  "profile.username.description": "Ihre Profilinformationen sind nur für Sie sichtbar. Nur Ihr Benutzername ist für andere auf {siteName} sichtbar.",
   "profile.bio.empty": "Fügen Sie Ihre Kurzbiografie hinzu",
   "profile.bio.about.me": "Über mich",
   "profile.certificate.organization.label": "Von",
@@ -30,6 +26,14 @@
   "profile.education.levels.el": "Grundschule",
   "profile.education.levels.none": "Keinen Bildungsabschluss",
   "profile.education.levels.o": "Sonstige Bildung",
+  "profile.editbutton.edit": "Bearbeiten",
+  "profile.formcontrols.who.can.see": "Wer kann das sehen:",
+  "profile.formcontrols.button.cancel": "Abbrechen",
+  "profile.formcontrols.button.save": "Speichern",
+  "profile.formcontrols.button.saving": "Speichert",
+  "profile.formcontrols.button.saved": "Gespeichert",
+  "profile.visibility.who.just.me": "Nur ich",
+  "profile.visibility.who.everyone": "Alle auf {siteName}",
   "profile.learningGoal.learningGoal": "Lernziel",
   "profile.learningGoal.options.start_career": "Ich möchte meine Karriere starten",
   "profile.learningGoal.options.advance_career": "Ich möchte mich beruflich weiterentwickeln",
@@ -46,12 +50,8 @@
   "profile.profileavatar.change-button": "Ändern",
   "profile.sociallinks.add": "{network} hinzufügen",
   "profile.sociallinks.social.links": "Soziale Netzwerke",
-  "profile.editbutton.edit": "Bearbeiten",
+  "profile.notfound.message": "Die gesuchte Seite ist nicht verfügbar oder es liegt ein Fehler in der URL vor. Bitte überprüfen Sie die URL und versuchen Sie es erneut.",
-  "profile.formcontrols.who.can.see": "Wer kann das sehen:",
+  "profile.viewMyRecords": "Meine Aufzeichnungen anzeigen",
-  "profile.formcontrols.button.cancel": "Abbrechen",
+  "profile.loading": "Profil lädt...",
-  "profile.formcontrols.button.save": "Speichern",
+  "profile.username.description": "Ihre Profilinformationen sind nur für Sie sichtbar. Nur Ihr Benutzername ist für andere auf {siteName} sichtbar."
-  "profile.formcontrols.button.saving": "Speichert",
-  "profile.formcontrols.button.saved": "Gespeichert",
-  "profile.visibility.who.just.me": "Nur ich",
-  "profile.visibility.who.everyone": "Alle auf {siteName}"
 }

src/i18n/messages/es_419.json

@@ -3,10 +3,6 @@
   "profile.age.details": "Para compartir el perfil con otros {siteName} estudiantes, debe confirmar que es mayor de 13 años.",
   "profile.age.set.date": "Establece tu fecha de nacimiento",
   "profile.datejoined.member.since": "Miembro desde {year}",
-  "profile.notfound.message": "La página que estas buscando no está disponible o hay un error en la URL. Por favor, comprueba la URL y vuelve a intentarlo.",
-  "profile.viewMyRecords": "Ver mis registros",
-  "profile.loading": "Cargando perfil...",
-  "profile.username.description": "La información del perfil solo la visualiza usted. Solo el nombre de usuario es visible para los demás en {siteName}.",
   "profile.bio.empty": "Añade una breve biografía",
   "profile.bio.about.me": "Sobre Mí",
   "profile.certificate.organization.label": "Desde",
@@ -30,6 +26,14 @@
   "profile.education.levels.el": "Enseñanza primaria",
   "profile.education.levels.none": "Ninguna educación formal",
   "profile.education.levels.o": "Otra educación",
+  "profile.editbutton.edit": "Editar",
+  "profile.formcontrols.who.can.see": "Quién puede ver esto:",
+  "profile.formcontrols.button.cancel": "Cancelar",
+  "profile.formcontrols.button.save": "Guardar",
+  "profile.formcontrols.button.saving": "Guardando",
+  "profile.formcontrols.button.saved": "Guardado",
+  "profile.visibility.who.just.me": "Solo yo",
+  "profile.visibility.who.everyone": "Todos en {siteName}",
   "profile.learningGoal.learningGoal": "Objetivo de aprendizaje",
   "profile.learningGoal.options.start_career": "quiero empezar mi carrera",
   "profile.learningGoal.options.advance_career": "Quiero avanzar en mi carrera",
@@ -46,12 +50,8 @@
   "profile.profileavatar.change-button": "Cambiar",
   "profile.sociallinks.add": "Añade {network}",
   "profile.sociallinks.social.links": "Enlaces De Redes Sociales",
-  "profile.editbutton.edit": "Editar",
+  "profile.notfound.message": "La página que estas buscando no está disponible o hay un error en la URL. Por favor, comprueba la URL y vuelve a intentarlo.",
-  "profile.formcontrols.who.can.see": "Quién puede ver esto:",
+  "profile.viewMyRecords": "Ver mis registros",
-  "profile.formcontrols.button.cancel": "Cancelar",
+  "profile.loading": "Cargando perfil...",
-  "profile.formcontrols.button.save": "Guardar",
+  "profile.username.description": "La información del perfil solo la visualiza usted. Solo el nombre de usuario es visible para los demás en {siteName}."
-  "profile.formcontrols.button.saving": "Guardando",
-  "profile.formcontrols.button.saved": "Guardado",
-  "profile.visibility.who.just.me": "Solo yo",
-  "profile.visibility.who.everyone": "Todos en {siteName}"
 }

src/i18n/messages/fa_IR.json

@@ -3,10 +3,6 @@
   "profile.age.details": "برای اشتراک‌گذاری پرونده کاربری خود با سایر یادگیرندگان {siteName}، باید تأیید کنید که  بیش از 13 سال سن دارید.",
   "profile.age.set.date": "تنظیم تاریخ تولد",
   "profile.datejoined.member.since": "عضو شده از {year}",
-  "profile.notfound.message": "صفحه مورد نظر شما در دسترس نیست یا خطایی در نشانی آن وجود دارد. لطفاً نشانی اینترنتی را بررسی کرده و دوباره امتحان کنید.",
-  "profile.viewMyRecords": "مشاهده سوابق من",
-  "profile.loading": "در حال بارگذاری پرونده کاربری...",
-  "profile.username.description": "اطلاعات پرونده کاربری فقط برای شما قابل مشاهده است. سایرین فقط نام کاربری شما را در  {siteName} می‌توانند ببینند.",
   "profile.bio.empty": "بیوگرافی کوتاهی اضافه کنید",
   "profile.bio.about.me": "درباره من",
   "profile.certificate.organization.label": "از",
@@ -30,6 +26,14 @@
   "profile.education.levels.el": "مدرسه ابتدایی",
   "profile.education.levels.none": "بدون تحصیلات رسمی",
   "profile.education.levels.o": "تحصیلات متفرقه",
+  "profile.editbutton.edit": " ویرایش",
+  "profile.formcontrols.who.can.see": "کسانی که می‌توانند این را ببینند:",
+  "profile.formcontrols.button.cancel": "لغو‌",
+  "profile.formcontrols.button.save": "ذخیره",
+  "profile.formcontrols.button.saving": "در حال ذخیره",
+  "profile.formcontrols.button.saved": "ذخیره شد",
+  "profile.visibility.who.just.me": "فقط من",
+  "profile.visibility.who.everyone": "هرکسی در {siteName}",
   "profile.learningGoal.learningGoal": "هدف یادگیری",
   "profile.learningGoal.options.start_career": "من می خواهم کارم را شروع کنم",
   "profile.learningGoal.options.advance_career": "من می خواهم حرفه ام را ارتقا دهم",
@@ -46,12 +50,8 @@
   "profile.profileavatar.change-button": "تغییر",
   "profile.sociallinks.add": "افزودن  {network}",
   "profile.sociallinks.social.links": "پیوندهای رسانه اجتماعی",
-  "profile.editbutton.edit": " ویرایش",
+  "profile.notfound.message": "صفحه مورد نظر شما در دسترس نیست یا خطایی در نشانی آن وجود دارد. لطفاً نشانی اینترنتی را بررسی کرده و دوباره امتحان کنید.",
-  "profile.formcontrols.who.can.see": "کسانی که می‌توانند این را ببینند:",
+  "profile.viewMyRecords": "مشاهده سوابق من",
-  "profile.formcontrols.button.cancel": "لغو‌",
+  "profile.loading": "در حال بارگذاری پرونده کاربری...",
-  "profile.formcontrols.button.save": "ذخیره",
+  "profile.username.description": "اطلاعات پرونده کاربری فقط برای شما قابل مشاهده است. سایرین فقط نام کاربری شما را در  {siteName} می‌توانند ببینند."
-  "profile.formcontrols.button.saving": "در حال ذخیره",
-  "profile.formcontrols.button.saved": "ذخیره شد",
-  "profile.visibility.who.just.me": "فقط من",
-  "profile.visibility.who.everyone": "هرکسی در {siteName}"
 }

src/i18n/messages/fr.json

@@ -3,10 +3,6 @@
   "profile.age.details": "Pour partager votre profil avec d'autres étudiants {siteName}, vous devez confirmer que vous avez plus de 13 ans.",
   "profile.age.set.date": "Définissez votre date de naissance",
   "profile.datejoined.member.since": "Membre depuis {year}",
-  "profile.notfound.message": "La page que vous recherchez n'est pas disponible ou il y a une erreur dans l'URL. Veuillez vérifier l'URL et réessayer.",
-  "profile.viewMyRecords": "Voir mes succès",
-  "profile.loading": "Chargement du profil....",
-  "profile.username.description": "Les informations de votre profil ne sont visibles que par vous. Seul votre nom d'utilisateur est visible par les autres sur {siteName}.",
   "profile.bio.empty": "Ajouter une courte biographie",
   "profile.bio.about.me": "À propos de moi",
   "profile.certificate.organization.label": "De",
@@ -30,6 +26,14 @@
   "profile.education.levels.el": "Enseignement primaire",
   "profile.education.levels.none": "Sans diplôme",
   "profile.education.levels.o": "Autre niveau d'étude",
+  "profile.editbutton.edit": "Modifier",
+  "profile.formcontrols.who.can.see": "Qui peut voir ça :",
+  "profile.formcontrols.button.cancel": "Annuler",
+  "profile.formcontrols.button.save": "Enregistrer",
+  "profile.formcontrols.button.saving": "Enregistrement",
+  "profile.formcontrols.button.saved": "Enregistré",
+  "profile.visibility.who.just.me": "Juste moi",
+  "profile.visibility.who.everyone": "Tout le monde sur {siteName}",
   "profile.learningGoal.learningGoal": "Learning Goal",
   "profile.learningGoal.options.start_career": "I want to start my career",
   "profile.learningGoal.options.advance_career": "I want to advance my career",
@@ -46,12 +50,8 @@
   "profile.profileavatar.change-button": "Modifier",
   "profile.sociallinks.add": "Ajouter {network}",
   "profile.sociallinks.social.links": "Liens vers les réseaux sociaux",
-  "profile.editbutton.edit": "Modifier",
+  "profile.notfound.message": "La page que vous recherchez n'est pas disponible ou il y a une erreur dans l'URL. Veuillez vérifier l'URL et réessayer.",
-  "profile.formcontrols.who.can.see": "Qui peut voir ça :",
+  "profile.viewMyRecords": "Voir mes succès",
-  "profile.formcontrols.button.cancel": "Annuler",
+  "profile.loading": "Chargement du profil....",
-  "profile.formcontrols.button.save": "Enregistrer",
+  "profile.username.description": "Les informations de votre profil ne sont visibles que par vous. Seul votre nom d'utilisateur est visible par les autres sur {siteName}."
-  "profile.formcontrols.button.saving": "Enregistrement",
-  "profile.formcontrols.button.saved": "Enregistré",
-  "profile.visibility.who.just.me": "Juste moi",
-  "profile.visibility.who.everyone": "Tout le monde sur {siteName}"
 }

src/i18n/messages/fr_CA.json

@@ -3,10 +3,6 @@
   "profile.age.details": "Pour partager votre profil avec d'autres apprenants {siteName}, vous devez confirmer que vous avez plus de 13 ans.",
   "profile.age.set.date": "Entrez votre date de naissance",
   "profile.datejoined.member.since": "Membre depuis {year}",
-  "profile.notfound.message": "La page que vous recherchez n'est pas disponible ou il y a une erreur dans l'URL. Veuillez vérifier l'URL et réessayer.",
-  "profile.viewMyRecords": "Afficher mes dossiers",
-  "profile.loading": "Chargement du profil...",
-  "profile.username.description": "Les informations de votre profil ne sont visibles que par vous. Seul votre nom d'utilisateur est visible par les autres sur {siteName}.",
   "profile.bio.empty": "Ajouter une courte biographie",
   "profile.bio.about.me": "À propos de moi",
   "profile.certificate.organization.label": "De",
@@ -30,6 +26,14 @@
   "profile.education.levels.el": "Enseignement primaire",
   "profile.education.levels.none": "Sans formation formelle",
   "profile.education.levels.o": "Autre niveau de formation",
+  "profile.editbutton.edit": "Éditer",
+  "profile.formcontrols.who.can.see": "Qui peut voir ça :",
+  "profile.formcontrols.button.cancel": "Annuler",
+  "profile.formcontrols.button.save": "Sauvegarder",
+  "profile.formcontrols.button.saving": "Sauvegarde en cours",
+  "profile.formcontrols.button.saved": "Sauvegardé",
+  "profile.visibility.who.just.me": "Juste moi",
+  "profile.visibility.who.everyone": "Tout le monde sur {siteName}",
   "profile.learningGoal.learningGoal": "Objectif d'apprentissage",
   "profile.learningGoal.options.start_career": "Je veux commencer ma carrière",
   "profile.learningGoal.options.advance_career": "Je veux faire progresser ma carrière",
@@ -46,12 +50,8 @@
   "profile.profileavatar.change-button": "Modifier",
   "profile.sociallinks.add": "Ajouter {network}",
   "profile.sociallinks.social.links": "Liens vers les réseaux sociaux",
-  "profile.editbutton.edit": "Éditer",
+  "profile.notfound.message": "La page que vous recherchez n'est pas disponible ou il y a une erreur dans l'URL. Veuillez vérifier l'URL et réessayer.",
-  "profile.formcontrols.who.can.see": "Qui peut voir ça :",
+  "profile.viewMyRecords": "Afficher mes dossiers",
-  "profile.formcontrols.button.cancel": "Annuler",
+  "profile.loading": "Chargement du profil...",
-  "profile.formcontrols.button.save": "Sauvegarder",
+  "profile.username.description": "Les informations de votre profil ne sont visibles que par vous. Seul votre nom d'utilisateur est visible par les autres sur {siteName}."
-  "profile.formcontrols.button.saving": "Sauvegarde en cours",
-  "profile.formcontrols.button.saved": "Sauvegardé",
-  "profile.visibility.who.just.me": "Juste moi",
-  "profile.visibility.who.everyone": "Tout le monde sur {siteName}"
 }

src/i18n/messages/hi.json

@@ -3,10 +3,6 @@
   "profile.age.details": "To share your profile with other {siteName} learners, you must confirm that you are over the age of 13.",
   "profile.age.set.date": "Set your date of birth",
   "profile.datejoined.member.since": "Member since {year}",
-  "profile.notfound.message": "The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again.",
-  "profile.viewMyRecords": "View My Records",
-  "profile.loading": "Profile loading...",
-  "profile.username.description": "Your profile information is only visible to you. Only your username is visible to others on {siteName}.",
   "profile.bio.empty": "Add a short bio",
   "profile.bio.about.me": "About Me",
   "profile.certificate.organization.label": "From",
@@ -30,6 +26,14 @@
   "profile.education.levels.el": "Elementary/primary school",
   "profile.education.levels.none": "No formal education",
   "profile.education.levels.o": "Other education",
+  "profile.editbutton.edit": "Edit",
+  "profile.formcontrols.who.can.see": "Who can see this:",
+  "profile.formcontrols.button.cancel": "Cancel",
+  "profile.formcontrols.button.save": "Save",
+  "profile.formcontrols.button.saving": "Saving",
+  "profile.formcontrols.button.saved": "Saved",
+  "profile.visibility.who.just.me": "Just me",
+  "profile.visibility.who.everyone": "Everyone on {siteName}",
   "profile.learningGoal.learningGoal": "Learning Goal",
   "profile.learningGoal.options.start_career": "I want to start my career",
   "profile.learningGoal.options.advance_career": "I want to advance my career",
@@ -46,12 +50,8 @@
   "profile.profileavatar.change-button": "Change",
   "profile.sociallinks.add": "Add {network}",
   "profile.sociallinks.social.links": "Social Links",
-  "profile.editbutton.edit": "Edit",
+  "profile.notfound.message": "The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again.",
-  "profile.formcontrols.who.can.see": "Who can see this:",
+  "profile.viewMyRecords": "View My Records",
-  "profile.formcontrols.button.cancel": "Cancel",
+  "profile.loading": "Profile loading...",
-  "profile.formcontrols.button.save": "Save",
+  "profile.username.description": "Your profile information is only visible to you. Only your username is visible to others on {siteName}."
-  "profile.formcontrols.button.saving": "Saving",
-  "profile.formcontrols.button.saved": "Saved",
-  "profile.visibility.who.just.me": "Just me",
-  "profile.visibility.who.everyone": "Everyone on {siteName}"
 }

src/i18n/messages/it.json

@@ -3,10 +3,6 @@
   "profile.age.details": "To share your profile with other {siteName} learners, you must confirm that you are over the age of 13.",
   "profile.age.set.date": "Set your date of birth",
   "profile.datejoined.member.since": "Member since {year}",
-  "profile.notfound.message": "The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again.",
-  "profile.viewMyRecords": "View My Records",
-  "profile.loading": "Profile loading...",
-  "profile.username.description": "Your profile information is only visible to you. Only your username is visible to others on {siteName}.",
   "profile.bio.empty": "Add a short bio",
   "profile.bio.about.me": "About Me",
   "profile.certificate.organization.label": "From",
@@ -30,6 +26,14 @@
   "profile.education.levels.el": "Elementary/primary school",
   "profile.education.levels.none": "No formal education",
   "profile.education.levels.o": "Other education",
+  "profile.editbutton.edit": "Edit",
+  "profile.formcontrols.who.can.see": "Who can see this:",
+  "profile.formcontrols.button.cancel": "Cancel",
+  "profile.formcontrols.button.save": "Save",
+  "profile.formcontrols.button.saving": "Saving",
+  "profile.formcontrols.button.saved": "Saved",
+  "profile.visibility.who.just.me": "Just me",
+  "profile.visibility.who.everyone": "Everyone on {siteName}",
   "profile.learningGoal.learningGoal": "Learning Goal",
   "profile.learningGoal.options.start_career": "I want to start my career",
   "profile.learningGoal.options.advance_career": "I want to advance my career",
@@ -46,12 +50,8 @@
   "profile.profileavatar.change-button": "Change",
   "profile.sociallinks.add": "Add {network}",
   "profile.sociallinks.social.links": "Social Links",
-  "profile.editbutton.edit": "Edit",
+  "profile.notfound.message": "The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again.",
-  "profile.formcontrols.who.can.see": "Who can see this:",
+  "profile.viewMyRecords": "View My Records",
-  "profile.formcontrols.button.cancel": "Cancel",
+  "profile.loading": "Profile loading...",
-  "profile.formcontrols.button.save": "Save",
+  "profile.username.description": "Your profile information is only visible to you. Only your username is visible to others on {siteName}."
-  "profile.formcontrols.button.saving": "Saving",
-  "profile.formcontrols.button.saved": "Saved",
-  "profile.visibility.who.just.me": "Just me",
-  "profile.visibility.who.everyone": "Everyone on {siteName}"
 }

src/i18n/messages/it_IT.json

@@ -3,10 +3,6 @@
   "profile.age.details": "Per condividere il tuo profilo con altri studenti di {siteName}, devi confermare di avere più di 13 anni.",
   "profile.age.set.date": "Imposta la data di nascita ",
   "profile.datejoined.member.since": "Membro da {year}",
-  "profile.notfound.message": "La pagina ricercata non è disponibile oppure è presente un errore nell'URL. Controllare l'URL e riprovare. ",
-  "profile.viewMyRecords": "Visualizza record personali ",
-  "profile.loading": "Caricamento del profilo... ",
-  "profile.username.description": "Le informazioni del tuo profilo sono visibili solo a te. Solo il tuo nome utente è visibile agli altri su {siteName}.",
   "profile.bio.empty": "Aggiungi una breve biografia ",
   "profile.bio.about.me": "Su di me",
   "profile.certificate.organization.label": "Da ",
@@ -30,6 +26,14 @@
   "profile.education.levels.el": "Scuola Primaria/Elementare",
   "profile.education.levels.none": "Nessun livello educativo formale",
   "profile.education.levels.o": "Altro livello educativo",
+  "profile.editbutton.edit": "Modifica",
+  "profile.formcontrols.who.can.see": "Chi può visualizzare: ",
+  "profile.formcontrols.button.cancel": "Annulla",
+  "profile.formcontrols.button.save": "Salva",
+  "profile.formcontrols.button.saving": "Salvataggio in corso",
+  "profile.formcontrols.button.saved": "Salvato",
+  "profile.visibility.who.just.me": "Solo io ",
+  "profile.visibility.who.everyone": "Tutti su {siteName}",
   "profile.learningGoal.learningGoal": "Obiettivo di apprendimento",
   "profile.learningGoal.options.start_career": "Voglio iniziare il mio percorso",
   "profile.learningGoal.options.advance_career": "Voglio avanzare nel mio percorso",
@@ -46,12 +50,8 @@
   "profile.profileavatar.change-button": "Cambia",
   "profile.sociallinks.add": "Aggiungi {network}",
   "profile.sociallinks.social.links": "Link social ",
-  "profile.editbutton.edit": "Modifica",
+  "profile.notfound.message": "La pagina ricercata non è disponibile oppure è presente un errore nell'URL. Controllare l'URL e riprovare. ",
-  "profile.formcontrols.who.can.see": "Chi può visualizzare: ",
+  "profile.viewMyRecords": "Visualizza record personali ",
-  "profile.formcontrols.button.cancel": "Annulla",
+  "profile.loading": "Caricamento del profilo... ",
-  "profile.formcontrols.button.save": "Salva",
+  "profile.username.description": "Le informazioni del tuo profilo sono visibili solo a te. Solo il tuo nome utente è visibile agli altri su {siteName}."
-  "profile.formcontrols.button.saving": "Salvataggio in corso",
-  "profile.formcontrols.button.saved": "Salvato",
-  "profile.visibility.who.just.me": "Solo io ",
-  "profile.visibility.who.everyone": "Tutti su {siteName}"
 }

src/i18n/messages/pt.json

@@ -3,10 +3,6 @@
   "profile.age.details": "To share your profile with other {siteName} learners, you must confirm that you are over the age of 13.",
   "profile.age.set.date": "Set your date of birth",
   "profile.datejoined.member.since": "Member since {year}",
-  "profile.notfound.message": "The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again.",
-  "profile.viewMyRecords": "View My Records",
-  "profile.loading": "Profile loading...",
-  "profile.username.description": "Your profile information is only visible to you. Only your username is visible to others on {siteName}.",
   "profile.bio.empty": "Add a short bio",
   "profile.bio.about.me": "About Me",
   "profile.certificate.organization.label": "From",
@@ -30,6 +26,14 @@
   "profile.education.levels.el": "Elementary/primary school",
   "profile.education.levels.none": "No formal education",
   "profile.education.levels.o": "Other education",
+  "profile.editbutton.edit": "Edit",
+  "profile.formcontrols.who.can.see": "Who can see this:",
+  "profile.formcontrols.button.cancel": "Cancel",
+  "profile.formcontrols.button.save": "Save",
+  "profile.formcontrols.button.saving": "Saving",
+  "profile.formcontrols.button.saved": "Saved",
+  "profile.visibility.who.just.me": "Just me",
+  "profile.visibility.who.everyone": "Everyone on {siteName}",
   "profile.learningGoal.learningGoal": "Learning Goal",
   "profile.learningGoal.options.start_career": "I want to start my career",
   "profile.learningGoal.options.advance_career": "I want to advance my career",
@@ -46,12 +50,8 @@
   "profile.profileavatar.change-button": "Change",
   "profile.sociallinks.add": "Add {network}",
   "profile.sociallinks.social.links": "Social Links",
-  "profile.editbutton.edit": "Edit",
+  "profile.notfound.message": "The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again.",
-  "profile.formcontrols.who.can.see": "Who can see this:",
+  "profile.viewMyRecords": "View My Records",
-  "profile.formcontrols.button.cancel": "Cancel",
+  "profile.loading": "Profile loading...",
-  "profile.formcontrols.button.save": "Save",
+  "profile.username.description": "Your profile information is only visible to you. Only your username is visible to others on {siteName}."
-  "profile.formcontrols.button.saving": "Saving",
-  "profile.formcontrols.button.saved": "Saved",
-  "profile.visibility.who.just.me": "Just me",
-  "profile.visibility.who.everyone": "Everyone on {siteName}"
 }

src/i18n/messages/pt_PT.json

@@ -3,10 +3,6 @@
   "profile.age.details": "Para partilhar o seu perfil com outros estudantes da plataforma {siteName}, tem de confirmar que tem mais de 13 anos de idade.",
   "profile.age.set.date": "Indique a sua data de nascimento",
   "profile.datejoined.member.since": "Utilizador desde {year}",
-  "profile.notfound.message": "A página que procura não está disponível ou há um erro no URL. Por favor, verifique o URL e tente novamente.",
-  "profile.viewMyRecords": "Ver os Meus Registos",
-  "profile.loading": "A carregar perfil...",
-  "profile.username.description": "As informações do seu perfil só são visíveis para si. Apenas o seu nome de utilizador é visível para outros em {siteName}.",
   "profile.bio.empty": "Adicionar uma breve biografia",
   "profile.bio.about.me": "Sobre Mim",
   "profile.certificate.organization.label": "De",
@@ -30,6 +26,14 @@
   "profile.education.levels.el": "Primária",
   "profile.education.levels.none": "Sem estudos",
   "profile.education.levels.o": "Outra formação",
+  "profile.editbutton.edit": "Editar",
+  "profile.formcontrols.who.can.see": "Quem pode ver isto:",
+  "profile.formcontrols.button.cancel": "Cancelar",
+  "profile.formcontrols.button.save": "Guardar",
+  "profile.formcontrols.button.saving": "A Guardar",
+  "profile.formcontrols.button.saved": "Guardado",
+  "profile.visibility.who.just.me": "Apenas eu",
+  "profile.visibility.who.everyone": "Toda a gente em {siteName}",
   "profile.learningGoal.learningGoal": "Objectivo de aprendizagem",
   "profile.learningGoal.options.start_career": "Quero começar a minha carreira",
   "profile.learningGoal.options.advance_career": "Quero progredir na minha carreira",
@@ -46,12 +50,8 @@
   "profile.profileavatar.change-button": "Alterar",
   "profile.sociallinks.add": "Adicionar {network}",
   "profile.sociallinks.social.links": "Links de Redes Sociais",
-  "profile.editbutton.edit": "Editar",
+  "profile.notfound.message": "A página que procura não está disponível ou há um erro no URL. Por favor, verifique o URL e tente novamente.",
-  "profile.formcontrols.who.can.see": "Quem pode ver isto:",
+  "profile.viewMyRecords": "Ver os Meus Registos",
-  "profile.formcontrols.button.cancel": "Cancelar",
+  "profile.loading": "A carregar perfil...",
-  "profile.formcontrols.button.save": "Guardar",
+  "profile.username.description": "As informações do seu perfil só são visíveis para si. Apenas o seu nome de utilizador é visível para outros em {siteName}."
-  "profile.formcontrols.button.saving": "A Guardar",
-  "profile.formcontrols.button.saved": "Guardado",
-  "profile.visibility.who.just.me": "Apenas eu",
-  "profile.visibility.who.everyone": "Toda a gente em {siteName}"
 }

src/i18n/messages/ru.json

@@ -3,10 +3,6 @@
   "profile.age.details": "To share your profile with other {siteName} learners, you must confirm that you are over the age of 13.",
   "profile.age.set.date": "Set your date of birth",
   "profile.datejoined.member.since": "Member since {year}",
-  "profile.notfound.message": "The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again.",
-  "profile.viewMyRecords": "View My Records",
-  "profile.loading": "Profile loading...",
-  "profile.username.description": "Your profile information is only visible to you. Only your username is visible to others on {siteName}.",
   "profile.bio.empty": "Add a short bio",
   "profile.bio.about.me": "About Me",
   "profile.certificate.organization.label": "From",
@@ -30,6 +26,14 @@
   "profile.education.levels.el": "Elementary/primary school",
   "profile.education.levels.none": "No formal education",
   "profile.education.levels.o": "Other education",
+  "profile.editbutton.edit": "Edit",
+  "profile.formcontrols.who.can.see": "Who can see this:",
+  "profile.formcontrols.button.cancel": "Cancel",
+  "profile.formcontrols.button.save": "Save",
+  "profile.formcontrols.button.saving": "Saving",
+  "profile.formcontrols.button.saved": "Saved",
+  "profile.visibility.who.just.me": "Just me",
+  "profile.visibility.who.everyone": "Everyone on {siteName}",
   "profile.learningGoal.learningGoal": "Learning Goal",
   "profile.learningGoal.options.start_career": "I want to start my career",
   "profile.learningGoal.options.advance_career": "I want to advance my career",
@@ -46,12 +50,8 @@
   "profile.profileavatar.change-button": "Change",
   "profile.sociallinks.add": "Add {network}",
   "profile.sociallinks.social.links": "Social Links",
-  "profile.editbutton.edit": "Edit",
+  "profile.notfound.message": "The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again.",
-  "profile.formcontrols.who.can.see": "Who can see this:",
+  "profile.viewMyRecords": "View My Records",
-  "profile.formcontrols.button.cancel": "Cancel",
+  "profile.loading": "Profile loading...",
-  "profile.formcontrols.button.save": "Save",
+  "profile.username.description": "Your profile information is only visible to you. Only your username is visible to others on {siteName}."
-  "profile.formcontrols.button.saving": "Saving",
-  "profile.formcontrols.button.saved": "Saved",
-  "profile.visibility.who.just.me": "Just me",
-  "profile.visibility.who.everyone": "Everyone on {siteName}"
 }

src/i18n/messages/uk.json

@@ -3,10 +3,6 @@
   "profile.age.details": "To share your profile with other {siteName} learners, you must confirm that you are over the age of 13.",
   "profile.age.set.date": "Set your date of birth",
   "profile.datejoined.member.since": "Member since {year}",
-  "profile.notfound.message": "The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again.",
-  "profile.viewMyRecords": "View My Records",
-  "profile.loading": "Profile loading...",
-  "profile.username.description": "Your profile information is only visible to you. Only your username is visible to others on {siteName}.",
   "profile.bio.empty": "Add a short bio",
   "profile.bio.about.me": "About Me",
   "profile.certificate.organization.label": "From",
@@ -30,6 +26,14 @@
   "profile.education.levels.el": "Elementary/primary school",
   "profile.education.levels.none": "No formal education",
   "profile.education.levels.o": "Other education",
+  "profile.editbutton.edit": "Edit",
+  "profile.formcontrols.who.can.see": "Who can see this:",
+  "profile.formcontrols.button.cancel": "Cancel",
+  "profile.formcontrols.button.save": "Save",
+  "profile.formcontrols.button.saving": "Saving",
+  "profile.formcontrols.button.saved": "Saved",
+  "profile.visibility.who.just.me": "Just me",
+  "profile.visibility.who.everyone": "Everyone on {siteName}",
   "profile.learningGoal.learningGoal": "Learning Goal",
   "profile.learningGoal.options.start_career": "I want to start my career",
   "profile.learningGoal.options.advance_career": "I want to advance my career",
@@ -46,12 +50,8 @@
   "profile.profileavatar.change-button": "Change",
   "profile.sociallinks.add": "Add {network}",
   "profile.sociallinks.social.links": "Social Links",
-  "profile.editbutton.edit": "Edit",
+  "profile.notfound.message": "The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again.",
-  "profile.formcontrols.who.can.see": "Who can see this:",
+  "profile.viewMyRecords": "View My Records",
-  "profile.formcontrols.button.cancel": "Cancel",
+  "profile.loading": "Profile loading...",
-  "profile.formcontrols.button.save": "Save",
+  "profile.username.description": "Your profile information is only visible to you. Only your username is visible to others on {siteName}."
-  "profile.formcontrols.button.saving": "Saving",
-  "profile.formcontrols.button.saved": "Saved",
-  "profile.visibility.who.just.me": "Just me",
-  "profile.visibility.who.everyone": "Everyone on {siteName}"
 }

src/i18n/messages/zh_CN.json

@@ -1,57 +1,57 @@
 {
-  "profile.page.title": "简介 | {siteName}",
+  "profile.page.title": "Profile | {siteName}",
-  "profile.age.details": "要与其他 {siteName} 学员分享您的个人资料，您必须确认您已年满 13 岁。",
+  "profile.age.details": "To share your profile with other {siteName} learners, you must confirm that you are over the age of 13.",
-  "profile.age.set.date": "设置您的出生日期",
+  "profile.age.set.date": "Set your date of birth",
-  "profile.datejoined.member.since": "会员自{year}",
+  "profile.datejoined.member.since": "Member since {year}",
-  "profile.notfound.message": "您访问的地址不存在或有误。请检查URL后重新尝试访问。",
+  "profile.bio.empty": "Add a short bio",
-  "profile.viewMyRecords": "查看我的记录",
+  "profile.bio.about.me": "About Me",
-  "profile.loading": "简介文件加载中......",
+  "profile.certificate.organization.label": "From",
-  "profile.username.description": "您的个人资料信息仅对您可见。 {siteName} 上的其他人只能看到您的用户名。",
+  "profile.certificate.completion.date.label": "Completed on {date}",
-  "profile.bio.empty": "添加个人简历",
+  "profile.no.certificates": "You don't have any certificates yet.",
-  "profile.bio.about.me": "个人资料",
+  "profile.certificates.my.certificates": "My Certificates",
-  "profile.certificate.organization.label": "从",
+  "profile.certificates.view.certificate": "View Certificate",
-  "profile.certificate.completion.date.label": "在{date}前完成",
+  "profile.certificates.types.verified": "Verified Certificate",
-  "profile.no.certificates": "你还没有任何证书。",
+  "profile.certificates.types.professional": "Professional Certificate",
-  "profile.certificates.my.certificates": "我的证书",
+  "profile.certificates.types.unknown": "Certificate",
-  "profile.certificates.view.certificate": "查看证书",
+  "profile.country.label": "Location",
-  "profile.certificates.types.verified": "认证证书",
+  "profile.country.empty": "Add location",
-  "profile.certificates.types.professional": "专业证书",
+  "profile.education.empty": "Add education",
-  "profile.certificates.types.unknown": "证书",
+  "profile.education.education": "Education",
-  "profile.country.label": "位置",
+  "profile.education.levels.p": "Doctorate",
-  "profile.country.empty": "添加地址",
+  "profile.education.levels.m": "Master's or professional degree",
-  "profile.education.empty": "添加教育程度",
+  "profile.education.levels.b": "Bachelor's Degree",
-  "profile.education.education": "教育程度",
+  "profile.education.levels.a": "Associate's degree",
-  "profile.education.levels.p": "博士",
+  "profile.education.levels.hs": "Secondary/high school",
-  "profile.education.levels.m": "硕士",
+  "profile.education.levels.jhs": "Junior secondary/junior high/middle school",
-  "profile.education.levels.b": "学士学位",
+  "profile.education.levels.el": "Elementary/primary school",
-  "profile.education.levels.a": "副学士学位",
+  "profile.education.levels.none": "No formal education",
-  "profile.education.levels.hs": "高中",
+  "profile.education.levels.o": "Other education",
-  "profile.education.levels.jhs": "初中",
+  "profile.editbutton.edit": "Edit",
-  "profile.education.levels.el": "小学",
+  "profile.formcontrols.who.can.see": "Who can see this:",
-  "profile.education.levels.none": "未受正规教育",
+  "profile.formcontrols.button.cancel": "Cancel",
-  "profile.education.levels.o": "其他教育程度",
+  "profile.formcontrols.button.save": "Save",
-  "profile.learningGoal.learningGoal": "学习目标",
+  "profile.formcontrols.button.saving": "Saving",
-  "profile.learningGoal.options.start_career": "我想开始我的职业生涯",
+  "profile.formcontrols.button.saved": "Saved",
-  "profile.learningGoal.options.advance_career": "我想提升我的事业",
+  "profile.visibility.who.just.me": "Just me",
-  "profile.learningGoal.options.learn_something_new": "我想学习新东西",
+  "profile.visibility.who.everyone": "Everyone on {siteName}",
-  "profile.learningGoal.options.something_else": "别的东西",
+  "profile.learningGoal.learningGoal": "Learning Goal",
-  "profile.name.full.name": "全名",
+  "profile.learningGoal.options.start_career": "I want to start my career",
-  "profile.name.details": "用于显示在账户和证书上的姓名。",
+  "profile.learningGoal.options.advance_career": "I want to advance my career",
-  "profile.name.empty": "添加名字",
+  "profile.learningGoal.options.learn_something_new": "I want to learn something new",
-  "profile.preferredlanguage.empty": "添加语言",
+  "profile.learningGoal.options.something_else": "Something else",
-  "profile.preferredlanguage.label": "主要使用语言",
+  "profile.name.full.name": "Full Name",
-  "profile.profileavatar.upload-button": "上传照片",
+  "profile.name.details": "This is the name that appears in your account and on your certificates.",
-  "profile.profileavatar.remove.button": "移除",
+  "profile.name.empty": "Add name",
-  "profile.image.alt.attribute": "个人头像",
+  "profile.preferredlanguage.empty": "Add language",
-  "profile.profileavatar.change-button": "更改",
+  "profile.preferredlanguage.label": "Primary Language Spoken",
-  "profile.sociallinks.add": "添加{network}",
+  "profile.profileavatar.upload-button": "Upload Photo",
-  "profile.sociallinks.social.links": "社交链接",
+  "profile.profileavatar.remove.button": "Remove",
-  "profile.editbutton.edit": "编辑",
+  "profile.image.alt.attribute": "profile avatar",
-  "profile.formcontrols.who.can.see": "对谁可见：",
+  "profile.profileavatar.change-button": "Change",
-  "profile.formcontrols.button.cancel": "取消",
+  "profile.sociallinks.add": "Add {network}",
-  "profile.formcontrols.button.save": "保存",
+  "profile.sociallinks.social.links": "Social Links",
-  "profile.formcontrols.button.saving": "正在保存",
+  "profile.notfound.message": "The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again.",
-  "profile.formcontrols.button.saved": "已保存",
+  "profile.viewMyRecords": "View My Records",
-  "profile.visibility.who.just.me": "仅自己",
+  "profile.loading": "Profile loading...",
-  "profile.visibility.who.everyone": "{siteName} 上的每个人"
+  "profile.username.description": "Your profile information is only visible to you. Only your username is visible to others on {siteName}."
 }

src/index.jsx

@@ -15,6 +15,7 @@ import {
 
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { useLocation } from 'react-router-dom';
 
 import Header from '@edx/frontend-component-header';
 import Footer from '@edx/frontend-component-footer';
@@ -27,15 +28,25 @@ import Head from './head/Head';
 
 import AppRoutes from './routes/AppRoutes';
 
+const RenderFooter = () => {
+  const location = useLocation();
+  return location.pathname.includes('/plugin') ? null : <Footer />;
+};
+
+const RenderHeader = () => {
+  const location = useLocation();
+  return location.pathname.includes('/plugin') ? null : <Header />;
+};
+
 subscribe(APP_READY, () => {
   ReactDOM.render(
     <AppProvider store={configureStore()}>
       <Head />
-      <Header />
+      <RenderHeader />
       <main id="main">
         <AppRoutes />
       </main>
-      <Footer />
+      <RenderFooter />
     </AppProvider>,
     document.getElementById('root'),
   );

src/profile/Banner.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
 
-const Banner = () => <div className="profile-page-bg-banner bg-primary d-md-block p-relative" />;
+const Banner = () => <div className="profile-page-bg-banner bg-primary d-none d-md-block p-relative" />;
 
 export default Banner;

src/profile/DateJoined.jsx

@@ -6,7 +6,6 @@ const DateJoined = ({ date }) => {
   if (date == null) {
     return null;
   }
-
   return (
     <p className="mb-0">
       <FormattedMessage

src/profile/ProfilePage.jsx

@@ -126,7 +126,7 @@ class ProfilePage extends React.Component {
 
     return (
       <span data-hj-suppress>
-        <h1 className="h2 mb-0 font-weight-bold text-truncate">{this.props.params.username}</h1>
+        <h1 className="h2 mb-0 font-weight-bold">{this.props.params.username}</h1>
         <DateJoined date={dateJoined} />
         {this.isYOBDisabled() && <UsernameDescription />}
         <hr className="d-none d-md-block" />
@@ -178,7 +178,6 @@ class ProfilePage extends React.Component {
       visibilityLearningGoal,
       languageProficiencies,
       visibilityLanguageProficiencies,
-      courseCertificates,
       visibilityCourseCertificates,
       bio,
       visibilityBio,
@@ -197,17 +196,6 @@ class ProfilePage extends React.Component {
       changeHandler: this.handleChange,
     };
 
-    const isBlockVisible = (blockInfo) => this.isAuthenticatedUserProfile()
-      || (!this.isAuthenticatedUserProfile() && Boolean(blockInfo));
-
-    const isLanguageBlockVisible = isBlockVisible(languageProficiencies.length);
-    const isEducationBlockVisible = isBlockVisible(levelOfEducation);
-    const isSocialLinksBLockVisible = isBlockVisible(socialLinks.some((link) => link.socialLink !== null));
-    const isBioBlockVisible = isBlockVisible(bio);
-    const isCertificatesBlockVisible = isBlockVisible(courseCertificates.length);
-    const isNameBlockVisible = isBlockVisible(name);
-    const isLocationBlockVisible = isBlockVisible(country);
-
     return (
       <div className="container-fluid">
         <div className="row align-items-center pt-4 mb-4 pt-md-0 mb-md-0">
@@ -224,7 +212,8 @@ class ProfilePage extends React.Component {
               />
             </div>
           </div>
-          <div className="col">
+          <div>PluginPOC</div>
+          <div className="col pl-0">
             <div className="d-md-none">
               {this.renderHeadingLockup()}
             </div>
@@ -242,39 +231,30 @@ class ProfilePage extends React.Component {
             <div className="d-md-none mb-4">
               {this.renderViewMyRecordsButton()}
             </div>
-            {isNameBlockVisible && (
             <Name
               name={name}
               visibilityName={visibilityName}
               formId="name"
               {...commonFormProps}
             />
-            )}
-            {isLocationBlockVisible && (
             <Country
               country={country}
               visibilityCountry={visibilityCountry}
               formId="country"
               {...commonFormProps}
             />
-            )}
-            {isLanguageBlockVisible && (
             <PreferredLanguage
               languageProficiencies={languageProficiencies}
               visibilityLanguageProficiencies={visibilityLanguageProficiencies}
               formId="languageProficiencies"
               {...commonFormProps}
             />
-            )}
-            {isEducationBlockVisible && (
             <Education
               levelOfEducation={levelOfEducation}
               visibilityLevelOfEducation={visibilityLevelOfEducation}
               formId="levelOfEducation"
               {...commonFormProps}
             />
-            )}
-            {isSocialLinksBLockVisible && (
             <SocialLinks
               socialLinks={socialLinks}
               draftSocialLinksByPlatform={draftSocialLinksByPlatform}
@@ -282,18 +262,15 @@ class ProfilePage extends React.Component {
               formId="socialLinks"
               {...commonFormProps}
             />
-            )}
           </div>
           <div className="pt-md-3 col-md-8 col-lg-7 offset-lg-1">
             {!this.isYOBDisabled() && this.renderAgeMessage()}
-            {isBioBlockVisible && (
             <Bio
               bio={bio}
               visibilityBio={visibilityBio}
               formId="bio"
               {...commonFormProps}
             />
-            )}
             {getConfig().ENABLE_SKILLS_BUILDER_PROFILE && (
               <LearningGoal
                 learningGoal={learningGoal}
@@ -302,13 +279,11 @@ class ProfilePage extends React.Component {
                 {...commonFormProps}
               />
             )}
-            {isCertificatesBlockVisible && (
             <Certificates
               visibilityCourseCertificates={visibilityCourseCertificates}
               formId="certificates"
               {...commonFormProps}
             />
-            )}
           </div>
         </div>
       </div>

src/profile/ProfilePage.test.jsx

@@ -3,10 +3,11 @@ import { getConfig } from '@edx/frontend-platform';
 import * as analytics from '@edx/frontend-platform/analytics';
 import { AppContext } from '@edx/frontend-platform/react';
 import { configure as configureI18n, IntlProvider } from '@edx/frontend-platform/i18n';
-import { render } from '@testing-library/react';
+import { mount } from 'enzyme';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Provider } from 'react-redux';
+import renderer from 'react-test-renderer';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 
@@ -99,7 +100,7 @@ describe('<ProfilePage />', () => {
         config: getConfig(),
       };
       const component = <ProfilePageWrapper contextValue={contextValue} store={mockStore(storeMocks.loadingApp)} />;
-      const { container: tree } = render(component);
+      const tree = renderer.create(component).toJSON();
       expect(tree).toMatchSnapshot();
     });
 
@@ -109,41 +110,23 @@ describe('<ProfilePage />', () => {
         config: getConfig(),
       };
       const component = <ProfilePageWrapper contextValue={contextValue} store={mockStore(storeMocks.viewOwnProfile)} />;
-      const { container: tree } = render(component);
+      const tree = renderer.create(component).toJSON();
       expect(tree).toMatchSnapshot();
     });
 
-    it('viewing other profile with all fields', () => {
+    it('viewing other profile', () => {
       const contextValue = {
         authenticatedUser: { userId: 123, username: 'staff', administrator: true },
         config: getConfig(),
       };
-
       const component = (
         <ProfilePageWrapper
           contextValue={contextValue}
-          store={mockStore({
+          store={mockStore(storeMocks.viewOtherProfile)}
-            ...storeMocks.viewOtherProfile,
+          params={{ username: 'verified' }} // Override default params
-            profilePage: {
-              ...storeMocks.viewOtherProfile.profilePage,
-              account: {
-                ...storeMocks.viewOtherProfile.profilePage.account,
-                name: 'user',
-                country: 'EN',
-                bio: 'bio',
-                courseCertificates: ['course certificates'],
-                levelOfEducation: 'some level',
-                languageProficiencies: ['some lang'],
-                socialLinks: ['twitter'],
-                timeZone: 'time zone',
-                accountPrivacy: 'all_users',
-              },
-            },
-          })}
-          match={{ params: { username: 'verified' } }} // Override default match
         />
       );
-      const { container: tree } = render(component);
+      const tree = renderer.create(component).toJSON();
       expect(tree).toMatchSnapshot();
     });
 
@@ -158,7 +141,7 @@ describe('<ProfilePage />', () => {
           store={mockStore(storeMocks.savingEditedBio)}
         />
       );
-      const { container: tree } = render(component);
+      const tree = renderer.create(component).toJSON();
       expect(tree).toMatchSnapshot();
     });
 
@@ -175,7 +158,7 @@ describe('<ProfilePage />', () => {
           store={mockStore(storeData)}
         />
       );
-      const { container: tree } = render(component);
+      const tree = renderer.create(component).toJSON();
       expect(tree).toMatchSnapshot();
     });
 
@@ -193,7 +176,7 @@ describe('<ProfilePage />', () => {
           store={mockStore(storeData)}
         />
       );
-      const { container: tree } = render(component);
+      const tree = renderer.create(component).toJSON();
       expect(tree).toMatchSnapshot();
     });
 
@@ -211,7 +194,7 @@ describe('<ProfilePage />', () => {
           store={mockStore(storeData)}
         />
       );
-      const { container: tree } = render(component);
+      const tree = renderer.create(component).toJSON();
       expect(tree).toMatchSnapshot();
     });
 
@@ -229,7 +212,7 @@ describe('<ProfilePage />', () => {
           store={mockStore(storeData)}
         />
       );
-      const { container: tree } = render(component);
+      const tree = renderer.create(component).toJSON();
       expect(tree).toMatchSnapshot();
     });
 
@@ -247,7 +230,7 @@ describe('<ProfilePage />', () => {
           store={mockStore(storeMocks.viewOwnProfile)}
         />
       );
-      const { container: tree } = render(component);
+      const tree = renderer.create(component).toJSON();
       expect(tree).toMatchSnapshot();
     });
     it('test age message alert', () => {
@@ -258,15 +241,17 @@ describe('<ProfilePage />', () => {
         authenticatedUser: { userId: 123, username: 'staff', administrator: true },
         config: { ...getConfig(), COLLECT_YEAR_OF_BIRTH: true },
       };
-      const { container } = render(
+      const component = (
         <ProfilePageWrapper
           contextValue={contextValue}
           store={mockStore(storeData)}
           requiresParentalConsent
-        />,
+        />
       );
+      const wrapper = mount(component);
+      wrapper.update();
 
-      expect(container.querySelector('.alert-info')).toHaveClass('show');
+      expect(wrapper.find('.alert-info').hasClass('show')).toBe(true);
     });
     it('test photo error alert', () => {
       const storeData = JSON.parse(JSON.stringify(storeMocks.viewOwnProfile));
@@ -275,15 +260,11 @@ describe('<ProfilePage />', () => {
         authenticatedUser: { userId: 123, username: 'staff', administrator: true },
         config: { ...getConfig(), COLLECT_YEAR_OF_BIRTH: true },
       };
-      const { container } = render(
+      const component = <ProfilePageWrapper contextValue={contextValue} store={mockStore(storeData)} />;
-        <ProfilePageWrapper
+      const wrapper = mount(component);
-          contextValue={contextValue}
+      wrapper.update();
-          store={mockStore(storeData)}
-          requiresParentalConsent
-        />,
-      );
 
-      expect(container.querySelector('.alert-danger')).toHaveClass('show');
+      expect(wrapper.find('.alert-danger').hasClass('show')).toBe(true);
     });
   });
 
@@ -293,13 +274,15 @@ describe('<ProfilePage />', () => {
         authenticatedUser: { userId: 123, username: 'staff', administrator: true },
         config: getConfig(),
       };
-      render(
+      const component = (
         <ProfilePageWrapper
           contextValue={contextValue}
           store={mockStore(storeMocks.loadingApp)}
           params={{ username: 'test-username' }}
-        />,
+        />
       );
+      const wrapper = mount(component);
+      wrapper.update();
 
       expect(analytics.sendTrackingLogEvent.mock.calls.length).toBe(1);
       expect(analytics.sendTrackingLogEvent.mock.calls[0][0]).toEqual('edx.profile.viewed');

src/profile/ProfilePluginPage.jsx

@@ -0,0 +1,219 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+
+import { ensureConfig } from '@edx/frontend-platform';
+import { AppContext } from '@edx/frontend-platform/react';
+import { injectIntl, intlShape, FormattedDate } from '@edx/frontend-platform/i18n';
+
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faTwitter, faFacebook, faLinkedin } from '@fortawesome/free-brands-svg-icons';
+import {
+  ActionRow, Avatar, Card, Hyperlink, Icon,
+} from '@edx/paragon';
+import { HistoryEdu, VerifiedUser } from '@edx/paragon/icons';
+
+import get from 'lodash.get';
+
+import { Plugin } from '@edx/frontend-plugin-framework/src/plugins';
+import PluginCountry from './forms/PluginCountry';
+
+// Actions
+import {
+  fetchProfile,
+} from './data/actions';
+
+// Components
+import PageLoading from './PageLoading';
+
+// Selectors
+import { profilePageSelector } from './data/selectors';
+
+// i18n
+import messages from './ProfilePage.messages';
+import eduMessages from './forms/Education.messages';
+
+import withParams from '../utils/hoc';
+
+ensureConfig(['CREDENTIALS_BASE_URL', 'LMS_BASE_URL'], 'ProfilePage');
+
+// eslint-disable-next-line react/function-component-definition
+function Fallback() {
+  return (
+    <div>this is broken as all get</div>
+  );
+}
+
+const platformDisplayInfo = {
+  facebook: {
+    icon: faFacebook,
+    name: '',
+  },
+  twitter: {
+    icon: faTwitter,
+    name: '',
+  },
+  linkedin: {
+    icon: faLinkedin,
+    name: '',
+  },
+};
+
+class ProfilePluginPage extends React.Component {
+  componentDidMount() {
+    this.props.fetchProfile(this.props.params.username);
+  }
+
+  renderContent() {
+    const {
+      profileImage,
+      country,
+      levelOfEducation,
+      socialLinks,
+      isLoadingProfile,
+      dateJoined,
+      name,
+      intl,
+    } = this.props;
+
+    if (isLoadingProfile) {
+      return <PageLoading srMessage={this.props.intl.formatMessage(messages['profile.loading'])} />;
+    }
+
+    return (
+      <Plugin fallbackComponent={<Fallback />}>
+        <Card className="mb-2">
+          <Card.Header
+            className="pb-5"
+            subtitle={(
+              <Hyperlink destination={`/u/${this.props.params.username}`}>
+                View public profile
+              </Hyperlink>
+            )}
+            actions={
+              (
+                <ActionRow className="mt-3">
+                  {socialLinks
+                    .filter(({ socialLink }) => Boolean(socialLink))
+                    .map(({ platform, socialLink }) => (
+                      <StaticListItem
+                        key={platform}
+                        name={platformDisplayInfo[platform].name}
+                        url={socialLink}
+                        platform={platform}
+                      />
+                    ))}
+                </ActionRow>
+              )
+            }
+          />
+          <Card.Section className="text-center" muted>
+            <Avatar
+              size="xl"
+              className="profile-plugin-avatar"
+              src={profileImage.src}
+              alt="Profile image"
+            />
+            <p className="h2 mb-0 font-weight-bold">{name}</p>
+            <p className="h3 mb-0 font-weight-bold">{this.props.params.username}</p>
+            <PluginCountry
+              country={country}
+            />
+          </Card.Section>
+          <Card.Footer className="p-0">
+            <Card.Section className="pgn-icons-cell-vertical">
+              <Icon src={VerifiedUser} />
+              <p>
+                since <FormattedDate value={new Date(dateJoined)} year="numeric" />
+              </p>
+            </Card.Section>
+            <Card.Section className="pgn-icons-cell-vertical">
+              <Icon src={HistoryEdu} />
+              <p>
+                {intl.formatMessage(get(
+                  eduMessages,
+                  `profile.education.levels.${levelOfEducation}`,
+                  eduMessages['profile.education.levels.o'],
+                ))}
+              </p>
+            </Card.Section>
+          </Card.Footer>
+        </Card>
+      </Plugin>
+    );
+  }
+
+  render() {
+    return (
+      <div className="profile-page">
+        {this.renderContent()}
+      </div>
+    );
+  }
+}
+
+const SocialLink = ({ url, name, platform }) => (
+  <a href={url} className="font-weight-bold">
+    <FontAwesomeIcon className="mr-2" icon={platformDisplayInfo[platform].icon} />
+    {name}
+  </a>
+);
+
+const StaticListItem = ({ url, name, platform }) => (
+  <ul className="list-inline">
+    <SocialLink name={name} url={url} platform={platform} />
+  </ul>
+);
+
+ProfilePluginPage.contextType = AppContext;
+
+ProfilePluginPage.propTypes = {
+  // Account data
+  dateJoined: PropTypes.string,
+
+  // Country form data
+  country: PropTypes.string,
+
+  // Education form data
+  levelOfEducation: PropTypes.string,
+
+  // Social links form data
+  socialLinks: PropTypes.arrayOf(PropTypes.shape({
+    platform: PropTypes.string,
+    socialLink: PropTypes.string,
+  })),
+
+  // Other data we need
+  profileImage: PropTypes.shape({
+    src: PropTypes.string,
+    isDefault: PropTypes.bool,
+  }),
+  isLoadingProfile: PropTypes.bool.isRequired,
+
+  // Actions
+  fetchProfile: PropTypes.func.isRequired,
+
+  // Router
+  params: PropTypes.shape({
+    username: PropTypes.string.isRequired,
+  }).isRequired,
+
+  // i18n
+  intl: intlShape.isRequired,
+};
+
+ProfilePluginPage.defaultProps = {
+  profileImage: {},
+  levelOfEducation: null,
+  country: null,
+  socialLinks: [],
+  dateJoined: null,
+};
+
+export default connect(
+  profilePageSelector,
+  {
+    fetchProfile,
+  },
+)(injectIntl(withParams(ProfilePluginPage)));

src/profile/__snapshots__/ProfilePage.test.jsx.snap

@@ -1,71 +1,74 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<ProfilePage /> Renders correctly in various states app loading 1`] = `
-<div>
+<div
+  className="profile-page"
+>
   <div
-    class="profile-page"
+    className="profile-page-bg-banner bg-primary d-none d-md-block p-relative"
-  >
-    <div
-      class="profile-page-bg-banner bg-primary d-md-block p-relative"
   />
   <div>
     <div
-        class="d-flex justify-content-center align-items-center flex-column"
+      className="d-flex justify-content-center align-items-center flex-column"
-        style="height: 50vh;"
+      style={
+        Object {
+          "height": "50vh",
+        }
+      }
     >
       <div
-          class="spinner-border text-primary"
+        className="spinner-border text-primary"
         role="status"
       >
         <span
-            class="sr-only"
+          className="sr-only"
         >
           Profile loading...
         </span>
       </div>
     </div>
   </div>
-  </div>
 </div>
 `;
 
 exports[`<ProfilePage /> Renders correctly in various states test country edit with error 1`] = `
-<div>
+<div
+  className="profile-page"
+>
   <div
-    class="profile-page"
+    className="profile-page-bg-banner bg-primary d-none d-md-block p-relative"
-  >
-    <div
-      class="profile-page-bg-banner bg-primary d-md-block p-relative"
   />
   <div
-      class="container-fluid"
+    className="container-fluid"
   >
     <div
-        class="row align-items-center pt-4 mb-4 pt-md-0 mb-md-0"
+      className="row align-items-center pt-4 mb-4 pt-md-0 mb-md-0"
     >
       <div
-          class="col-auto col-md-4 col-lg-3"
+        className="col-auto col-md-4 col-lg-3"
       >
         <div
-            class="d-flex align-items-center d-md-block"
+          className="d-flex align-items-center d-md-block"
         >
           <div
-              class="profile-avatar-wrap position-relative"
+            className="profile-avatar-wrap position-relative"
           >
             <div
-                class="profile-avatar rounded-circle bg-light"
+              className="profile-avatar rounded-circle bg-light"
             >
               <div
-                  class="profile-avatar-menu-container"
+                className="profile-avatar-menu-container"
               >
                 <div
-                    class="pgn__dropdown pgn__dropdown-light dropdown"
+                  className="pgn__dropdown pgn__dropdown-light dropdown"
                   data-testid="dropdown"
                 >
                   <button
-                      aria-expanded="false"
+                    aria-expanded={false}
-                      aria-haspopup="true"
+                    aria-haspopup={true}
-                      class="dropdown-toggle btn btn-primary"
+                    className="dropdown-toggle btn btn-primary"
+                    disabled={false}
+                    onClick={[Function]}
                     type="button"
                   >
                     Change
@@ -74,77 +77,92 @@ exports[`<ProfilePage /> Renders correctly in various states test country edit w
               </div>
               <img
                 alt="profile avatar"
-                  class="w-100 h-100 d-block rounded-circle overflow-hidden"
+                className="w-100 h-100 d-block rounded-circle overflow-hidden"
-                  data-hj-suppress="true"
+                data-hj-suppress={true}
                 src="http://localhost:18000/media/profile-images/d2a9bdc2ba165dcefc73265c54bf9a20_500.jpg?v=1552495012"
-                  style="object-fit: cover;"
+                style={
+                  Object {
+                    "objectFit": "cover",
+                  }
+                }
               />
             </div>
             <form
-                enctype="multipart/form-data"
+              encType="multipart/form-data"
+              onSubmit={[Function]}
             >
               <input
                 accept=".jpg, .jpeg, .png"
-                  class="d-none form-control-file"
+                className="d-none form-control-file"
                 id="photo-file"
                 name="file"
+                onChange={[Function]}
                 type="file"
               />
             </form>
           </div>
         </div>
       </div>
+      <div>
+        PluginPOC
+      </div>
       <div
-          class="col"
+        className="col pl-0"
       >
         <div
-            class="d-md-none"
+          className="d-md-none"
         >
           <span
-              data-hj-suppress="true"
+            data-hj-suppress={true}
           >
             <h1
-                class="h2 mb-0 font-weight-bold text-truncate"
+              className="h2 mb-0 font-weight-bold"
             >
               staff
             </h1>
             <p
-                class="mb-0"
+              className="mb-0"
             >
               Member since 
               2017
             </p>
             <hr
-                class="d-none d-md-block"
+              className="d-none d-md-block"
             />
           </span>
         </div>
         <div
-            class="d-none d-md-block float-right"
+          className="d-none d-md-block float-right"
         >
           <a
-              class="pgn__hyperlink default-link standalone-link btn btn-primary"
+            className="pgn__hyperlink default-link standalone-link btn btn-primary"
             href="http://localhost:18150/records"
+            onClick={[Function]}
             rel="noopener noreferrer"
             target="_blank"
           >
             View My Records
             <span
-                class="pgn__hyperlink__external-icon"
+              className="pgn__hyperlink__external-icon"
               title="Opens in a new tab"
             >
               <span
-                  class="pgn__icon"
+                className="pgn__icon"
-                  style="height: 1em; width: 1em;"
+                style={
+                  Object {
+                    "height": "1em",
+                    "width": "1em",
+                  }
+                }
               >
                 <svg
-                    aria-hidden="true"
+                  aria-hidden={true}
                   fill="none"
-                    focusable="false"
+                  focusable={false}
-                    height="24"
+                  height={24}
                   role="img"
                   viewBox="0 0 24 24"
-                    width="24"
+                  width={24}
                   xmlns="http://www.w3.org/2000/svg"
                 >
                   <path
@@ -153,7 +171,7 @@ exports[`<ProfilePage /> Renders correctly in various states test country edit w
                   />
                 </svg>
                 <span
-                    class="sr-only"
+                  className="sr-only"
                 >
                   in a new tab
                 </span>
@@ -164,59 +182,65 @@ exports[`<ProfilePage /> Renders correctly in various states test country edit w
       </div>
     </div>
     <div
-        class="row"
+      className="row"
     >
       <div
-          class="col-md-4 col-lg-4"
+        className="col-md-4 col-lg-4"
       >
         <div
-            class="d-none d-md-block mb-4"
+          className="d-none d-md-block mb-4"
         >
           <span
-              data-hj-suppress="true"
+            data-hj-suppress={true}
           >
             <h1
-                class="h2 mb-0 font-weight-bold text-truncate"
+              className="h2 mb-0 font-weight-bold"
             >
               staff
             </h1>
             <p
-                class="mb-0"
+              className="mb-0"
             >
               Member since 
               2017
             </p>
             <hr
-                class="d-none d-md-block"
+              className="d-none d-md-block"
             />
           </span>
         </div>
         <div
-            class="d-md-none mb-4"
+          className="d-md-none mb-4"
         >
           <a
-              class="pgn__hyperlink default-link standalone-link btn btn-primary"
+            className="pgn__hyperlink default-link standalone-link btn btn-primary"
             href="http://localhost:18150/records"
+            onClick={[Function]}
             rel="noopener noreferrer"
             target="_blank"
           >
             View My Records
             <span
-                class="pgn__hyperlink__external-icon"
+              className="pgn__hyperlink__external-icon"
               title="Opens in a new tab"
             >
               <span
-                  class="pgn__icon"
+                className="pgn__icon"
-                  style="height: 1em; width: 1em;"
+                style={
+                  Object {
+                    "height": "1em",
+                    "width": "1em",
+                  }
+                }
               >
                 <svg
-                    aria-hidden="true"
+                  aria-hidden={true}
                   fill="none"
-                    focusable="false"
+                  focusable={false}
-                    height="24"
+                  height={24}
                   role="img"
                   viewBox="0 0 24 24"
-                    width="24"
+                  width={24}
                   xmlns="http://www.w3.org/2000/svg"
                 >
                   <path
@@ -225,7 +249,7 @@ exports[`<ProfilePage /> Renders correctly in various states test country edit w
                   />
                 </svg>
                 <span
-                    class="sr-only"
+                  className="sr-only"
                 >
                   in a new tab
                 </span>
@@ -234,60 +258,80 @@ exports[`<ProfilePage /> Renders correctly in various states test country edit w
           </a>
         </div>
         <div
-            class="pgn-transition-replace-group position-relative mb-5"
+          className="pgn-transition-replace-group position-relative mb-5"
+          style={
+            Object {
+              "height": null,
+            }
+          }
         >
           <div
-              style="padding: .1px 0px;"
+            style={
+              Object {
+                "padding": ".1px 0",
+              }
+            }
           >
             <div
-                class="editable-item-header mb-2"
+              className="editable-item-header mb-2"
             >
               <h2
-                  class="edit-section-header"
+                className="edit-section-header"
+                id={null}
               >
                 Full Name
                 <button
-                    class="float-right px-0 btn btn-link btn-sm"
+                  className="float-right px-0 btn btn-link btn-sm"
-                    style="margin-top: -.35rem;"
+                  disabled={false}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "marginTop": "-.35rem",
+                    }
+                  }
                   type="button"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-pencil mr-1"
+                    className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-                      data-icon="pencil"
+                    data-icon="pencil-alt"
                     data-prefix="fas"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 512 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"
+                      d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                   Edit
                 </button>
               </h2>
               <p
-                  class="mb-0"
+                className="mb-0"
               >
                 <span
-                    class="ml-auto small text-muted"
+                  className="ml-auto small text-muted"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-eye-slash "
+                    className="svg-inline--fa fa-eye-slash fa-w-20 "
                     data-icon="eye-slash"
                     data-prefix="far"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 640 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zm151 118.3C226 97.7 269.5 80 320 80c65.2 0 118.8 29.6 159.9 67.7C518.4 183.5 545 226 558.6 256c-12.6 28-36.6 66.8-70.9 100.9l-53.8-42.2c9.1-17.6 14.2-37.5 14.2-58.7c0-70.7-57.3-128-128-128c-32.2 0-61.7 11.9-84.2 31.5l-46.1-36.1zM394.9 284.2l-81.5-63.9c4.2-8.5 6.6-18.2 6.6-28.3c0-5.5-.7-10.9-2-16c.7 0 1.3 0 2 0c44.2 0 80 35.8 80 80c0 9.9-1.8 19.4-5.1 28.2zm51.3 163.3l-41.9-33C378.8 425.4 350.7 432 320 432c-65.2 0-118.8-29.6-159.9-67.7C121.6 328.5 95 286 81.4 256c8.3-18.4 21.5-41.5 39.4-64.8L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5zm-88-69.3L302 334c-23.5-5.4-43.1-21.2-53.7-42.3l-56.1-44.2c-.2 2.8-.3 5.6-.3 8.5c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8z"
+                      d="M634 471L36 3.51A16 16 0 0 0 13.51 6l-10 12.49A16 16 0 0 0 6 41l598 467.49a16 16 0 0 0 22.49-2.49l10-12.49A16 16 0 0 0 634 471zM296.79 146.47l134.79 105.38C429.36 191.91 380.48 144 320 144a112.26 112.26 0 0 0-23.21 2.47zm46.42 219.07L208.42 260.16C210.65 320.09 259.53 368 320 368a113 113 0 0 0 23.21-2.46zM320 112c98.65 0 189.09 55 237.93 144a285.53 285.53 0 0 1-44 60.2l37.74 29.5a333.7 333.7 0 0 0 52.9-75.11 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64c-36.7 0-71.71 7-104.63 18.81l46.41 36.29c18.94-4.3 38.34-7.1 58.22-7.1zm0 288c-98.65 0-189.08-55-237.93-144a285.47 285.47 0 0 1 44.05-60.19l-37.74-29.5a333.6 333.6 0 0 0-52.89 75.1 32.35 32.35 0 0 0 0 29.19C89.72 376.41 197.08 448 320 448c36.7 0 71.71-7.05 104.63-18.81l-46.41-36.28C359.28 397.2 339.89 400 320 400z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                    
@@ -296,44 +340,57 @@ exports[`<ProfilePage /> Renders correctly in various states test country edit w
               </p>
             </div>
             <p
-                class="h5"
+              className="h5"
-                data-hj-suppress="true"
+              data-hj-suppress={true}
             >
               Lemon Seltzer
             </p>
             <small
-                class="form-text text-muted"
+              className="form-text text-muted"
             >
               This is the name that appears in your account and on your certificates.
             </small>
           </div>
         </div>
         <div
-            class="pgn-transition-replace-group position-relative mb-5"
+          className="pgn-transition-replace-group position-relative mb-5"
+          style={
+            Object {
+              "height": null,
+            }
+          }
         >
           <div
-              style="padding: .1px 0px;"
+            style={
+              Object {
+                "padding": ".1px 0",
+              }
+            }
           >
             <div
               aria-labelledby="country-label"
               role="dialog"
             >
-                <form>
+              <form
+                onSubmit={[Function]}
+              >
                 <div
-                    class="pgn__form-group"
+                  className="pgn__form-group"
                 >
                   <label
-                      class="edit-section-header"
+                    className="edit-section-header"
-                      for="country"
+                    htmlFor="country"
                   >
                     Location
                   </label>
                   <select
-                      class="form-control"
+                    className="form-control"
-                      data-hj-suppress="true"
+                    data-hj-suppress={true}
                     id="country"
                     name="country"
+                    onChange={[Function]}
                     type="select"
+                    value="ME"
                   >
                     <option
                       value=""
@@ -1592,7 +1649,7 @@ exports[`<ProfilePage /> Renders correctly in various states test country edit w
                     </option>
                   </select>
                   <div
-                      class="pgn__form-control-description pgn__form-text pgn__form-text-invalid"
+                    className="pgn__form-control-description pgn__form-text pgn__form-text-invalid"
                     id="country-2"
                   >
                     <div>
@@ -1601,45 +1658,53 @@ exports[`<ProfilePage /> Renders correctly in various states test country edit w
                   </div>
                 </div>
                 <div
-                    class="d-flex flex-row-reverse flex-wrap justify-content-end align-items-center"
+                  className="d-flex flex-row-reverse flex-wrap justify-content-end align-items-center"
                 >
                   <div
-                      class="form-group d-flex flex-wrap"
+                    className="form-group d-flex flex-wrap"
                   >
                     <label
-                        class="col-form-label"
+                      className="col-form-label"
-                        for="visibilityCountry"
+                      htmlFor="visibilityCountry"
                     >
                       Who can see this:
                     </label>
                     <span
-                        class="d-flex align-items-center"
+                      className="d-flex align-items-center"
                     >
                       <span
-                          class="d-inline-block ml-1 mr-2"
+                        className="d-inline-block ml-1 mr-2"
-                          style="width: 1.5rem;"
+                        style={
+                          Object {
+                            "width": "1.5rem",
+                          }
+                        }
                       >
                         <svg
                           aria-hidden="true"
-                            class="svg-inline--fa fa-eye "
+                          className="svg-inline--fa fa-eye fa-w-18 "
                           data-icon="eye"
                           data-prefix="far"
                           focusable="false"
                           role="img"
+                          style={Object {}}
                           viewBox="0 0 576 512"
                           xmlns="http://www.w3.org/2000/svg"
                         >
                           <path
-                              d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"
+                            d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z"
                             fill="currentColor"
+                            style={Object {}}
                           />
                         </svg>
                       </span>
                       <select
-                          class="d-inline-block form-control"
+                        className="d-inline-block w-auto form-control"
                         id="visibilityCountry"
                         name="visibilityCountry"
+                        onChange={[Function]}
                         type="select"
+                        value="all_users"
                       >
                         <option
                           value="private"
@@ -1655,31 +1720,33 @@ exports[`<ProfilePage /> Renders correctly in various states test country edit w
                     </span>
                   </div>
                   <div
-                      class="form-group flex-shrink-0 flex-grow-1"
+                    className="form-group flex-shrink-0 flex-grow-1"
                   >
                     <button
-                        aria-disabled="false"
+                      aria-disabled={false}
                       aria-live="assertive"
-                        class="pgn__stateful-btn pgn__stateful-btn-state-pending btn btn-primary"
+                      className="pgn__stateful-btn pgn__stateful-btn-state-pending btn btn-primary"
+                      disabled={false}
+                      onClick={[Function]}
                       type="submit"
                     >
                       <span
-                          class="d-flex align-items-center justify-content-center"
+                        className="d-flex align-items-center justify-content-center"
                       >
                         <span
-                            class="pgn__stateful-btn-icon"
+                          className="pgn__stateful-btn-icon"
                         >
                           <span
-                              class="pgn__icon icon-spin"
+                            className="pgn__icon icon-spin"
                           >
                             <svg
-                                aria-hidden="true"
+                              aria-hidden={true}
                               fill="none"
-                                focusable="false"
+                              focusable={false}
-                                height="24"
+                              height={24}
                               role="img"
                               viewBox="0 0 24 24"
-                                width="24"
+                              width={24}
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
@@ -1695,7 +1762,9 @@ exports[`<ProfilePage /> Renders correctly in various states test country edit w
                       </span>
                     </button>
                     <button
-                        class="btn btn-link"
+                      className="btn btn-link"
+                      disabled={false}
+                      onClick={[Function]}
                       type="button"
                     >
                       Cancel
@@ -1707,60 +1776,80 @@ exports[`<ProfilePage /> Renders correctly in various states test country edit w
           </div>
         </div>
         <div
-            class="pgn-transition-replace-group position-relative mb-5"
+          className="pgn-transition-replace-group position-relative mb-5"
+          style={
+            Object {
+              "height": null,
+            }
+          }
         >
           <div
-              style="padding: .1px 0px;"
+            style={
+              Object {
+                "padding": ".1px 0",
+              }
+            }
           >
             <div
-                class="editable-item-header mb-2"
+              className="editable-item-header mb-2"
             >
               <h2
-                  class="edit-section-header"
+                className="edit-section-header"
+                id={null}
               >
                 Primary Language Spoken
                 <button
-                    class="float-right px-0 btn btn-link btn-sm"
+                  className="float-right px-0 btn btn-link btn-sm"
-                    style="margin-top: -.35rem;"
+                  disabled={false}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "marginTop": "-.35rem",
+                    }
+                  }
                   type="button"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-pencil mr-1"
+                    className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-                      data-icon="pencil"
+                    data-icon="pencil-alt"
                     data-prefix="fas"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 512 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"
+                      d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                   Edit
                 </button>
               </h2>
               <p
-                  class="mb-0"
+                className="mb-0"
               >
                 <span
-                    class="ml-auto small text-muted"
+                  className="ml-auto small text-muted"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-eye "
+                    className="svg-inline--fa fa-eye fa-w-18 "
                     data-icon="eye"
                     data-prefix="far"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 576 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"
+                      d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                    
@@ -1769,68 +1858,88 @@ exports[`<ProfilePage /> Renders correctly in various states test country edit w
               </p>
             </div>
             <p
-                class="h5"
+              className="h5"
-                data-hj-suppress="true"
+              data-hj-suppress={true}
             >
               Yoruba
             </p>
           </div>
         </div>
         <div
-            class="pgn-transition-replace-group position-relative mb-5"
+          className="pgn-transition-replace-group position-relative mb-5"
+          style={
+            Object {
+              "height": null,
+            }
+          }
         >
           <div
-              style="padding: .1px 0px;"
+            style={
+              Object {
+                "padding": ".1px 0",
+              }
+            }
           >
             <div
-                class="editable-item-header mb-2"
+              className="editable-item-header mb-2"
             >
               <h2
-                  class="edit-section-header"
+                className="edit-section-header"
+                id={null}
               >
                 Education
                 <button
-                    class="float-right px-0 btn btn-link btn-sm"
+                  className="float-right px-0 btn btn-link btn-sm"
-                    style="margin-top: -.35rem;"
+                  disabled={false}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "marginTop": "-.35rem",
+                    }
+                  }
                   type="button"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-pencil mr-1"
+                    className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-                      data-icon="pencil"
+                    data-icon="pencil-alt"
                     data-prefix="fas"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 512 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"
+                      d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                   Edit
                 </button>
               </h2>
               <p
-                  class="mb-0"
+                className="mb-0"
               >
                 <span
-                    class="ml-auto small text-muted"
+                  className="ml-auto small text-muted"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-eye-slash "
+                    className="svg-inline--fa fa-eye-slash fa-w-20 "
                     data-icon="eye-slash"
                     data-prefix="far"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 640 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zm151 118.3C226 97.7 269.5 80 320 80c65.2 0 118.8 29.6 159.9 67.7C518.4 183.5 545 226 558.6 256c-12.6 28-36.6 66.8-70.9 100.9l-53.8-42.2c9.1-17.6 14.2-37.5 14.2-58.7c0-70.7-57.3-128-128-128c-32.2 0-61.7 11.9-84.2 31.5l-46.1-36.1zM394.9 284.2l-81.5-63.9c4.2-8.5 6.6-18.2 6.6-28.3c0-5.5-.7-10.9-2-16c.7 0 1.3 0 2 0c44.2 0 80 35.8 80 80c0 9.9-1.8 19.4-5.1 28.2zm51.3 163.3l-41.9-33C378.8 425.4 350.7 432 320 432c-65.2 0-118.8-29.6-159.9-67.7C121.6 328.5 95 286 81.4 256c8.3-18.4 21.5-41.5 39.4-64.8L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5zm-88-69.3L302 334c-23.5-5.4-43.1-21.2-53.7-42.3l-56.1-44.2c-.2 2.8-.3 5.6-.3 8.5c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8z"
+                      d="M634 471L36 3.51A16 16 0 0 0 13.51 6l-10 12.49A16 16 0 0 0 6 41l598 467.49a16 16 0 0 0 22.49-2.49l10-12.49A16 16 0 0 0 634 471zM296.79 146.47l134.79 105.38C429.36 191.91 380.48 144 320 144a112.26 112.26 0 0 0-23.21 2.47zm46.42 219.07L208.42 260.16C210.65 320.09 259.53 368 320 368a113 113 0 0 0 23.21-2.46zM320 112c98.65 0 189.09 55 237.93 144a285.53 285.53 0 0 1-44 60.2l37.74 29.5a333.7 333.7 0 0 0 52.9-75.11 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64c-36.7 0-71.71 7-104.63 18.81l46.41 36.29c18.94-4.3 38.34-7.1 58.22-7.1zm0 288c-98.65 0-189.08-55-237.93-144a285.47 285.47 0 0 1 44.05-60.19l-37.74-29.5a333.6 333.6 0 0 0-52.89 75.1 32.35 32.35 0 0 0 0 29.19C89.72 376.41 197.08 448 320 448c36.7 0 71.71-7.05 104.63-18.81l-46.41-36.28C359.28 397.2 339.89 400 320 400z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                    
@@ -1839,68 +1948,88 @@ exports[`<ProfilePage /> Renders correctly in various states test country edit w
               </p>
             </div>
             <p
-                class="h5"
+              className="h5"
-                data-hj-suppress="true"
+              data-hj-suppress={true}
             >
               Elementary/primary school
             </p>
           </div>
         </div>
         <div
-            class="pgn-transition-replace-group position-relative mb-5"
+          className="pgn-transition-replace-group position-relative mb-5"
+          style={
+            Object {
+              "height": null,
+            }
+          }
         >
           <div
-              style="padding: .1px 0px;"
+            style={
+              Object {
+                "padding": ".1px 0",
+              }
+            }
           >
             <div
-                class="editable-item-header mb-2"
+              className="editable-item-header mb-2"
             >
               <h2
-                  class="edit-section-header"
+                className="edit-section-header"
+                id={null}
               >
                 Social Links
                 <button
-                    class="float-right px-0 btn btn-link btn-sm"
+                  className="float-right px-0 btn btn-link btn-sm"
-                    style="margin-top: -.35rem;"
+                  disabled={false}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "marginTop": "-.35rem",
+                    }
+                  }
                   type="button"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-pencil mr-1"
+                    className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-                      data-icon="pencil"
+                    data-icon="pencil-alt"
                     data-prefix="fas"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 512 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"
+                      d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                   Edit
                 </button>
               </h2>
               <p
-                  class="mb-0"
+                className="mb-0"
               >
                 <span
-                    class="ml-auto small text-muted"
+                  className="ml-auto small text-muted"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-eye "
+                    className="svg-inline--fa fa-eye fa-w-18 "
                     data-icon="eye"
                     data-prefix="far"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 576 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"
+                      d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                    
@@ -1909,80 +2038,88 @@ exports[`<ProfilePage /> Renders correctly in various states test country edit w
               </p>
             </div>
             <ul
-                class="list-unstyled"
+              className="list-unstyled"
             >
               <li
-                  class="form-group"
+                className="form-group"
               >
                 <a
-                    class="font-weight-bold"
+                  className="font-weight-bold"
                   href="https://www.twitter.com/ALOHA"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-twitter mr-2"
+                    className="svg-inline--fa fa-twitter fa-w-16 mr-2"
                     data-icon="twitter"
                     data-prefix="fab"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 512 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
                       d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                   Twitter
                 </a>
               </li>
               <li
-                  class="form-group"
+                className="form-group"
               >
                 <a
-                    class="font-weight-bold"
+                  className="font-weight-bold"
                   href="https://www.facebook.com/aloha"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-facebook mr-2"
+                    className="svg-inline--fa fa-facebook fa-w-16 mr-2"
                     data-icon="facebook"
                     data-prefix="fab"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 512 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M512 256C512 114.6 397.4 0 256 0S0 114.6 0 256C0 376 82.7 476.8 194.2 504.5V334.2H141.4V256h52.8V222.3c0-87.1 39.4-127.5 125-127.5c16.2 0 44.2 3.2 55.7 6.4V172c-6-.6-16.5-1-29.6-1c-42 0-58.2 15.9-58.2 57.2V256h83.6l-14.4 78.2H287V510.1C413.8 494.8 512 386.9 512 256h0z"
+                      d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                   Facebook
                 </a>
               </li>
               <li
-                  class="form-group"
+                className="form-group"
               >
                 <div>
                   <button
-                      class="pl-0 text-left btn btn-link"
+                    className="pl-0 text-left btn btn-link"
-                      tabindex="0"
+                    onClick={[Function]}
+                    onKeyDown={[Function]}
+                    tabIndex={0}
                     type="button"
                   >
                     <svg
                       aria-hidden="true"
-                        class="svg-inline--fa fa-plus fa-xs mr-2"
+                      className="svg-inline--fa fa-plus fa-w-14 fa-xs mr-2"
                       data-icon="plus"
                       data-prefix="fas"
                       focusable="false"
                       role="img"
+                      style={Object {}}
                       viewBox="0 0 448 512"
                       xmlns="http://www.w3.org/2000/svg"
                     >
                       <path
-                          d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"
+                        d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
                         fill="currentColor"
+                        style={Object {}}
                       />
                     </svg>
                     Add 
@@ -1995,63 +2132,83 @@ exports[`<ProfilePage /> Renders correctly in various states test country edit w
         </div>
       </div>
       <div
-          class="pt-md-3 col-md-8 col-lg-7 offset-lg-1"
+        className="pt-md-3 col-md-8 col-lg-7 offset-lg-1"
       >
         <div
-            class="pgn-transition-replace-group position-relative mb-5"
+          className="pgn-transition-replace-group position-relative mb-5"
+          style={
+            Object {
+              "height": null,
+            }
+          }
         >
           <div
-              style="padding: .1px 0px;"
+            style={
+              Object {
+                "padding": ".1px 0",
+              }
+            }
           >
             <div
-                class="editable-item-header mb-2"
+              className="editable-item-header mb-2"
             >
               <h2
-                  class="edit-section-header"
+                className="edit-section-header"
+                id={null}
               >
                 About Me
                 <button
-                    class="float-right px-0 btn btn-link btn-sm"
+                  className="float-right px-0 btn btn-link btn-sm"
-                    style="margin-top: -.35rem;"
+                  disabled={false}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "marginTop": "-.35rem",
+                    }
+                  }
                   type="button"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-pencil mr-1"
+                    className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-                      data-icon="pencil"
+                    data-icon="pencil-alt"
                     data-prefix="fas"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 512 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"
+                      d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                   Edit
                 </button>
               </h2>
               <p
-                  class="mb-0"
+                className="mb-0"
               >
                 <span
-                    class="ml-auto small text-muted"
+                  className="ml-auto small text-muted"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-eye "
+                    className="svg-inline--fa fa-eye fa-w-18 "
                     data-icon="eye"
                     data-prefix="far"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 576 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"
+                      d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                    
@@ -2060,68 +2217,88 @@ exports[`<ProfilePage /> Renders correctly in various states test country edit w
               </p>
             </div>
             <p
-                class="lead"
+              className="lead"
-                data-hj-suppress="true"
+              data-hj-suppress={true}
             >
               This is my bio
             </p>
           </div>
         </div>
         <div
-            class="pgn-transition-replace-group position-relative mb-4"
+          className="pgn-transition-replace-group position-relative mb-4"
+          style={
+            Object {
+              "height": null,
+            }
+          }
         >
           <div
-              style="padding: .1px 0px;"
+            style={
+              Object {
+                "padding": ".1px 0",
+              }
+            }
           >
             <div
-                class="editable-item-header mb-2"
+              className="editable-item-header mb-2"
             >
               <h2
-                  class="edit-section-header"
+                className="edit-section-header"
+                id={null}
               >
                 My Certificates
                 <button
-                    class="float-right px-0 btn btn-link btn-sm"
+                  className="float-right px-0 btn btn-link btn-sm"
-                    style="margin-top: -.35rem;"
+                  disabled={false}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "marginTop": "-.35rem",
+                    }
+                  }
                   type="button"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-pencil mr-1"
+                    className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-                      data-icon="pencil"
+                    data-icon="pencil-alt"
                     data-prefix="fas"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 512 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"
+                      d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                   Edit
                 </button>
               </h2>
               <p
-                  class="mb-0"
+                className="mb-0"
               >
                 <span
-                    class="ml-auto small text-muted"
+                  className="ml-auto small text-muted"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-eye "
+                    className="svg-inline--fa fa-eye fa-w-18 "
                     data-icon="eye"
                     data-prefix="far"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 576 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"
+                      d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                    
@@ -2130,78 +2307,88 @@ exports[`<ProfilePage /> Renders correctly in various states test country edit w
               </p>
             </div>
             <div
-                class="row align-items-stretch"
+              className="row align-items-stretch"
             >
               <div
-                  class="col-12 col-sm-6 d-flex align-items-stretch"
+                className="col col-sm-6 d-flex align-items-stretch"
               >
                 <div
-                    class="card mb-4 certificate flex-grow-1"
+                  className="card mb-4 certificate flex-grow-1"
                 >
                   <div
-                      class="certificate-type-illustration"
+                    className="certificate-type-illustration"
-                      style="background-image: url(icon/mock/path);"
+                    style={
+                      Object {
+                        "backgroundImage": "url(icon/mock/path)",
+                      }
+                    }
                   />
                   <div
-                      class="card-body d-flex flex-column"
+                    className="card-body d-flex flex-column"
                   >
                     <div
-                        class="card-title"
+                      className="card-title"
                     >
                       <p
-                          class="small mb-0"
+                        className="small mb-0"
                       >
                         Verified Certificate
                       </p>
                       <h4
-                          class="certificate-title"
+                        className="certificate-title"
                       >
                         edX Demonstration Course
                       </h4>
                     </div>
                     <p
-                        class="small mb-0"
+                      className="small mb-0"
                     >
                       From
                     </p>
                     <p
-                        class="h6 mb-4"
+                      className="h6 mb-4"
                     >
                       edX
                     </p>
                     <div
-                        class="flex-grow-1"
+                      className="flex-grow-1"
                     />
                     <p
-                        class="small mb-2"
+                      className="small mb-2"
                     >
                       Completed on 
                       3/4/2019
                     </p>
                     <div>
                       <a
-                          class="pgn__hyperlink default-link standalone-link btn btn-outline-primary"
+                        className="pgn__hyperlink default-link standalone-link btn btn-outline-primary"
                         href="http://www.example.com/"
+                        onClick={[Function]}
                         rel="noopener noreferrer"
                         target="_blank"
                       >
                         View Certificate
                         <span
-                            class="pgn__hyperlink__external-icon"
+                          className="pgn__hyperlink__external-icon"
                           title="Opens in a new tab"
                         >
                           <span
-                              class="pgn__icon"
+                            className="pgn__icon"
-                              style="height: 1em; width: 1em;"
+                            style={
+                              Object {
+                                "height": "1em",
+                                "width": "1em",
+                              }
+                            }
                           >
                             <svg
-                                aria-hidden="true"
+                              aria-hidden={true}
                               fill="none"
-                                focusable="false"
+                              focusable={false}
-                                height="24"
+                              height={24}
                               role="img"
                               viewBox="0 0 24 24"
-                                width="24"
+                              width={24}
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
@@ -2210,7 +2397,7 @@ exports[`<ProfilePage /> Renders correctly in various states test country edit w
                               />
                             </svg>
                             <span
-                                class="sr-only"
+                              className="sr-only"
                             >
                               in a new tab
                             </span>
@@ -2227,47 +2414,47 @@ exports[`<ProfilePage /> Renders correctly in various states test country edit w
       </div>
     </div>
   </div>
-  </div>
 </div>
 `;
 
 exports[`<ProfilePage /> Renders correctly in various states test education edit with error 1`] = `
-<div>
+<div
+  className="profile-page"
+>
   <div
-    class="profile-page"
+    className="profile-page-bg-banner bg-primary d-none d-md-block p-relative"
-  >
-    <div
-      class="profile-page-bg-banner bg-primary d-md-block p-relative"
   />
   <div
-      class="container-fluid"
+    className="container-fluid"
   >
     <div
-        class="row align-items-center pt-4 mb-4 pt-md-0 mb-md-0"
+      className="row align-items-center pt-4 mb-4 pt-md-0 mb-md-0"
     >
       <div
-          class="col-auto col-md-4 col-lg-3"
+        className="col-auto col-md-4 col-lg-3"
       >
         <div
-            class="d-flex align-items-center d-md-block"
+          className="d-flex align-items-center d-md-block"
         >
           <div
-              class="profile-avatar-wrap position-relative"
+            className="profile-avatar-wrap position-relative"
           >
             <div
-                class="profile-avatar rounded-circle bg-light"
+              className="profile-avatar rounded-circle bg-light"
             >
               <div
-                  class="profile-avatar-menu-container"
+                className="profile-avatar-menu-container"
               >
                 <div
-                    class="pgn__dropdown pgn__dropdown-light dropdown"
+                  className="pgn__dropdown pgn__dropdown-light dropdown"
                   data-testid="dropdown"
                 >
                   <button
-                      aria-expanded="false"
+                    aria-expanded={false}
-                      aria-haspopup="true"
+                    aria-haspopup={true}
-                      class="dropdown-toggle btn btn-primary"
+                    className="dropdown-toggle btn btn-primary"
+                    disabled={false}
+                    onClick={[Function]}
                     type="button"
                   >
                     Change
@@ -2276,77 +2463,92 @@ exports[`<ProfilePage /> Renders correctly in various states test education edit
               </div>
               <img
                 alt="profile avatar"
-                  class="w-100 h-100 d-block rounded-circle overflow-hidden"
+                className="w-100 h-100 d-block rounded-circle overflow-hidden"
-                  data-hj-suppress="true"
+                data-hj-suppress={true}
                 src="http://localhost:18000/media/profile-images/d2a9bdc2ba165dcefc73265c54bf9a20_500.jpg?v=1552495012"
-                  style="object-fit: cover;"
+                style={
+                  Object {
+                    "objectFit": "cover",
+                  }
+                }
               />
             </div>
             <form
-                enctype="multipart/form-data"
+              encType="multipart/form-data"
+              onSubmit={[Function]}
             >
               <input
                 accept=".jpg, .jpeg, .png"
-                  class="d-none form-control-file"
+                className="d-none form-control-file"
                 id="photo-file"
                 name="file"
+                onChange={[Function]}
                 type="file"
               />
             </form>
           </div>
         </div>
       </div>
+      <div>
+        PluginPOC
+      </div>
       <div
-          class="col"
+        className="col pl-0"
       >
         <div
-            class="d-md-none"
+          className="d-md-none"
         >
           <span
-              data-hj-suppress="true"
+            data-hj-suppress={true}
           >
             <h1
-                class="h2 mb-0 font-weight-bold text-truncate"
+              className="h2 mb-0 font-weight-bold"
             >
               staff
             </h1>
             <p
-                class="mb-0"
+              className="mb-0"
             >
               Member since 
               2017
             </p>
             <hr
-                class="d-none d-md-block"
+              className="d-none d-md-block"
             />
           </span>
         </div>
         <div
-            class="d-none d-md-block float-right"
+          className="d-none d-md-block float-right"
         >
           <a
-              class="pgn__hyperlink default-link standalone-link btn btn-primary"
+            className="pgn__hyperlink default-link standalone-link btn btn-primary"
             href="http://localhost:18150/records"
+            onClick={[Function]}
             rel="noopener noreferrer"
             target="_blank"
           >
             View My Records
             <span
-                class="pgn__hyperlink__external-icon"
+              className="pgn__hyperlink__external-icon"
               title="Opens in a new tab"
             >
               <span
-                  class="pgn__icon"
+                className="pgn__icon"
-                  style="height: 1em; width: 1em;"
+                style={
+                  Object {
+                    "height": "1em",
+                    "width": "1em",
+                  }
+                }
               >
                 <svg
-                    aria-hidden="true"
+                  aria-hidden={true}
                   fill="none"
-                    focusable="false"
+                  focusable={false}
-                    height="24"
+                  height={24}
                   role="img"
                   viewBox="0 0 24 24"
-                    width="24"
+                  width={24}
                   xmlns="http://www.w3.org/2000/svg"
                 >
                   <path
@@ -2355,7 +2557,7 @@ exports[`<ProfilePage /> Renders correctly in various states test education edit
                   />
                 </svg>
                 <span
-                    class="sr-only"
+                  className="sr-only"
                 >
                   in a new tab
                 </span>
@@ -2366,59 +2568,65 @@ exports[`<ProfilePage /> Renders correctly in various states test education edit
       </div>
     </div>
     <div
-        class="row"
+      className="row"
     >
       <div
-          class="col-md-4 col-lg-4"
+        className="col-md-4 col-lg-4"
       >
         <div
-            class="d-none d-md-block mb-4"
+          className="d-none d-md-block mb-4"
         >
           <span
-              data-hj-suppress="true"
+            data-hj-suppress={true}
           >
             <h1
-                class="h2 mb-0 font-weight-bold text-truncate"
+              className="h2 mb-0 font-weight-bold"
             >
               staff
             </h1>
             <p
-                class="mb-0"
+              className="mb-0"
             >
               Member since 
               2017
             </p>
             <hr
-                class="d-none d-md-block"
+              className="d-none d-md-block"
             />
           </span>
         </div>
         <div
-            class="d-md-none mb-4"
+          className="d-md-none mb-4"
         >
           <a
-              class="pgn__hyperlink default-link standalone-link btn btn-primary"
+            className="pgn__hyperlink default-link standalone-link btn btn-primary"
             href="http://localhost:18150/records"
+            onClick={[Function]}
             rel="noopener noreferrer"
             target="_blank"
           >
             View My Records
             <span
-                class="pgn__hyperlink__external-icon"
+              className="pgn__hyperlink__external-icon"
               title="Opens in a new tab"
             >
               <span
-                  class="pgn__icon"
+                className="pgn__icon"
-                  style="height: 1em; width: 1em;"
+                style={
+                  Object {
+                    "height": "1em",
+                    "width": "1em",
+                  }
+                }
               >
                 <svg
-                    aria-hidden="true"
+                  aria-hidden={true}
                   fill="none"
-                    focusable="false"
+                  focusable={false}
-                    height="24"
+                  height={24}
                   role="img"
                   viewBox="0 0 24 24"
-                    width="24"
+                  width={24}
                   xmlns="http://www.w3.org/2000/svg"
                 >
                   <path
@@ -2427,7 +2635,7 @@ exports[`<ProfilePage /> Renders correctly in various states test education edit
                   />
                 </svg>
                 <span
-                    class="sr-only"
+                  className="sr-only"
                 >
                   in a new tab
                 </span>
@@ -2436,60 +2644,80 @@ exports[`<ProfilePage /> Renders correctly in various states test education edit
           </a>
         </div>
         <div
-            class="pgn-transition-replace-group position-relative mb-5"
+          className="pgn-transition-replace-group position-relative mb-5"
+          style={
+            Object {
+              "height": null,
+            }
+          }
         >
           <div
-              style="padding: .1px 0px;"
+            style={
+              Object {
+                "padding": ".1px 0",
+              }
+            }
           >
             <div
-                class="editable-item-header mb-2"
+              className="editable-item-header mb-2"
             >
               <h2
-                  class="edit-section-header"
+                className="edit-section-header"
+                id={null}
               >
                 Full Name
                 <button
-                    class="float-right px-0 btn btn-link btn-sm"
+                  className="float-right px-0 btn btn-link btn-sm"
-                    style="margin-top: -.35rem;"
+                  disabled={false}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "marginTop": "-.35rem",
+                    }
+                  }
                   type="button"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-pencil mr-1"
+                    className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-                      data-icon="pencil"
+                    data-icon="pencil-alt"
                     data-prefix="fas"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 512 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"
+                      d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                   Edit
                 </button>
               </h2>
               <p
-                  class="mb-0"
+                className="mb-0"
               >
                 <span
-                    class="ml-auto small text-muted"
+                  className="ml-auto small text-muted"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-eye-slash "
+                    className="svg-inline--fa fa-eye-slash fa-w-20 "
                     data-icon="eye-slash"
                     data-prefix="far"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 640 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zm151 118.3C226 97.7 269.5 80 320 80c65.2 0 118.8 29.6 159.9 67.7C518.4 183.5 545 226 558.6 256c-12.6 28-36.6 66.8-70.9 100.9l-53.8-42.2c9.1-17.6 14.2-37.5 14.2-58.7c0-70.7-57.3-128-128-128c-32.2 0-61.7 11.9-84.2 31.5l-46.1-36.1zM394.9 284.2l-81.5-63.9c4.2-8.5 6.6-18.2 6.6-28.3c0-5.5-.7-10.9-2-16c.7 0 1.3 0 2 0c44.2 0 80 35.8 80 80c0 9.9-1.8 19.4-5.1 28.2zm51.3 163.3l-41.9-33C378.8 425.4 350.7 432 320 432c-65.2 0-118.8-29.6-159.9-67.7C121.6 328.5 95 286 81.4 256c8.3-18.4 21.5-41.5 39.4-64.8L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5zm-88-69.3L302 334c-23.5-5.4-43.1-21.2-53.7-42.3l-56.1-44.2c-.2 2.8-.3 5.6-.3 8.5c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8z"
+                      d="M634 471L36 3.51A16 16 0 0 0 13.51 6l-10 12.49A16 16 0 0 0 6 41l598 467.49a16 16 0 0 0 22.49-2.49l10-12.49A16 16 0 0 0 634 471zM296.79 146.47l134.79 105.38C429.36 191.91 380.48 144 320 144a112.26 112.26 0 0 0-23.21 2.47zm46.42 219.07L208.42 260.16C210.65 320.09 259.53 368 320 368a113 113 0 0 0 23.21-2.46zM320 112c98.65 0 189.09 55 237.93 144a285.53 285.53 0 0 1-44 60.2l37.74 29.5a333.7 333.7 0 0 0 52.9-75.11 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64c-36.7 0-71.71 7-104.63 18.81l46.41 36.29c18.94-4.3 38.34-7.1 58.22-7.1zm0 288c-98.65 0-189.08-55-237.93-144a285.47 285.47 0 0 1 44.05-60.19l-37.74-29.5a333.6 333.6 0 0 0-52.89 75.1 32.35 32.35 0 0 0 0 29.19C89.72 376.41 197.08 448 320 448c36.7 0 71.71-7.05 104.63-18.81l-46.41-36.28C359.28 397.2 339.89 400 320 400z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                    
@@ -2498,73 +2726,93 @@ exports[`<ProfilePage /> Renders correctly in various states test education edit
               </p>
             </div>
             <p
-                class="h5"
+              className="h5"
-                data-hj-suppress="true"
+              data-hj-suppress={true}
             >
               Lemon Seltzer
             </p>
             <small
-                class="form-text text-muted"
+              className="form-text text-muted"
             >
               This is the name that appears in your account and on your certificates.
             </small>
           </div>
         </div>
         <div
-            class="pgn-transition-replace-group position-relative mb-5"
+          className="pgn-transition-replace-group position-relative mb-5"
+          style={
+            Object {
+              "height": null,
+            }
+          }
         >
           <div
-              style="padding: .1px 0px;"
+            style={
+              Object {
+                "padding": ".1px 0",
+              }
+            }
           >
             <div
-                class="editable-item-header mb-2"
+              className="editable-item-header mb-2"
             >
               <h2
-                  class="edit-section-header"
+                className="edit-section-header"
+                id={null}
               >
                 Location
                 <button
-                    class="float-right px-0 btn btn-link btn-sm"
+                  className="float-right px-0 btn btn-link btn-sm"
-                    style="margin-top: -.35rem;"
+                  disabled={false}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "marginTop": "-.35rem",
+                    }
+                  }
                   type="button"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-pencil mr-1"
+                    className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-                      data-icon="pencil"
+                    data-icon="pencil-alt"
                     data-prefix="fas"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 512 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"
+                      d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                   Edit
                 </button>
               </h2>
               <p
-                  class="mb-0"
+                className="mb-0"
               >
                 <span
-                    class="ml-auto small text-muted"
+                  className="ml-auto small text-muted"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-eye "
+                    className="svg-inline--fa fa-eye fa-w-18 "
                     data-icon="eye"
                     data-prefix="far"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 576 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"
+                      d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                    
@@ -2573,68 +2821,88 @@ exports[`<ProfilePage /> Renders correctly in various states test education edit
               </p>
             </div>
             <p
-                class="h5"
+              className="h5"
-                data-hj-suppress="true"
+              data-hj-suppress={true}
             >
               Montenegro
             </p>
           </div>
         </div>
         <div
-            class="pgn-transition-replace-group position-relative mb-5"
+          className="pgn-transition-replace-group position-relative mb-5"
+          style={
+            Object {
+              "height": null,
+            }
+          }
         >
           <div
-              style="padding: .1px 0px;"
+            style={
+              Object {
+                "padding": ".1px 0",
+              }
+            }
           >
             <div
-                class="editable-item-header mb-2"
+              className="editable-item-header mb-2"
             >
               <h2
-                  class="edit-section-header"
+                className="edit-section-header"
+                id={null}
               >
                 Primary Language Spoken
                 <button
-                    class="float-right px-0 btn btn-link btn-sm"
+                  className="float-right px-0 btn btn-link btn-sm"
-                    style="margin-top: -.35rem;"
+                  disabled={false}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "marginTop": "-.35rem",
+                    }
+                  }
                   type="button"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-pencil mr-1"
+                    className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-                      data-icon="pencil"
+                    data-icon="pencil-alt"
                     data-prefix="fas"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 512 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"
+                      d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                   Edit
                 </button>
               </h2>
               <p
-                  class="mb-0"
+                className="mb-0"
               >
                 <span
-                    class="ml-auto small text-muted"
+                  className="ml-auto small text-muted"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-eye "
+                    className="svg-inline--fa fa-eye fa-w-18 "
                     data-icon="eye"
                     data-prefix="far"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 576 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"
+                      d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                    
@@ -2643,38 +2911,51 @@ exports[`<ProfilePage /> Renders correctly in various states test education edit
               </p>
             </div>
             <p
-                class="h5"
+              className="h5"
-                data-hj-suppress="true"
+              data-hj-suppress={true}
             >
               Yoruba
             </p>
           </div>
         </div>
         <div
-            class="pgn-transition-replace-group position-relative mb-5"
+          className="pgn-transition-replace-group position-relative mb-5"
+          style={
+            Object {
+              "height": null,
+            }
+          }
         >
           <div
-              style="padding: .1px 0px;"
+            style={
+              Object {
+                "padding": ".1px 0",
+              }
+            }
           >
             <div
               aria-labelledby="levelOfEducation-label"
               role="dialog"
             >
-                <form>
+              <form
+                onSubmit={[Function]}
+              >
                 <div
-                    class="pgn__form-group"
+                  className="pgn__form-group"
                 >
                   <label
-                      class="edit-section-header"
+                    className="edit-section-header"
-                      for="levelOfEducation"
+                    htmlFor="levelOfEducation"
                   >
                     Education
                   </label>
                   <select
-                      class="form-control"
+                    className="form-control"
-                      data-hj-suppress="true"
+                    data-hj-suppress={true}
                     id="levelOfEducation"
                     name="levelOfEducation"
+                    onChange={[Function]}
+                    value="el"
                   >
                     <option
                       value=""
@@ -2728,7 +3009,7 @@ exports[`<ProfilePage /> Renders correctly in various states test education edit
                     </option>
                   </select>
                   <div
-                      class="pgn__form-control-description pgn__form-text pgn__form-text-invalid"
+                    className="pgn__form-control-description pgn__form-text pgn__form-text-invalid"
                     id="levelOfEducation-3"
                   >
                     <div>
@@ -2737,45 +3018,53 @@ exports[`<ProfilePage /> Renders correctly in various states test education edit
                   </div>
                 </div>
                 <div
-                    class="d-flex flex-row-reverse flex-wrap justify-content-end align-items-center"
+                  className="d-flex flex-row-reverse flex-wrap justify-content-end align-items-center"
                 >
                   <div
-                      class="form-group d-flex flex-wrap"
+                    className="form-group d-flex flex-wrap"
                   >
                     <label
-                        class="col-form-label"
+                      className="col-form-label"
-                        for="visibilityLevelOfEducation"
+                      htmlFor="visibilityLevelOfEducation"
                     >
                       Who can see this:
                     </label>
                     <span
-                        class="d-flex align-items-center"
+                      className="d-flex align-items-center"
                     >
                       <span
-                          class="d-inline-block ml-1 mr-2"
+                        className="d-inline-block ml-1 mr-2"
-                          style="width: 1.5rem;"
+                        style={
+                          Object {
+                            "width": "1.5rem",
+                          }
+                        }
                       >
                         <svg
                           aria-hidden="true"
-                            class="svg-inline--fa fa-eye-slash "
+                          className="svg-inline--fa fa-eye-slash fa-w-20 "
                           data-icon="eye-slash"
                           data-prefix="far"
                           focusable="false"
                           role="img"
+                          style={Object {}}
                           viewBox="0 0 640 512"
                           xmlns="http://www.w3.org/2000/svg"
                         >
                           <path
-                              d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zm151 118.3C226 97.7 269.5 80 320 80c65.2 0 118.8 29.6 159.9 67.7C518.4 183.5 545 226 558.6 256c-12.6 28-36.6 66.8-70.9 100.9l-53.8-42.2c9.1-17.6 14.2-37.5 14.2-58.7c0-70.7-57.3-128-128-128c-32.2 0-61.7 11.9-84.2 31.5l-46.1-36.1zM394.9 284.2l-81.5-63.9c4.2-8.5 6.6-18.2 6.6-28.3c0-5.5-.7-10.9-2-16c.7 0 1.3 0 2 0c44.2 0 80 35.8 80 80c0 9.9-1.8 19.4-5.1 28.2zm51.3 163.3l-41.9-33C378.8 425.4 350.7 432 320 432c-65.2 0-118.8-29.6-159.9-67.7C121.6 328.5 95 286 81.4 256c8.3-18.4 21.5-41.5 39.4-64.8L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5zm-88-69.3L302 334c-23.5-5.4-43.1-21.2-53.7-42.3l-56.1-44.2c-.2 2.8-.3 5.6-.3 8.5c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8z"
+                            d="M634 471L36 3.51A16 16 0 0 0 13.51 6l-10 12.49A16 16 0 0 0 6 41l598 467.49a16 16 0 0 0 22.49-2.49l10-12.49A16 16 0 0 0 634 471zM296.79 146.47l134.79 105.38C429.36 191.91 380.48 144 320 144a112.26 112.26 0 0 0-23.21 2.47zm46.42 219.07L208.42 260.16C210.65 320.09 259.53 368 320 368a113 113 0 0 0 23.21-2.46zM320 112c98.65 0 189.09 55 237.93 144a285.53 285.53 0 0 1-44 60.2l37.74 29.5a333.7 333.7 0 0 0 52.9-75.11 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64c-36.7 0-71.71 7-104.63 18.81l46.41 36.29c18.94-4.3 38.34-7.1 58.22-7.1zm0 288c-98.65 0-189.08-55-237.93-144a285.47 285.47 0 0 1 44.05-60.19l-37.74-29.5a333.6 333.6 0 0 0-52.89 75.1 32.35 32.35 0 0 0 0 29.19C89.72 376.41 197.08 448 320 448c36.7 0 71.71-7.05 104.63-18.81l-46.41-36.28C359.28 397.2 339.89 400 320 400z"
                             fill="currentColor"
+                            style={Object {}}
                           />
                         </svg>
                       </span>
                       <select
-                          class="d-inline-block form-control"
+                        className="d-inline-block w-auto form-control"
                         id="visibilityLevelOfEducation"
                         name="visibilityLevelOfEducation"
+                        onChange={[Function]}
                         type="select"
+                        value="private"
                       >
                         <option
                           value="private"
@@ -2791,31 +3080,33 @@ exports[`<ProfilePage /> Renders correctly in various states test education edit
                     </span>
                   </div>
                   <div
-                      class="form-group flex-shrink-0 flex-grow-1"
+                    className="form-group flex-shrink-0 flex-grow-1"
                   >
                     <button
-                        aria-disabled="false"
+                      aria-disabled={false}
                       aria-live="assertive"
-                        class="pgn__stateful-btn pgn__stateful-btn-state-pending btn btn-primary"
+                      className="pgn__stateful-btn pgn__stateful-btn-state-pending btn btn-primary"
+                      disabled={false}
+                      onClick={[Function]}
                       type="submit"
                     >
                       <span
-                          class="d-flex align-items-center justify-content-center"
+                        className="d-flex align-items-center justify-content-center"
                       >
                         <span
-                            class="pgn__stateful-btn-icon"
+                          className="pgn__stateful-btn-icon"
                         >
                           <span
-                              class="pgn__icon icon-spin"
+                            className="pgn__icon icon-spin"
                           >
                             <svg
-                                aria-hidden="true"
+                              aria-hidden={true}
                               fill="none"
-                                focusable="false"
+                              focusable={false}
-                                height="24"
+                              height={24}
                               role="img"
                               viewBox="0 0 24 24"
-                                width="24"
+                              width={24}
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
@@ -2831,7 +3122,9 @@ exports[`<ProfilePage /> Renders correctly in various states test education edit
                       </span>
                     </button>
                     <button
-                        class="btn btn-link"
+                      className="btn btn-link"
+                      disabled={false}
+                      onClick={[Function]}
                       type="button"
                     >
                       Cancel
@@ -2843,60 +3136,80 @@ exports[`<ProfilePage /> Renders correctly in various states test education edit
           </div>
         </div>
         <div
-            class="pgn-transition-replace-group position-relative mb-5"
+          className="pgn-transition-replace-group position-relative mb-5"
+          style={
+            Object {
+              "height": null,
+            }
+          }
         >
           <div
-              style="padding: .1px 0px;"
+            style={
+              Object {
+                "padding": ".1px 0",
+              }
+            }
           >
             <div
-                class="editable-item-header mb-2"
+              className="editable-item-header mb-2"
             >
               <h2
-                  class="edit-section-header"
+                className="edit-section-header"
+                id={null}
               >
                 Social Links
                 <button
-                    class="float-right px-0 btn btn-link btn-sm"
+                  className="float-right px-0 btn btn-link btn-sm"
-                    style="margin-top: -.35rem;"
+                  disabled={false}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "marginTop": "-.35rem",
+                    }
+                  }
                   type="button"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-pencil mr-1"
+                    className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-                      data-icon="pencil"
+                    data-icon="pencil-alt"
                     data-prefix="fas"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 512 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"
+                      d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                   Edit
                 </button>
               </h2>
               <p
-                  class="mb-0"
+                className="mb-0"
               >
                 <span
-                    class="ml-auto small text-muted"
+                  className="ml-auto small text-muted"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-eye "
+                    className="svg-inline--fa fa-eye fa-w-18 "
                     data-icon="eye"
                     data-prefix="far"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 576 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"
+                      d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                    
@@ -2905,80 +3218,88 @@ exports[`<ProfilePage /> Renders correctly in various states test education edit
               </p>
             </div>
             <ul
-                class="list-unstyled"
+              className="list-unstyled"
             >
               <li
-                  class="form-group"
+                className="form-group"
               >
                 <a
-                    class="font-weight-bold"
+                  className="font-weight-bold"
                   href="https://www.twitter.com/ALOHA"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-twitter mr-2"
+                    className="svg-inline--fa fa-twitter fa-w-16 mr-2"
                     data-icon="twitter"
                     data-prefix="fab"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 512 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
                       d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                   Twitter
                 </a>
               </li>
               <li
-                  class="form-group"
+                className="form-group"
               >
                 <a
-                    class="font-weight-bold"
+                  className="font-weight-bold"
                   href="https://www.facebook.com/aloha"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-facebook mr-2"
+                    className="svg-inline--fa fa-facebook fa-w-16 mr-2"
                     data-icon="facebook"
                     data-prefix="fab"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 512 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M512 256C512 114.6 397.4 0 256 0S0 114.6 0 256C0 376 82.7 476.8 194.2 504.5V334.2H141.4V256h52.8V222.3c0-87.1 39.4-127.5 125-127.5c16.2 0 44.2 3.2 55.7 6.4V172c-6-.6-16.5-1-29.6-1c-42 0-58.2 15.9-58.2 57.2V256h83.6l-14.4 78.2H287V510.1C413.8 494.8 512 386.9 512 256h0z"
+                      d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                   Facebook
                 </a>
               </li>
               <li
-                  class="form-group"
+                className="form-group"
               >
                 <div>
                   <button
-                      class="pl-0 text-left btn btn-link"
+                    className="pl-0 text-left btn btn-link"
-                      tabindex="0"
+                    onClick={[Function]}
+                    onKeyDown={[Function]}
+                    tabIndex={0}
                     type="button"
                   >
                     <svg
                       aria-hidden="true"
-                        class="svg-inline--fa fa-plus fa-xs mr-2"
+                      className="svg-inline--fa fa-plus fa-w-14 fa-xs mr-2"
                       data-icon="plus"
                       data-prefix="fas"
                       focusable="false"
                       role="img"
+                      style={Object {}}
                       viewBox="0 0 448 512"
                       xmlns="http://www.w3.org/2000/svg"
                     >
                       <path
-                          d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"
+                        d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
                         fill="currentColor"
+                        style={Object {}}
                       />
                     </svg>
                     Add 
@@ -2991,63 +3312,83 @@ exports[`<ProfilePage /> Renders correctly in various states test education edit
         </div>
       </div>
       <div
-          class="pt-md-3 col-md-8 col-lg-7 offset-lg-1"
+        className="pt-md-3 col-md-8 col-lg-7 offset-lg-1"
       >
         <div
-            class="pgn-transition-replace-group position-relative mb-5"
+          className="pgn-transition-replace-group position-relative mb-5"
+          style={
+            Object {
+              "height": null,
+            }
+          }
         >
           <div
-              style="padding: .1px 0px;"
+            style={
+              Object {
+                "padding": ".1px 0",
+              }
+            }
           >
             <div
-                class="editable-item-header mb-2"
+              className="editable-item-header mb-2"
             >
               <h2
-                  class="edit-section-header"
+                className="edit-section-header"
+                id={null}
               >
                 About Me
                 <button
-                    class="float-right px-0 btn btn-link btn-sm"
+                  className="float-right px-0 btn btn-link btn-sm"
-                    style="margin-top: -.35rem;"
+                  disabled={false}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "marginTop": "-.35rem",
+                    }
+                  }
                   type="button"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-pencil mr-1"
+                    className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-                      data-icon="pencil"
+                    data-icon="pencil-alt"
                     data-prefix="fas"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 512 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"
+                      d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                   Edit
                 </button>
               </h2>
               <p
-                  class="mb-0"
+                className="mb-0"
               >
                 <span
-                    class="ml-auto small text-muted"
+                  className="ml-auto small text-muted"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-eye "
+                    className="svg-inline--fa fa-eye fa-w-18 "
                     data-icon="eye"
                     data-prefix="far"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 576 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"
+                      d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                    
@@ -3056,68 +3397,88 @@ exports[`<ProfilePage /> Renders correctly in various states test education edit
               </p>
             </div>
             <p
-                class="lead"
+              className="lead"
-                data-hj-suppress="true"
+              data-hj-suppress={true}
             >
               This is my bio
             </p>
           </div>
         </div>
         <div
-            class="pgn-transition-replace-group position-relative mb-4"
+          className="pgn-transition-replace-group position-relative mb-4"
+          style={
+            Object {
+              "height": null,
+            }
+          }
         >
           <div
-              style="padding: .1px 0px;"
+            style={
+              Object {
+                "padding": ".1px 0",
+              }
+            }
           >
             <div
-                class="editable-item-header mb-2"
+              className="editable-item-header mb-2"
             >
               <h2
-                  class="edit-section-header"
+                className="edit-section-header"
+                id={null}
               >
                 My Certificates
                 <button
-                    class="float-right px-0 btn btn-link btn-sm"
+                  className="float-right px-0 btn btn-link btn-sm"
-                    style="margin-top: -.35rem;"
+                  disabled={false}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "marginTop": "-.35rem",
+                    }
+                  }
                   type="button"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-pencil mr-1"
+                    className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-                      data-icon="pencil"
+                    data-icon="pencil-alt"
                     data-prefix="fas"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 512 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"
+                      d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                   Edit
                 </button>
               </h2>
               <p
-                  class="mb-0"
+                className="mb-0"
               >
                 <span
-                    class="ml-auto small text-muted"
+                  className="ml-auto small text-muted"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-eye "
+                    className="svg-inline--fa fa-eye fa-w-18 "
                     data-icon="eye"
                     data-prefix="far"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 576 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"
+                      d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                    
@@ -3126,78 +3487,88 @@ exports[`<ProfilePage /> Renders correctly in various states test education edit
               </p>
             </div>
             <div
-                class="row align-items-stretch"
+              className="row align-items-stretch"
             >
               <div
-                  class="col-12 col-sm-6 d-flex align-items-stretch"
+                className="col col-sm-6 d-flex align-items-stretch"
               >
                 <div
-                    class="card mb-4 certificate flex-grow-1"
+                  className="card mb-4 certificate flex-grow-1"
                 >
                   <div
-                      class="certificate-type-illustration"
+                    className="certificate-type-illustration"
-                      style="background-image: url(icon/mock/path);"
+                    style={
+                      Object {
+                        "backgroundImage": "url(icon/mock/path)",
+                      }
+                    }
                   />
                   <div
-                      class="card-body d-flex flex-column"
+                    className="card-body d-flex flex-column"
                   >
                     <div
-                        class="card-title"
+                      className="card-title"
                     >
                       <p
-                          class="small mb-0"
+                        className="small mb-0"
                       >
                         Verified Certificate
                       </p>
                       <h4
-                          class="certificate-title"
+                        className="certificate-title"
                       >
                         edX Demonstration Course
                       </h4>
                     </div>
                     <p
-                        class="small mb-0"
+                      className="small mb-0"
                     >
                       From
                     </p>
                     <p
-                        class="h6 mb-4"
+                      className="h6 mb-4"
                     >
                       edX
                     </p>
                     <div
-                        class="flex-grow-1"
+                      className="flex-grow-1"
                     />
                     <p
-                        class="small mb-2"
+                      className="small mb-2"
                     >
                       Completed on 
                       3/4/2019
                     </p>
                     <div>
                       <a
-                          class="pgn__hyperlink default-link standalone-link btn btn-outline-primary"
+                        className="pgn__hyperlink default-link standalone-link btn btn-outline-primary"
                         href="http://www.example.com/"
+                        onClick={[Function]}
                         rel="noopener noreferrer"
                         target="_blank"
                       >
                         View Certificate
                         <span
-                            class="pgn__hyperlink__external-icon"
+                          className="pgn__hyperlink__external-icon"
                           title="Opens in a new tab"
                         >
                           <span
-                              class="pgn__icon"
+                            className="pgn__icon"
-                              style="height: 1em; width: 1em;"
+                            style={
+                              Object {
+                                "height": "1em",
+                                "width": "1em",
+                              }
+                            }
                           >
                             <svg
-                                aria-hidden="true"
+                              aria-hidden={true}
                               fill="none"
-                                focusable="false"
+                              focusable={false}
-                                height="24"
+                              height={24}
                               role="img"
                               viewBox="0 0 24 24"
-                                width="24"
+                              width={24}
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
@@ -3206,7 +3577,7 @@ exports[`<ProfilePage /> Renders correctly in various states test education edit
                               />
                             </svg>
                             <span
-                                class="sr-only"
+                              className="sr-only"
                             >
                               in a new tab
                             </span>
@@ -3223,47 +3594,47 @@ exports[`<ProfilePage /> Renders correctly in various states test education edit
       </div>
     </div>
   </div>
-  </div>
 </div>
 `;
 
 exports[`<ProfilePage /> Renders correctly in various states test preferreded language edit with error 1`] = `
-<div>
+<div
+  className="profile-page"
+>
   <div
-    class="profile-page"
+    className="profile-page-bg-banner bg-primary d-none d-md-block p-relative"
-  >
-    <div
-      class="profile-page-bg-banner bg-primary d-md-block p-relative"
   />
   <div
-      class="container-fluid"
+    className="container-fluid"
   >
     <div
-        class="row align-items-center pt-4 mb-4 pt-md-0 mb-md-0"
+      className="row align-items-center pt-4 mb-4 pt-md-0 mb-md-0"
     >
       <div
-          class="col-auto col-md-4 col-lg-3"
+        className="col-auto col-md-4 col-lg-3"
       >
         <div
-            class="d-flex align-items-center d-md-block"
+          className="d-flex align-items-center d-md-block"
         >
           <div
-              class="profile-avatar-wrap position-relative"
+            className="profile-avatar-wrap position-relative"
           >
             <div
-                class="profile-avatar rounded-circle bg-light"
+              className="profile-avatar rounded-circle bg-light"
             >
               <div
-                  class="profile-avatar-menu-container"
+                className="profile-avatar-menu-container"
               >
                 <div
-                    class="pgn__dropdown pgn__dropdown-light dropdown"
+                  className="pgn__dropdown pgn__dropdown-light dropdown"
                   data-testid="dropdown"
                 >
                   <button
-                      aria-expanded="false"
+                    aria-expanded={false}
-                      aria-haspopup="true"
+                    aria-haspopup={true}
-                      class="dropdown-toggle btn btn-primary"
+                    className="dropdown-toggle btn btn-primary"
+                    disabled={false}
+                    onClick={[Function]}
                     type="button"
                   >
                     Change
@@ -3272,77 +3643,92 @@ exports[`<ProfilePage /> Renders correctly in various states test preferreded la
               </div>
               <img
                 alt="profile avatar"
-                  class="w-100 h-100 d-block rounded-circle overflow-hidden"
+                className="w-100 h-100 d-block rounded-circle overflow-hidden"
-                  data-hj-suppress="true"
+                data-hj-suppress={true}
                 src="http://localhost:18000/media/profile-images/d2a9bdc2ba165dcefc73265c54bf9a20_500.jpg?v=1552495012"
-                  style="object-fit: cover;"
+                style={
+                  Object {
+                    "objectFit": "cover",
+                  }
+                }
               />
             </div>
             <form
-                enctype="multipart/form-data"
+              encType="multipart/form-data"
+              onSubmit={[Function]}
             >
               <input
                 accept=".jpg, .jpeg, .png"
-                  class="d-none form-control-file"
+                className="d-none form-control-file"
                 id="photo-file"
                 name="file"
+                onChange={[Function]}
                 type="file"
               />
             </form>
           </div>
         </div>
       </div>
+      <div>
+        PluginPOC
+      </div>
       <div
-          class="col"
+        className="col pl-0"
       >
         <div
-            class="d-md-none"
+          className="d-md-none"
         >
           <span
-              data-hj-suppress="true"
+            data-hj-suppress={true}
           >
             <h1
-                class="h2 mb-0 font-weight-bold text-truncate"
+              className="h2 mb-0 font-weight-bold"
             >
               staff
             </h1>
             <p
-                class="mb-0"
+              className="mb-0"
             >
               Member since 
               2017
             </p>
             <hr
-                class="d-none d-md-block"
+              className="d-none d-md-block"
             />
           </span>
         </div>
         <div
-            class="d-none d-md-block float-right"
+          className="d-none d-md-block float-right"
         >
           <a
-              class="pgn__hyperlink default-link standalone-link btn btn-primary"
+            className="pgn__hyperlink default-link standalone-link btn btn-primary"
             href="http://localhost:18150/records"
+            onClick={[Function]}
             rel="noopener noreferrer"
             target="_blank"
           >
             View My Records
             <span
-                class="pgn__hyperlink__external-icon"
+              className="pgn__hyperlink__external-icon"
               title="Opens in a new tab"
             >
               <span
-                  class="pgn__icon"
+                className="pgn__icon"
-                  style="height: 1em; width: 1em;"
+                style={
+                  Object {
+                    "height": "1em",
+                    "width": "1em",
+                  }
+                }
               >
                 <svg
-                    aria-hidden="true"
+                  aria-hidden={true}
                   fill="none"
-                    focusable="false"
+                  focusable={false}
-                    height="24"
+                  height={24}
                   role="img"
                   viewBox="0 0 24 24"
-                    width="24"
+                  width={24}
                   xmlns="http://www.w3.org/2000/svg"
                 >
                   <path
@@ -3351,7 +3737,7 @@ exports[`<ProfilePage /> Renders correctly in various states test preferreded la
                   />
                 </svg>
                 <span
-                    class="sr-only"
+                  className="sr-only"
                 >
                   in a new tab
                 </span>
@@ -3362,59 +3748,65 @@ exports[`<ProfilePage /> Renders correctly in various states test preferreded la
       </div>
     </div>
     <div
-        class="row"
+      className="row"
     >
       <div
-          class="col-md-4 col-lg-4"
+        className="col-md-4 col-lg-4"
       >
         <div
-            class="d-none d-md-block mb-4"
+          className="d-none d-md-block mb-4"
         >
           <span
-              data-hj-suppress="true"
+            data-hj-suppress={true}
           >
             <h1
-                class="h2 mb-0 font-weight-bold text-truncate"
+              className="h2 mb-0 font-weight-bold"
             >
               staff
             </h1>
             <p
-                class="mb-0"
+              className="mb-0"
             >
               Member since 
               2017
             </p>
             <hr
-                class="d-none d-md-block"
+              className="d-none d-md-block"
             />
           </span>
         </div>
         <div
-            class="d-md-none mb-4"
+          className="d-md-none mb-4"
         >
           <a
-              class="pgn__hyperlink default-link standalone-link btn btn-primary"
+            className="pgn__hyperlink default-link standalone-link btn btn-primary"
             href="http://localhost:18150/records"
+            onClick={[Function]}
             rel="noopener noreferrer"
             target="_blank"
           >
             View My Records
             <span
-                class="pgn__hyperlink__external-icon"
+              className="pgn__hyperlink__external-icon"
               title="Opens in a new tab"
             >
               <span
-                  class="pgn__icon"
+                className="pgn__icon"
-                  style="height: 1em; width: 1em;"
+                style={
+                  Object {
+                    "height": "1em",
+                    "width": "1em",
+                  }
+                }
               >
                 <svg
-                    aria-hidden="true"
+                  aria-hidden={true}
                   fill="none"
-                    focusable="false"
+                  focusable={false}
-                    height="24"
+                  height={24}
                   role="img"
                   viewBox="0 0 24 24"
-                    width="24"
+                  width={24}
                   xmlns="http://www.w3.org/2000/svg"
                 >
                   <path
@@ -3423,7 +3815,7 @@ exports[`<ProfilePage /> Renders correctly in various states test preferreded la
                   />
                 </svg>
                 <span
-                    class="sr-only"
+                  className="sr-only"
                 >
                   in a new tab
                 </span>
@@ -3432,60 +3824,80 @@ exports[`<ProfilePage /> Renders correctly in various states test preferreded la
           </a>
         </div>
         <div
-            class="pgn-transition-replace-group position-relative mb-5"
+          className="pgn-transition-replace-group position-relative mb-5"
+          style={
+            Object {
+              "height": null,
+            }
+          }
         >
           <div
-              style="padding: .1px 0px;"
+            style={
+              Object {
+                "padding": ".1px 0",
+              }
+            }
           >
             <div
-                class="editable-item-header mb-2"
+              className="editable-item-header mb-2"
             >
               <h2
-                  class="edit-section-header"
+                className="edit-section-header"
+                id={null}
               >
                 Full Name
                 <button
-                    class="float-right px-0 btn btn-link btn-sm"
+                  className="float-right px-0 btn btn-link btn-sm"
-                    style="margin-top: -.35rem;"
+                  disabled={false}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "marginTop": "-.35rem",
+                    }
+                  }
                   type="button"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-pencil mr-1"
+                    className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-                      data-icon="pencil"
+                    data-icon="pencil-alt"
                     data-prefix="fas"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 512 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"
+                      d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                   Edit
                 </button>
               </h2>
               <p
-                  class="mb-0"
+                className="mb-0"
               >
                 <span
-                    class="ml-auto small text-muted"
+                  className="ml-auto small text-muted"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-eye-slash "
+                    className="svg-inline--fa fa-eye-slash fa-w-20 "
                     data-icon="eye-slash"
                     data-prefix="far"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 640 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zm151 118.3C226 97.7 269.5 80 320 80c65.2 0 118.8 29.6 159.9 67.7C518.4 183.5 545 226 558.6 256c-12.6 28-36.6 66.8-70.9 100.9l-53.8-42.2c9.1-17.6 14.2-37.5 14.2-58.7c0-70.7-57.3-128-128-128c-32.2 0-61.7 11.9-84.2 31.5l-46.1-36.1zM394.9 284.2l-81.5-63.9c4.2-8.5 6.6-18.2 6.6-28.3c0-5.5-.7-10.9-2-16c.7 0 1.3 0 2 0c44.2 0 80 35.8 80 80c0 9.9-1.8 19.4-5.1 28.2zm51.3 163.3l-41.9-33C378.8 425.4 350.7 432 320 432c-65.2 0-118.8-29.6-159.9-67.7C121.6 328.5 95 286 81.4 256c8.3-18.4 21.5-41.5 39.4-64.8L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5zm-88-69.3L302 334c-23.5-5.4-43.1-21.2-53.7-42.3l-56.1-44.2c-.2 2.8-.3 5.6-.3 8.5c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8z"
+                      d="M634 471L36 3.51A16 16 0 0 0 13.51 6l-10 12.49A16 16 0 0 0 6 41l598 467.49a16 16 0 0 0 22.49-2.49l10-12.49A16 16 0 0 0 634 471zM296.79 146.47l134.79 105.38C429.36 191.91 380.48 144 320 144a112.26 112.26 0 0 0-23.21 2.47zm46.42 219.07L208.42 260.16C210.65 320.09 259.53 368 320 368a113 113 0 0 0 23.21-2.46zM320 112c98.65 0 189.09 55 237.93 144a285.53 285.53 0 0 1-44 60.2l37.74 29.5a333.7 333.7 0 0 0 52.9-75.11 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64c-36.7 0-71.71 7-104.63 18.81l46.41 36.29c18.94-4.3 38.34-7.1 58.22-7.1zm0 288c-98.65 0-189.08-55-237.93-144a285.47 285.47 0 0 1 44.05-60.19l-37.74-29.5a333.6 333.6 0 0 0-52.89 75.1 32.35 32.35 0 0 0 0 29.19C89.72 376.41 197.08 448 320 448c36.7 0 71.71-7.05 104.63-18.81l-46.41-36.28C359.28 397.2 339.89 400 320 400z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                    
@@ -3494,73 +3906,93 @@ exports[`<ProfilePage /> Renders correctly in various states test preferreded la
               </p>
             </div>
             <p
-                class="h5"
+              className="h5"
-                data-hj-suppress="true"
+              data-hj-suppress={true}
             >
               Lemon Seltzer
             </p>
             <small
-                class="form-text text-muted"
+              className="form-text text-muted"
             >
               This is the name that appears in your account and on your certificates.
             </small>
           </div>
         </div>
         <div
-            class="pgn-transition-replace-group position-relative mb-5"
+          className="pgn-transition-replace-group position-relative mb-5"
+          style={
+            Object {
+              "height": null,
+            }
+          }
         >
           <div
-              style="padding: .1px 0px;"
+            style={
+              Object {
+                "padding": ".1px 0",
+              }
+            }
           >
             <div
-                class="editable-item-header mb-2"
+              className="editable-item-header mb-2"
             >
               <h2
-                  class="edit-section-header"
+                className="edit-section-header"
+                id={null}
               >
                 Location
                 <button
-                    class="float-right px-0 btn btn-link btn-sm"
+                  className="float-right px-0 btn btn-link btn-sm"
-                    style="margin-top: -.35rem;"
+                  disabled={false}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "marginTop": "-.35rem",
+                    }
+                  }
                   type="button"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-pencil mr-1"
+                    className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-                      data-icon="pencil"
+                    data-icon="pencil-alt"
                     data-prefix="fas"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 512 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"
+                      d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                   Edit
                 </button>
               </h2>
               <p
-                  class="mb-0"
+                className="mb-0"
               >
                 <span
-                    class="ml-auto small text-muted"
+                  className="ml-auto small text-muted"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-eye "
+                    className="svg-inline--fa fa-eye fa-w-18 "
                     data-icon="eye"
                     data-prefix="far"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 576 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"
+                      d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                    
@@ -3569,38 +4001,51 @@ exports[`<ProfilePage /> Renders correctly in various states test preferreded la
               </p>
             </div>
             <p
-                class="h5"
+              className="h5"
-                data-hj-suppress="true"
+              data-hj-suppress={true}
             >
               Montenegro
             </p>
           </div>
         </div>
         <div
-            class="pgn-transition-replace-group position-relative mb-5"
+          className="pgn-transition-replace-group position-relative mb-5"
+          style={
+            Object {
+              "height": null,
+            }
+          }
         >
           <div
-              style="padding: .1px 0px;"
+            style={
+              Object {
+                "padding": ".1px 0",
+              }
+            }
           >
             <div
               aria-labelledby="languageProficiencies-label"
               role="dialog"
             >
-                <form>
+              <form
+                onSubmit={[Function]}
+              >
                 <div
-                    class="pgn__form-group"
+                  className="pgn__form-group"
                 >
                   <label
-                      class="edit-section-header"
+                    className="edit-section-header"
-                      for="languageProficiencies"
+                    htmlFor="languageProficiencies"
                   >
                     Primary Language Spoken
                   </label>
                   <select
-                      class="form-control"
+                    className="form-control"
-                      data-hj-suppress="true"
+                    data-hj-suppress={true}
                     id="languageProficiencies"
                     name="languageProficiencies"
+                    onChange={[Function]}
+                    value="yo"
                   >
                     <option
                       value=""
@@ -4529,7 +4974,7 @@ exports[`<ProfilePage /> Renders correctly in various states test preferreded la
                     </option>
                   </select>
                   <div
-                      class="pgn__form-control-description pgn__form-text pgn__form-text-invalid"
+                    className="pgn__form-control-description pgn__form-text pgn__form-text-invalid"
                     id="languageProficiencies-4"
                   >
                     <div>
@@ -4538,45 +4983,53 @@ exports[`<ProfilePage /> Renders correctly in various states test preferreded la
                   </div>
                 </div>
                 <div
-                    class="d-flex flex-row-reverse flex-wrap justify-content-end align-items-center"
+                  className="d-flex flex-row-reverse flex-wrap justify-content-end align-items-center"
                 >
                   <div
-                      class="form-group d-flex flex-wrap"
+                    className="form-group d-flex flex-wrap"
                   >
                     <label
-                        class="col-form-label"
+                      className="col-form-label"
-                        for="visibilityLanguageProficiencies"
+                      htmlFor="visibilityLanguageProficiencies"
                     >
                       Who can see this:
                     </label>
                     <span
-                        class="d-flex align-items-center"
+                      className="d-flex align-items-center"
                     >
                       <span
-                          class="d-inline-block ml-1 mr-2"
+                        className="d-inline-block ml-1 mr-2"
-                          style="width: 1.5rem;"
+                        style={
+                          Object {
+                            "width": "1.5rem",
+                          }
+                        }
                       >
                         <svg
                           aria-hidden="true"
-                            class="svg-inline--fa fa-eye "
+                          className="svg-inline--fa fa-eye fa-w-18 "
                           data-icon="eye"
                           data-prefix="far"
                           focusable="false"
                           role="img"
+                          style={Object {}}
                           viewBox="0 0 576 512"
                           xmlns="http://www.w3.org/2000/svg"
                         >
                           <path
-                              d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"
+                            d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z"
                             fill="currentColor"
+                            style={Object {}}
                           />
                         </svg>
                       </span>
                       <select
-                          class="d-inline-block form-control"
+                        className="d-inline-block w-auto form-control"
                         id="visibilityLanguageProficiencies"
                         name="visibilityLanguageProficiencies"
+                        onChange={[Function]}
                         type="select"
+                        value="all_users"
                       >
                         <option
                           value="private"
@@ -4592,31 +5045,33 @@ exports[`<ProfilePage /> Renders correctly in various states test preferreded la
                     </span>
                   </div>
                   <div
-                      class="form-group flex-shrink-0 flex-grow-1"
+                    className="form-group flex-shrink-0 flex-grow-1"
                   >
                     <button
-                        aria-disabled="false"
+                      aria-disabled={false}
                       aria-live="assertive"
-                        class="pgn__stateful-btn pgn__stateful-btn-state-pending btn btn-primary"
+                      className="pgn__stateful-btn pgn__stateful-btn-state-pending btn btn-primary"
+                      disabled={false}
+                      onClick={[Function]}
                       type="submit"
                     >
                       <span
-                          class="d-flex align-items-center justify-content-center"
+                        className="d-flex align-items-center justify-content-center"
                       >
                         <span
-                            class="pgn__stateful-btn-icon"
+                          className="pgn__stateful-btn-icon"
                         >
                           <span
-                              class="pgn__icon icon-spin"
+                            className="pgn__icon icon-spin"
                           >
                             <svg
-                                aria-hidden="true"
+                              aria-hidden={true}
                               fill="none"
-                                focusable="false"
+                              focusable={false}
-                                height="24"
+                              height={24}
                               role="img"
                               viewBox="0 0 24 24"
-                                width="24"
+                              width={24}
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
@@ -4632,7 +5087,9 @@ exports[`<ProfilePage /> Renders correctly in various states test preferreded la
                       </span>
                     </button>
                     <button
-                        class="btn btn-link"
+                      className="btn btn-link"
+                      disabled={false}
+                      onClick={[Function]}
                       type="button"
                     >
                       Cancel
@@ -4644,60 +5101,80 @@ exports[`<ProfilePage /> Renders correctly in various states test preferreded la
           </div>
         </div>
         <div
-            class="pgn-transition-replace-group position-relative mb-5"
+          className="pgn-transition-replace-group position-relative mb-5"
+          style={
+            Object {
+              "height": null,
+            }
+          }
         >
           <div
-              style="padding: .1px 0px;"
+            style={
+              Object {
+                "padding": ".1px 0",
+              }
+            }
           >
             <div
-                class="editable-item-header mb-2"
+              className="editable-item-header mb-2"
             >
               <h2
-                  class="edit-section-header"
+                className="edit-section-header"
+                id={null}
               >
                 Education
                 <button
-                    class="float-right px-0 btn btn-link btn-sm"
+                  className="float-right px-0 btn btn-link btn-sm"
-                    style="margin-top: -.35rem;"
+                  disabled={false}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "marginTop": "-.35rem",
+                    }
+                  }
                   type="button"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-pencil mr-1"
+                    className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-                      data-icon="pencil"
+                    data-icon="pencil-alt"
                     data-prefix="fas"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 512 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"
+                      d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                   Edit
                 </button>
               </h2>
               <p
-                  class="mb-0"
+                className="mb-0"
               >
                 <span
-                    class="ml-auto small text-muted"
+                  className="ml-auto small text-muted"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-eye-slash "
+                    className="svg-inline--fa fa-eye-slash fa-w-20 "
                     data-icon="eye-slash"
                     data-prefix="far"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 640 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zm151 118.3C226 97.7 269.5 80 320 80c65.2 0 118.8 29.6 159.9 67.7C518.4 183.5 545 226 558.6 256c-12.6 28-36.6 66.8-70.9 100.9l-53.8-42.2c9.1-17.6 14.2-37.5 14.2-58.7c0-70.7-57.3-128-128-128c-32.2 0-61.7 11.9-84.2 31.5l-46.1-36.1zM394.9 284.2l-81.5-63.9c4.2-8.5 6.6-18.2 6.6-28.3c0-5.5-.7-10.9-2-16c.7 0 1.3 0 2 0c44.2 0 80 35.8 80 80c0 9.9-1.8 19.4-5.1 28.2zm51.3 163.3l-41.9-33C378.8 425.4 350.7 432 320 432c-65.2 0-118.8-29.6-159.9-67.7C121.6 328.5 95 286 81.4 256c8.3-18.4 21.5-41.5 39.4-64.8L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5zm-88-69.3L302 334c-23.5-5.4-43.1-21.2-53.7-42.3l-56.1-44.2c-.2 2.8-.3 5.6-.3 8.5c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8z"
+                      d="M634 471L36 3.51A16 16 0 0 0 13.51 6l-10 12.49A16 16 0 0 0 6 41l598 467.49a16 16 0 0 0 22.49-2.49l10-12.49A16 16 0 0 0 634 471zM296.79 146.47l134.79 105.38C429.36 191.91 380.48 144 320 144a112.26 112.26 0 0 0-23.21 2.47zm46.42 219.07L208.42 260.16C210.65 320.09 259.53 368 320 368a113 113 0 0 0 23.21-2.46zM320 112c98.65 0 189.09 55 237.93 144a285.53 285.53 0 0 1-44 60.2l37.74 29.5a333.7 333.7 0 0 0 52.9-75.11 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64c-36.7 0-71.71 7-104.63 18.81l46.41 36.29c18.94-4.3 38.34-7.1 58.22-7.1zm0 288c-98.65 0-189.08-55-237.93-144a285.47 285.47 0 0 1 44.05-60.19l-37.74-29.5a333.6 333.6 0 0 0-52.89 75.1 32.35 32.35 0 0 0 0 29.19C89.72 376.41 197.08 448 320 448c36.7 0 71.71-7.05 104.63-18.81l-46.41-36.28C359.28 397.2 339.89 400 320 400z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                    
@@ -4706,68 +5183,88 @@ exports[`<ProfilePage /> Renders correctly in various states test preferreded la
               </p>
             </div>
             <p
-                class="h5"
+              className="h5"
-                data-hj-suppress="true"
+              data-hj-suppress={true}
             >
               Elementary/primary school
             </p>
           </div>
         </div>
         <div
-            class="pgn-transition-replace-group position-relative mb-5"
+          className="pgn-transition-replace-group position-relative mb-5"
+          style={
+            Object {
+              "height": null,
+            }
+          }
         >
           <div
-              style="padding: .1px 0px;"
+            style={
+              Object {
+                "padding": ".1px 0",
+              }
+            }
           >
             <div
-                class="editable-item-header mb-2"
+              className="editable-item-header mb-2"
             >
               <h2
-                  class="edit-section-header"
+                className="edit-section-header"
+                id={null}
               >
                 Social Links
                 <button
-                    class="float-right px-0 btn btn-link btn-sm"
+                  className="float-right px-0 btn btn-link btn-sm"
-                    style="margin-top: -.35rem;"
+                  disabled={false}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "marginTop": "-.35rem",
+                    }
+                  }
                   type="button"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-pencil mr-1"
+                    className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-                      data-icon="pencil"
+                    data-icon="pencil-alt"
                     data-prefix="fas"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 512 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"
+                      d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                   Edit
                 </button>
               </h2>
               <p
-                  class="mb-0"
+                className="mb-0"
               >
                 <span
-                    class="ml-auto small text-muted"
+                  className="ml-auto small text-muted"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-eye "
+                    className="svg-inline--fa fa-eye fa-w-18 "
                     data-icon="eye"
                     data-prefix="far"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 576 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"
+                      d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                    
@@ -4776,80 +5273,88 @@ exports[`<ProfilePage /> Renders correctly in various states test preferreded la
               </p>
             </div>
             <ul
-                class="list-unstyled"
+              className="list-unstyled"
             >
               <li
-                  class="form-group"
+                className="form-group"
               >
                 <a
-                    class="font-weight-bold"
+                  className="font-weight-bold"
                   href="https://www.twitter.com/ALOHA"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-twitter mr-2"
+                    className="svg-inline--fa fa-twitter fa-w-16 mr-2"
                     data-icon="twitter"
                     data-prefix="fab"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 512 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
                       d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                   Twitter
                 </a>
               </li>
               <li
-                  class="form-group"
+                className="form-group"
               >
                 <a
-                    class="font-weight-bold"
+                  className="font-weight-bold"
                   href="https://www.facebook.com/aloha"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-facebook mr-2"
+                    className="svg-inline--fa fa-facebook fa-w-16 mr-2"
                     data-icon="facebook"
                     data-prefix="fab"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 512 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M512 256C512 114.6 397.4 0 256 0S0 114.6 0 256C0 376 82.7 476.8 194.2 504.5V334.2H141.4V256h52.8V222.3c0-87.1 39.4-127.5 125-127.5c16.2 0 44.2 3.2 55.7 6.4V172c-6-.6-16.5-1-29.6-1c-42 0-58.2 15.9-58.2 57.2V256h83.6l-14.4 78.2H287V510.1C413.8 494.8 512 386.9 512 256h0z"
+                      d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                   Facebook
                 </a>
               </li>
               <li
-                  class="form-group"
+                className="form-group"
               >
                 <div>
                   <button
-                      class="pl-0 text-left btn btn-link"
+                    className="pl-0 text-left btn btn-link"
-                      tabindex="0"
+                    onClick={[Function]}
+                    onKeyDown={[Function]}
+                    tabIndex={0}
                     type="button"
                   >
                     <svg
                       aria-hidden="true"
-                        class="svg-inline--fa fa-plus fa-xs mr-2"
+                      className="svg-inline--fa fa-plus fa-w-14 fa-xs mr-2"
                       data-icon="plus"
                       data-prefix="fas"
                       focusable="false"
                       role="img"
+                      style={Object {}}
                       viewBox="0 0 448 512"
                       xmlns="http://www.w3.org/2000/svg"
                     >
                       <path
-                          d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"
+                        d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
                         fill="currentColor"
+                        style={Object {}}
                       />
                     </svg>
                     Add 
@@ -4862,63 +5367,83 @@ exports[`<ProfilePage /> Renders correctly in various states test preferreded la
         </div>
       </div>
       <div
-          class="pt-md-3 col-md-8 col-lg-7 offset-lg-1"
+        className="pt-md-3 col-md-8 col-lg-7 offset-lg-1"
       >
         <div
-            class="pgn-transition-replace-group position-relative mb-5"
+          className="pgn-transition-replace-group position-relative mb-5"
+          style={
+            Object {
+              "height": null,
+            }
+          }
         >
           <div
-              style="padding: .1px 0px;"
+            style={
+              Object {
+                "padding": ".1px 0",
+              }
+            }
           >
             <div
-                class="editable-item-header mb-2"
+              className="editable-item-header mb-2"
             >
               <h2
-                  class="edit-section-header"
+                className="edit-section-header"
+                id={null}
               >
                 About Me
                 <button
-                    class="float-right px-0 btn btn-link btn-sm"
+                  className="float-right px-0 btn btn-link btn-sm"
-                    style="margin-top: -.35rem;"
+                  disabled={false}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "marginTop": "-.35rem",
+                    }
+                  }
                   type="button"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-pencil mr-1"
+                    className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-                      data-icon="pencil"
+                    data-icon="pencil-alt"
                     data-prefix="fas"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 512 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"
+                      d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                   Edit
                 </button>
               </h2>
               <p
-                  class="mb-0"
+                className="mb-0"
               >
                 <span
-                    class="ml-auto small text-muted"
+                  className="ml-auto small text-muted"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-eye "
+                    className="svg-inline--fa fa-eye fa-w-18 "
                     data-icon="eye"
                     data-prefix="far"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 576 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"
+                      d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                    
@@ -4927,68 +5452,88 @@ exports[`<ProfilePage /> Renders correctly in various states test preferreded la
               </p>
             </div>
             <p
-                class="lead"
+              className="lead"
-                data-hj-suppress="true"
+              data-hj-suppress={true}
             >
               This is my bio
             </p>
           </div>
         </div>
         <div
-            class="pgn-transition-replace-group position-relative mb-4"
+          className="pgn-transition-replace-group position-relative mb-4"
+          style={
+            Object {
+              "height": null,
+            }
+          }
         >
           <div
-              style="padding: .1px 0px;"
+            style={
+              Object {
+                "padding": ".1px 0",
+              }
+            }
           >
             <div
-                class="editable-item-header mb-2"
+              className="editable-item-header mb-2"
             >
               <h2
-                  class="edit-section-header"
+                className="edit-section-header"
+                id={null}
               >
                 My Certificates
                 <button
-                    class="float-right px-0 btn btn-link btn-sm"
+                  className="float-right px-0 btn btn-link btn-sm"
-                    style="margin-top: -.35rem;"
+                  disabled={false}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "marginTop": "-.35rem",
+                    }
+                  }
                   type="button"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-pencil mr-1"
+                    className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-                      data-icon="pencil"
+                    data-icon="pencil-alt"
                     data-prefix="fas"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 512 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"
+                      d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                   Edit
                 </button>
               </h2>
               <p
-                  class="mb-0"
+                className="mb-0"
               >
                 <span
-                    class="ml-auto small text-muted"
+                  className="ml-auto small text-muted"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-eye "
+                    className="svg-inline--fa fa-eye fa-w-18 "
                     data-icon="eye"
                     data-prefix="far"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 576 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"
+                      d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                    
@@ -4997,78 +5542,88 @@ exports[`<ProfilePage /> Renders correctly in various states test preferreded la
               </p>
             </div>
             <div
-                class="row align-items-stretch"
+              className="row align-items-stretch"
             >
               <div
-                  class="col-12 col-sm-6 d-flex align-items-stretch"
+                className="col col-sm-6 d-flex align-items-stretch"
               >
                 <div
-                    class="card mb-4 certificate flex-grow-1"
+                  className="card mb-4 certificate flex-grow-1"
                 >
                   <div
-                      class="certificate-type-illustration"
+                    className="certificate-type-illustration"
-                      style="background-image: url(icon/mock/path);"
+                    style={
+                      Object {
+                        "backgroundImage": "url(icon/mock/path)",
+                      }
+                    }
                   />
                   <div
-                      class="card-body d-flex flex-column"
+                    className="card-body d-flex flex-column"
                   >
                     <div
-                        class="card-title"
+                      className="card-title"
                     >
                       <p
-                          class="small mb-0"
+                        className="small mb-0"
                       >
                         Verified Certificate
                       </p>
                       <h4
-                          class="certificate-title"
+                        className="certificate-title"
                       >
                         edX Demonstration Course
                       </h4>
                     </div>
                     <p
-                        class="small mb-0"
+                      className="small mb-0"
                     >
                       From
                     </p>
                     <p
-                        class="h6 mb-4"
+                      className="h6 mb-4"
                     >
                       edX
                     </p>
                     <div
-                        class="flex-grow-1"
+                      className="flex-grow-1"
                     />
                     <p
-                        class="small mb-2"
+                      className="small mb-2"
                     >
                       Completed on 
                       3/4/2019
                     </p>
                     <div>
                       <a
-                          class="pgn__hyperlink default-link standalone-link btn btn-outline-primary"
+                        className="pgn__hyperlink default-link standalone-link btn btn-outline-primary"
                         href="http://www.example.com/"
+                        onClick={[Function]}
                         rel="noopener noreferrer"
                         target="_blank"
                       >
                         View Certificate
                         <span
-                            class="pgn__hyperlink__external-icon"
+                          className="pgn__hyperlink__external-icon"
                           title="Opens in a new tab"
                         >
                           <span
-                              class="pgn__icon"
+                            className="pgn__icon"
-                              style="height: 1em; width: 1em;"
+                            style={
+                              Object {
+                                "height": "1em",
+                                "width": "1em",
+                              }
+                            }
                           >
                             <svg
-                                aria-hidden="true"
+                              aria-hidden={true}
                               fill="none"
-                                focusable="false"
+                              focusable={false}
-                                height="24"
+                              height={24}
                               role="img"
                               viewBox="0 0 24 24"
-                                width="24"
+                              width={24}
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
@@ -5077,7 +5632,7 @@ exports[`<ProfilePage /> Renders correctly in various states test preferreded la
                               />
                             </svg>
                             <span
-                                class="sr-only"
+                              className="sr-only"
                             >
                               in a new tab
                             </span>
@@ -5094,92 +5649,95 @@ exports[`<ProfilePage /> Renders correctly in various states test preferreded la
       </div>
     </div>
   </div>
-  </div>
 </div>
 `;
 
-exports[`<ProfilePage /> Renders correctly in various states viewing other profile with all fields 1`] = `
+exports[`<ProfilePage /> Renders correctly in various states viewing other profile 1`] = `
-<div>
+<div
+  className="profile-page"
+>
   <div
-    class="profile-page"
+    className="profile-page-bg-banner bg-primary d-none d-md-block p-relative"
-  >
-    <div
-      class="profile-page-bg-banner bg-primary d-md-block p-relative"
   />
   <div
-      class="container-fluid"
+    className="container-fluid"
   >
     <div
-        class="row align-items-center pt-4 mb-4 pt-md-0 mb-md-0"
+      className="row align-items-center pt-4 mb-4 pt-md-0 mb-md-0"
     >
       <div
-          class="col-auto col-md-4 col-lg-3"
+        className="col-auto col-md-4 col-lg-3"
       >
         <div
-            class="d-flex align-items-center d-md-block"
+          className="d-flex align-items-center d-md-block"
         >
           <div
-              class="profile-avatar-wrap position-relative"
+            className="profile-avatar-wrap position-relative"
           >
             <div
-                class="profile-avatar rounded-circle bg-light"
+              className="profile-avatar rounded-circle bg-light"
             >
-                <iconmock
+              <IconMock
-                  aria-hidden="true"
+                aria-hidden={true}
-                  class="text-muted"
+                className="text-muted"
                 focusable="false"
                 role="img"
-                  viewbox="0 0 24 24"
+                viewBox="0 0 24 24"
               />
             </div>
             <form
-                enctype="multipart/form-data"
+              encType="multipart/form-data"
+              onSubmit={[Function]}
             >
               <input
                 accept=".jpg, .jpeg, .png"
-                  class="d-none form-control-file"
+                className="d-none form-control-file"
                 id="photo-file"
                 name="file"
+                onChange={[Function]}
                 type="file"
               />
             </form>
           </div>
         </div>
       </div>
+      <div>
+        PluginPOC
+      </div>
       <div
-          class="col"
+        className="col pl-0"
       >
         <div
-            class="d-md-none"
+          className="d-md-none"
         >
           <span
-              data-hj-suppress="true"
+            data-hj-suppress={true}
           >
             <h1
-                class="h2 mb-0 font-weight-bold text-truncate"
+              className="h2 mb-0 font-weight-bold"
             >
-                staff
+              verified
             </h1>
             <p
-                class="mb-0"
+              className="mb-0"
             >
               Member since 
               2017
             </p>
             <div
-                class="d-flex align-items-center mt-3 mb-2rem"
+              className="d-flex align-items-center mt-3 mb-2rem"
             >
               <span
-                  class="pgn__icon icon-visibility-off"
+                className="pgn__icon icon-visibility-off"
               >
                 <svg
-                    aria-hidden="true"
+                  aria-hidden={true}
                   fill="none"
-                    focusable="false"
+                  focusable={false}
-                    height="24"
+                  height={24}
                   role="img"
                   viewBox="0 0 24 24"
-                    width="24"
+                  width={24}
                   xmlns="http://www.w3.org/2000/svg"
                 >
                   <path
@@ -5189,97 +5747,58 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
                 </svg>
               </span>
               <div
-                  class="username-description"
+                className="username-description"
               >
                 Your profile information is only visible to you. Only your username is visible to others on localhost.
               </div>
             </div>
             <hr
-                class="d-none d-md-block"
+              className="d-none d-md-block"
             />
           </span>
         </div>
         <div
-            class="d-none d-md-block float-right"
+          className="d-none d-md-block float-right"
-          >
-            <a
-              class="pgn__hyperlink default-link standalone-link btn btn-primary"
-              href="http://localhost:18150/records"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              View My Records
-              <span
-                class="pgn__hyperlink__external-icon"
-                title="Opens in a new tab"
-              >
-                <span
-                  class="pgn__icon"
-                  style="height: 1em; width: 1em;"
-                >
-                  <svg
-                    aria-hidden="true"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    role="img"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M19 19H5V5h7V3H3v18h18v-9h-2v7ZM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7Z"
-                      fill="currentColor"
         />
-                  </svg>
-                  <span
-                    class="sr-only"
-                  >
-                    in a new tab
-                  </span>
-                </span>
-              </span>
-            </a>
-          </div>
       </div>
     </div>
     <div
-        class="row"
+      className="row"
     >
       <div
-          class="col-md-4 col-lg-4"
+        className="col-md-4 col-lg-4"
       >
         <div
-            class="d-none d-md-block mb-4"
+          className="d-none d-md-block mb-4"
         >
           <span
-              data-hj-suppress="true"
+            data-hj-suppress={true}
           >
             <h1
-                class="h2 mb-0 font-weight-bold text-truncate"
+              className="h2 mb-0 font-weight-bold"
             >
-                staff
+              verified
             </h1>
             <p
-                class="mb-0"
+              className="mb-0"
             >
               Member since 
               2017
             </p>
             <div
-                class="d-flex align-items-center mt-3 mb-2rem"
+              className="d-flex align-items-center mt-3 mb-2rem"
             >
               <span
-                  class="pgn__icon icon-visibility-off"
+                className="pgn__icon icon-visibility-off"
               >
                 <svg
-                    aria-hidden="true"
+                  aria-hidden={true}
                   fill="none"
-                    focusable="false"
+                  focusable={false}
-                    height="24"
+                  height={24}
                   role="img"
                   viewBox="0 0 24 24"
-                    width="24"
+                  width={24}
                   xmlns="http://www.w3.org/2000/svg"
                 >
                   <path
@@ -5289,255 +5808,123 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
                 </svg>
               </span>
               <div
-                  class="username-description"
+                className="username-description"
               >
                 Your profile information is only visible to you. Only your username is visible to others on localhost.
               </div>
             </div>
             <hr
-                class="d-none d-md-block"
+              className="d-none d-md-block"
             />
           </span>
         </div>
         <div
-            class="d-md-none mb-4"
+          className="d-md-none mb-4"
-          >
-            <a
-              class="pgn__hyperlink default-link standalone-link btn btn-primary"
-              href="http://localhost:18150/records"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              View My Records
-              <span
-                class="pgn__hyperlink__external-icon"
-                title="Opens in a new tab"
-              >
-                <span
-                  class="pgn__icon"
-                  style="height: 1em; width: 1em;"
-                >
-                  <svg
-                    aria-hidden="true"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    role="img"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M19 19H5V5h7V3H3v18h18v-9h-2v7ZM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7Z"
-                      fill="currentColor"
         />
-                  </svg>
-                  <span
-                    class="sr-only"
-                  >
-                    in a new tab
-                  </span>
-                </span>
-              </span>
-            </a>
-          </div>
         <div
-            class="pgn-transition-replace-group position-relative mb-5"
+          className="pgn-transition-replace-group position-relative mb-5"
-          >
+          style={
+            Object {
+              "height": null,
+            }
+          }
+        />
         <div
-              style="padding: .1px 0px;"
+          className="pgn-transition-replace-group position-relative mb-5"
-            >
+          style={
+            Object {
+              "height": null,
+            }
+          }
+        />
         <div
-                class="editable-item-header mb-2"
+          className="pgn-transition-replace-group position-relative mb-5"
-              >
+          style={
-                <h2
+            Object {
-                  class="edit-section-header"
+              "height": null,
-                >
+            }
-                  Full Name
+          }
-                </h2>
+        />
-              </div>
-              <p
-                class="h5"
-                data-hj-suppress="true"
-              >
-                user
-              </p>
-            </div>
-          </div>
         <div
-            class="pgn-transition-replace-group position-relative mb-5"
+          className="pgn-transition-replace-group position-relative mb-5"
-          >
+          style={
+            Object {
+              "height": null,
+            }
+          }
+        />
         <div
-              style="padding: .1px 0px;"
+          className="pgn-transition-replace-group position-relative mb-5"
-            >
+          style={
-              <div
+            Object {
-                class="editable-item-header mb-2"
+              "height": null,
-              >
+            }
-                <h2
+          }
-                  class="edit-section-header"
-                >
-                  Location
-                </h2>
-              </div>
-              <p
-                class="h5"
-                data-hj-suppress="true"
         />
       </div>
-          </div>
       <div
-            class="pgn-transition-replace-group position-relative mb-5"
+        className="pt-md-3 col-md-8 col-lg-7 offset-lg-1"
       >
         <div
-              style="padding: .1px 0px;"
+          className="pgn-transition-replace-group position-relative mb-5"
-            >
+          style={
-              <div
+            Object {
-                class="editable-item-header mb-2"
+              "height": null,
-              >
+            }
-                <h2
+          }
-                  class="edit-section-header"
-                >
-                  Primary Language Spoken
-                </h2>
-              </div>
-              <p
-                class="h5"
-                data-hj-suppress="true"
         />
-            </div>
-          </div>
         <div
-            class="pgn-transition-replace-group position-relative mb-5"
+          className="pgn-transition-replace-group position-relative mb-4"
-          >
+          style={
-            <div
+            Object {
-              style="padding: .1px 0px;"
+              "height": null,
-            >
+            }
-              <div
+          }
-                class="editable-item-header mb-2"
-              >
-                <h2
-                  class="edit-section-header"
-                >
-                  Education
-                </h2>
-              </div>
-              <p
-                class="h5"
-                data-hj-suppress="true"
-              >
-                Other education
-              </p>
-            </div>
-          </div>
-          <div
-            class="pgn-transition-replace-group position-relative mb-5"
-          >
-            <div
-              style="padding: .1px 0px;"
-            >
-              <div
-                class="editable-item-header mb-2"
-              >
-                <h2
-                  class="edit-section-header"
-                >
-                  Social Links
-                </h2>
-              </div>
-              <ul
-                class="list-unstyled"
         />
       </div>
     </div>
   </div>
-        <div
-          class="pt-md-3 col-md-8 col-lg-7 offset-lg-1"
-        >
-          <div
-            class="pgn-transition-replace-group position-relative mb-5"
-          >
-            <div
-              style="padding: .1px 0px;"
-            >
-              <div
-                class="editable-item-header mb-2"
-              >
-                <h2
-                  class="edit-section-header"
-                >
-                  About Me
-                </h2>
-              </div>
-              <p
-                class="lead"
-                data-hj-suppress="true"
-              >
-                bio
-              </p>
-            </div>
-          </div>
-          <div
-            class="pgn-transition-replace-group position-relative mb-4"
-          >
-            <div
-              style="padding: .1px 0px;"
-            >
-              <div
-                class="editable-item-header mb-2"
-              >
-                <h2
-                  class="edit-section-header"
-                >
-                  My Certificates
-                </h2>
-              </div>
-              You don't have any certificates yet.
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
 </div>
 `;
 
 exports[`<ProfilePage /> Renders correctly in various states viewing own profile 1`] = `
-<div>
+<div
+  className="profile-page"
+>
   <div
-    class="profile-page"
+    className="profile-page-bg-banner bg-primary d-none d-md-block p-relative"
-  >
-    <div
-      class="profile-page-bg-banner bg-primary d-md-block p-relative"
   />
   <div
-      class="container-fluid"
+    className="container-fluid"
   >
     <div
-        class="row align-items-center pt-4 mb-4 pt-md-0 mb-md-0"
+      className="row align-items-center pt-4 mb-4 pt-md-0 mb-md-0"
     >
       <div
-          class="col-auto col-md-4 col-lg-3"
+        className="col-auto col-md-4 col-lg-3"
       >
         <div
-            class="d-flex align-items-center d-md-block"
+          className="d-flex align-items-center d-md-block"
         >
           <div
-              class="profile-avatar-wrap position-relative"
+            className="profile-avatar-wrap position-relative"
           >
             <div
-                class="profile-avatar rounded-circle bg-light"
+              className="profile-avatar rounded-circle bg-light"
             >
               <div
-                  class="profile-avatar-menu-container"
+                className="profile-avatar-menu-container"
               >
                 <div
-                    class="pgn__dropdown pgn__dropdown-light dropdown"
+                  className="pgn__dropdown pgn__dropdown-light dropdown"
                   data-testid="dropdown"
                 >
                   <button
-                      aria-expanded="false"
+                    aria-expanded={false}
-                      aria-haspopup="true"
+                    aria-haspopup={true}
-                      class="dropdown-toggle btn btn-primary"
+                    className="dropdown-toggle btn btn-primary"
+                    disabled={false}
+                    onClick={[Function]}
                     type="button"
                   >
                     Change
@@ -5546,77 +5933,92 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
               </div>
               <img
                 alt="profile avatar"
-                  class="w-100 h-100 d-block rounded-circle overflow-hidden"
+                className="w-100 h-100 d-block rounded-circle overflow-hidden"
-                  data-hj-suppress="true"
+                data-hj-suppress={true}
                 src="http://localhost:18000/media/profile-images/d2a9bdc2ba165dcefc73265c54bf9a20_500.jpg?v=1552495012"
-                  style="object-fit: cover;"
+                style={
+                  Object {
+                    "objectFit": "cover",
+                  }
+                }
               />
             </div>
             <form
-                enctype="multipart/form-data"
+              encType="multipart/form-data"
+              onSubmit={[Function]}
             >
               <input
                 accept=".jpg, .jpeg, .png"
-                  class="d-none form-control-file"
+                className="d-none form-control-file"
                 id="photo-file"
                 name="file"
+                onChange={[Function]}
                 type="file"
               />
             </form>
           </div>
         </div>
       </div>
+      <div>
+        PluginPOC
+      </div>
       <div
-          class="col"
+        className="col pl-0"
       >
         <div
-            class="d-md-none"
+          className="d-md-none"
         >
           <span
-              data-hj-suppress="true"
+            data-hj-suppress={true}
           >
             <h1
-                class="h2 mb-0 font-weight-bold text-truncate"
+              className="h2 mb-0 font-weight-bold"
             >
               staff
             </h1>
             <p
-                class="mb-0"
+              className="mb-0"
             >
               Member since 
               2017
             </p>
             <hr
-                class="d-none d-md-block"
+              className="d-none d-md-block"
             />
           </span>
         </div>
         <div
-            class="d-none d-md-block float-right"
+          className="d-none d-md-block float-right"
         >
           <a
-              class="pgn__hyperlink default-link standalone-link btn btn-primary"
+            className="pgn__hyperlink default-link standalone-link btn btn-primary"
             href="http://localhost:18150/records"
+            onClick={[Function]}
             rel="noopener noreferrer"
             target="_blank"
           >
             View My Records
             <span
-                class="pgn__hyperlink__external-icon"
+              className="pgn__hyperlink__external-icon"
               title="Opens in a new tab"
             >
               <span
-                  class="pgn__icon"
+                className="pgn__icon"
-                  style="height: 1em; width: 1em;"
+                style={
+                  Object {
+                    "height": "1em",
+                    "width": "1em",
+                  }
+                }
               >
                 <svg
-                    aria-hidden="true"
+                  aria-hidden={true}
                   fill="none"
-                    focusable="false"
+                  focusable={false}
-                    height="24"
+                  height={24}
                   role="img"
                   viewBox="0 0 24 24"
-                    width="24"
+                  width={24}
                   xmlns="http://www.w3.org/2000/svg"
                 >
                   <path
@@ -5625,7 +6027,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                   />
                 </svg>
                 <span
-                    class="sr-only"
+                  className="sr-only"
                 >
                   in a new tab
                 </span>
@@ -5636,59 +6038,65 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
       </div>
     </div>
     <div
-        class="row"
+      className="row"
     >
       <div
-          class="col-md-4 col-lg-4"
+        className="col-md-4 col-lg-4"
       >
         <div
-            class="d-none d-md-block mb-4"
+          className="d-none d-md-block mb-4"
         >
           <span
-              data-hj-suppress="true"
+            data-hj-suppress={true}
           >
             <h1
-                class="h2 mb-0 font-weight-bold text-truncate"
+              className="h2 mb-0 font-weight-bold"
             >
               staff
             </h1>
             <p
-                class="mb-0"
+              className="mb-0"
             >
               Member since 
               2017
             </p>
             <hr
-                class="d-none d-md-block"
+              className="d-none d-md-block"
             />
           </span>
         </div>
         <div
-            class="d-md-none mb-4"
+          className="d-md-none mb-4"
         >
           <a
-              class="pgn__hyperlink default-link standalone-link btn btn-primary"
+            className="pgn__hyperlink default-link standalone-link btn btn-primary"
             href="http://localhost:18150/records"
+            onClick={[Function]}
             rel="noopener noreferrer"
             target="_blank"
           >
             View My Records
             <span
-                class="pgn__hyperlink__external-icon"
+              className="pgn__hyperlink__external-icon"
               title="Opens in a new tab"
             >
               <span
-                  class="pgn__icon"
+                className="pgn__icon"
-                  style="height: 1em; width: 1em;"
+                style={
+                  Object {
+                    "height": "1em",
+                    "width": "1em",
+                  }
+                }
               >
                 <svg
-                    aria-hidden="true"
+                  aria-hidden={true}
                   fill="none"
-                    focusable="false"
+                  focusable={false}
-                    height="24"
+                  height={24}
                   role="img"
                   viewBox="0 0 24 24"
-                    width="24"
+                  width={24}
                   xmlns="http://www.w3.org/2000/svg"
                 >
                   <path
@@ -5697,7 +6105,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                   />
                 </svg>
                 <span
-                    class="sr-only"
+                  className="sr-only"
                 >
                   in a new tab
                 </span>
@@ -5706,60 +6114,80 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
           </a>
         </div>
         <div
-            class="pgn-transition-replace-group position-relative mb-5"
+          className="pgn-transition-replace-group position-relative mb-5"
+          style={
+            Object {
+              "height": null,
+            }
+          }
         >
           <div
-              style="padding: .1px 0px;"
+            style={
+              Object {
+                "padding": ".1px 0",
+              }
+            }
           >
             <div
-                class="editable-item-header mb-2"
+              className="editable-item-header mb-2"
             >
               <h2
-                  class="edit-section-header"
+                className="edit-section-header"
+                id={null}
               >
                 Full Name
                 <button
-                    class="float-right px-0 btn btn-link btn-sm"
+                  className="float-right px-0 btn btn-link btn-sm"
-                    style="margin-top: -.35rem;"
+                  disabled={false}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "marginTop": "-.35rem",
+                    }
+                  }
                   type="button"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-pencil mr-1"
+                    className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-                      data-icon="pencil"
+                    data-icon="pencil-alt"
                     data-prefix="fas"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 512 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"
+                      d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                   Edit
                 </button>
               </h2>
               <p
-                  class="mb-0"
+                className="mb-0"
               >
                 <span
-                    class="ml-auto small text-muted"
+                  className="ml-auto small text-muted"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-eye-slash "
+                    className="svg-inline--fa fa-eye-slash fa-w-20 "
                     data-icon="eye-slash"
                     data-prefix="far"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 640 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zm151 118.3C226 97.7 269.5 80 320 80c65.2 0 118.8 29.6 159.9 67.7C518.4 183.5 545 226 558.6 256c-12.6 28-36.6 66.8-70.9 100.9l-53.8-42.2c9.1-17.6 14.2-37.5 14.2-58.7c0-70.7-57.3-128-128-128c-32.2 0-61.7 11.9-84.2 31.5l-46.1-36.1zM394.9 284.2l-81.5-63.9c4.2-8.5 6.6-18.2 6.6-28.3c0-5.5-.7-10.9-2-16c.7 0 1.3 0 2 0c44.2 0 80 35.8 80 80c0 9.9-1.8 19.4-5.1 28.2zm51.3 163.3l-41.9-33C378.8 425.4 350.7 432 320 432c-65.2 0-118.8-29.6-159.9-67.7C121.6 328.5 95 286 81.4 256c8.3-18.4 21.5-41.5 39.4-64.8L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5zm-88-69.3L302 334c-23.5-5.4-43.1-21.2-53.7-42.3l-56.1-44.2c-.2 2.8-.3 5.6-.3 8.5c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8z"
+                      d="M634 471L36 3.51A16 16 0 0 0 13.51 6l-10 12.49A16 16 0 0 0 6 41l598 467.49a16 16 0 0 0 22.49-2.49l10-12.49A16 16 0 0 0 634 471zM296.79 146.47l134.79 105.38C429.36 191.91 380.48 144 320 144a112.26 112.26 0 0 0-23.21 2.47zm46.42 219.07L208.42 260.16C210.65 320.09 259.53 368 320 368a113 113 0 0 0 23.21-2.46zM320 112c98.65 0 189.09 55 237.93 144a285.53 285.53 0 0 1-44 60.2l37.74 29.5a333.7 333.7 0 0 0 52.9-75.11 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64c-36.7 0-71.71 7-104.63 18.81l46.41 36.29c18.94-4.3 38.34-7.1 58.22-7.1zm0 288c-98.65 0-189.08-55-237.93-144a285.47 285.47 0 0 1 44.05-60.19l-37.74-29.5a333.6 333.6 0 0 0-52.89 75.1 32.35 32.35 0 0 0 0 29.19C89.72 376.41 197.08 448 320 448c36.7 0 71.71-7.05 104.63-18.81l-46.41-36.28C359.28 397.2 339.89 400 320 400z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                    
@@ -5768,73 +6196,93 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
               </p>
             </div>
             <p
-                class="h5"
+              className="h5"
-                data-hj-suppress="true"
+              data-hj-suppress={true}
             >
               Lemon Seltzer
             </p>
             <small
-                class="form-text text-muted"
+              className="form-text text-muted"
             >
               This is the name that appears in your account and on your certificates.
             </small>
           </div>
         </div>
         <div
-            class="pgn-transition-replace-group position-relative mb-5"
+          className="pgn-transition-replace-group position-relative mb-5"
+          style={
+            Object {
+              "height": null,
+            }
+          }
         >
           <div
-              style="padding: .1px 0px;"
+            style={
+              Object {
+                "padding": ".1px 0",
+              }
+            }
           >
             <div
-                class="editable-item-header mb-2"
+              className="editable-item-header mb-2"
             >
               <h2
-                  class="edit-section-header"
+                className="edit-section-header"
+                id={null}
               >
                 Location
                 <button
-                    class="float-right px-0 btn btn-link btn-sm"
+                  className="float-right px-0 btn btn-link btn-sm"
-                    style="margin-top: -.35rem;"
+                  disabled={false}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "marginTop": "-.35rem",
+                    }
+                  }
                   type="button"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-pencil mr-1"
+                    className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-                      data-icon="pencil"
+                    data-icon="pencil-alt"
                     data-prefix="fas"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 512 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"
+                      d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                   Edit
                 </button>
               </h2>
               <p
-                  class="mb-0"
+                className="mb-0"
               >
                 <span
-                    class="ml-auto small text-muted"
+                  className="ml-auto small text-muted"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-eye "
+                    className="svg-inline--fa fa-eye fa-w-18 "
                     data-icon="eye"
                     data-prefix="far"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 576 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"
+                      d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                    
@@ -5843,68 +6291,88 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
               </p>
             </div>
             <p
-                class="h5"
+              className="h5"
-                data-hj-suppress="true"
+              data-hj-suppress={true}
             >
               Montenegro
             </p>
           </div>
         </div>
         <div
-            class="pgn-transition-replace-group position-relative mb-5"
+          className="pgn-transition-replace-group position-relative mb-5"
+          style={
+            Object {
+              "height": null,
+            }
+          }
         >
           <div
-              style="padding: .1px 0px;"
+            style={
+              Object {
+                "padding": ".1px 0",
+              }
+            }
           >
             <div
-                class="editable-item-header mb-2"
+              className="editable-item-header mb-2"
             >
               <h2
-                  class="edit-section-header"
+                className="edit-section-header"
+                id={null}
               >
                 Primary Language Spoken
                 <button
-                    class="float-right px-0 btn btn-link btn-sm"
+                  className="float-right px-0 btn btn-link btn-sm"
-                    style="margin-top: -.35rem;"
+                  disabled={false}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "marginTop": "-.35rem",
+                    }
+                  }
                   type="button"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-pencil mr-1"
+                    className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-                      data-icon="pencil"
+                    data-icon="pencil-alt"
                     data-prefix="fas"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 512 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"
+                      d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                   Edit
                 </button>
               </h2>
               <p
-                  class="mb-0"
+                className="mb-0"
               >
                 <span
-                    class="ml-auto small text-muted"
+                  className="ml-auto small text-muted"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-eye "
+                    className="svg-inline--fa fa-eye fa-w-18 "
                     data-icon="eye"
                     data-prefix="far"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 576 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"
+                      d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                    
@@ -5913,68 +6381,88 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
               </p>
             </div>
             <p
-                class="h5"
+              className="h5"
-                data-hj-suppress="true"
+              data-hj-suppress={true}
             >
               Yoruba
             </p>
           </div>
         </div>
         <div
-            class="pgn-transition-replace-group position-relative mb-5"
+          className="pgn-transition-replace-group position-relative mb-5"
+          style={
+            Object {
+              "height": null,
+            }
+          }
         >
           <div
-              style="padding: .1px 0px;"
+            style={
+              Object {
+                "padding": ".1px 0",
+              }
+            }
           >
             <div
-                class="editable-item-header mb-2"
+              className="editable-item-header mb-2"
             >
               <h2
-                  class="edit-section-header"
+                className="edit-section-header"
+                id={null}
               >
                 Education
                 <button
-                    class="float-right px-0 btn btn-link btn-sm"
+                  className="float-right px-0 btn btn-link btn-sm"
-                    style="margin-top: -.35rem;"
+                  disabled={false}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "marginTop": "-.35rem",
+                    }
+                  }
                   type="button"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-pencil mr-1"
+                    className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-                      data-icon="pencil"
+                    data-icon="pencil-alt"
                     data-prefix="fas"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 512 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"
+                      d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                   Edit
                 </button>
               </h2>
               <p
-                  class="mb-0"
+                className="mb-0"
               >
                 <span
-                    class="ml-auto small text-muted"
+                  className="ml-auto small text-muted"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-eye-slash "
+                    className="svg-inline--fa fa-eye-slash fa-w-20 "
                     data-icon="eye-slash"
                     data-prefix="far"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 640 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zm151 118.3C226 97.7 269.5 80 320 80c65.2 0 118.8 29.6 159.9 67.7C518.4 183.5 545 226 558.6 256c-12.6 28-36.6 66.8-70.9 100.9l-53.8-42.2c9.1-17.6 14.2-37.5 14.2-58.7c0-70.7-57.3-128-128-128c-32.2 0-61.7 11.9-84.2 31.5l-46.1-36.1zM394.9 284.2l-81.5-63.9c4.2-8.5 6.6-18.2 6.6-28.3c0-5.5-.7-10.9-2-16c.7 0 1.3 0 2 0c44.2 0 80 35.8 80 80c0 9.9-1.8 19.4-5.1 28.2zm51.3 163.3l-41.9-33C378.8 425.4 350.7 432 320 432c-65.2 0-118.8-29.6-159.9-67.7C121.6 328.5 95 286 81.4 256c8.3-18.4 21.5-41.5 39.4-64.8L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5zm-88-69.3L302 334c-23.5-5.4-43.1-21.2-53.7-42.3l-56.1-44.2c-.2 2.8-.3 5.6-.3 8.5c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8z"
+                      d="M634 471L36 3.51A16 16 0 0 0 13.51 6l-10 12.49A16 16 0 0 0 6 41l598 467.49a16 16 0 0 0 22.49-2.49l10-12.49A16 16 0 0 0 634 471zM296.79 146.47l134.79 105.38C429.36 191.91 380.48 144 320 144a112.26 112.26 0 0 0-23.21 2.47zm46.42 219.07L208.42 260.16C210.65 320.09 259.53 368 320 368a113 113 0 0 0 23.21-2.46zM320 112c98.65 0 189.09 55 237.93 144a285.53 285.53 0 0 1-44 60.2l37.74 29.5a333.7 333.7 0 0 0 52.9-75.11 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64c-36.7 0-71.71 7-104.63 18.81l46.41 36.29c18.94-4.3 38.34-7.1 58.22-7.1zm0 288c-98.65 0-189.08-55-237.93-144a285.47 285.47 0 0 1 44.05-60.19l-37.74-29.5a333.6 333.6 0 0 0-52.89 75.1 32.35 32.35 0 0 0 0 29.19C89.72 376.41 197.08 448 320 448c36.7 0 71.71-7.05 104.63-18.81l-46.41-36.28C359.28 397.2 339.89 400 320 400z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                    
@@ -5983,68 +6471,88 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
               </p>
             </div>
             <p
-                class="h5"
+              className="h5"
-                data-hj-suppress="true"
+              data-hj-suppress={true}
             >
               Elementary/primary school
             </p>
           </div>
         </div>
         <div
-            class="pgn-transition-replace-group position-relative mb-5"
+          className="pgn-transition-replace-group position-relative mb-5"
+          style={
+            Object {
+              "height": null,
+            }
+          }
         >
           <div
-              style="padding: .1px 0px;"
+            style={
+              Object {
+                "padding": ".1px 0",
+              }
+            }
           >
             <div
-                class="editable-item-header mb-2"
+              className="editable-item-header mb-2"
             >
               <h2
-                  class="edit-section-header"
+                className="edit-section-header"
+                id={null}
               >
                 Social Links
                 <button
-                    class="float-right px-0 btn btn-link btn-sm"
+                  className="float-right px-0 btn btn-link btn-sm"
-                    style="margin-top: -.35rem;"
+                  disabled={false}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "marginTop": "-.35rem",
+                    }
+                  }
                   type="button"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-pencil mr-1"
+                    className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-                      data-icon="pencil"
+                    data-icon="pencil-alt"
                     data-prefix="fas"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 512 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"
+                      d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                   Edit
                 </button>
               </h2>
               <p
-                  class="mb-0"
+                className="mb-0"
               >
                 <span
-                    class="ml-auto small text-muted"
+                  className="ml-auto small text-muted"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-eye "
+                    className="svg-inline--fa fa-eye fa-w-18 "
                     data-icon="eye"
                     data-prefix="far"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 576 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"
+                      d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                    
@@ -6053,80 +6561,88 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
               </p>
             </div>
             <ul
-                class="list-unstyled"
+              className="list-unstyled"
             >
               <li
-                  class="form-group"
+                className="form-group"
               >
                 <a
-                    class="font-weight-bold"
+                  className="font-weight-bold"
                   href="https://www.twitter.com/ALOHA"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-twitter mr-2"
+                    className="svg-inline--fa fa-twitter fa-w-16 mr-2"
                     data-icon="twitter"
                     data-prefix="fab"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 512 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
                       d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                   Twitter
                 </a>
               </li>
               <li
-                  class="form-group"
+                className="form-group"
               >
                 <a
-                    class="font-weight-bold"
+                  className="font-weight-bold"
                   href="https://www.facebook.com/aloha"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-facebook mr-2"
+                    className="svg-inline--fa fa-facebook fa-w-16 mr-2"
                     data-icon="facebook"
                     data-prefix="fab"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 512 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M512 256C512 114.6 397.4 0 256 0S0 114.6 0 256C0 376 82.7 476.8 194.2 504.5V334.2H141.4V256h52.8V222.3c0-87.1 39.4-127.5 125-127.5c16.2 0 44.2 3.2 55.7 6.4V172c-6-.6-16.5-1-29.6-1c-42 0-58.2 15.9-58.2 57.2V256h83.6l-14.4 78.2H287V510.1C413.8 494.8 512 386.9 512 256h0z"
+                      d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                   Facebook
                 </a>
               </li>
               <li
-                  class="form-group"
+                className="form-group"
               >
                 <div>
                   <button
-                      class="pl-0 text-left btn btn-link"
+                    className="pl-0 text-left btn btn-link"
-                      tabindex="0"
+                    onClick={[Function]}
+                    onKeyDown={[Function]}
+                    tabIndex={0}
                     type="button"
                   >
                     <svg
                       aria-hidden="true"
-                        class="svg-inline--fa fa-plus fa-xs mr-2"
+                      className="svg-inline--fa fa-plus fa-w-14 fa-xs mr-2"
                       data-icon="plus"
                       data-prefix="fas"
                       focusable="false"
                       role="img"
+                      style={Object {}}
                       viewBox="0 0 448 512"
                       xmlns="http://www.w3.org/2000/svg"
                     >
                       <path
-                          d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"
+                        d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
                         fill="currentColor"
+                        style={Object {}}
                       />
                     </svg>
                     Add 
@@ -6139,63 +6655,83 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
         </div>
       </div>
       <div
-          class="pt-md-3 col-md-8 col-lg-7 offset-lg-1"
+        className="pt-md-3 col-md-8 col-lg-7 offset-lg-1"
       >
         <div
-            class="pgn-transition-replace-group position-relative mb-5"
+          className="pgn-transition-replace-group position-relative mb-5"
+          style={
+            Object {
+              "height": null,
+            }
+          }
         >
           <div
-              style="padding: .1px 0px;"
+            style={
+              Object {
+                "padding": ".1px 0",
+              }
+            }
           >
             <div
-                class="editable-item-header mb-2"
+              className="editable-item-header mb-2"
             >
               <h2
-                  class="edit-section-header"
+                className="edit-section-header"
+                id={null}
               >
                 About Me
                 <button
-                    class="float-right px-0 btn btn-link btn-sm"
+                  className="float-right px-0 btn btn-link btn-sm"
-                    style="margin-top: -.35rem;"
+                  disabled={false}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "marginTop": "-.35rem",
+                    }
+                  }
                   type="button"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-pencil mr-1"
+                    className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-                      data-icon="pencil"
+                    data-icon="pencil-alt"
                     data-prefix="fas"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 512 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"
+                      d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                   Edit
                 </button>
               </h2>
               <p
-                  class="mb-0"
+                className="mb-0"
               >
                 <span
-                    class="ml-auto small text-muted"
+                  className="ml-auto small text-muted"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-eye "
+                    className="svg-inline--fa fa-eye fa-w-18 "
                     data-icon="eye"
                     data-prefix="far"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 576 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"
+                      d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                    
@@ -6204,68 +6740,88 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
               </p>
             </div>
             <p
-                class="lead"
+              className="lead"
-                data-hj-suppress="true"
+              data-hj-suppress={true}
             >
               This is my bio
             </p>
           </div>
         </div>
         <div
-            class="pgn-transition-replace-group position-relative mb-4"
+          className="pgn-transition-replace-group position-relative mb-4"
+          style={
+            Object {
+              "height": null,
+            }
+          }
         >
           <div
-              style="padding: .1px 0px;"
+            style={
+              Object {
+                "padding": ".1px 0",
+              }
+            }
           >
             <div
-                class="editable-item-header mb-2"
+              className="editable-item-header mb-2"
             >
               <h2
-                  class="edit-section-header"
+                className="edit-section-header"
+                id={null}
               >
                 My Certificates
                 <button
-                    class="float-right px-0 btn btn-link btn-sm"
+                  className="float-right px-0 btn btn-link btn-sm"
-                    style="margin-top: -.35rem;"
+                  disabled={false}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "marginTop": "-.35rem",
+                    }
+                  }
                   type="button"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-pencil mr-1"
+                    className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-                      data-icon="pencil"
+                    data-icon="pencil-alt"
                     data-prefix="fas"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 512 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"
+                      d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                   Edit
                 </button>
               </h2>
               <p
-                  class="mb-0"
+                className="mb-0"
               >
                 <span
-                    class="ml-auto small text-muted"
+                  className="ml-auto small text-muted"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-eye "
+                    className="svg-inline--fa fa-eye fa-w-18 "
                     data-icon="eye"
                     data-prefix="far"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 576 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"
+                      d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                    
@@ -6274,78 +6830,88 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
               </p>
             </div>
             <div
-                class="row align-items-stretch"
+              className="row align-items-stretch"
             >
               <div
-                  class="col-12 col-sm-6 d-flex align-items-stretch"
+                className="col col-sm-6 d-flex align-items-stretch"
               >
                 <div
-                    class="card mb-4 certificate flex-grow-1"
+                  className="card mb-4 certificate flex-grow-1"
                 >
                   <div
-                      class="certificate-type-illustration"
+                    className="certificate-type-illustration"
-                      style="background-image: url(icon/mock/path);"
+                    style={
+                      Object {
+                        "backgroundImage": "url(icon/mock/path)",
+                      }
+                    }
                   />
                   <div
-                      class="card-body d-flex flex-column"
+                    className="card-body d-flex flex-column"
                   >
                     <div
-                        class="card-title"
+                      className="card-title"
                     >
                       <p
-                          class="small mb-0"
+                        className="small mb-0"
                       >
                         Verified Certificate
                       </p>
                       <h4
-                          class="certificate-title"
+                        className="certificate-title"
                       >
                         edX Demonstration Course
                       </h4>
                     </div>
                     <p
-                        class="small mb-0"
+                      className="small mb-0"
                     >
                       From
                     </p>
                     <p
-                        class="h6 mb-4"
+                      className="h6 mb-4"
                     >
                       edX
                     </p>
                     <div
-                        class="flex-grow-1"
+                      className="flex-grow-1"
                     />
                     <p
-                        class="small mb-2"
+                      className="small mb-2"
                     >
                       Completed on 
                       3/4/2019
                     </p>
                     <div>
                       <a
-                          class="pgn__hyperlink default-link standalone-link btn btn-outline-primary"
+                        className="pgn__hyperlink default-link standalone-link btn btn-outline-primary"
                         href="http://www.example.com/"
+                        onClick={[Function]}
                         rel="noopener noreferrer"
                         target="_blank"
                       >
                         View Certificate
                         <span
-                            class="pgn__hyperlink__external-icon"
+                          className="pgn__hyperlink__external-icon"
                           title="Opens in a new tab"
                         >
                           <span
-                              class="pgn__icon"
+                            className="pgn__icon"
-                              style="height: 1em; width: 1em;"
+                            style={
+                              Object {
+                                "height": "1em",
+                                "width": "1em",
+                              }
+                            }
                           >
                             <svg
-                                aria-hidden="true"
+                              aria-hidden={true}
                               fill="none"
-                                focusable="false"
+                              focusable={false}
-                                height="24"
+                              height={24}
                               role="img"
                               viewBox="0 0 24 24"
-                                width="24"
+                              width={24}
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
@@ -6354,7 +6920,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                               />
                             </svg>
                             <span
-                                class="sr-only"
+                              className="sr-only"
                             >
                               in a new tab
                             </span>
@@ -6371,47 +6937,47 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
       </div>
     </div>
   </div>
-  </div>
 </div>
 `;
 
 exports[`<ProfilePage /> Renders correctly in various states while saving an edited bio 1`] = `
-<div>
+<div
+  className="profile-page"
+>
   <div
-    class="profile-page"
+    className="profile-page-bg-banner bg-primary d-none d-md-block p-relative"
-  >
-    <div
-      class="profile-page-bg-banner bg-primary d-md-block p-relative"
   />
   <div
-      class="container-fluid"
+    className="container-fluid"
   >
     <div
-        class="row align-items-center pt-4 mb-4 pt-md-0 mb-md-0"
+      className="row align-items-center pt-4 mb-4 pt-md-0 mb-md-0"
     >
       <div
-          class="col-auto col-md-4 col-lg-3"
+        className="col-auto col-md-4 col-lg-3"
       >
         <div
-            class="d-flex align-items-center d-md-block"
+          className="d-flex align-items-center d-md-block"
         >
           <div
-              class="profile-avatar-wrap position-relative"
+            className="profile-avatar-wrap position-relative"
           >
             <div
-                class="profile-avatar rounded-circle bg-light"
+              className="profile-avatar rounded-circle bg-light"
             >
               <div
-                  class="profile-avatar-menu-container"
+                className="profile-avatar-menu-container"
               >
                 <div
-                    class="pgn__dropdown pgn__dropdown-light dropdown"
+                  className="pgn__dropdown pgn__dropdown-light dropdown"
                   data-testid="dropdown"
                 >
                   <button
-                      aria-expanded="false"
+                    aria-expanded={false}
-                      aria-haspopup="true"
+                    aria-haspopup={true}
-                      class="dropdown-toggle btn btn-primary"
+                    className="dropdown-toggle btn btn-primary"
+                    disabled={false}
+                    onClick={[Function]}
                     type="button"
                   >
                     Change
@@ -6420,77 +6986,92 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
               </div>
               <img
                 alt="profile avatar"
-                  class="w-100 h-100 d-block rounded-circle overflow-hidden"
+                className="w-100 h-100 d-block rounded-circle overflow-hidden"
-                  data-hj-suppress="true"
+                data-hj-suppress={true}
                 src="http://localhost:18000/media/profile-images/d2a9bdc2ba165dcefc73265c54bf9a20_500.jpg?v=1552495012"
-                  style="object-fit: cover;"
+                style={
+                  Object {
+                    "objectFit": "cover",
+                  }
+                }
               />
             </div>
             <form
-                enctype="multipart/form-data"
+              encType="multipart/form-data"
+              onSubmit={[Function]}
             >
               <input
                 accept=".jpg, .jpeg, .png"
-                  class="d-none form-control-file"
+                className="d-none form-control-file"
                 id="photo-file"
                 name="file"
+                onChange={[Function]}
                 type="file"
               />
             </form>
           </div>
         </div>
       </div>
+      <div>
+        PluginPOC
+      </div>
       <div
-          class="col"
+        className="col pl-0"
       >
         <div
-            class="d-md-none"
+          className="d-md-none"
         >
           <span
-              data-hj-suppress="true"
+            data-hj-suppress={true}
           >
             <h1
-                class="h2 mb-0 font-weight-bold text-truncate"
+              className="h2 mb-0 font-weight-bold"
             >
               staff
             </h1>
             <p
-                class="mb-0"
+              className="mb-0"
             >
               Member since 
               2017
             </p>
             <hr
-                class="d-none d-md-block"
+              className="d-none d-md-block"
             />
           </span>
         </div>
         <div
-            class="d-none d-md-block float-right"
+          className="d-none d-md-block float-right"
         >
           <a
-              class="pgn__hyperlink default-link standalone-link btn btn-primary"
+            className="pgn__hyperlink default-link standalone-link btn btn-primary"
             href="http://localhost:18150/records"
+            onClick={[Function]}
             rel="noopener noreferrer"
             target="_blank"
           >
             View My Records
             <span
-                class="pgn__hyperlink__external-icon"
+              className="pgn__hyperlink__external-icon"
               title="Opens in a new tab"
             >
               <span
-                  class="pgn__icon"
+                className="pgn__icon"
-                  style="height: 1em; width: 1em;"
+                style={
+                  Object {
+                    "height": "1em",
+                    "width": "1em",
+                  }
+                }
               >
                 <svg
-                    aria-hidden="true"
+                  aria-hidden={true}
                   fill="none"
-                    focusable="false"
+                  focusable={false}
-                    height="24"
+                  height={24}
                   role="img"
                   viewBox="0 0 24 24"
-                    width="24"
+                  width={24}
                   xmlns="http://www.w3.org/2000/svg"
                 >
                   <path
@@ -6499,7 +7080,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                   />
                 </svg>
                 <span
-                    class="sr-only"
+                  className="sr-only"
                 >
                   in a new tab
                 </span>
@@ -6510,59 +7091,65 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
       </div>
     </div>
     <div
-        class="row"
+      className="row"
     >
       <div
-          class="col-md-4 col-lg-4"
+        className="col-md-4 col-lg-4"
       >
         <div
-            class="d-none d-md-block mb-4"
+          className="d-none d-md-block mb-4"
         >
           <span
-              data-hj-suppress="true"
+            data-hj-suppress={true}
           >
             <h1
-                class="h2 mb-0 font-weight-bold text-truncate"
+              className="h2 mb-0 font-weight-bold"
             >
               staff
             </h1>
             <p
-                class="mb-0"
+              className="mb-0"
             >
               Member since 
               2017
             </p>
             <hr
-                class="d-none d-md-block"
+              className="d-none d-md-block"
             />
           </span>
         </div>
         <div
-            class="d-md-none mb-4"
+          className="d-md-none mb-4"
         >
           <a
-              class="pgn__hyperlink default-link standalone-link btn btn-primary"
+            className="pgn__hyperlink default-link standalone-link btn btn-primary"
             href="http://localhost:18150/records"
+            onClick={[Function]}
             rel="noopener noreferrer"
             target="_blank"
           >
             View My Records
             <span
-                class="pgn__hyperlink__external-icon"
+              className="pgn__hyperlink__external-icon"
               title="Opens in a new tab"
             >
               <span
-                  class="pgn__icon"
+                className="pgn__icon"
-                  style="height: 1em; width: 1em;"
+                style={
+                  Object {
+                    "height": "1em",
+                    "width": "1em",
+                  }
+                }
               >
                 <svg
-                    aria-hidden="true"
+                  aria-hidden={true}
                   fill="none"
-                    focusable="false"
+                  focusable={false}
-                    height="24"
+                  height={24}
                   role="img"
                   viewBox="0 0 24 24"
-                    width="24"
+                  width={24}
                   xmlns="http://www.w3.org/2000/svg"
                 >
                   <path
@@ -6571,7 +7158,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                   />
                 </svg>
                 <span
-                    class="sr-only"
+                  className="sr-only"
                 >
                   in a new tab
                 </span>
@@ -6580,60 +7167,80 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
           </a>
         </div>
         <div
-            class="pgn-transition-replace-group position-relative mb-5"
+          className="pgn-transition-replace-group position-relative mb-5"
+          style={
+            Object {
+              "height": null,
+            }
+          }
         >
           <div
-              style="padding: .1px 0px;"
+            style={
+              Object {
+                "padding": ".1px 0",
+              }
+            }
           >
             <div
-                class="editable-item-header mb-2"
+              className="editable-item-header mb-2"
             >
               <h2
-                  class="edit-section-header"
+                className="edit-section-header"
+                id={null}
               >
                 Full Name
                 <button
-                    class="float-right px-0 btn btn-link btn-sm"
+                  className="float-right px-0 btn btn-link btn-sm"
-                    style="margin-top: -.35rem;"
+                  disabled={false}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "marginTop": "-.35rem",
+                    }
+                  }
                   type="button"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-pencil mr-1"
+                    className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-                      data-icon="pencil"
+                    data-icon="pencil-alt"
                     data-prefix="fas"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 512 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"
+                      d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                   Edit
                 </button>
               </h2>
               <p
-                  class="mb-0"
+                className="mb-0"
               >
                 <span
-                    class="ml-auto small text-muted"
+                  className="ml-auto small text-muted"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-eye-slash "
+                    className="svg-inline--fa fa-eye-slash fa-w-20 "
                     data-icon="eye-slash"
                     data-prefix="far"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 640 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zm151 118.3C226 97.7 269.5 80 320 80c65.2 0 118.8 29.6 159.9 67.7C518.4 183.5 545 226 558.6 256c-12.6 28-36.6 66.8-70.9 100.9l-53.8-42.2c9.1-17.6 14.2-37.5 14.2-58.7c0-70.7-57.3-128-128-128c-32.2 0-61.7 11.9-84.2 31.5l-46.1-36.1zM394.9 284.2l-81.5-63.9c4.2-8.5 6.6-18.2 6.6-28.3c0-5.5-.7-10.9-2-16c.7 0 1.3 0 2 0c44.2 0 80 35.8 80 80c0 9.9-1.8 19.4-5.1 28.2zm51.3 163.3l-41.9-33C378.8 425.4 350.7 432 320 432c-65.2 0-118.8-29.6-159.9-67.7C121.6 328.5 95 286 81.4 256c8.3-18.4 21.5-41.5 39.4-64.8L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5zm-88-69.3L302 334c-23.5-5.4-43.1-21.2-53.7-42.3l-56.1-44.2c-.2 2.8-.3 5.6-.3 8.5c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8z"
+                      d="M634 471L36 3.51A16 16 0 0 0 13.51 6l-10 12.49A16 16 0 0 0 6 41l598 467.49a16 16 0 0 0 22.49-2.49l10-12.49A16 16 0 0 0 634 471zM296.79 146.47l134.79 105.38C429.36 191.91 380.48 144 320 144a112.26 112.26 0 0 0-23.21 2.47zm46.42 219.07L208.42 260.16C210.65 320.09 259.53 368 320 368a113 113 0 0 0 23.21-2.46zM320 112c98.65 0 189.09 55 237.93 144a285.53 285.53 0 0 1-44 60.2l37.74 29.5a333.7 333.7 0 0 0 52.9-75.11 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64c-36.7 0-71.71 7-104.63 18.81l46.41 36.29c18.94-4.3 38.34-7.1 58.22-7.1zm0 288c-98.65 0-189.08-55-237.93-144a285.47 285.47 0 0 1 44.05-60.19l-37.74-29.5a333.6 333.6 0 0 0-52.89 75.1 32.35 32.35 0 0 0 0 29.19C89.72 376.41 197.08 448 320 448c36.7 0 71.71-7.05 104.63-18.81l-46.41-36.28C359.28 397.2 339.89 400 320 400z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                    
@@ -6642,73 +7249,93 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
               </p>
             </div>
             <p
-                class="h5"
+              className="h5"
-                data-hj-suppress="true"
+              data-hj-suppress={true}
             >
               Lemon Seltzer
             </p>
             <small
-                class="form-text text-muted"
+              className="form-text text-muted"
             >
               This is the name that appears in your account and on your certificates.
             </small>
           </div>
         </div>
         <div
-            class="pgn-transition-replace-group position-relative mb-5"
+          className="pgn-transition-replace-group position-relative mb-5"
+          style={
+            Object {
+              "height": null,
+            }
+          }
         >
           <div
-              style="padding: .1px 0px;"
+            style={
+              Object {
+                "padding": ".1px 0",
+              }
+            }
           >
             <div
-                class="editable-item-header mb-2"
+              className="editable-item-header mb-2"
             >
               <h2
-                  class="edit-section-header"
+                className="edit-section-header"
+                id={null}
               >
                 Location
                 <button
-                    class="float-right px-0 btn btn-link btn-sm"
+                  className="float-right px-0 btn btn-link btn-sm"
-                    style="margin-top: -.35rem;"
+                  disabled={false}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "marginTop": "-.35rem",
+                    }
+                  }
                   type="button"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-pencil mr-1"
+                    className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-                      data-icon="pencil"
+                    data-icon="pencil-alt"
                     data-prefix="fas"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 512 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"
+                      d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                   Edit
                 </button>
               </h2>
               <p
-                  class="mb-0"
+                className="mb-0"
               >
                 <span
-                    class="ml-auto small text-muted"
+                  className="ml-auto small text-muted"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-eye "
+                    className="svg-inline--fa fa-eye fa-w-18 "
                     data-icon="eye"
                     data-prefix="far"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 576 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"
+                      d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                    
@@ -6717,68 +7344,88 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
               </p>
             </div>
             <p
-                class="h5"
+              className="h5"
-                data-hj-suppress="true"
+              data-hj-suppress={true}
             >
               Montenegro
             </p>
           </div>
         </div>
         <div
-            class="pgn-transition-replace-group position-relative mb-5"
+          className="pgn-transition-replace-group position-relative mb-5"
+          style={
+            Object {
+              "height": null,
+            }
+          }
         >
           <div
-              style="padding: .1px 0px;"
+            style={
+              Object {
+                "padding": ".1px 0",
+              }
+            }
           >
             <div
-                class="editable-item-header mb-2"
+              className="editable-item-header mb-2"
             >
               <h2
-                  class="edit-section-header"
+                className="edit-section-header"
+                id={null}
               >
                 Primary Language Spoken
                 <button
-                    class="float-right px-0 btn btn-link btn-sm"
+                  className="float-right px-0 btn btn-link btn-sm"
-                    style="margin-top: -.35rem;"
+                  disabled={false}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "marginTop": "-.35rem",
+                    }
+                  }
                   type="button"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-pencil mr-1"
+                    className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-                      data-icon="pencil"
+                    data-icon="pencil-alt"
                     data-prefix="fas"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 512 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"
+                      d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                   Edit
                 </button>
               </h2>
               <p
-                  class="mb-0"
+                className="mb-0"
               >
                 <span
-                    class="ml-auto small text-muted"
+                  className="ml-auto small text-muted"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-eye "
+                    className="svg-inline--fa fa-eye fa-w-18 "
                     data-icon="eye"
                     data-prefix="far"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 576 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"
+                      d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                    
@@ -6787,68 +7434,88 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
               </p>
             </div>
             <p
-                class="h5"
+              className="h5"
-                data-hj-suppress="true"
+              data-hj-suppress={true}
             >
               Yoruba
             </p>
           </div>
         </div>
         <div
-            class="pgn-transition-replace-group position-relative mb-5"
+          className="pgn-transition-replace-group position-relative mb-5"
+          style={
+            Object {
+              "height": null,
+            }
+          }
         >
           <div
-              style="padding: .1px 0px;"
+            style={
+              Object {
+                "padding": ".1px 0",
+              }
+            }
           >
             <div
-                class="editable-item-header mb-2"
+              className="editable-item-header mb-2"
             >
               <h2
-                  class="edit-section-header"
+                className="edit-section-header"
+                id={null}
               >
                 Education
                 <button
-                    class="float-right px-0 btn btn-link btn-sm"
+                  className="float-right px-0 btn btn-link btn-sm"
-                    style="margin-top: -.35rem;"
+                  disabled={false}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "marginTop": "-.35rem",
+                    }
+                  }
                   type="button"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-pencil mr-1"
+                    className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-                      data-icon="pencil"
+                    data-icon="pencil-alt"
                     data-prefix="fas"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 512 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"
+                      d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                   Edit
                 </button>
               </h2>
               <p
-                  class="mb-0"
+                className="mb-0"
               >
                 <span
-                    class="ml-auto small text-muted"
+                  className="ml-auto small text-muted"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-eye-slash "
+                    className="svg-inline--fa fa-eye-slash fa-w-20 "
                     data-icon="eye-slash"
                     data-prefix="far"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 640 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zm151 118.3C226 97.7 269.5 80 320 80c65.2 0 118.8 29.6 159.9 67.7C518.4 183.5 545 226 558.6 256c-12.6 28-36.6 66.8-70.9 100.9l-53.8-42.2c9.1-17.6 14.2-37.5 14.2-58.7c0-70.7-57.3-128-128-128c-32.2 0-61.7 11.9-84.2 31.5l-46.1-36.1zM394.9 284.2l-81.5-63.9c4.2-8.5 6.6-18.2 6.6-28.3c0-5.5-.7-10.9-2-16c.7 0 1.3 0 2 0c44.2 0 80 35.8 80 80c0 9.9-1.8 19.4-5.1 28.2zm51.3 163.3l-41.9-33C378.8 425.4 350.7 432 320 432c-65.2 0-118.8-29.6-159.9-67.7C121.6 328.5 95 286 81.4 256c8.3-18.4 21.5-41.5 39.4-64.8L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5zm-88-69.3L302 334c-23.5-5.4-43.1-21.2-53.7-42.3l-56.1-44.2c-.2 2.8-.3 5.6-.3 8.5c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8z"
+                      d="M634 471L36 3.51A16 16 0 0 0 13.51 6l-10 12.49A16 16 0 0 0 6 41l598 467.49a16 16 0 0 0 22.49-2.49l10-12.49A16 16 0 0 0 634 471zM296.79 146.47l134.79 105.38C429.36 191.91 380.48 144 320 144a112.26 112.26 0 0 0-23.21 2.47zm46.42 219.07L208.42 260.16C210.65 320.09 259.53 368 320 368a113 113 0 0 0 23.21-2.46zM320 112c98.65 0 189.09 55 237.93 144a285.53 285.53 0 0 1-44 60.2l37.74 29.5a333.7 333.7 0 0 0 52.9-75.11 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64c-36.7 0-71.71 7-104.63 18.81l46.41 36.29c18.94-4.3 38.34-7.1 58.22-7.1zm0 288c-98.65 0-189.08-55-237.93-144a285.47 285.47 0 0 1 44.05-60.19l-37.74-29.5a333.6 333.6 0 0 0-52.89 75.1 32.35 32.35 0 0 0 0 29.19C89.72 376.41 197.08 448 320 448c36.7 0 71.71-7.05 104.63-18.81l-46.41-36.28C359.28 397.2 339.89 400 320 400z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                    
@@ -6857,68 +7524,88 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
               </p>
             </div>
             <p
-                class="h5"
+              className="h5"
-                data-hj-suppress="true"
+              data-hj-suppress={true}
             >
               Elementary/primary school
             </p>
           </div>
         </div>
         <div
-            class="pgn-transition-replace-group position-relative mb-5"
+          className="pgn-transition-replace-group position-relative mb-5"
+          style={
+            Object {
+              "height": null,
+            }
+          }
         >
           <div
-              style="padding: .1px 0px;"
+            style={
+              Object {
+                "padding": ".1px 0",
+              }
+            }
           >
             <div
-                class="editable-item-header mb-2"
+              className="editable-item-header mb-2"
             >
               <h2
-                  class="edit-section-header"
+                className="edit-section-header"
+                id={null}
               >
                 Social Links
                 <button
-                    class="float-right px-0 btn btn-link btn-sm"
+                  className="float-right px-0 btn btn-link btn-sm"
-                    style="margin-top: -.35rem;"
+                  disabled={false}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "marginTop": "-.35rem",
+                    }
+                  }
                   type="button"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-pencil mr-1"
+                    className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-                      data-icon="pencil"
+                    data-icon="pencil-alt"
                     data-prefix="fas"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 512 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"
+                      d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                   Edit
                 </button>
               </h2>
               <p
-                  class="mb-0"
+                className="mb-0"
               >
                 <span
-                    class="ml-auto small text-muted"
+                  className="ml-auto small text-muted"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-eye "
+                    className="svg-inline--fa fa-eye fa-w-18 "
                     data-icon="eye"
                     data-prefix="far"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 576 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"
+                      d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                    
@@ -6927,80 +7614,88 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
               </p>
             </div>
             <ul
-                class="list-unstyled"
+              className="list-unstyled"
             >
               <li
-                  class="form-group"
+                className="form-group"
               >
                 <a
-                    class="font-weight-bold"
+                  className="font-weight-bold"
                   href="https://www.twitter.com/ALOHA"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-twitter mr-2"
+                    className="svg-inline--fa fa-twitter fa-w-16 mr-2"
                     data-icon="twitter"
                     data-prefix="fab"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 512 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
                       d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                   Twitter
                 </a>
               </li>
               <li
-                  class="form-group"
+                className="form-group"
               >
                 <a
-                    class="font-weight-bold"
+                  className="font-weight-bold"
                   href="https://www.facebook.com/aloha"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-facebook mr-2"
+                    className="svg-inline--fa fa-facebook fa-w-16 mr-2"
                     data-icon="facebook"
                     data-prefix="fab"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 512 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M512 256C512 114.6 397.4 0 256 0S0 114.6 0 256C0 376 82.7 476.8 194.2 504.5V334.2H141.4V256h52.8V222.3c0-87.1 39.4-127.5 125-127.5c16.2 0 44.2 3.2 55.7 6.4V172c-6-.6-16.5-1-29.6-1c-42 0-58.2 15.9-58.2 57.2V256h83.6l-14.4 78.2H287V510.1C413.8 494.8 512 386.9 512 256h0z"
+                      d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                   Facebook
                 </a>
               </li>
               <li
-                  class="form-group"
+                className="form-group"
               >
                 <div>
                   <button
-                      class="pl-0 text-left btn btn-link"
+                    className="pl-0 text-left btn btn-link"
-                      tabindex="0"
+                    onClick={[Function]}
+                    onKeyDown={[Function]}
+                    tabIndex={0}
                     type="button"
                   >
                     <svg
                       aria-hidden="true"
-                        class="svg-inline--fa fa-plus fa-xs mr-2"
+                      className="svg-inline--fa fa-plus fa-w-14 fa-xs mr-2"
                       data-icon="plus"
                       data-prefix="fas"
                       focusable="false"
                       role="img"
+                      style={Object {}}
                       viewBox="0 0 448 512"
                       xmlns="http://www.w3.org/2000/svg"
                     >
                       <path
-                          d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"
+                        d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
                         fill="currentColor"
+                        style={Object {}}
                       />
                     </svg>
                     Add 
@@ -7013,76 +7708,95 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
         </div>
       </div>
       <div
-          class="pt-md-3 col-md-8 col-lg-7 offset-lg-1"
+        className="pt-md-3 col-md-8 col-lg-7 offset-lg-1"
       >
         <div
-            class="pgn-transition-replace-group position-relative mb-5"
+          className="pgn-transition-replace-group position-relative mb-5"
+          style={
+            Object {
+              "height": null,
+            }
+          }
         >
           <div
-              style="padding: .1px 0px;"
+            style={
+              Object {
+                "padding": ".1px 0",
+              }
+            }
           >
             <div
               aria-labelledby="bio-label"
               role="dialog"
             >
-                <form>
+              <form
+                onSubmit={[Function]}
+              >
                 <div
-                    class="pgn__form-group"
+                  className="pgn__form-group"
                 >
                   <label
-                      class="edit-section-header"
+                    className="edit-section-header"
-                      for="bio"
+                    htmlFor="bio"
                   >
                     About Me
                   </label>
                   <textarea
-                      class="form-control"
+                    className="form-control"
                     id="bio"
                     name="bio"
-                    >
+                    onChange={[Function]}
-                      This is my bio
+                    value="This is my bio"
-                    </textarea>
+                  />
                 </div>
                 <div
-                    class="d-flex flex-row-reverse flex-wrap justify-content-end align-items-center"
+                  className="d-flex flex-row-reverse flex-wrap justify-content-end align-items-center"
                 >
                   <div
-                      class="form-group d-flex flex-wrap"
+                    className="form-group d-flex flex-wrap"
                   >
                     <label
-                        class="col-form-label"
+                      className="col-form-label"
-                        for="visibilityBio"
+                      htmlFor="visibilityBio"
                     >
                       Who can see this:
                     </label>
                     <span
-                        class="d-flex align-items-center"
+                      className="d-flex align-items-center"
                     >
                       <span
-                          class="d-inline-block ml-1 mr-2"
+                        className="d-inline-block ml-1 mr-2"
-                          style="width: 1.5rem;"
+                        style={
+                          Object {
+                            "width": "1.5rem",
+                          }
+                        }
                       >
                         <svg
                           aria-hidden="true"
-                            class="svg-inline--fa fa-eye "
+                          className="svg-inline--fa fa-eye fa-w-18 "
                           data-icon="eye"
                           data-prefix="far"
                           focusable="false"
                           role="img"
+                          style={Object {}}
                           viewBox="0 0 576 512"
                           xmlns="http://www.w3.org/2000/svg"
                         >
                           <path
-                              d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"
+                            d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z"
                             fill="currentColor"
+                            style={Object {}}
                           />
                         </svg>
                       </span>
                       <select
-                          class="d-inline-block form-control"
+                        className="d-inline-block w-auto form-control"
                         id="visibilityBio"
                         name="visibilityBio"
+                        onChange={[Function]}
                         type="select"
+                        value="all_users"
                       >
                         <option
                           value="private"
@@ -7098,31 +7812,33 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                     </span>
                   </div>
                   <div
-                      class="form-group flex-shrink-0 flex-grow-1"
+                    className="form-group flex-shrink-0 flex-grow-1"
                   >
                     <button
-                        aria-disabled="false"
+                      aria-disabled={false}
                       aria-live="assertive"
-                        class="pgn__stateful-btn pgn__stateful-btn-state-pending btn btn-primary"
+                      className="pgn__stateful-btn pgn__stateful-btn-state-pending btn btn-primary"
+                      disabled={false}
+                      onClick={[Function]}
                       type="submit"
                     >
                       <span
-                          class="d-flex align-items-center justify-content-center"
+                        className="d-flex align-items-center justify-content-center"
                       >
                         <span
-                            class="pgn__stateful-btn-icon"
+                          className="pgn__stateful-btn-icon"
                         >
                           <span
-                              class="pgn__icon icon-spin"
+                            className="pgn__icon icon-spin"
                           >
                             <svg
-                                aria-hidden="true"
+                              aria-hidden={true}
                               fill="none"
-                                focusable="false"
+                              focusable={false}
-                                height="24"
+                              height={24}
                               role="img"
                               viewBox="0 0 24 24"
-                                width="24"
+                              width={24}
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
@@ -7138,7 +7854,9 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                       </span>
                     </button>
                     <button
-                        class="btn btn-link"
+                      className="btn btn-link"
+                      disabled={false}
+                      onClick={[Function]}
                       type="button"
                     >
                       Cancel
@@ -7150,60 +7868,80 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
           </div>
         </div>
         <div
-            class="pgn-transition-replace-group position-relative mb-4"
+          className="pgn-transition-replace-group position-relative mb-4"
+          style={
+            Object {
+              "height": null,
+            }
+          }
         >
           <div
-              style="padding: .1px 0px;"
+            style={
+              Object {
+                "padding": ".1px 0",
+              }
+            }
           >
             <div
-                class="editable-item-header mb-2"
+              className="editable-item-header mb-2"
             >
               <h2
-                  class="edit-section-header"
+                className="edit-section-header"
+                id={null}
               >
                 My Certificates
                 <button
-                    class="float-right px-0 btn btn-link btn-sm"
+                  className="float-right px-0 btn btn-link btn-sm"
-                    style="margin-top: -.35rem;"
+                  disabled={false}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "marginTop": "-.35rem",
+                    }
+                  }
                   type="button"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-pencil mr-1"
+                    className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-                      data-icon="pencil"
+                    data-icon="pencil-alt"
                     data-prefix="fas"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 512 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"
+                      d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                   Edit
                 </button>
               </h2>
               <p
-                  class="mb-0"
+                className="mb-0"
               >
                 <span
-                    class="ml-auto small text-muted"
+                  className="ml-auto small text-muted"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-eye "
+                    className="svg-inline--fa fa-eye fa-w-18 "
                     data-icon="eye"
                     data-prefix="far"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 576 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"
+                      d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                    
@@ -7212,78 +7950,88 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
               </p>
             </div>
             <div
-                class="row align-items-stretch"
+              className="row align-items-stretch"
             >
               <div
-                  class="col-12 col-sm-6 d-flex align-items-stretch"
+                className="col col-sm-6 d-flex align-items-stretch"
               >
                 <div
-                    class="card mb-4 certificate flex-grow-1"
+                  className="card mb-4 certificate flex-grow-1"
                 >
                   <div
-                      class="certificate-type-illustration"
+                    className="certificate-type-illustration"
-                      style="background-image: url(icon/mock/path);"
+                    style={
+                      Object {
+                        "backgroundImage": "url(icon/mock/path)",
+                      }
+                    }
                   />
                   <div
-                      class="card-body d-flex flex-column"
+                    className="card-body d-flex flex-column"
                   >
                     <div
-                        class="card-title"
+                      className="card-title"
                     >
                       <p
-                          class="small mb-0"
+                        className="small mb-0"
                       >
                         Verified Certificate
                       </p>
                       <h4
-                          class="certificate-title"
+                        className="certificate-title"
                       >
                         edX Demonstration Course
                       </h4>
                     </div>
                     <p
-                        class="small mb-0"
+                      className="small mb-0"
                     >
                       From
                     </p>
                     <p
-                        class="h6 mb-4"
+                      className="h6 mb-4"
                     >
                       edX
                     </p>
                     <div
-                        class="flex-grow-1"
+                      className="flex-grow-1"
                     />
                     <p
-                        class="small mb-2"
+                      className="small mb-2"
                     >
                       Completed on 
                       3/4/2019
                     </p>
                     <div>
                       <a
-                          class="pgn__hyperlink default-link standalone-link btn btn-outline-primary"
+                        className="pgn__hyperlink default-link standalone-link btn btn-outline-primary"
                         href="http://www.example.com/"
+                        onClick={[Function]}
                         rel="noopener noreferrer"
                         target="_blank"
                       >
                         View Certificate
                         <span
-                            class="pgn__hyperlink__external-icon"
+                          className="pgn__hyperlink__external-icon"
                           title="Opens in a new tab"
                         >
                           <span
-                              class="pgn__icon"
+                            className="pgn__icon"
-                              style="height: 1em; width: 1em;"
+                            style={
+                              Object {
+                                "height": "1em",
+                                "width": "1em",
+                              }
+                            }
                           >
                             <svg
-                                aria-hidden="true"
+                              aria-hidden={true}
                               fill="none"
-                                focusable="false"
+                              focusable={false}
-                                height="24"
+                              height={24}
                               role="img"
                               viewBox="0 0 24 24"
-                                width="24"
+                              width={24}
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
@@ -7292,7 +8040,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                               />
                             </svg>
                             <span
-                                class="sr-only"
+                              className="sr-only"
                             >
                               in a new tab
                             </span>
@@ -7309,47 +8057,47 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
       </div>
     </div>
   </div>
-  </div>
 </div>
 `;
 
 exports[`<ProfilePage /> Renders correctly in various states while saving an edited bio with error 1`] = `
-<div>
+<div
+  className="profile-page"
+>
   <div
-    class="profile-page"
+    className="profile-page-bg-banner bg-primary d-none d-md-block p-relative"
-  >
-    <div
-      class="profile-page-bg-banner bg-primary d-md-block p-relative"
   />
   <div
-      class="container-fluid"
+    className="container-fluid"
   >
     <div
-        class="row align-items-center pt-4 mb-4 pt-md-0 mb-md-0"
+      className="row align-items-center pt-4 mb-4 pt-md-0 mb-md-0"
     >
       <div
-          class="col-auto col-md-4 col-lg-3"
+        className="col-auto col-md-4 col-lg-3"
       >
         <div
-            class="d-flex align-items-center d-md-block"
+          className="d-flex align-items-center d-md-block"
         >
           <div
-              class="profile-avatar-wrap position-relative"
+            className="profile-avatar-wrap position-relative"
           >
             <div
-                class="profile-avatar rounded-circle bg-light"
+              className="profile-avatar rounded-circle bg-light"
             >
               <div
-                  class="profile-avatar-menu-container"
+                className="profile-avatar-menu-container"
               >
                 <div
-                    class="pgn__dropdown pgn__dropdown-light dropdown"
+                  className="pgn__dropdown pgn__dropdown-light dropdown"
                   data-testid="dropdown"
                 >
                   <button
-                      aria-expanded="false"
+                    aria-expanded={false}
-                      aria-haspopup="true"
+                    aria-haspopup={true}
-                      class="dropdown-toggle btn btn-primary"
+                    className="dropdown-toggle btn btn-primary"
+                    disabled={false}
+                    onClick={[Function]}
                     type="button"
                   >
                     Change
@@ -7358,77 +8106,92 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
               </div>
               <img
                 alt="profile avatar"
-                  class="w-100 h-100 d-block rounded-circle overflow-hidden"
+                className="w-100 h-100 d-block rounded-circle overflow-hidden"
-                  data-hj-suppress="true"
+                data-hj-suppress={true}
                 src="http://localhost:18000/media/profile-images/d2a9bdc2ba165dcefc73265c54bf9a20_500.jpg?v=1552495012"
-                  style="object-fit: cover;"
+                style={
+                  Object {
+                    "objectFit": "cover",
+                  }
+                }
               />
             </div>
             <form
-                enctype="multipart/form-data"
+              encType="multipart/form-data"
+              onSubmit={[Function]}
             >
               <input
                 accept=".jpg, .jpeg, .png"
-                  class="d-none form-control-file"
+                className="d-none form-control-file"
                 id="photo-file"
                 name="file"
+                onChange={[Function]}
                 type="file"
               />
             </form>
           </div>
         </div>
       </div>
+      <div>
+        PluginPOC
+      </div>
       <div
-          class="col"
+        className="col pl-0"
       >
         <div
-            class="d-md-none"
+          className="d-md-none"
         >
           <span
-              data-hj-suppress="true"
+            data-hj-suppress={true}
           >
             <h1
-                class="h2 mb-0 font-weight-bold text-truncate"
+              className="h2 mb-0 font-weight-bold"
             >
               staff
             </h1>
             <p
-                class="mb-0"
+              className="mb-0"
             >
               Member since 
               2017
             </p>
             <hr
-                class="d-none d-md-block"
+              className="d-none d-md-block"
             />
           </span>
         </div>
         <div
-            class="d-none d-md-block float-right"
+          className="d-none d-md-block float-right"
         >
           <a
-              class="pgn__hyperlink default-link standalone-link btn btn-primary"
+            className="pgn__hyperlink default-link standalone-link btn btn-primary"
             href="http://localhost:18150/records"
+            onClick={[Function]}
             rel="noopener noreferrer"
             target="_blank"
           >
             View My Records
             <span
-                class="pgn__hyperlink__external-icon"
+              className="pgn__hyperlink__external-icon"
               title="Opens in a new tab"
             >
               <span
-                  class="pgn__icon"
+                className="pgn__icon"
-                  style="height: 1em; width: 1em;"
+                style={
+                  Object {
+                    "height": "1em",
+                    "width": "1em",
+                  }
+                }
               >
                 <svg
-                    aria-hidden="true"
+                  aria-hidden={true}
                   fill="none"
-                    focusable="false"
+                  focusable={false}
-                    height="24"
+                  height={24}
                   role="img"
                   viewBox="0 0 24 24"
-                    width="24"
+                  width={24}
                   xmlns="http://www.w3.org/2000/svg"
                 >
                   <path
@@ -7437,7 +8200,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                   />
                 </svg>
                 <span
-                    class="sr-only"
+                  className="sr-only"
                 >
                   in a new tab
                 </span>
@@ -7448,59 +8211,65 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
       </div>
     </div>
     <div
-        class="row"
+      className="row"
     >
       <div
-          class="col-md-4 col-lg-4"
+        className="col-md-4 col-lg-4"
       >
         <div
-            class="d-none d-md-block mb-4"
+          className="d-none d-md-block mb-4"
         >
           <span
-              data-hj-suppress="true"
+            data-hj-suppress={true}
           >
             <h1
-                class="h2 mb-0 font-weight-bold text-truncate"
+              className="h2 mb-0 font-weight-bold"
             >
               staff
             </h1>
             <p
-                class="mb-0"
+              className="mb-0"
             >
               Member since 
               2017
             </p>
             <hr
-                class="d-none d-md-block"
+              className="d-none d-md-block"
             />
           </span>
         </div>
         <div
-            class="d-md-none mb-4"
+          className="d-md-none mb-4"
         >
           <a
-              class="pgn__hyperlink default-link standalone-link btn btn-primary"
+            className="pgn__hyperlink default-link standalone-link btn btn-primary"
             href="http://localhost:18150/records"
+            onClick={[Function]}
             rel="noopener noreferrer"
             target="_blank"
           >
             View My Records
             <span
-                class="pgn__hyperlink__external-icon"
+              className="pgn__hyperlink__external-icon"
               title="Opens in a new tab"
             >
               <span
-                  class="pgn__icon"
+                className="pgn__icon"
-                  style="height: 1em; width: 1em;"
+                style={
+                  Object {
+                    "height": "1em",
+                    "width": "1em",
+                  }
+                }
               >
                 <svg
-                    aria-hidden="true"
+                  aria-hidden={true}
                   fill="none"
-                    focusable="false"
+                  focusable={false}
-                    height="24"
+                  height={24}
                   role="img"
                   viewBox="0 0 24 24"
-                    width="24"
+                  width={24}
                   xmlns="http://www.w3.org/2000/svg"
                 >
                   <path
@@ -7509,7 +8278,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                   />
                 </svg>
                 <span
-                    class="sr-only"
+                  className="sr-only"
                 >
                   in a new tab
                 </span>
@@ -7518,60 +8287,80 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
           </a>
         </div>
         <div
-            class="pgn-transition-replace-group position-relative mb-5"
+          className="pgn-transition-replace-group position-relative mb-5"
+          style={
+            Object {
+              "height": null,
+            }
+          }
         >
           <div
-              style="padding: .1px 0px;"
+            style={
+              Object {
+                "padding": ".1px 0",
+              }
+            }
           >
             <div
-                class="editable-item-header mb-2"
+              className="editable-item-header mb-2"
             >
               <h2
-                  class="edit-section-header"
+                className="edit-section-header"
+                id={null}
               >
                 Full Name
                 <button
-                    class="float-right px-0 btn btn-link btn-sm"
+                  className="float-right px-0 btn btn-link btn-sm"
-                    style="margin-top: -.35rem;"
+                  disabled={false}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "marginTop": "-.35rem",
+                    }
+                  }
                   type="button"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-pencil mr-1"
+                    className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-                      data-icon="pencil"
+                    data-icon="pencil-alt"
                     data-prefix="fas"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 512 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"
+                      d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                   Edit
                 </button>
               </h2>
               <p
-                  class="mb-0"
+                className="mb-0"
               >
                 <span
-                    class="ml-auto small text-muted"
+                  className="ml-auto small text-muted"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-eye-slash "
+                    className="svg-inline--fa fa-eye-slash fa-w-20 "
                     data-icon="eye-slash"
                     data-prefix="far"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 640 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zm151 118.3C226 97.7 269.5 80 320 80c65.2 0 118.8 29.6 159.9 67.7C518.4 183.5 545 226 558.6 256c-12.6 28-36.6 66.8-70.9 100.9l-53.8-42.2c9.1-17.6 14.2-37.5 14.2-58.7c0-70.7-57.3-128-128-128c-32.2 0-61.7 11.9-84.2 31.5l-46.1-36.1zM394.9 284.2l-81.5-63.9c4.2-8.5 6.6-18.2 6.6-28.3c0-5.5-.7-10.9-2-16c.7 0 1.3 0 2 0c44.2 0 80 35.8 80 80c0 9.9-1.8 19.4-5.1 28.2zm51.3 163.3l-41.9-33C378.8 425.4 350.7 432 320 432c-65.2 0-118.8-29.6-159.9-67.7C121.6 328.5 95 286 81.4 256c8.3-18.4 21.5-41.5 39.4-64.8L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5zm-88-69.3L302 334c-23.5-5.4-43.1-21.2-53.7-42.3l-56.1-44.2c-.2 2.8-.3 5.6-.3 8.5c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8z"
+                      d="M634 471L36 3.51A16 16 0 0 0 13.51 6l-10 12.49A16 16 0 0 0 6 41l598 467.49a16 16 0 0 0 22.49-2.49l10-12.49A16 16 0 0 0 634 471zM296.79 146.47l134.79 105.38C429.36 191.91 380.48 144 320 144a112.26 112.26 0 0 0-23.21 2.47zm46.42 219.07L208.42 260.16C210.65 320.09 259.53 368 320 368a113 113 0 0 0 23.21-2.46zM320 112c98.65 0 189.09 55 237.93 144a285.53 285.53 0 0 1-44 60.2l37.74 29.5a333.7 333.7 0 0 0 52.9-75.11 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64c-36.7 0-71.71 7-104.63 18.81l46.41 36.29c18.94-4.3 38.34-7.1 58.22-7.1zm0 288c-98.65 0-189.08-55-237.93-144a285.47 285.47 0 0 1 44.05-60.19l-37.74-29.5a333.6 333.6 0 0 0-52.89 75.1 32.35 32.35 0 0 0 0 29.19C89.72 376.41 197.08 448 320 448c36.7 0 71.71-7.05 104.63-18.81l-46.41-36.28C359.28 397.2 339.89 400 320 400z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                    
@@ -7580,73 +8369,93 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
               </p>
             </div>
             <p
-                class="h5"
+              className="h5"
-                data-hj-suppress="true"
+              data-hj-suppress={true}
             >
               Lemon Seltzer
             </p>
             <small
-                class="form-text text-muted"
+              className="form-text text-muted"
             >
               This is the name that appears in your account and on your certificates.
             </small>
           </div>
         </div>
         <div
-            class="pgn-transition-replace-group position-relative mb-5"
+          className="pgn-transition-replace-group position-relative mb-5"
+          style={
+            Object {
+              "height": null,
+            }
+          }
         >
           <div
-              style="padding: .1px 0px;"
+            style={
+              Object {
+                "padding": ".1px 0",
+              }
+            }
           >
             <div
-                class="editable-item-header mb-2"
+              className="editable-item-header mb-2"
             >
               <h2
-                  class="edit-section-header"
+                className="edit-section-header"
+                id={null}
               >
                 Location
                 <button
-                    class="float-right px-0 btn btn-link btn-sm"
+                  className="float-right px-0 btn btn-link btn-sm"
-                    style="margin-top: -.35rem;"
+                  disabled={false}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "marginTop": "-.35rem",
+                    }
+                  }
                   type="button"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-pencil mr-1"
+                    className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-                      data-icon="pencil"
+                    data-icon="pencil-alt"
                     data-prefix="fas"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 512 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"
+                      d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                   Edit
                 </button>
               </h2>
               <p
-                  class="mb-0"
+                className="mb-0"
               >
                 <span
-                    class="ml-auto small text-muted"
+                  className="ml-auto small text-muted"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-eye "
+                    className="svg-inline--fa fa-eye fa-w-18 "
                     data-icon="eye"
                     data-prefix="far"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 576 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"
+                      d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                    
@@ -7655,68 +8464,88 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
               </p>
             </div>
             <p
-                class="h5"
+              className="h5"
-                data-hj-suppress="true"
+              data-hj-suppress={true}
             >
               Montenegro
             </p>
           </div>
         </div>
         <div
-            class="pgn-transition-replace-group position-relative mb-5"
+          className="pgn-transition-replace-group position-relative mb-5"
+          style={
+            Object {
+              "height": null,
+            }
+          }
         >
           <div
-              style="padding: .1px 0px;"
+            style={
+              Object {
+                "padding": ".1px 0",
+              }
+            }
           >
             <div
-                class="editable-item-header mb-2"
+              className="editable-item-header mb-2"
             >
               <h2
-                  class="edit-section-header"
+                className="edit-section-header"
+                id={null}
               >
                 Primary Language Spoken
                 <button
-                    class="float-right px-0 btn btn-link btn-sm"
+                  className="float-right px-0 btn btn-link btn-sm"
-                    style="margin-top: -.35rem;"
+                  disabled={false}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "marginTop": "-.35rem",
+                    }
+                  }
                   type="button"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-pencil mr-1"
+                    className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-                      data-icon="pencil"
+                    data-icon="pencil-alt"
                     data-prefix="fas"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 512 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"
+                      d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                   Edit
                 </button>
               </h2>
               <p
-                  class="mb-0"
+                className="mb-0"
               >
                 <span
-                    class="ml-auto small text-muted"
+                  className="ml-auto small text-muted"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-eye "
+                    className="svg-inline--fa fa-eye fa-w-18 "
                     data-icon="eye"
                     data-prefix="far"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 576 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"
+                      d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                    
@@ -7725,68 +8554,88 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
               </p>
             </div>
             <p
-                class="h5"
+              className="h5"
-                data-hj-suppress="true"
+              data-hj-suppress={true}
             >
               Yoruba
             </p>
           </div>
         </div>
         <div
-            class="pgn-transition-replace-group position-relative mb-5"
+          className="pgn-transition-replace-group position-relative mb-5"
+          style={
+            Object {
+              "height": null,
+            }
+          }
         >
           <div
-              style="padding: .1px 0px;"
+            style={
+              Object {
+                "padding": ".1px 0",
+              }
+            }
           >
             <div
-                class="editable-item-header mb-2"
+              className="editable-item-header mb-2"
             >
               <h2
-                  class="edit-section-header"
+                className="edit-section-header"
+                id={null}
               >
                 Education
                 <button
-                    class="float-right px-0 btn btn-link btn-sm"
+                  className="float-right px-0 btn btn-link btn-sm"
-                    style="margin-top: -.35rem;"
+                  disabled={false}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "marginTop": "-.35rem",
+                    }
+                  }
                   type="button"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-pencil mr-1"
+                    className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-                      data-icon="pencil"
+                    data-icon="pencil-alt"
                     data-prefix="fas"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 512 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"
+                      d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                   Edit
                 </button>
               </h2>
               <p
-                  class="mb-0"
+                className="mb-0"
               >
                 <span
-                    class="ml-auto small text-muted"
+                  className="ml-auto small text-muted"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-eye-slash "
+                    className="svg-inline--fa fa-eye-slash fa-w-20 "
                     data-icon="eye-slash"
                     data-prefix="far"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 640 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zm151 118.3C226 97.7 269.5 80 320 80c65.2 0 118.8 29.6 159.9 67.7C518.4 183.5 545 226 558.6 256c-12.6 28-36.6 66.8-70.9 100.9l-53.8-42.2c9.1-17.6 14.2-37.5 14.2-58.7c0-70.7-57.3-128-128-128c-32.2 0-61.7 11.9-84.2 31.5l-46.1-36.1zM394.9 284.2l-81.5-63.9c4.2-8.5 6.6-18.2 6.6-28.3c0-5.5-.7-10.9-2-16c.7 0 1.3 0 2 0c44.2 0 80 35.8 80 80c0 9.9-1.8 19.4-5.1 28.2zm51.3 163.3l-41.9-33C378.8 425.4 350.7 432 320 432c-65.2 0-118.8-29.6-159.9-67.7C121.6 328.5 95 286 81.4 256c8.3-18.4 21.5-41.5 39.4-64.8L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5zm-88-69.3L302 334c-23.5-5.4-43.1-21.2-53.7-42.3l-56.1-44.2c-.2 2.8-.3 5.6-.3 8.5c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8z"
+                      d="M634 471L36 3.51A16 16 0 0 0 13.51 6l-10 12.49A16 16 0 0 0 6 41l598 467.49a16 16 0 0 0 22.49-2.49l10-12.49A16 16 0 0 0 634 471zM296.79 146.47l134.79 105.38C429.36 191.91 380.48 144 320 144a112.26 112.26 0 0 0-23.21 2.47zm46.42 219.07L208.42 260.16C210.65 320.09 259.53 368 320 368a113 113 0 0 0 23.21-2.46zM320 112c98.65 0 189.09 55 237.93 144a285.53 285.53 0 0 1-44 60.2l37.74 29.5a333.7 333.7 0 0 0 52.9-75.11 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64c-36.7 0-71.71 7-104.63 18.81l46.41 36.29c18.94-4.3 38.34-7.1 58.22-7.1zm0 288c-98.65 0-189.08-55-237.93-144a285.47 285.47 0 0 1 44.05-60.19l-37.74-29.5a333.6 333.6 0 0 0-52.89 75.1 32.35 32.35 0 0 0 0 29.19C89.72 376.41 197.08 448 320 448c36.7 0 71.71-7.05 104.63-18.81l-46.41-36.28C359.28 397.2 339.89 400 320 400z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                    
@@ -7795,68 +8644,88 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
               </p>
             </div>
             <p
-                class="h5"
+              className="h5"
-                data-hj-suppress="true"
+              data-hj-suppress={true}
             >
               Elementary/primary school
             </p>
           </div>
         </div>
         <div
-            class="pgn-transition-replace-group position-relative mb-5"
+          className="pgn-transition-replace-group position-relative mb-5"
+          style={
+            Object {
+              "height": null,
+            }
+          }
         >
           <div
-              style="padding: .1px 0px;"
+            style={
+              Object {
+                "padding": ".1px 0",
+              }
+            }
           >
             <div
-                class="editable-item-header mb-2"
+              className="editable-item-header mb-2"
             >
               <h2
-                  class="edit-section-header"
+                className="edit-section-header"
+                id={null}
               >
                 Social Links
                 <button
-                    class="float-right px-0 btn btn-link btn-sm"
+                  className="float-right px-0 btn btn-link btn-sm"
-                    style="margin-top: -.35rem;"
+                  disabled={false}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "marginTop": "-.35rem",
+                    }
+                  }
                   type="button"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-pencil mr-1"
+                    className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-                      data-icon="pencil"
+                    data-icon="pencil-alt"
                     data-prefix="fas"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 512 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"
+                      d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                   Edit
                 </button>
               </h2>
               <p
-                  class="mb-0"
+                className="mb-0"
               >
                 <span
-                    class="ml-auto small text-muted"
+                  className="ml-auto small text-muted"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-eye "
+                    className="svg-inline--fa fa-eye fa-w-18 "
                     data-icon="eye"
                     data-prefix="far"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 576 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"
+                      d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                    
@@ -7865,80 +8734,88 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
               </p>
             </div>
             <ul
-                class="list-unstyled"
+              className="list-unstyled"
             >
               <li
-                  class="form-group"
+                className="form-group"
               >
                 <a
-                    class="font-weight-bold"
+                  className="font-weight-bold"
                   href="https://www.twitter.com/ALOHA"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-twitter mr-2"
+                    className="svg-inline--fa fa-twitter fa-w-16 mr-2"
                     data-icon="twitter"
                     data-prefix="fab"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 512 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
                       d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                   Twitter
                 </a>
               </li>
               <li
-                  class="form-group"
+                className="form-group"
               >
                 <a
-                    class="font-weight-bold"
+                  className="font-weight-bold"
                   href="https://www.facebook.com/aloha"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-facebook mr-2"
+                    className="svg-inline--fa fa-facebook fa-w-16 mr-2"
                     data-icon="facebook"
                     data-prefix="fab"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 512 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M512 256C512 114.6 397.4 0 256 0S0 114.6 0 256C0 376 82.7 476.8 194.2 504.5V334.2H141.4V256h52.8V222.3c0-87.1 39.4-127.5 125-127.5c16.2 0 44.2 3.2 55.7 6.4V172c-6-.6-16.5-1-29.6-1c-42 0-58.2 15.9-58.2 57.2V256h83.6l-14.4 78.2H287V510.1C413.8 494.8 512 386.9 512 256h0z"
+                      d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                   Facebook
                 </a>
               </li>
               <li
-                  class="form-group"
+                className="form-group"
               >
                 <div>
                   <button
-                      class="pl-0 text-left btn btn-link"
+                    className="pl-0 text-left btn btn-link"
-                      tabindex="0"
+                    onClick={[Function]}
+                    onKeyDown={[Function]}
+                    tabIndex={0}
                     type="button"
                   >
                     <svg
                       aria-hidden="true"
-                        class="svg-inline--fa fa-plus fa-xs mr-2"
+                      className="svg-inline--fa fa-plus fa-w-14 fa-xs mr-2"
                       data-icon="plus"
                       data-prefix="fas"
                       focusable="false"
                       role="img"
+                      style={Object {}}
                       viewBox="0 0 448 512"
                       xmlns="http://www.w3.org/2000/svg"
                     >
                       <path
-                          d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"
+                        d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
                         fill="currentColor"
+                        style={Object {}}
                       />
                     </svg>
                     Add 
@@ -7951,37 +8828,48 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
         </div>
       </div>
       <div
-          class="pt-md-3 col-md-8 col-lg-7 offset-lg-1"
+        className="pt-md-3 col-md-8 col-lg-7 offset-lg-1"
       >
         <div
-            class="pgn-transition-replace-group position-relative mb-5"
+          className="pgn-transition-replace-group position-relative mb-5"
+          style={
+            Object {
+              "height": null,
+            }
+          }
         >
           <div
-              style="padding: .1px 0px;"
+            style={
+              Object {
+                "padding": ".1px 0",
+              }
+            }
           >
             <div
               aria-labelledby="bio-label"
               role="dialog"
             >
-                <form>
+              <form
+                onSubmit={[Function]}
+              >
                 <div
-                    class="pgn__form-group"
+                  className="pgn__form-group"
                 >
                   <label
-                      class="edit-section-header"
+                    className="edit-section-header"
-                      for="bio"
+                    htmlFor="bio"
                   >
                     About Me
                   </label>
                   <textarea
-                      class="form-control"
+                    className="form-control"
                     id="bio"
                     name="bio"
-                    >
+                    onChange={[Function]}
-                      This is my bio
+                    value="This is my bio"
-                    </textarea>
+                  />
                   <div
-                      class="pgn__form-control-description pgn__form-text pgn__form-text-invalid"
+                    className="pgn__form-control-description pgn__form-text pgn__form-text-invalid"
                     id="bio-1"
                   >
                     <div>
@@ -7990,45 +8878,53 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                   </div>
                 </div>
                 <div
-                    class="d-flex flex-row-reverse flex-wrap justify-content-end align-items-center"
+                  className="d-flex flex-row-reverse flex-wrap justify-content-end align-items-center"
                 >
                   <div
-                      class="form-group d-flex flex-wrap"
+                    className="form-group d-flex flex-wrap"
                   >
                     <label
-                        class="col-form-label"
+                      className="col-form-label"
-                        for="visibilityBio"
+                      htmlFor="visibilityBio"
                     >
                       Who can see this:
                     </label>
                     <span
-                        class="d-flex align-items-center"
+                      className="d-flex align-items-center"
                     >
                       <span
-                          class="d-inline-block ml-1 mr-2"
+                        className="d-inline-block ml-1 mr-2"
-                          style="width: 1.5rem;"
+                        style={
+                          Object {
+                            "width": "1.5rem",
+                          }
+                        }
                       >
                         <svg
                           aria-hidden="true"
-                            class="svg-inline--fa fa-eye "
+                          className="svg-inline--fa fa-eye fa-w-18 "
                           data-icon="eye"
                           data-prefix="far"
                           focusable="false"
                           role="img"
+                          style={Object {}}
                           viewBox="0 0 576 512"
                           xmlns="http://www.w3.org/2000/svg"
                         >
                           <path
-                              d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"
+                            d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z"
                             fill="currentColor"
+                            style={Object {}}
                           />
                         </svg>
                       </span>
                       <select
-                          class="d-inline-block form-control"
+                        className="d-inline-block w-auto form-control"
                         id="visibilityBio"
                         name="visibilityBio"
+                        onChange={[Function]}
                         type="select"
+                        value="all_users"
                       >
                         <option
                           value="private"
@@ -8044,31 +8940,33 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                     </span>
                   </div>
                   <div
-                      class="form-group flex-shrink-0 flex-grow-1"
+                    className="form-group flex-shrink-0 flex-grow-1"
                   >
                     <button
-                        aria-disabled="false"
+                      aria-disabled={false}
                       aria-live="assertive"
-                        class="pgn__stateful-btn pgn__stateful-btn-state-pending btn btn-primary"
+                      className="pgn__stateful-btn pgn__stateful-btn-state-pending btn btn-primary"
+                      disabled={false}
+                      onClick={[Function]}
                       type="submit"
                     >
                       <span
-                          class="d-flex align-items-center justify-content-center"
+                        className="d-flex align-items-center justify-content-center"
                       >
                         <span
-                            class="pgn__stateful-btn-icon"
+                          className="pgn__stateful-btn-icon"
                         >
                           <span
-                              class="pgn__icon icon-spin"
+                            className="pgn__icon icon-spin"
                           >
                             <svg
-                                aria-hidden="true"
+                              aria-hidden={true}
                               fill="none"
-                                focusable="false"
+                              focusable={false}
-                                height="24"
+                              height={24}
                               role="img"
                               viewBox="0 0 24 24"
-                                width="24"
+                              width={24}
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
@@ -8084,7 +8982,9 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                       </span>
                     </button>
                     <button
-                        class="btn btn-link"
+                      className="btn btn-link"
+                      disabled={false}
+                      onClick={[Function]}
                       type="button"
                     >
                       Cancel
@@ -8096,60 +8996,80 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
           </div>
         </div>
         <div
-            class="pgn-transition-replace-group position-relative mb-4"
+          className="pgn-transition-replace-group position-relative mb-4"
+          style={
+            Object {
+              "height": null,
+            }
+          }
         >
           <div
-              style="padding: .1px 0px;"
+            style={
+              Object {
+                "padding": ".1px 0",
+              }
+            }
           >
             <div
-                class="editable-item-header mb-2"
+              className="editable-item-header mb-2"
             >
               <h2
-                  class="edit-section-header"
+                className="edit-section-header"
+                id={null}
               >
                 My Certificates
                 <button
-                    class="float-right px-0 btn btn-link btn-sm"
+                  className="float-right px-0 btn btn-link btn-sm"
-                    style="margin-top: -.35rem;"
+                  disabled={false}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "marginTop": "-.35rem",
+                    }
+                  }
                   type="button"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-pencil mr-1"
+                    className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-                      data-icon="pencil"
+                    data-icon="pencil-alt"
                     data-prefix="fas"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 512 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"
+                      d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                   Edit
                 </button>
               </h2>
               <p
-                  class="mb-0"
+                className="mb-0"
               >
                 <span
-                    class="ml-auto small text-muted"
+                  className="ml-auto small text-muted"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-eye "
+                    className="svg-inline--fa fa-eye fa-w-18 "
                     data-icon="eye"
                     data-prefix="far"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 576 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"
+                      d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                    
@@ -8158,78 +9078,88 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
               </p>
             </div>
             <div
-                class="row align-items-stretch"
+              className="row align-items-stretch"
             >
               <div
-                  class="col-12 col-sm-6 d-flex align-items-stretch"
+                className="col col-sm-6 d-flex align-items-stretch"
               >
                 <div
-                    class="card mb-4 certificate flex-grow-1"
+                  className="card mb-4 certificate flex-grow-1"
                 >
                   <div
-                      class="certificate-type-illustration"
+                    className="certificate-type-illustration"
-                      style="background-image: url(icon/mock/path);"
+                    style={
+                      Object {
+                        "backgroundImage": "url(icon/mock/path)",
+                      }
+                    }
                   />
                   <div
-                      class="card-body d-flex flex-column"
+                    className="card-body d-flex flex-column"
                   >
                     <div
-                        class="card-title"
+                      className="card-title"
                     >
                       <p
-                          class="small mb-0"
+                        className="small mb-0"
                       >
                         Verified Certificate
                       </p>
                       <h4
-                          class="certificate-title"
+                        className="certificate-title"
                       >
                         edX Demonstration Course
                       </h4>
                     </div>
                     <p
-                        class="small mb-0"
+                      className="small mb-0"
                     >
                       From
                     </p>
                     <p
-                        class="h6 mb-4"
+                      className="h6 mb-4"
                     >
                       edX
                     </p>
                     <div
-                        class="flex-grow-1"
+                      className="flex-grow-1"
                     />
                     <p
-                        class="small mb-2"
+                      className="small mb-2"
                     >
                       Completed on 
                       3/4/2019
                     </p>
                     <div>
                       <a
-                          class="pgn__hyperlink default-link standalone-link btn btn-outline-primary"
+                        className="pgn__hyperlink default-link standalone-link btn btn-outline-primary"
                         href="http://www.example.com/"
+                        onClick={[Function]}
                         rel="noopener noreferrer"
                         target="_blank"
                       >
                         View Certificate
                         <span
-                            class="pgn__hyperlink__external-icon"
+                          className="pgn__hyperlink__external-icon"
                           title="Opens in a new tab"
                         >
                           <span
-                              class="pgn__icon"
+                            className="pgn__icon"
-                              style="height: 1em; width: 1em;"
+                            style={
+                              Object {
+                                "height": "1em",
+                                "width": "1em",
+                              }
+                            }
                           >
                             <svg
-                                aria-hidden="true"
+                              aria-hidden={true}
                               fill="none"
-                                focusable="false"
+                              focusable={false}
-                                height="24"
+                              height={24}
                               role="img"
                               viewBox="0 0 24 24"
-                                width="24"
+                              width={24}
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
@@ -8238,7 +9168,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                               />
                             </svg>
                             <span
-                                class="sr-only"
+                              className="sr-only"
                             >
                               in a new tab
                             </span>
@@ -8255,47 +9185,47 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
       </div>
     </div>
   </div>
-  </div>
 </div>
 `;
 
 exports[`<ProfilePage /> Renders correctly in various states without credentials service 1`] = `
-<div>
+<div
+  className="profile-page"
+>
   <div
-    class="profile-page"
+    className="profile-page-bg-banner bg-primary d-none d-md-block p-relative"
-  >
-    <div
-      class="profile-page-bg-banner bg-primary d-md-block p-relative"
   />
   <div
-      class="container-fluid"
+    className="container-fluid"
   >
     <div
-        class="row align-items-center pt-4 mb-4 pt-md-0 mb-md-0"
+      className="row align-items-center pt-4 mb-4 pt-md-0 mb-md-0"
     >
       <div
-          class="col-auto col-md-4 col-lg-3"
+        className="col-auto col-md-4 col-lg-3"
       >
         <div
-            class="d-flex align-items-center d-md-block"
+          className="d-flex align-items-center d-md-block"
         >
           <div
-              class="profile-avatar-wrap position-relative"
+            className="profile-avatar-wrap position-relative"
           >
             <div
-                class="profile-avatar rounded-circle bg-light"
+              className="profile-avatar rounded-circle bg-light"
             >
               <div
-                  class="profile-avatar-menu-container"
+                className="profile-avatar-menu-container"
               >
                 <div
-                    class="pgn__dropdown pgn__dropdown-light dropdown"
+                  className="pgn__dropdown pgn__dropdown-light dropdown"
                   data-testid="dropdown"
                 >
                   <button
-                      aria-expanded="false"
+                    aria-expanded={false}
-                      aria-haspopup="true"
+                    aria-haspopup={true}
-                      class="dropdown-toggle btn btn-primary"
+                    className="dropdown-toggle btn btn-primary"
+                    disabled={false}
+                    onClick={[Function]}
                     type="button"
                   >
                     Change
@@ -8304,142 +9234,171 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
               </div>
               <img
                 alt="profile avatar"
-                  class="w-100 h-100 d-block rounded-circle overflow-hidden"
+                className="w-100 h-100 d-block rounded-circle overflow-hidden"
-                  data-hj-suppress="true"
+                data-hj-suppress={true}
                 src="http://localhost:18000/media/profile-images/d2a9bdc2ba165dcefc73265c54bf9a20_500.jpg?v=1552495012"
-                  style="object-fit: cover;"
+                style={
+                  Object {
+                    "objectFit": "cover",
+                  }
+                }
               />
             </div>
             <form
-                enctype="multipart/form-data"
+              encType="multipart/form-data"
+              onSubmit={[Function]}
             >
               <input
                 accept=".jpg, .jpeg, .png"
-                  class="d-none form-control-file"
+                className="d-none form-control-file"
                 id="photo-file"
                 name="file"
+                onChange={[Function]}
                 type="file"
               />
             </form>
           </div>
         </div>
       </div>
+      <div>
+        PluginPOC
+      </div>
       <div
-          class="col"
+        className="col pl-0"
       >
         <div
-            class="d-md-none"
+          className="d-md-none"
         >
           <span
-              data-hj-suppress="true"
+            data-hj-suppress={true}
           >
             <h1
-                class="h2 mb-0 font-weight-bold text-truncate"
+              className="h2 mb-0 font-weight-bold"
             >
               staff
             </h1>
             <p
-                class="mb-0"
+              className="mb-0"
             >
               Member since 
               2017
             </p>
             <hr
-                class="d-none d-md-block"
+              className="d-none d-md-block"
             />
           </span>
         </div>
         <div
-            class="d-none d-md-block float-right"
+          className="d-none d-md-block float-right"
         />
       </div>
     </div>
     <div
-        class="row"
+      className="row"
     >
       <div
-          class="col-md-4 col-lg-4"
+        className="col-md-4 col-lg-4"
       >
         <div
-            class="d-none d-md-block mb-4"
+          className="d-none d-md-block mb-4"
         >
           <span
-              data-hj-suppress="true"
+            data-hj-suppress={true}
           >
             <h1
-                class="h2 mb-0 font-weight-bold text-truncate"
+              className="h2 mb-0 font-weight-bold"
             >
               staff
             </h1>
             <p
-                class="mb-0"
+              className="mb-0"
             >
               Member since 
               2017
             </p>
             <hr
-                class="d-none d-md-block"
+              className="d-none d-md-block"
             />
           </span>
         </div>
         <div
-            class="d-md-none mb-4"
+          className="d-md-none mb-4"
         />
         <div
-            class="pgn-transition-replace-group position-relative mb-5"
+          className="pgn-transition-replace-group position-relative mb-5"
+          style={
+            Object {
+              "height": null,
+            }
+          }
         >
           <div
-              style="padding: .1px 0px;"
+            style={
+              Object {
+                "padding": ".1px 0",
+              }
+            }
           >
             <div
-                class="editable-item-header mb-2"
+              className="editable-item-header mb-2"
             >
               <h2
-                  class="edit-section-header"
+                className="edit-section-header"
+                id={null}
               >
                 Full Name
                 <button
-                    class="float-right px-0 btn btn-link btn-sm"
+                  className="float-right px-0 btn btn-link btn-sm"
-                    style="margin-top: -.35rem;"
+                  disabled={false}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "marginTop": "-.35rem",
+                    }
+                  }
                   type="button"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-pencil mr-1"
+                    className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-                      data-icon="pencil"
+                    data-icon="pencil-alt"
                     data-prefix="fas"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 512 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"
+                      d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                   Edit
                 </button>
               </h2>
               <p
-                  class="mb-0"
+                className="mb-0"
               >
                 <span
-                    class="ml-auto small text-muted"
+                  className="ml-auto small text-muted"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-eye-slash "
+                    className="svg-inline--fa fa-eye-slash fa-w-20 "
                     data-icon="eye-slash"
                     data-prefix="far"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 640 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zm151 118.3C226 97.7 269.5 80 320 80c65.2 0 118.8 29.6 159.9 67.7C518.4 183.5 545 226 558.6 256c-12.6 28-36.6 66.8-70.9 100.9l-53.8-42.2c9.1-17.6 14.2-37.5 14.2-58.7c0-70.7-57.3-128-128-128c-32.2 0-61.7 11.9-84.2 31.5l-46.1-36.1zM394.9 284.2l-81.5-63.9c4.2-8.5 6.6-18.2 6.6-28.3c0-5.5-.7-10.9-2-16c.7 0 1.3 0 2 0c44.2 0 80 35.8 80 80c0 9.9-1.8 19.4-5.1 28.2zm51.3 163.3l-41.9-33C378.8 425.4 350.7 432 320 432c-65.2 0-118.8-29.6-159.9-67.7C121.6 328.5 95 286 81.4 256c8.3-18.4 21.5-41.5 39.4-64.8L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5zm-88-69.3L302 334c-23.5-5.4-43.1-21.2-53.7-42.3l-56.1-44.2c-.2 2.8-.3 5.6-.3 8.5c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8z"
+                      d="M634 471L36 3.51A16 16 0 0 0 13.51 6l-10 12.49A16 16 0 0 0 6 41l598 467.49a16 16 0 0 0 22.49-2.49l10-12.49A16 16 0 0 0 634 471zM296.79 146.47l134.79 105.38C429.36 191.91 380.48 144 320 144a112.26 112.26 0 0 0-23.21 2.47zm46.42 219.07L208.42 260.16C210.65 320.09 259.53 368 320 368a113 113 0 0 0 23.21-2.46zM320 112c98.65 0 189.09 55 237.93 144a285.53 285.53 0 0 1-44 60.2l37.74 29.5a333.7 333.7 0 0 0 52.9-75.11 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64c-36.7 0-71.71 7-104.63 18.81l46.41 36.29c18.94-4.3 38.34-7.1 58.22-7.1zm0 288c-98.65 0-189.08-55-237.93-144a285.47 285.47 0 0 1 44.05-60.19l-37.74-29.5a333.6 333.6 0 0 0-52.89 75.1 32.35 32.35 0 0 0 0 29.19C89.72 376.41 197.08 448 320 448c36.7 0 71.71-7.05 104.63-18.81l-46.41-36.28C359.28 397.2 339.89 400 320 400z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                    
@@ -8448,73 +9407,93 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
               </p>
             </div>
             <p
-                class="h5"
+              className="h5"
-                data-hj-suppress="true"
+              data-hj-suppress={true}
             >
               Lemon Seltzer
             </p>
             <small
-                class="form-text text-muted"
+              className="form-text text-muted"
             >
               This is the name that appears in your account and on your certificates.
             </small>
           </div>
         </div>
         <div
-            class="pgn-transition-replace-group position-relative mb-5"
+          className="pgn-transition-replace-group position-relative mb-5"
+          style={
+            Object {
+              "height": null,
+            }
+          }
         >
           <div
-              style="padding: .1px 0px;"
+            style={
+              Object {
+                "padding": ".1px 0",
+              }
+            }
           >
             <div
-                class="editable-item-header mb-2"
+              className="editable-item-header mb-2"
             >
               <h2
-                  class="edit-section-header"
+                className="edit-section-header"
+                id={null}
               >
                 Location
                 <button
-                    class="float-right px-0 btn btn-link btn-sm"
+                  className="float-right px-0 btn btn-link btn-sm"
-                    style="margin-top: -.35rem;"
+                  disabled={false}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "marginTop": "-.35rem",
+                    }
+                  }
                   type="button"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-pencil mr-1"
+                    className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-                      data-icon="pencil"
+                    data-icon="pencil-alt"
                     data-prefix="fas"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 512 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"
+                      d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                   Edit
                 </button>
               </h2>
               <p
-                  class="mb-0"
+                className="mb-0"
               >
                 <span
-                    class="ml-auto small text-muted"
+                  className="ml-auto small text-muted"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-eye "
+                    className="svg-inline--fa fa-eye fa-w-18 "
                     data-icon="eye"
                     data-prefix="far"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 576 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"
+                      d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                    
@@ -8523,68 +9502,88 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
               </p>
             </div>
             <p
-                class="h5"
+              className="h5"
-                data-hj-suppress="true"
+              data-hj-suppress={true}
             >
               Montenegro
             </p>
           </div>
         </div>
         <div
-            class="pgn-transition-replace-group position-relative mb-5"
+          className="pgn-transition-replace-group position-relative mb-5"
+          style={
+            Object {
+              "height": null,
+            }
+          }
         >
           <div
-              style="padding: .1px 0px;"
+            style={
+              Object {
+                "padding": ".1px 0",
+              }
+            }
           >
             <div
-                class="editable-item-header mb-2"
+              className="editable-item-header mb-2"
             >
               <h2
-                  class="edit-section-header"
+                className="edit-section-header"
+                id={null}
               >
                 Primary Language Spoken
                 <button
-                    class="float-right px-0 btn btn-link btn-sm"
+                  className="float-right px-0 btn btn-link btn-sm"
-                    style="margin-top: -.35rem;"
+                  disabled={false}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "marginTop": "-.35rem",
+                    }
+                  }
                   type="button"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-pencil mr-1"
+                    className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-                      data-icon="pencil"
+                    data-icon="pencil-alt"
                     data-prefix="fas"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 512 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"
+                      d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                   Edit
                 </button>
               </h2>
               <p
-                  class="mb-0"
+                className="mb-0"
               >
                 <span
-                    class="ml-auto small text-muted"
+                  className="ml-auto small text-muted"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-eye "
+                    className="svg-inline--fa fa-eye fa-w-18 "
                     data-icon="eye"
                     data-prefix="far"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 576 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"
+                      d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                    
@@ -8593,68 +9592,88 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
               </p>
             </div>
             <p
-                class="h5"
+              className="h5"
-                data-hj-suppress="true"
+              data-hj-suppress={true}
             >
               Yoruba
             </p>
           </div>
         </div>
         <div
-            class="pgn-transition-replace-group position-relative mb-5"
+          className="pgn-transition-replace-group position-relative mb-5"
+          style={
+            Object {
+              "height": null,
+            }
+          }
         >
           <div
-              style="padding: .1px 0px;"
+            style={
+              Object {
+                "padding": ".1px 0",
+              }
+            }
           >
             <div
-                class="editable-item-header mb-2"
+              className="editable-item-header mb-2"
             >
               <h2
-                  class="edit-section-header"
+                className="edit-section-header"
+                id={null}
               >
                 Education
                 <button
-                    class="float-right px-0 btn btn-link btn-sm"
+                  className="float-right px-0 btn btn-link btn-sm"
-                    style="margin-top: -.35rem;"
+                  disabled={false}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "marginTop": "-.35rem",
+                    }
+                  }
                   type="button"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-pencil mr-1"
+                    className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-                      data-icon="pencil"
+                    data-icon="pencil-alt"
                     data-prefix="fas"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 512 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"
+                      d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                   Edit
                 </button>
               </h2>
               <p
-                  class="mb-0"
+                className="mb-0"
               >
                 <span
-                    class="ml-auto small text-muted"
+                  className="ml-auto small text-muted"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-eye-slash "
+                    className="svg-inline--fa fa-eye-slash fa-w-20 "
                     data-icon="eye-slash"
                     data-prefix="far"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 640 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zm151 118.3C226 97.7 269.5 80 320 80c65.2 0 118.8 29.6 159.9 67.7C518.4 183.5 545 226 558.6 256c-12.6 28-36.6 66.8-70.9 100.9l-53.8-42.2c9.1-17.6 14.2-37.5 14.2-58.7c0-70.7-57.3-128-128-128c-32.2 0-61.7 11.9-84.2 31.5l-46.1-36.1zM394.9 284.2l-81.5-63.9c4.2-8.5 6.6-18.2 6.6-28.3c0-5.5-.7-10.9-2-16c.7 0 1.3 0 2 0c44.2 0 80 35.8 80 80c0 9.9-1.8 19.4-5.1 28.2zm51.3 163.3l-41.9-33C378.8 425.4 350.7 432 320 432c-65.2 0-118.8-29.6-159.9-67.7C121.6 328.5 95 286 81.4 256c8.3-18.4 21.5-41.5 39.4-64.8L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5zm-88-69.3L302 334c-23.5-5.4-43.1-21.2-53.7-42.3l-56.1-44.2c-.2 2.8-.3 5.6-.3 8.5c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8z"
+                      d="M634 471L36 3.51A16 16 0 0 0 13.51 6l-10 12.49A16 16 0 0 0 6 41l598 467.49a16 16 0 0 0 22.49-2.49l10-12.49A16 16 0 0 0 634 471zM296.79 146.47l134.79 105.38C429.36 191.91 380.48 144 320 144a112.26 112.26 0 0 0-23.21 2.47zm46.42 219.07L208.42 260.16C210.65 320.09 259.53 368 320 368a113 113 0 0 0 23.21-2.46zM320 112c98.65 0 189.09 55 237.93 144a285.53 285.53 0 0 1-44 60.2l37.74 29.5a333.7 333.7 0 0 0 52.9-75.11 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64c-36.7 0-71.71 7-104.63 18.81l46.41 36.29c18.94-4.3 38.34-7.1 58.22-7.1zm0 288c-98.65 0-189.08-55-237.93-144a285.47 285.47 0 0 1 44.05-60.19l-37.74-29.5a333.6 333.6 0 0 0-52.89 75.1 32.35 32.35 0 0 0 0 29.19C89.72 376.41 197.08 448 320 448c36.7 0 71.71-7.05 104.63-18.81l-46.41-36.28C359.28 397.2 339.89 400 320 400z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                    
@@ -8663,68 +9682,88 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
               </p>
             </div>
             <p
-                class="h5"
+              className="h5"
-                data-hj-suppress="true"
+              data-hj-suppress={true}
             >
               Elementary/primary school
             </p>
           </div>
         </div>
         <div
-            class="pgn-transition-replace-group position-relative mb-5"
+          className="pgn-transition-replace-group position-relative mb-5"
+          style={
+            Object {
+              "height": null,
+            }
+          }
         >
           <div
-              style="padding: .1px 0px;"
+            style={
+              Object {
+                "padding": ".1px 0",
+              }
+            }
           >
             <div
-                class="editable-item-header mb-2"
+              className="editable-item-header mb-2"
             >
               <h2
-                  class="edit-section-header"
+                className="edit-section-header"
+                id={null}
               >
                 Social Links
                 <button
-                    class="float-right px-0 btn btn-link btn-sm"
+                  className="float-right px-0 btn btn-link btn-sm"
-                    style="margin-top: -.35rem;"
+                  disabled={false}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "marginTop": "-.35rem",
+                    }
+                  }
                   type="button"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-pencil mr-1"
+                    className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-                      data-icon="pencil"
+                    data-icon="pencil-alt"
                     data-prefix="fas"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 512 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"
+                      d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                   Edit
                 </button>
               </h2>
               <p
-                  class="mb-0"
+                className="mb-0"
               >
                 <span
-                    class="ml-auto small text-muted"
+                  className="ml-auto small text-muted"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-eye "
+                    className="svg-inline--fa fa-eye fa-w-18 "
                     data-icon="eye"
                     data-prefix="far"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 576 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"
+                      d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                    
@@ -8733,80 +9772,88 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
               </p>
             </div>
             <ul
-                class="list-unstyled"
+              className="list-unstyled"
             >
               <li
-                  class="form-group"
+                className="form-group"
               >
                 <a
-                    class="font-weight-bold"
+                  className="font-weight-bold"
                   href="https://www.twitter.com/ALOHA"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-twitter mr-2"
+                    className="svg-inline--fa fa-twitter fa-w-16 mr-2"
                     data-icon="twitter"
                     data-prefix="fab"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 512 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
                       d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                   Twitter
                 </a>
               </li>
               <li
-                  class="form-group"
+                className="form-group"
               >
                 <a
-                    class="font-weight-bold"
+                  className="font-weight-bold"
                   href="https://www.facebook.com/aloha"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-facebook mr-2"
+                    className="svg-inline--fa fa-facebook fa-w-16 mr-2"
                     data-icon="facebook"
                     data-prefix="fab"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 512 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M512 256C512 114.6 397.4 0 256 0S0 114.6 0 256C0 376 82.7 476.8 194.2 504.5V334.2H141.4V256h52.8V222.3c0-87.1 39.4-127.5 125-127.5c16.2 0 44.2 3.2 55.7 6.4V172c-6-.6-16.5-1-29.6-1c-42 0-58.2 15.9-58.2 57.2V256h83.6l-14.4 78.2H287V510.1C413.8 494.8 512 386.9 512 256h0z"
+                      d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                   Facebook
                 </a>
               </li>
               <li
-                  class="form-group"
+                className="form-group"
               >
                 <div>
                   <button
-                      class="pl-0 text-left btn btn-link"
+                    className="pl-0 text-left btn btn-link"
-                      tabindex="0"
+                    onClick={[Function]}
+                    onKeyDown={[Function]}
+                    tabIndex={0}
                     type="button"
                   >
                     <svg
                       aria-hidden="true"
-                        class="svg-inline--fa fa-plus fa-xs mr-2"
+                      className="svg-inline--fa fa-plus fa-w-14 fa-xs mr-2"
                       data-icon="plus"
                       data-prefix="fas"
                       focusable="false"
                       role="img"
+                      style={Object {}}
                       viewBox="0 0 448 512"
                       xmlns="http://www.w3.org/2000/svg"
                     >
                       <path
-                          d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"
+                        d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
                         fill="currentColor"
+                        style={Object {}}
                       />
                     </svg>
                     Add 
@@ -8819,63 +9866,83 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
         </div>
       </div>
       <div
-          class="pt-md-3 col-md-8 col-lg-7 offset-lg-1"
+        className="pt-md-3 col-md-8 col-lg-7 offset-lg-1"
       >
         <div
-            class="pgn-transition-replace-group position-relative mb-5"
+          className="pgn-transition-replace-group position-relative mb-5"
+          style={
+            Object {
+              "height": null,
+            }
+          }
         >
           <div
-              style="padding: .1px 0px;"
+            style={
+              Object {
+                "padding": ".1px 0",
+              }
+            }
           >
             <div
-                class="editable-item-header mb-2"
+              className="editable-item-header mb-2"
             >
               <h2
-                  class="edit-section-header"
+                className="edit-section-header"
+                id={null}
               >
                 About Me
                 <button
-                    class="float-right px-0 btn btn-link btn-sm"
+                  className="float-right px-0 btn btn-link btn-sm"
-                    style="margin-top: -.35rem;"
+                  disabled={false}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "marginTop": "-.35rem",
+                    }
+                  }
                   type="button"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-pencil mr-1"
+                    className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-                      data-icon="pencil"
+                    data-icon="pencil-alt"
                     data-prefix="fas"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 512 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"
+                      d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                   Edit
                 </button>
               </h2>
               <p
-                  class="mb-0"
+                className="mb-0"
               >
                 <span
-                    class="ml-auto small text-muted"
+                  className="ml-auto small text-muted"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-eye "
+                    className="svg-inline--fa fa-eye fa-w-18 "
                     data-icon="eye"
                     data-prefix="far"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 576 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"
+                      d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                    
@@ -8884,68 +9951,88 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
               </p>
             </div>
             <p
-                class="lead"
+              className="lead"
-                data-hj-suppress="true"
+              data-hj-suppress={true}
             >
               This is my bio
             </p>
           </div>
         </div>
         <div
-            class="pgn-transition-replace-group position-relative mb-4"
+          className="pgn-transition-replace-group position-relative mb-4"
+          style={
+            Object {
+              "height": null,
+            }
+          }
         >
           <div
-              style="padding: .1px 0px;"
+            style={
+              Object {
+                "padding": ".1px 0",
+              }
+            }
           >
             <div
-                class="editable-item-header mb-2"
+              className="editable-item-header mb-2"
             >
               <h2
-                  class="edit-section-header"
+                className="edit-section-header"
+                id={null}
               >
                 My Certificates
                 <button
-                    class="float-right px-0 btn btn-link btn-sm"
+                  className="float-right px-0 btn btn-link btn-sm"
-                    style="margin-top: -.35rem;"
+                  disabled={false}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "marginTop": "-.35rem",
+                    }
+                  }
                   type="button"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-pencil mr-1"
+                    className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-                      data-icon="pencil"
+                    data-icon="pencil-alt"
                     data-prefix="fas"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 512 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"
+                      d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                   Edit
                 </button>
               </h2>
               <p
-                  class="mb-0"
+                className="mb-0"
               >
                 <span
-                    class="ml-auto small text-muted"
+                  className="ml-auto small text-muted"
                 >
                   <svg
                     aria-hidden="true"
-                      class="svg-inline--fa fa-eye "
+                    className="svg-inline--fa fa-eye fa-w-18 "
                     data-icon="eye"
                     data-prefix="far"
                     focusable="false"
                     role="img"
+                    style={Object {}}
                     viewBox="0 0 576 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                        d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"
+                      d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z"
                       fill="currentColor"
+                      style={Object {}}
                     />
                   </svg>
                    
@@ -8954,78 +10041,88 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
               </p>
             </div>
             <div
-                class="row align-items-stretch"
+              className="row align-items-stretch"
             >
               <div
-                  class="col-12 col-sm-6 d-flex align-items-stretch"
+                className="col col-sm-6 d-flex align-items-stretch"
               >
                 <div
-                    class="card mb-4 certificate flex-grow-1"
+                  className="card mb-4 certificate flex-grow-1"
                 >
                   <div
-                      class="certificate-type-illustration"
+                    className="certificate-type-illustration"
-                      style="background-image: url(icon/mock/path);"
+                    style={
+                      Object {
+                        "backgroundImage": "url(icon/mock/path)",
+                      }
+                    }
                   />
                   <div
-                      class="card-body d-flex flex-column"
+                    className="card-body d-flex flex-column"
                   >
                     <div
-                        class="card-title"
+                      className="card-title"
                     >
                       <p
-                          class="small mb-0"
+                        className="small mb-0"
                       >
                         Verified Certificate
                       </p>
                       <h4
-                          class="certificate-title"
+                        className="certificate-title"
                       >
                         edX Demonstration Course
                       </h4>
                     </div>
                     <p
-                        class="small mb-0"
+                      className="small mb-0"
                     >
                       From
                     </p>
                     <p
-                        class="h6 mb-4"
+                      className="h6 mb-4"
                     >
                       edX
                     </p>
                     <div
-                        class="flex-grow-1"
+                      className="flex-grow-1"
                     />
                     <p
-                        class="small mb-2"
+                      className="small mb-2"
                     >
                       Completed on 
                       3/4/2019
                     </p>
                     <div>
                       <a
-                          class="pgn__hyperlink default-link standalone-link btn btn-outline-primary"
+                        className="pgn__hyperlink default-link standalone-link btn btn-outline-primary"
                         href="http://www.example.com/"
+                        onClick={[Function]}
                         rel="noopener noreferrer"
                         target="_blank"
                       >
                         View Certificate
                         <span
-                            class="pgn__hyperlink__external-icon"
+                          className="pgn__hyperlink__external-icon"
                           title="Opens in a new tab"
                         >
                           <span
-                              class="pgn__icon"
+                            className="pgn__icon"
-                              style="height: 1em; width: 1em;"
+                            style={
+                              Object {
+                                "height": "1em",
+                                "width": "1em",
+                              }
+                            }
                           >
                             <svg
-                                aria-hidden="true"
+                              aria-hidden={true}
                               fill="none"
-                                focusable="false"
+                              focusable={false}
-                                height="24"
+                              height={24}
                               role="img"
                               viewBox="0 0 24 24"
-                                width="24"
+                              width={24}
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
@@ -9034,7 +10131,7 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
                               />
                             </svg>
                             <span
-                                class="sr-only"
+                              className="sr-only"
                             >
                               in a new tab
                             </span>
@@ -9051,6 +10148,5 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
       </div>
     </div>
   </div>
-  </div>
 </div>
 `;

src/profile/data/sagas.js

@@ -66,25 +66,6 @@ export function* handleFetchProfile(action) {
     } else {
       [account, courseCertificates] = result;
     }
-
-    // Set initial visibility values for account
-    // Set account_privacy as custom is necessary so that when viewing another user's profile,
-    // their full name is displayed and change visibility forms are worked correctly
-    if (isAuthenticatedUserProfile && result[0].accountPrivacy === 'all_users') {
-      yield call(ProfileApiService.patchPreferences, action.payload.username, {
-        account_privacy: 'custom',
-        'visibility.name': 'all_users',
-        'visibility.bio': 'all_users',
-        'visibility.course_certificates': 'all_users',
-        'visibility.country': 'all_users',
-        'visibility.date_joined': 'all_users',
-        'visibility.level_of_education': 'all_users',
-        'visibility.language_proficiencies': 'all_users',
-        'visibility.social_links': 'all_users',
-        'visibility.time_zone': 'all_users',
-      });
-    }
-
     yield put(fetchProfileSuccess(
       account,
       preferences,

src/profile/data/selectors.js

@@ -35,12 +35,9 @@ export const editableFormModeSelector = createSelector(
     // or is being hidden from us (for other users' profiles)
     let propExists = account[formId] != null && account[formId].length > 0;
     propExists = formId === 'certificates' ? certificates.length > 0 : propExists; // overwrite for certificates
-    // If this isn't the current user's profile
+    // If this isn't the current user's profile or if
-    if (!isAuthenticatedUserProfile) {
-      return 'static';
-    }
     // the current user has no age set / under 13 ...
-    if (account.requiresParentalConsent) {
+    if (!isAuthenticatedUserProfile || account.requiresParentalConsent) {
       // then there are only two options: static or nothing.
       // We use 'null' as a return value because the consumers of
       // getMode render nothing at all on a mode of null.
@@ -231,13 +228,13 @@ export const visibilitiesSelector = createSelector(
     switch (accountPrivacy) {
       case 'custom':
         return {
-          visibilityBio: preferences.visibilityBio || 'all_users',
+          visibilityBio: preferences.visibilityBio || 'private',
-          visibilityCourseCertificates: preferences.visibilityCourseCertificates || 'all_users',
+          visibilityCourseCertificates: preferences.visibilityCourseCertificates || 'private',
-          visibilityCountry: preferences.visibilityCountry || 'all_users',
+          visibilityCountry: preferences.visibilityCountry || 'private',
-          visibilityLevelOfEducation: preferences.visibilityLevelOfEducation || 'all_users',
+          visibilityLevelOfEducation: preferences.visibilityLevelOfEducation || 'private',
-          visibilityLanguageProficiencies: preferences.visibilityLanguageProficiencies || 'all_users',
+          visibilityLanguageProficiencies: preferences.visibilityLanguageProficiencies || 'private',
-          visibilityName: preferences.visibilityName || 'all_users',
+          visibilityName: preferences.visibilityName || 'private',
-          visibilitySocialLinks: preferences.visibilitySocialLinks || 'all_users',
+          visibilitySocialLinks: preferences.visibilitySocialLinks || 'private',
         };
       case 'private':
         return {

src/profile/forms/Certificates.jsx

@@ -68,7 +68,7 @@ class Certificates extends React.Component {
     })();
 
     return (
-      <div key={`${modifiedDate}-${courseId}`} className="col-12 col-sm-6 d-flex align-items-stretch">
+      <div key={`${modifiedDate}-${courseId}`} className="col col-sm-6 d-flex align-items-stretch">
         <div className="card mb-4 certificate flex-grow-1">
           <div
             className="certificate-type-illustration"

src/profile/forms/LearningGoal.test.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { useMemo } from 'react';
 import { Provider } from 'react-redux';
-import { render, screen } from '@testing-library/react';
+import renderer from 'react-test-renderer';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 import { configure as configureI18n, IntlProvider } from '@edx/frontend-platform/i18n';
@@ -92,25 +92,31 @@ LearningGoalWrapperWithStore.propTypes = {
 describe('<LearningGoal />', () => {
   describe('renders the current learning goal', () => {
     it('renders "I want to advance my career"', () => {
-      render(
+      const learningGoalRenderer = renderer.create(
         <LearningGoalWrapper
           {...requiredLearningGoalProps}
           formId="learningGoal"
         />,
       );
-      expect(screen.getByText('I want to advance my career')).toBeTruthy();
+
+      const learningGoalInstance = learningGoalRenderer.root;
+
+      expect(learningGoalInstance.findByProps({ className: 'lead' }).children).toEqual(['I want to advance my career']);
     });
 
     it('renders "Something else"', () => {
       requiredLearningGoalProps.learningGoal = 'something_else';
 
-      render(
+      const learningGoalRenderer = renderer.create(
         <LearningGoalWrapper
           {...requiredLearningGoalProps}
           formId="learningGoal"
         />,
       );
-      expect(screen.getByText('Something else')).toBeTruthy();
+
+      const learningGoalInstance = learningGoalRenderer.root;
+
+      expect(learningGoalInstance.findByProps({ className: 'lead' }).children).toEqual(['Something else']);
     });
   });
 });

src/profile/forms/PluginCountry.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { injectIntl } from '@edx/frontend-platform/i18n';
+import { Icon } from '@edx/paragon';
+import { LocationOn } from '@edx/paragon/icons';
+
+// Selectors
+import { countrySelector } from '../data/selectors';
+
+// eslint-disable-next-line react/prefer-stateless-function
+class PluginCountry extends React.Component {
+  render() {
+    const {
+      country,
+      countryMessages,
+    } = this.props;
+
+    return (
+      <div className="pgn-icons-cell-horizontal">
+        <Icon src={LocationOn} />
+        <p className="h5 mt-1 ml-1">{countryMessages[country]}</p>
+      </div>
+    );
+  }
+}
+
+PluginCountry.propTypes = {
+  country: PropTypes.string,
+  countryMessages: PropTypes.objectOf(PropTypes.string).isRequired,
+};
+
+PluginCountry.defaultProps = {
+  country: null,
+};
+
+export default connect(
+  countrySelector,
+  {},
+)(injectIntl(PluginCountry));

src/profile/forms/SocialLinks.test.jsx

@@ -1,7 +1,8 @@
-import { render, fireEvent, screen } from '@testing-library/react';
+import { mount } from 'enzyme';
 import PropTypes from 'prop-types';
 import React, { useMemo } from 'react';
 import { Provider } from 'react-redux';
+import renderer from 'react-test-renderer';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 import { configure as configureI18n, IntlProvider } from '@edx/frontend-platform/i18n';
@@ -102,7 +103,7 @@ describe('<SocialLinks />', () => {
   ['certificates', 'bio', 'goals', 'socialLinks'].forEach(editMode => (
     it(`calls social links with edit mode ${editMode}`, () => {
       const component = <SocialLinksWrapper {...defaultProps} formId={editMode} />;
-      const { container: tree } = render(component);
+      const tree = renderer.create(component).toJSON();
       expect(tree).toMatchSnapshot();
     })
   ));
@@ -111,45 +112,47 @@ describe('<SocialLinks />', () => {
     const changeHandler = jest.fn();
     const submitHandler = jest.fn();
     const closeHandler = jest.fn();
-    const { container } = render(
+    const component = (
       <SocialLinksWrapper
         {...defaultProps}
         formId="bio"
         changeHandler={changeHandler}
         submitHandler={submitHandler}
         closeHandler={closeHandler}
-      />,
+      />
     );
-
+    const wrapper = mount(component);
+    const socialLink = wrapper.find(SocialLinks);
     const { platform } = defaultProps.socialLinks[0];
-    const inputField = container.querySelector(`#social-${platform}`);
+    const inputField = socialLink.find(`#social-${platform}`);
-    fireEvent.change(inputField, { target: { value: 'test', name: platform } });
+    inputField.simulate('change', { target: { value: 'test', name: platform } });
     expect(changeHandler).toHaveBeenCalledTimes(1);
 
-    const selectElement = container.querySelector('#visibilitySocialLinks');
+    expect(socialLink.find('#visibilitySocialLinks select').props().value).toBe('private');
-    expect(selectElement.value).toBe('private');
+    const event = { target: { value: 'all_users', name: 'visibilitySocialLinks' } };
-    fireEvent.change(selectElement, { target: { value: 'all_users', name: 'visibilitySocialLinks' } });
+    socialLink.find('#visibilitySocialLinks select').simulate('change', event);
     expect(changeHandler).toHaveBeenCalledTimes(2);
 
-    fireEvent.submit(container.querySelector('[aria-labelledby="editing-form"]'));
+    socialLink.find('[aria-labelledby="editing-form"]').simulate('submit');
     expect(submitHandler).toHaveBeenCalledTimes(1);
 
-    fireEvent.click(screen.getByRole('button', { name: 'Cancel' }));
+    socialLink.find('[aria-labelledby="editing-form"]').find('Button .btn-link').simulate('click');
     expect(closeHandler).toHaveBeenCalledTimes(1);
   });
 
   it('calls social links with static', () => {
     const openHandler = jest.fn();
-    render(
+    const component = (
       <SocialLinksWrapper
         {...defaultProps}
         formId="goals"
         openHandler={openHandler}
-      />,
+      />
     );
-    const addFacebookButton = screen.getByRole('button', { name: 'Add Facebook' });
+    const wrapper = mount(component);
-    fireEvent.click(addFacebookButton);
+    const socialLink = wrapper.find(SocialLinks);
 
+    socialLink.find('EmptyContent button').first().simulate('click');
     expect(openHandler).toHaveBeenCalledTimes(1);
   });
 
@@ -157,9 +160,10 @@ describe('<SocialLinks />', () => {
     const newStore = JSON.parse(JSON.stringify(savingEditedBio));
     newStore.profilePage.errors.bio = { userMessage: 'error' };
 
-    const { container } = render(<SocialLinksWrapperWithStore store={newStore} />);
+    const component = <SocialLinksWrapperWithStore store={newStore} />;
+    const wrapper = mount(component);
+    const socialLink = wrapper.find(SocialLinks);
 
-    const alertDanger = container.querySelector('.alert-danger');
+    expect(socialLink.find('.alert-danger').exists()).toBe(true);
-    expect(alertDanger).toBeInTheDocument();
   });
 });

src/profile/forms/__snapshots__/SocialLinks.test.jsx.snap

@@ -1,12 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<SocialLinks /> calls social links with edit mode bio 1`] = `
-<div>
+<div
+  className="pgn-transition-replace-group position-relative mb-5"
+  style={
+    Object {
+      "height": null,
+    }
+  }
+>
   <div
-    class="pgn-transition-replace-group position-relative mb-5"
+    style={
-  >
+      Object {
-    <div
+        "padding": ".1px 0",
-      style="padding: .1px 0px;"
+      }
+    }
   >
     <div
       aria-labelledby="social-links-label"
@@ -14,12 +22,13 @@ exports[`<SocialLinks /> calls social links with edit mode bio 1`] = `
     >
       <form
         aria-labelledby="editing-form"
+        onSubmit={[Function]}
       >
         <div
-            class="editable-item-header mb-2"
+          className="editable-item-header mb-2"
         >
           <h2
-              class="edit-section-header"
+            className="edit-section-header"
             id="social-links-label"
           >
             Social Links
@@ -29,83 +38,93 @@ exports[`<SocialLinks /> calls social links with edit mode bio 1`] = `
           id="social-error-feedback"
         />
         <ul
-            class="list-unstyled"
+          className="list-unstyled"
         >
           <li
-              class="form-group"
+            className="form-group"
           >
             <label
-                for="social-facebook"
+              htmlFor="social-facebook"
             >
               Facebook
             </label>
             <input
               aria-describedby="social-error-feedback"
-                class="form-control"
+              className="form-control"
               id="social-facebook"
               name="facebook"
+              onChange={[Function]}
               type="text"
               value="https://www.facebook.com/aloha"
             />
           </li>
           <li
-              class="form-group"
+            className="form-group"
           >
             <label
-                for="social-twitter"
+              htmlFor="social-twitter"
             >
               Twitter
             </label>
             <input
               aria-describedby="social-error-feedback"
-                class="form-control"
+              className="form-control"
               id="social-twitter"
               name="twitter"
+              onChange={[Function]}
               type="text"
               value="https://www.twitter.com/ALOHA"
             />
           </li>
         </ul>
         <div
-            class="d-flex flex-row-reverse flex-wrap justify-content-end align-items-center"
+          className="d-flex flex-row-reverse flex-wrap justify-content-end align-items-center"
         >
           <div
-              class="form-group d-flex flex-wrap"
+            className="form-group d-flex flex-wrap"
           >
             <label
-                class="col-form-label"
+              className="col-form-label"
-                for="visibilitySocialLinks"
+              htmlFor="visibilitySocialLinks"
             >
               Who can see this:
             </label>
             <span
-                class="d-flex align-items-center"
+              className="d-flex align-items-center"
             >
               <span
-                  class="d-inline-block ml-1 mr-2"
+                className="d-inline-block ml-1 mr-2"
-                  style="width: 1.5rem;"
+                style={
+                  Object {
+                    "width": "1.5rem",
+                  }
+                }
               >
                 <svg
                   aria-hidden="true"
-                    class="svg-inline--fa fa-eye-slash "
+                  className="svg-inline--fa fa-eye-slash fa-w-20 "
                   data-icon="eye-slash"
                   data-prefix="far"
                   focusable="false"
                   role="img"
+                  style={Object {}}
                   viewBox="0 0 640 512"
                   xmlns="http://www.w3.org/2000/svg"
                 >
                   <path
-                      d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zm151 118.3C226 97.7 269.5 80 320 80c65.2 0 118.8 29.6 159.9 67.7C518.4 183.5 545 226 558.6 256c-12.6 28-36.6 66.8-70.9 100.9l-53.8-42.2c9.1-17.6 14.2-37.5 14.2-58.7c0-70.7-57.3-128-128-128c-32.2 0-61.7 11.9-84.2 31.5l-46.1-36.1zM394.9 284.2l-81.5-63.9c4.2-8.5 6.6-18.2 6.6-28.3c0-5.5-.7-10.9-2-16c.7 0 1.3 0 2 0c44.2 0 80 35.8 80 80c0 9.9-1.8 19.4-5.1 28.2zm51.3 163.3l-41.9-33C378.8 425.4 350.7 432 320 432c-65.2 0-118.8-29.6-159.9-67.7C121.6 328.5 95 286 81.4 256c8.3-18.4 21.5-41.5 39.4-64.8L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5zm-88-69.3L302 334c-23.5-5.4-43.1-21.2-53.7-42.3l-56.1-44.2c-.2 2.8-.3 5.6-.3 8.5c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8z"
+                    d="M634 471L36 3.51A16 16 0 0 0 13.51 6l-10 12.49A16 16 0 0 0 6 41l598 467.49a16 16 0 0 0 22.49-2.49l10-12.49A16 16 0 0 0 634 471zM296.79 146.47l134.79 105.38C429.36 191.91 380.48 144 320 144a112.26 112.26 0 0 0-23.21 2.47zm46.42 219.07L208.42 260.16C210.65 320.09 259.53 368 320 368a113 113 0 0 0 23.21-2.46zM320 112c98.65 0 189.09 55 237.93 144a285.53 285.53 0 0 1-44 60.2l37.74 29.5a333.7 333.7 0 0 0 52.9-75.11 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64c-36.7 0-71.71 7-104.63 18.81l46.41 36.29c18.94-4.3 38.34-7.1 58.22-7.1zm0 288c-98.65 0-189.08-55-237.93-144a285.47 285.47 0 0 1 44.05-60.19l-37.74-29.5a333.6 333.6 0 0 0-52.89 75.1 32.35 32.35 0 0 0 0 29.19C89.72 376.41 197.08 448 320 448c36.7 0 71.71-7.05 104.63-18.81l-46.41-36.28C359.28 397.2 339.89 400 320 400z"
                     fill="currentColor"
+                    style={Object {}}
                   />
                 </svg>
               </span>
               <select
-                  class="d-inline-block form-control"
+                className="d-inline-block w-auto form-control"
                 id="visibilitySocialLinks"
                 name="visibilitySocialLinks"
+                onChange={[Function]}
                 type="select"
+                value="private"
               >
                 <option
                   value="private"
@@ -121,31 +140,33 @@ exports[`<SocialLinks /> calls social links with edit mode bio 1`] = `
             </span>
           </div>
           <div
-              class="form-group flex-shrink-0 flex-grow-1"
+            className="form-group flex-shrink-0 flex-grow-1"
           >
             <button
-                aria-disabled="false"
+              aria-disabled={false}
               aria-live="assertive"
-                class="pgn__stateful-btn pgn__stateful-btn-state-pending btn btn-primary"
+              className="pgn__stateful-btn pgn__stateful-btn-state-pending btn btn-primary"
+              disabled={false}
+              onClick={[Function]}
               type="submit"
             >
               <span
-                  class="d-flex align-items-center justify-content-center"
+                className="d-flex align-items-center justify-content-center"
               >
                 <span
-                    class="pgn__stateful-btn-icon"
+                  className="pgn__stateful-btn-icon"
                 >
                   <span
-                      class="pgn__icon icon-spin"
+                    className="pgn__icon icon-spin"
                   >
                     <svg
-                        aria-hidden="true"
+                      aria-hidden={true}
                       fill="none"
-                        focusable="false"
+                      focusable={false}
-                        height="24"
+                      height={24}
                       role="img"
                       viewBox="0 0 24 24"
-                        width="24"
+                      width={24}
                       xmlns="http://www.w3.org/2000/svg"
                     >
                       <path
@@ -161,7 +182,9 @@ exports[`<SocialLinks /> calls social links with edit mode bio 1`] = `
               </span>
             </button>
             <button
-                class="btn btn-link"
+              className="btn btn-link"
+              disabled={false}
+              onClick={[Function]}
               type="button"
             >
               Cancel
@@ -171,67 +194,85 @@ exports[`<SocialLinks /> calls social links with edit mode bio 1`] = `
       </form>
     </div>
   </div>
-  </div>
 </div>
 `;
 
 exports[`<SocialLinks /> calls social links with edit mode certificates 1`] = `
-<div>
+<div
+  className="pgn-transition-replace-group position-relative mb-5"
+  style={
+    Object {
+      "height": null,
+    }
+  }
+>
   <div
-    class="pgn-transition-replace-group position-relative mb-5"
+    style={
+      Object {
+        "padding": ".1px 0",
+      }
+    }
   >
     <div
-      style="padding: .1px 0px;"
+      className="editable-item-header mb-2"
-    >
-      <div
-        class="editable-item-header mb-2"
     >
       <h2
-          class="edit-section-header"
+        className="edit-section-header"
+        id={null}
       >
         Social Links
         <button
-            class="float-right px-0 btn btn-link btn-sm"
+          className="float-right px-0 btn btn-link btn-sm"
-            style="margin-top: -.35rem;"
+          disabled={false}
+          onClick={[Function]}
+          style={
+            Object {
+              "marginTop": "-.35rem",
+            }
+          }
           type="button"
         >
           <svg
             aria-hidden="true"
-              class="svg-inline--fa fa-pencil mr-1"
+            className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-              data-icon="pencil"
+            data-icon="pencil-alt"
             data-prefix="fas"
             focusable="false"
             role="img"
+            style={Object {}}
             viewBox="0 0 512 512"
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-                d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"
+              d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
               fill="currentColor"
+              style={Object {}}
             />
           </svg>
           Edit
         </button>
       </h2>
       <p
-          class="mb-0"
+        className="mb-0"
       >
         <span
-            class="ml-auto small text-muted"
+          className="ml-auto small text-muted"
         >
           <svg
             aria-hidden="true"
-              class="svg-inline--fa fa-eye-slash "
+            className="svg-inline--fa fa-eye-slash fa-w-20 "
             data-icon="eye-slash"
             data-prefix="far"
             focusable="false"
             role="img"
+            style={Object {}}
             viewBox="0 0 640 512"
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-                d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zm151 118.3C226 97.7 269.5 80 320 80c65.2 0 118.8 29.6 159.9 67.7C518.4 183.5 545 226 558.6 256c-12.6 28-36.6 66.8-70.9 100.9l-53.8-42.2c9.1-17.6 14.2-37.5 14.2-58.7c0-70.7-57.3-128-128-128c-32.2 0-61.7 11.9-84.2 31.5l-46.1-36.1zM394.9 284.2l-81.5-63.9c4.2-8.5 6.6-18.2 6.6-28.3c0-5.5-.7-10.9-2-16c.7 0 1.3 0 2 0c44.2 0 80 35.8 80 80c0 9.9-1.8 19.4-5.1 28.2zm51.3 163.3l-41.9-33C378.8 425.4 350.7 432 320 432c-65.2 0-118.8-29.6-159.9-67.7C121.6 328.5 95 286 81.4 256c8.3-18.4 21.5-41.5 39.4-64.8L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5zm-88-69.3L302 334c-23.5-5.4-43.1-21.2-53.7-42.3l-56.1-44.2c-.2 2.8-.3 5.6-.3 8.5c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8z"
+              d="M634 471L36 3.51A16 16 0 0 0 13.51 6l-10 12.49A16 16 0 0 0 6 41l598 467.49a16 16 0 0 0 22.49-2.49l10-12.49A16 16 0 0 0 634 471zM296.79 146.47l134.79 105.38C429.36 191.91 380.48 144 320 144a112.26 112.26 0 0 0-23.21 2.47zm46.42 219.07L208.42 260.16C210.65 320.09 259.53 368 320 368a113 113 0 0 0 23.21-2.46zM320 112c98.65 0 189.09 55 237.93 144a285.53 285.53 0 0 1-44 60.2l37.74 29.5a333.7 333.7 0 0 0 52.9-75.11 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64c-36.7 0-71.71 7-104.63 18.81l46.41 36.29c18.94-4.3 38.34-7.1 58.22-7.1zm0 288c-98.65 0-189.08-55-237.93-144a285.47 285.47 0 0 1 44.05-60.19l-37.74-29.5a333.6 333.6 0 0 0-52.89 75.1 32.35 32.35 0 0 0 0 29.19C89.72 376.41 197.08 448 320 448c36.7 0 71.71-7.05 104.63-18.81l-46.41-36.28C359.28 397.2 339.89 400 320 400z"
               fill="currentColor"
+              style={Object {}}
             />
           </svg>
            
@@ -240,53 +281,57 @@ exports[`<SocialLinks /> calls social links with edit mode certificates 1`] = `
       </p>
     </div>
     <ul
-        class="list-unstyled"
+      className="list-unstyled"
     >
       <li
-          class="form-group"
+        className="form-group"
       >
         <a
-            class="font-weight-bold"
+          className="font-weight-bold"
           href="https://www.facebook.com/aloha"
         >
           <svg
             aria-hidden="true"
-              class="svg-inline--fa fa-facebook mr-2"
+            className="svg-inline--fa fa-facebook fa-w-16 mr-2"
             data-icon="facebook"
             data-prefix="fab"
             focusable="false"
             role="img"
+            style={Object {}}
             viewBox="0 0 512 512"
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-                d="M512 256C512 114.6 397.4 0 256 0S0 114.6 0 256C0 376 82.7 476.8 194.2 504.5V334.2H141.4V256h52.8V222.3c0-87.1 39.4-127.5 125-127.5c16.2 0 44.2 3.2 55.7 6.4V172c-6-.6-16.5-1-29.6-1c-42 0-58.2 15.9-58.2 57.2V256h83.6l-14.4 78.2H287V510.1C413.8 494.8 512 386.9 512 256h0z"
+              d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"
               fill="currentColor"
+              style={Object {}}
             />
           </svg>
           Facebook
         </a>
       </li>
       <li
-          class="form-group"
+        className="form-group"
       >
         <a
-            class="font-weight-bold"
+          className="font-weight-bold"
           href="https://www.twitter.com/ALOHA"
         >
           <svg
             aria-hidden="true"
-              class="svg-inline--fa fa-twitter mr-2"
+            className="svg-inline--fa fa-twitter fa-w-16 mr-2"
             data-icon="twitter"
             data-prefix="fab"
             focusable="false"
             role="img"
+            style={Object {}}
             viewBox="0 0 512 512"
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
               d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"
               fill="currentColor"
+              style={Object {}}
             />
           </svg>
           Twitter
@@ -294,52 +339,64 @@ exports[`<SocialLinks /> calls social links with edit mode certificates 1`] = `
       </li>
     </ul>
   </div>
-  </div>
 </div>
 `;
 
 exports[`<SocialLinks /> calls social links with edit mode goals 1`] = `
-<div>
+<div
+  className="pgn-transition-replace-group position-relative mb-5"
+  style={
+    Object {
+      "height": null,
+    }
+  }
+>
   <div
-    class="pgn-transition-replace-group position-relative mb-5"
+    style={
+      Object {
+        "padding": ".1px 0",
+      }
+    }
   >
     <div
-      style="padding: .1px 0px;"
+      className="editable-item-header mb-2"
-    >
-      <div
-        class="editable-item-header mb-2"
     >
       <h2
-          class="edit-section-header"
+        className="edit-section-header"
+        id={null}
       >
         Social Links
       </h2>
     </div>
     <ul
-        class="list-unstyled"
+      className="list-unstyled"
     >
       <li
-          class="mb-4"
+        className="mb-4"
       >
         <div>
           <button
-              class="pl-0 text-left btn btn-link"
+            className="pl-0 text-left btn btn-link"
-              tabindex="0"
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            tabIndex={0}
             type="button"
           >
             <svg
               aria-hidden="true"
-                class="svg-inline--fa fa-plus fa-xs mr-2"
+              className="svg-inline--fa fa-plus fa-w-14 fa-xs mr-2"
               data-icon="plus"
               data-prefix="fas"
               focusable="false"
               role="img"
+              style={Object {}}
               viewBox="0 0 448 512"
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                  d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"
+                d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
                 fill="currentColor"
+                style={Object {}}
               />
             </svg>
             Add Facebook
@@ -347,27 +404,31 @@ exports[`<SocialLinks /> calls social links with edit mode goals 1`] = `
         </div>
       </li>
       <li
-          class="mb-4"
+        className="mb-4"
       >
         <div>
           <button
-              class="pl-0 text-left btn btn-link"
+            className="pl-0 text-left btn btn-link"
-              tabindex="0"
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            tabIndex={0}
             type="button"
           >
             <svg
               aria-hidden="true"
-                class="svg-inline--fa fa-plus fa-xs mr-2"
+              className="svg-inline--fa fa-plus fa-w-14 fa-xs mr-2"
               data-icon="plus"
               data-prefix="fas"
               focusable="false"
               role="img"
+              style={Object {}}
               viewBox="0 0 448 512"
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                  d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"
+                d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
                 fill="currentColor"
+                style={Object {}}
               />
             </svg>
             Add Twitter
@@ -376,67 +437,85 @@ exports[`<SocialLinks /> calls social links with edit mode goals 1`] = `
       </li>
     </ul>
   </div>
-  </div>
 </div>
 `;
 
 exports[`<SocialLinks /> calls social links with edit mode socialLinks 1`] = `
-<div>
+<div
+  className="pgn-transition-replace-group position-relative mb-5"
+  style={
+    Object {
+      "height": null,
+    }
+  }
+>
   <div
-    class="pgn-transition-replace-group position-relative mb-5"
+    style={
+      Object {
+        "padding": ".1px 0",
+      }
+    }
   >
     <div
-      style="padding: .1px 0px;"
+      className="editable-item-header mb-2"
-    >
-      <div
-        class="editable-item-header mb-2"
     >
       <h2
-          class="edit-section-header"
+        className="edit-section-header"
+        id={null}
       >
         Social Links
         <button
-            class="float-right px-0 btn btn-link btn-sm"
+          className="float-right px-0 btn btn-link btn-sm"
-            style="margin-top: -.35rem;"
+          disabled={false}
+          onClick={[Function]}
+          style={
+            Object {
+              "marginTop": "-.35rem",
+            }
+          }
           type="button"
         >
           <svg
             aria-hidden="true"
-              class="svg-inline--fa fa-pencil mr-1"
+            className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-              data-icon="pencil"
+            data-icon="pencil-alt"
             data-prefix="fas"
             focusable="false"
             role="img"
+            style={Object {}}
             viewBox="0 0 512 512"
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-                d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"
+              d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
               fill="currentColor"
+              style={Object {}}
             />
           </svg>
           Edit
         </button>
       </h2>
       <p
-          class="mb-0"
+        className="mb-0"
       >
         <span
-            class="ml-auto small text-muted"
+          className="ml-auto small text-muted"
         >
           <svg
             aria-hidden="true"
-              class="svg-inline--fa fa-eye-slash "
+            className="svg-inline--fa fa-eye-slash fa-w-20 "
             data-icon="eye-slash"
             data-prefix="far"
             focusable="false"
             role="img"
+            style={Object {}}
             viewBox="0 0 640 512"
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-                d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zm151 118.3C226 97.7 269.5 80 320 80c65.2 0 118.8 29.6 159.9 67.7C518.4 183.5 545 226 558.6 256c-12.6 28-36.6 66.8-70.9 100.9l-53.8-42.2c9.1-17.6 14.2-37.5 14.2-58.7c0-70.7-57.3-128-128-128c-32.2 0-61.7 11.9-84.2 31.5l-46.1-36.1zM394.9 284.2l-81.5-63.9c4.2-8.5 6.6-18.2 6.6-28.3c0-5.5-.7-10.9-2-16c.7 0 1.3 0 2 0c44.2 0 80 35.8 80 80c0 9.9-1.8 19.4-5.1 28.2zm51.3 163.3l-41.9-33C378.8 425.4 350.7 432 320 432c-65.2 0-118.8-29.6-159.9-67.7C121.6 328.5 95 286 81.4 256c8.3-18.4 21.5-41.5 39.4-64.8L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5zm-88-69.3L302 334c-23.5-5.4-43.1-21.2-53.7-42.3l-56.1-44.2c-.2 2.8-.3 5.6-.3 8.5c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8z"
+              d="M634 471L36 3.51A16 16 0 0 0 13.51 6l-10 12.49A16 16 0 0 0 6 41l598 467.49a16 16 0 0 0 22.49-2.49l10-12.49A16 16 0 0 0 634 471zM296.79 146.47l134.79 105.38C429.36 191.91 380.48 144 320 144a112.26 112.26 0 0 0-23.21 2.47zm46.42 219.07L208.42 260.16C210.65 320.09 259.53 368 320 368a113 113 0 0 0 23.21-2.46zM320 112c98.65 0 189.09 55 237.93 144a285.53 285.53 0 0 1-44 60.2l37.74 29.5a333.7 333.7 0 0 0 52.9-75.11 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64c-36.7 0-71.71 7-104.63 18.81l46.41 36.29c18.94-4.3 38.34-7.1 58.22-7.1zm0 288c-98.65 0-189.08-55-237.93-144a285.47 285.47 0 0 1 44.05-60.19l-37.74-29.5a333.6 333.6 0 0 0-52.89 75.1 32.35 32.35 0 0 0 0 29.19C89.72 376.41 197.08 448 320 448c36.7 0 71.71-7.05 104.63-18.81l-46.41-36.28C359.28 397.2 339.89 400 320 400z"
               fill="currentColor"
+              style={Object {}}
             />
           </svg>
            
@@ -445,53 +524,57 @@ exports[`<SocialLinks /> calls social links with edit mode socialLinks 1`] = `
       </p>
     </div>
     <ul
-        class="list-unstyled"
+      className="list-unstyled"
     >
       <li
-          class="form-group"
+        className="form-group"
       >
         <a
-            class="font-weight-bold"
+          className="font-weight-bold"
           href="https://www.facebook.com/aloha"
         >
           <svg
             aria-hidden="true"
-              class="svg-inline--fa fa-facebook mr-2"
+            className="svg-inline--fa fa-facebook fa-w-16 mr-2"
             data-icon="facebook"
             data-prefix="fab"
             focusable="false"
             role="img"
+            style={Object {}}
             viewBox="0 0 512 512"
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-                d="M512 256C512 114.6 397.4 0 256 0S0 114.6 0 256C0 376 82.7 476.8 194.2 504.5V334.2H141.4V256h52.8V222.3c0-87.1 39.4-127.5 125-127.5c16.2 0 44.2 3.2 55.7 6.4V172c-6-.6-16.5-1-29.6-1c-42 0-58.2 15.9-58.2 57.2V256h83.6l-14.4 78.2H287V510.1C413.8 494.8 512 386.9 512 256h0z"
+              d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"
               fill="currentColor"
+              style={Object {}}
             />
           </svg>
           Facebook
         </a>
       </li>
       <li
-          class="form-group"
+        className="form-group"
       >
         <a
-            class="font-weight-bold"
+          className="font-weight-bold"
           href="https://www.twitter.com/ALOHA"
         >
           <svg
             aria-hidden="true"
-              class="svg-inline--fa fa-twitter mr-2"
+            className="svg-inline--fa fa-twitter fa-w-16 mr-2"
             data-icon="twitter"
             data-prefix="fab"
             focusable="false"
             role="img"
+            style={Object {}}
             viewBox="0 0 512 512"
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
               d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"
               fill="currentColor"
+              style={Object {}}
             />
           </svg>
           Twitter
@@ -499,6 +582,5 @@ exports[`<SocialLinks /> calls social links with edit mode socialLinks 1`] = `
       </li>
     </ul>
   </div>
-  </div>
 </div>
 `;

src/profile/forms/elements/Visibility.jsx

@@ -39,7 +39,7 @@ const VisibilitySelect = ({ intl, className, ...props }) => {
       <span className="d-inline-block ml-1 mr-2" style={{ width: '1.5rem' }}>
         <FontAwesomeIcon icon={icon} />
       </span>
-      <select className="d-inline-block form-control" {...props}>
+      <select className="d-inline-block w-auto form-control" {...props}>
         <option key="private" value="private">
           {intl.formatMessage(messages['profile.visibility.who.just.me'])}
         </option>

src/profile/index.js

@@ -3,3 +3,4 @@ export { default as saga } from './data/sagas';
 export { default as ProfilePage } from './ProfilePage';
 export { default as NotFoundPage } from './NotFoundPage';
 export { default as messages } from './ProfilePage.messages';
+export { default as ProfilePluginPage } from './ProfilePluginPage';

src/profile/index.scss

@@ -162,4 +162,28 @@
       position: relative;
     }
   }
+
+  .pgn-icons-cell-vertical {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    margin: 1px;
+  }
+  .pgn-icons-cell-horizontal {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    margin: 1px;
+  }
+
+  .profile-plugin-avatar {
+    @include media-breakpoint-up(xs) {
+      max-width: 12rem;
+      margin-right: 0;
+      margin-top: -4rem;
+      margin-bottom: 1rem;
+    }
+  }
+
 }

src/routes/AppRoutes.jsx

@@ -4,11 +4,12 @@ import {
   PageWrap,
 } from '@edx/frontend-platform/react';
 import { Routes, Route } from 'react-router-dom';
-import { ProfilePage, NotFoundPage } from '../profile';
+import { ProfilePage, NotFoundPage, ProfilePluginPage } from '../profile';
 
 const AppRoutes = () => (
   <Routes>
     <Route path="/u/:username" element={<AuthenticatedPageRoute><ProfilePage /></AuthenticatedPageRoute>} />
+    <Route path="/u/:username/plugin" element={<AuthenticatedPageRoute><ProfilePluginPage /></AuthenticatedPageRoute>} />
     <Route path="/notfound" element={<PageWrap><NotFoundPage /></PageWrap>} />
     <Route path="*" element={<PageWrap><NotFoundPage /></PageWrap>} />
   </Routes>

src/routes/routes.test.jsx

@@ -15,6 +15,7 @@ jest.mock('@edx/frontend-platform/auth', () => ({
 jest.mock('../profile', () => ({
   ProfilePage: () => (<div>Profile page</div>),
   NotFoundPage: () => (<div>Not found page</div>),
+  ProfilePluginPage: () => (<div>Plugin page</div>),
 }));
 
 const RoutesWithProvider = (context, path) => (
@@ -54,6 +55,22 @@ describe('routes', () => {
     expect(screen.getByText('Profile page')).toBeTruthy();
   });
 
+  test('Profile Plugin page should be accessible for authenticated users', () => {
+    render(
+      RoutesWithProvider(
+        {
+          authenticatedUser: {
+            username: 'edx',
+            email: 'edx@example.com',
+          },
+          config: getConfig(),
+        },
+        '/u/edx/plugin',
+      ),
+    );
+    expect(screen.getByText('Plugin page')).toBeTruthy();
+  });
+
   test('should show NotFound page for a bad route', () => {
     render(
       RoutesWithProvider(unauthenticatedUser, '/nonMatchingRoute'),

src/setupTest.js

@@ -1,4 +1,7 @@
-/* eslint-disable import/no-extraneous-dependencies */
 import 'core-js/stable';
 import 'regenerator-runtime/runtime';
-import '@testing-library/jest-dom';
+
+import Enzyme from 'enzyme';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+
+Enzyme.configure({ adapter: new Adapter() });