fix(deps): update dependency regenerator-runtime to v0.13.11

Allows frontend-app-profile to be configured at
runtime using the LMS's new MFE Configuration API.

Part of https://github.com/openedx/frontend-wg/issues/103

.env

@@ -10,8 +10,6 @@ LOGIN_URL=''
 LOGOUT_URL=''
 MARKETING_SITE_BASE_URL=''
 ORDER_HISTORY_URL=''
-ACCOUNT_SETTINGS_URL=''
-ACCOUNT_PROFILE_URL=''
 REFRESH_ACCESS_TOKEN_ENDPOINT=''
 SEGMENT_KEY=''
 SITE_NAME=''
@@ -24,8 +22,8 @@ LOGO_URL=''
 LOGO_TRADEMARK_URL=''
 LOGO_WHITE_URL=''
 FAVICON_URL=''
+ENABLE_LEARNER_RECORD_MFE=''
+LEARNER_RECORD_MFE_BASE_URL=''
 COLLECT_YEAR_OF_BIRTH=true
 APP_ID=''
 MFE_CONFIG_API_URL=''
-SEARCH_CATALOG_URL=''
-ENABLE_SKILLS_BUILDER_PROFILE=''

.env.development

@@ -3,9 +3,7 @@ PORT=1995
 ACCESS_TOKEN_COOKIE_NAME='edx-jwt-cookie-header-payload'
 BASE_URL='localhost:1995'
 CREDENTIALS_BASE_URL='http://localhost:18150'
-ACCOUNT_SETTINGS_URL=http://localhost:1997
 CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
-ACCOUNT_PROFILE_URL=http://localhost:1995
 ECOMMERCE_BASE_URL='http://localhost:18130'
 LANGUAGE_PREFERENCE_COOKIE_NAME='openedx-language-preference'
 LMS_BASE_URL='http://localhost:18000'
@@ -25,8 +23,8 @@ LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
 LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
 LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
 FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
+ENABLE_LEARNER_RECORD_MFE=''
+LEARNER_RECORD_MFE_BASE_URL='http://localhost:1990'
 COLLECT_YEAR_OF_BIRTH=true
 APP_ID=''
 MFE_CONFIG_API_URL=''
-SEARCH_CATALOG_URL='http://localhost:18000/courses'
-ENABLE_SKILLS_BUILDER_PROFILE=''

.env.test

@@ -5,8 +5,6 @@ CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
 ECOMMERCE_BASE_URL='http://localhost:18130'
 LANGUAGE_PREFERENCE_COOKIE_NAME='openedx-language-preference'
 LMS_BASE_URL='http://localhost:18000'
-ACCOUNT_SETTINGS_URL='http://localhost:1997'
-ACCOUNT_PROFILE_URL='http://localhost:1995'
 LOGIN_URL='http://localhost:18000/login'
 LOGOUT_URL='http://localhost:18000/logout'
 MARKETING_SITE_BASE_URL='http://localhost:18000'
@@ -20,7 +18,6 @@ LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
 LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
 FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
 ENABLE_LEARNER_RECORD_MFE=''
-ENABLE_SKILLS_BUILDER_PROFILE=''
 LEARNER_RECORD_MFE_BASE_URL='http://localhost:1990'
 COLLECT_YEAR_OF_BIRTH=true
 APP_ID=''

.eslintrc.js

@@ -1,4 +1,4 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
-const { createConfig } = require('@openedx/frontend-build');
+const { createConfig } = require('@edx/frontend-build');
 
 module.exports = createConfig('eslint');

.github/CODEOWNERS

@@ -1 +0,0 @@
-*   @openedx/2U-infinity

.github/dependabot.yml

@@ -1,7 +0,0 @@
-version: 2
-updates:
-    # Adding new check for github-actions
-  - package-ecosystem: "github-actions"
-    directory: "/"
-    schedule:
-        interval: "weekly"

.github/pull_request_template.md

@@ -1,24 +0,0 @@
-### Description
-
-Include a description of your changes here, along with a link to any relevant Jira tickets and/or GitHub issues.
-
-#### How Has This Been Tested?
-
-Please describe in detail how you tested your changes.
-
-#### Screenshots/sandbox (optional):
-Include a link to the sandbox for design changes or screenshot for before and after. **Remove this section if it's not applicable.**
-
-|Before|After|
-|-------|-----|
-|      |      |
-
-#### Merge Checklist
-
-* [ ] If your update includes visual changes, have they been reviewed by a designer? Send them a link to the Sandbox, if applicable.
-* [ ] Is there adequate test coverage for your changes?
-
-#### Post-merge Checklist
-
-* [ ] Deploy the changes to prod after verifying on stage or ask **@openedx/2u-infinity** to do it. 
-* [ ] 🎉 🙌 Celebrate! Thanks for your contribution.

.github/workflows/add-remove-label-on-comment.yml

@@ -1,20 +0,0 @@
-# This workflow runs when a comment is made on the ticket
-# If the comment starts with "label: " it tries to apply
-# the label indicated in rest of comment.
-# If the comment starts with "remove label: ", it tries
-# to remove the indicated label.
-# Note: Labels are allowed to have spaces and this script does
-# not parse spaces (as often a space is legitimate), so the command
-# "label: really long lots of words label" will apply the
-# label "really long lots of words label"
-
-name: Allows for the adding and removing of labels via comment
-
-on:
-  issue_comment:
-    types: [created]
-
-jobs:
-  add_remove_labels:
-    uses: openedx/.github/.github/workflows/add-remove-label-on-comment.yml@master
-

.github/workflows/ci.yml

@@ -11,19 +11,20 @@ jobs:
       matrix:
         npm-test:
         - i18n_extract
+        - is-es5
         - lint
         - test
+        node: [16]
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v3
-    - uses: actions/setup-node@v4
+    - uses: actions/setup-node@v3
       with:
-        node-version-file: '.nvmrc'
+        node-version: ${{ matrix.node }}
+    - run: npm install -g npm@8.x.x
     - run: make requirements
     - run: make test NPM_TESTS=build
     - run: make test NPM_TESTS=${{ matrix.npm-test }}
-    - name: Coverage
+    - name: upload coverage
-      if: ${{ matrix.npm-test == 'test' }}
+      uses: codecov/codecov-action@v3
-      uses: codecov/codecov-action@v5
       with:
-        token: ${{ secrets.CODECOV_TOKEN }}
+        fail_ci_if_error: false
-        fail_ci_if_error: true

.github/workflows/lockfileversion-check.yml

@@ -10,4 +10,4 @@ on:
 
 jobs:
   version-check:
-    uses: openedx/.github/.github/workflows/lockfileversion-check-v3.yml@master
+    uses: openedx/.github/.github/workflows/lockfileversion-check.yml@master

.github/workflows/self-assign-issue.yml

@@ -1,12 +0,0 @@
-# This workflow runs when a comment is made on the ticket
-# If the comment starts with "assign me" it assigns the author to the
-# ticket (case insensitive)
-
-name: Assign comment author to ticket if they say "assign me"
-on:
-  issue_comment:
-    types: [created]
-
-jobs:
-  self_assign_by_comment:
-    uses: openedx/.github/.github/workflows/self-assign-issue.yml@master

.github/workflows/update-browserslist-db.yml

@@ -1,12 +0,0 @@
-name: Update Browserslist DB
-on:
-  schedule:
-    - cron:  '0 0 * * 1'
-  workflow_dispatch:
-
-jobs:
-  update-browserslist:
-    uses: openedx/.github/.github/workflows/update-browserslist-db.yml@master
-
-    secrets:
-        requirements_bot_github_token: ${{ secrets.requirements_bot_github_token }}

.gitignore

@@ -17,4 +17,3 @@ temp/babel-plugin-react-intl
 /temp
 /.vscode
 /module.config.js
-src/i18n/messages

.nvmrc

@@ -1 +1 @@
-20
+v16

.tx/config

@@ -0,0 +1,9 @@
+[main]
+host = https://www.transifex.com
+
+[o:open-edx:p:edx-platform:r:frontend-app-profile]
+file_filter = src/i18n/messages/<lang>.json
+source_file = src/i18n/transifex_input.json
+source_lang = en
+type        = KEYVALUEJSON
+

Makefile

@@ -1,11 +1,17 @@
-intl_imports = ./node_modules/.bin/intl-imports.js
+export TRANSIFEX_RESOURCE = frontend-app-profile
+transifex_resource = frontend-app-profile
+transifex_langs = "ar,fr,es_419,zh_CN,pt,it,de,uk,ru,hi,fr_CA"
+
 transifex_utils = ./node_modules/.bin/transifex-utils.js
 i18n = ./src/i18n
 transifex_input = $(i18n)/transifex_input.json
-# This directory must match .babelrc .
+tx_url1 = https://www.transifex.com/api/2/project/edx-platform/resource/$(transifex_resource)/translation/en/strings/
-transifex_temp = ./temp/babel-plugin-formatjs
+tx_url2 = https://www.transifex.com/api/2/project/edx-platform/resource/$(transifex_resource)/source/
 
-NPM_TESTS=build i18n_extract lint test
+# This directory must match .babelrc .
+transifex_temp = ./temp/babel-plugin-react-intl
+
+NPM_TESTS=build i18n_extract lint test is-es5
 
 .PHONY: test
 test: $(addprefix test.npm.,$(NPM_TESTS))  ## validate ci suite
@@ -35,18 +41,20 @@ detect_changed_source_translations:
 	# Checking for changed translations...
 	git diff --exit-code $(i18n)
 
-pull_translations:
+# Pushes translations to Transifex.  You must run make extract_translations first.
-	rm -rf src/i18n/messages
+push_translations:
-	mkdir src/i18n/messages
+	# Pushing strings to Transifex...
-	cd src/i18n/messages \
+	tx push -s
-      && atlas pull $(ATLAS_OPTIONS) \
+	# Fetching hashes from Transifex...
-               translations/frontend-platform/src/i18n/messages:frontend-platform \
+	./node_modules/@edx/reactifex/bash_scripts/get_hashed_strings_v3.sh
-               translations/paragon/src/i18n/messages:paragon \
+	# Writing out comments to file...
-               translations/frontend-component-header/src/i18n/messages:frontend-component-header \
+	$(transifex_utils) $(transifex_temp) --comments --v3-scripts-path
-               translations/frontend-component-footer/src/i18n/messages:frontend-component-footer \
+	# Pushing comments to Transifex...
-               translations/frontend-app-profile/src/i18n/messages:frontend-app-profile
+	./node_modules/@edx/reactifex/bash_scripts/put_comments_v3.sh
 
-	$(intl_imports) frontend-platform paragon frontend-component-header frontend-component-footer frontend-app-profile
+# Pulls translations from Transifex.
+pull_translations:
+	tx pull -f --mode reviewed --languages=$(transifex_langs)
 
 # This target is used by Travis.
 validate-no-uncommitted-package-lock-changes:

README.rst

@@ -1,153 +1,57 @@
-#####################
+|Build Status| |Codecov| |license|
+
 frontend-app-profile
-#####################
+====================
 
-|license-badge| |status-badge| |ci-badge| |codecov-badge|
+This is a micro-frontend application responsible for the display and updating of user profiles. Please tag **@edx/arch-fed** on any PRs or issues.
-
-.. |license-badge| image:: https://img.shields.io/github/license/openedx/frontend-app-profile.svg
-    :target: https://github.com/openedx/frontend-app-profile/blob/main/LICENSE
-    :alt: License
-
-.. |status-badge| image:: https://img.shields.io/badge/Status-Maintained-brightgreen
-
-.. |ci-badge| image:: https://github.com/openedx/frontend-app-profile/actions/workflows/ci.yml/badge.svg
-    :target: https://github.com/openedx/frontend-app-profile/actions/workflows/ci.yml
-    :alt: Continuous Integration
-
-.. |codecov-badge| image:: https://codecov.io/github/openedx/frontend-app-profile/coverage.svg?branch=main
-    :target: https://codecov.io/github/openedx/frontend-app-profile?branch=main
-    :alt: Codecov
-
-********
-Purpose
-********
-
-This is a micro-frontend application responsible for the display and updating of user profiles.
 
 When a user views their own profile, they're given fields to edit their full name, location, primary spoken language, education, social links, and bio.  Each field also has a dropdown to select the visibility of that field - i.e., whether it can be viewed by other learners.
 
 When a user views someone else's profile, they see all those fields that that user set as public.
 
-***************
+----------
-Getting Started
-***************
 
-Installation
+Development
-============
+-----------
 
-Follow these steps to provision, run, and enable an instance of the
+Start Devstack
-Profile MFE for local development via the `devstack`_.
+^^^^^^^^^^^^^^
 
-.. _devstack: https://github.com/openedx/devstack#getting-started
+To use this application `devstack <https://github.com/openedx/devstack>`__ must be running and you must be logged into it.
 
-#. To use this application, `devstack <https://github.com/openedx/devstack>`__ must be running and you must be logged into it.
+-  Start devstack
+-  Log in (http://localhost:18000/login)
 
-   * Start devstack
+Start the development server
-   * Log in (http://localhost:18000/login)
+^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 
-#. To run Profile, install requirements and start the development server by running:
+In this project, install requirements and start the development server by running:
 
-.. code-block::
+.. code:: bash
 
-  1. Clone your new repo:
+   npm install
+   npm start # The server will run on port 1995
 
-    ``git clone https://github.com/openedx/frontend-app-profile.git``
+Once the dev server is up visit http://localhost:1995/u/staff.
 
-  2. Use node v18.x.
+----------
 
-    The current version of the micro-frontend build scripts support node 18.
+Configuration and Deployment
-    Using other major versions of node *may* work, but this is unsupported.  For
+----------------------------
-    convenience, this repository includes an .nvmrc file to help in setting the
-    correct node version via `nvm <https://github.com/nvm-sh/nvm>`_.
-
-  3. Install npm dependencies:
-
-    ``cd frontend-app-profile && npm ci``
-
-  4. Start the dev server:
-
-    ``npm start``
-     The server will run on port 1995
-
-Once the dev server is up, visit http://localhost:1995/u/staff.
-
-Plugins
-=======
-This MFE can be customized using `Frontend Plugin Framework <https://github.com/openedx/frontend-plugin-framework>`_.
-
-The parts of this MFE that can be customized in that manner are documented `here </src/plugin-slots>`_.
-
-Configuration
-=============
 
 This MFE is configured via node environment variables supplied at build time. See the .env file for the list of required environment variables. Example build syntax with a single environment variable:
 
-.. code-block::
+.. code:: bash
 
    NODE_ENV=production ACCESS_TOKEN_COOKIE_NAME='edx-jwt-cookie-header-payload' npm run build
 
-Getting Help
-============
 
-If you're having trouble, we have discussion forums at
+For more information see the document: `Micro-frontend applications in Open
-https://discuss.openedx.org where you can connect with others in the community.
+edX <https://edx.readthedocs.io/projects/edx-developer-docs/en/latest/micro-frontends-in-open-edx.html>`__.
 
-Our real-time conversations are on Slack. You can request a `Slack
+.. |Build Status| image:: https://api.travis-ci.org/edx/frontend-app-profile.svg?branch=master
-invitation`_, then join our `community Slack workspace`_.  Because this is a
+   :target: https://travis-ci.org/edx/frontend-app-profile
-frontend repository, the best place to discuss it would be in the `#wg-frontend
+.. |Codecov| image:: https://img.shields.io/codecov/c/github/edx/frontend-app-profile
-channel`_.
+   :target: https://codecov.io/gh/edx/frontend-app-profile
-
+.. |license| image:: https://img.shields.io/npm/l/@edx/frontend-app-profile.svg
-For anything non-trivial, the best path is to open an issue in this repository
+   :target: @edx/frontend-app-profile
-with as many details about the issue you are facing as you can provide.  Please tag **@openedx/2u-infinity** on any PRs or issues.
-
-https://github.com/openedx/frontend-app-profile/issues
-
-For more information about these options, see the `Getting Help`_ page.
-
-.. _Slack invitation: https://openedx.org/slack
-.. _community Slack workspace: https://openedx.slack.com/
-.. _#wg-frontend channel: https://openedx.slack.com/archives/C04BM6YC7A6
-.. _Getting Help: https://openedx.org/getting-help
-
-License
-=======
-
-The code in this repository is licensed under the AGPLv3 unless otherwise
-noted.
-
-Please see `LICENSE <LICENSE>`_ for details.
-
-Contributing
-============
-
-Contributions are very welcome.  Please read `How To Contribute`_ for details.
-
-.. _How To Contribute: https://openedx.org/r/how-to-contribute
-
-This project is currently accepting all types of contributions, bug fixes,
-security fixes, maintenance work, or new features.  However, please make sure
-to have a discussion about your new feature idea with the maintainers prior to
-beginning development to maximize the chances of your change being accepted.
-You can start a conversation by creating a new issue on this repo summarizing
-your idea.
-
-The Open edX Code of Conduct
-============================
-
-All community members are expected to follow the `Open edX Code of Conduct`_.
-
-.. _Open edX Code of Conduct: https://openedx.org/code-of-conduct/
-
-People
-======
-
-The assigned maintainers for this component and other project details may be
-found in `Backstage`_. Backstage pulls this data from the ``catalog-info.yaml``
-file in this repo.
-
-.. _Backstage: https://backstage.herokuapp.com/catalog/default/component/frontend-app-profile
-
-Reporting Security Issues
-=========================
-
-Please do not report security issues in public.  Email security@openedx.org instead.

catalog-info.yaml

@@ -1,24 +0,0 @@
-# This file records information about this repo. Its use is described in OEP-55:
-# https://open-edx-proposals.readthedocs.io/en/latest/processes/oep-0055-proc-project-maintainers.html
-apiVersion: backstage.io/v1alpha1
-kind: Component
-metadata:
-  name: 'frontend-app-profile'
-  description: 'This is a micro-frontend application responsible for displaying and updating the user profiles.'
-  links:
-    - url: 'https://github.com/openedx/frontend-app-profile/blob/master/README.rst'
-      title: 'Documentation'
-      icon: 'Article'
-  annotations:
-    # (Optional) Annotation keys and values can be whatever you want.
-    # We use it in Open edX repos to have a comma-separated list of GitHub user
-    # names that might be interested in changes to the architecture of this
-    # component.
-    openedx.org/arch-interest-groups: ""
-    # This can be multiple comma-separated projects.
-    openedx.org/add-to-projects: "openedx:23"
-spec:
-  owner: group:2u-infinity
-  type: 'service'
-  lifecycle: 'production'
-# (Optional) An array of different components or resources.

jest.config.js

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

package.json

@@ -10,12 +10,12 @@
   },
   "scripts": {
     "build": "fedx-scripts webpack",
-    "i18n_extract": "fedx-scripts formatjs extract",
+    "i18n_extract": "BABEL_ENV=i18n fedx-scripts babel src --quiet > /dev/null",
+    "is-es5": "es-check es5 ./dist/*.js",
     "lint": "fedx-scripts eslint --ext .js --ext .jsx .",
     "snapshot": "fedx-scripts jest --updateSnapshot",
     "start": "fedx-scripts webpack-dev-server --progress",
-    "test": "TZ=UTC fedx-scripts jest --coverage --passWithNoTests",
+    "test": "TZ=UTC fedx-scripts jest --coverage --passWithNoTests"
-    "stubs": "pact-stub-service ./src/pacts/frontend-app-profile-edx-platform.json --port 18000"
   },
   "bugs": {
     "url": "https://github.com/openedx/frontend-app-profile/issues"
@@ -25,54 +25,54 @@
     "access": "public"
   },
   "browserslist": [
-    "extends @edx/browserslist-config"
+    "last 2 versions",
+    "ie 11"
   ],
   "dependencies": {
-    "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
+    "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
-    "@edx/frontend-component-header": "^5.6.0",
+    "@edx/frontend-component-footer": "11.2.1",
-    "@edx/frontend-platform": "8.1.2",
+    "@edx/frontend-component-header": "3.2.1",
-    "@edx/openedx-atlas": "^0.6.0",
+    "@edx/frontend-platform": "2.6.2",
-    "@fortawesome/fontawesome-svg-core": "6.6.0",
+    "@edx/paragon": "19.25.3",
-    "@fortawesome/free-brands-svg-icons": "6.6.0",
+    "@fortawesome/fontawesome-svg-core": "1.2.36",
-    "@fortawesome/free-regular-svg-icons": "6.6.0",
+    "@fortawesome/free-brands-svg-icons": "5.15.4",
-    "@fortawesome/free-solid-svg-icons": "6.6.0",
+    "@fortawesome/free-regular-svg-icons": "5.15.4",
-    "@fortawesome/react-fontawesome": "0.2.2",
+    "@fortawesome/free-solid-svg-icons": "5.15.4",
-    "@openedx/frontend-slot-footer": "^1.0.2",
+    "@fortawesome/react-fontawesome": "0.2.0",
-    "@openedx/paragon": "^22.2.2",
+    "classnames": "2.3.2",
-    "@pact-foundation/pact": "^11.0.2",
+    "core-js": "3.25.5",
-    "@redux-devtools/extension": "3.3.0",
-    "classnames": "2.5.1",
-    "core-js": "3.39.0",
-    "history": "5.3.0",
     "lodash.camelcase": "4.3.0",
     "lodash.get": "4.4.2",
     "lodash.pick": "4.4.0",
     "lodash.snakecase": "4.1.1",
     "prop-types": "15.8.1",
-    "react": "17.0.2",
+    "react": "16.14.0",
-    "react-dom": "17.0.2",
+    "react-dom": "16.14.0",
-    "react-helmet": "6.1.0",
     "react-redux": "7.2.9",
-    "react-router": "6.28.0",
+    "react-router": "5.3.4",
-    "react-router-dom": "6.28.0",
+    "react-router-dom": "5.3.4",
-    "redux": "4.2.1",
+    "react-helmet": "6.1.0",
+    "redux": "4.2.0",
+    "redux-devtools-extension": "2.13.9",
     "redux-logger": "3.0.6",
-    "redux-saga": "1.3.0",
+    "redux-saga": "1.2.1",
     "redux-thunk": "2.4.2",
-    "regenerator-runtime": "0.14.1",
+    "regenerator-runtime": "0.13.11",
-    "reselect": "5.1.1",
+    "reselect": "4.1.7",
-    "universal-cookie": "4.0.4"
+    "universal-cookie": "3.1.0"
   },
   "devDependencies": {
-    "@commitlint/cli": "19.6.0",
+    "@commitlint/cli": "17.2.0",
-    "@commitlint/config-angular": "19.6.0",
+    "@commitlint/config-angular": "17.2.0",
-    "@edx/browserslist-config": "^1.1.1",
+    "@edx/reactifex": "2.1.1",
-    "@edx/reactifex": "2.2.0",
+    "@edx/frontend-build": "12.0.6",
-    "@openedx/frontend-build": "14.2.0",
+    "codecov": "3.8.3",
-    "@testing-library/jest-dom": "6.6.3",
+    "enzyme": "3.11.0",
-    "@testing-library/react": "12.1.5",
+    "enzyme-adapter-react-16": "1.15.7",
-    "glob": "11.0.0",
+    "es-check": "5.2.4",
+    "glob": "7.2.3",
+    "react-test-renderer": "16.14.0",
     "reactifex": "1.1.1",
-    "redux-mock-store": "1.5.5"
+    "redux-mock-store": "1.5.4"
   }
 }

renovate.json

@@ -24,7 +24,7 @@
       "automerge": true
     },
     {
-      "matchPackagePatterns": ["@edx", "@openedx"],
+      "matchPackagePatterns": ["@edx"],
       "matchUpdateTypes": ["minor", "patch"],
       "automerge": true
     }

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.jsx

@@ -5,7 +5,8 @@ import { getConfig } from '@edx/frontend-platform';
 
 import messages from './messages';
 
-const Head = ({ intl }) => (
+function Head({ intl }) {
+  return (
     <Helmet>
       <title>
         {intl.formatMessage(messages['profile.page.title'], { siteName: getConfig().SITE_NAME })}
@@ -13,6 +14,7 @@ const Head = ({ intl }) => (
       <link rel="shortcut icon" href={getConfig().FAVICON_URL} type="image/x-icon" />
     </Helmet>
   );
+}
 
 Head.propTypes = {
   intl: intlShape.isRequired,

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/index.js

@@ -1 +0,0 @@
-export default [];

src/i18n/index.jsx

@@ -0,0 +1,28 @@
+import arMessages from './messages/ar.json';
+import frMessages from './messages/fr.json';
+import es419Messages from './messages/es_419.json';
+import zhcnMessages from './messages/zh_CN.json';
+import ptMessages from './messages/pt.json';
+import itMessages from './messages/it.json';
+import ukMessages from './messages/uk.json';
+import deMessages from './messages/de.json';
+import ruMessages from './messages/ru.json';
+import hiMessages from './messages/hi.json';
+import frCAMessages from './messages/fr_CA.json';
+// no need to import en messages-- they are in the defaultMessage field
+
+const messages = {
+  ar: arMessages,
+  'es-419': es419Messages,
+  fr: frMessages,
+  'zh-cn': zhcnMessages,
+  pt: ptMessages,
+  it: itMessages,
+  de: deMessages,
+  hi: hiMessages,
+  'fr-ca': frCAMessages,
+  ru: ruMessages,
+  uk: ukMessages,
+};
+
+export default messages;

src/i18n/messages/ar.json

@@ -0,0 +1,52 @@
+{
+  "profile.page.title": "الملف الشخصي | {siteName}",
+  "profile.age.details": "لمشاركة ملفك الشخصي مع بقية متعلمي {siteName}، يجب أن تؤكد أنك عمرك يفوق 13 عامًا.",
+  "profile.age.set.date": "ضيط تاريخ ميلادك",
+  "profile.datejoined.member.since": "عضو منذ {year}",
+  "profile.bio.empty": "إضافة نبذة قصيرة",
+  "profile.bio.about.me": "نبذة عنّي",
+  "profile.certificate.organization.label": "من طرف",
+  "profile.certificate.completion.date.label": "صدرت بتاريخ {date}",
+  "profile.no.certificates": "ليست لديك أي شهادات يعد.",
+  "profile.certificates.my.certificates": "شهاداتي",
+  "profile.certificates.view.certificate": "معاينة الشهادة",
+  "profile.certificates.types.verified": "شهادة موثقة",
+  "profile.certificates.types.professional": "شهادة مهنية",
+  "profile.certificates.types.unknown": "شهادة",
+  "profile.country.label": "الموقع",
+  "profile.country.empty": "إضافة الموقع",
+  "profile.education.empty": "إضافة المستوى التعليمي",
+  "profile.education.education": "المستوى التعليمي",
+  "profile.education.levels.p": "دكتوراه",
+  "profile.education.levels.m": "ماجستير / ماستر أو شهادة مهنيّة",
+  "profile.education.levels.b": "بكالوريوس / ليسانس",
+  "profile.education.levels.a": "درجة الزمالة / دبلوم الدراسات الجامعية",
+  "profile.education.levels.hs": "الثانوية العامة / البكالوريا",
+  "profile.education.levels.jhs": "المدرسة الإعدادية / المتوسطة",
+  "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.name.full.name": "الاسم الكامل",
+  "profile.name.details": "هذا هو الاسم الذي يظهر في حسابك وفي شهاداتك",
+  "profile.name.empty": "إضافة الاسم",
+  "profile.preferredlanguage.empty": "إضافة اللغة",
+  "profile.preferredlanguage.label": "لغة التحدّث الأساسية",
+  "profile.profileavatar.upload-button": "تحميل صورة",
+  "profile.profileavatar.remove.button": "حذف",
+  "profile.image.alt.attribute": "صورة الملف الشخصي",
+  "profile.profileavatar.change-button": "تغيير",
+  "profile.sociallinks.add": "إضافة {network}",
+  "profile.sociallinks.social.links": "روابط التواصل الاجتماعي",
+  "profile.notfound.message": "الصفحة التي تبحث عنها غير متوفرة أو هناك خطأ في العنوان. رجاءً تحقق من العنوان و حاول مجدّدًا.",
+  "profile.viewMyRecords": "عرض سجلّاتي",
+  "profile.loading": "يتم تحميل الملف الشخصي...",
+  "profile.username.description": "معلومات ملفك الشخصي تظهر لك فقط. وحده اسم المستخدم الخاص بك يظهر للآخرين على {siteName}."
+}

src/i18n/messages/de.json

@@ -0,0 +1,52 @@
+{
+  "profile.page.title": "Profile | {siteName}",
+  "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.bio.empty": "Add a short bio",
+  "profile.bio.about.me": "About Me",
+  "profile.certificate.organization.label": "From",
+  "profile.certificate.completion.date.label": "Completed on {date}",
+  "profile.no.certificates": "You don't have any certificates yet.",
+  "profile.certificates.my.certificates": "My Certificates",
+  "profile.certificates.view.certificate": "View Certificate",
+  "profile.certificates.types.verified": "Verified Certificate",
+  "profile.certificates.types.professional": "Professional Certificate",
+  "profile.certificates.types.unknown": "Certificate",
+  "profile.country.label": "Location",
+  "profile.country.empty": "Add location",
+  "profile.education.empty": "Add education",
+  "profile.education.education": "Education",
+  "profile.education.levels.p": "Doctorate",
+  "profile.education.levels.m": "Master's or professional degree",
+  "profile.education.levels.b": "Bachelor's Degree",
+  "profile.education.levels.a": "Associate's degree",
+  "profile.education.levels.hs": "Secondary/high school",
+  "profile.education.levels.jhs": "Junior secondary/junior high/middle school",
+  "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.name.full.name": "Full Name",
+  "profile.name.details": "This is the name that appears in your account and on your certificates.",
+  "profile.name.empty": "Add name",
+  "profile.preferredlanguage.empty": "Add language",
+  "profile.preferredlanguage.label": "Primary Language Spoken",
+  "profile.profileavatar.upload-button": "Upload Photo",
+  "profile.profileavatar.remove.button": "Remove",
+  "profile.image.alt.attribute": "profile avatar",
+  "profile.profileavatar.change-button": "Change",
+  "profile.sociallinks.add": "Add {network}",
+  "profile.sociallinks.social.links": "Social Links",
+  "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}."
+}

src/i18n/messages/es_419.json

@@ -0,0 +1,52 @@
+{
+  "profile.page.title": "Profile | {siteName}",
+  "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.bio.empty": "Añade una breve biografía",
+  "profile.bio.about.me": "Sobre Mí",
+  "profile.certificate.organization.label": "Desde",
+  "profile.certificate.completion.date.label": "Completado el {date}",
+  "profile.no.certificates": "Todavía no ha obtenido ningún certificado.",
+  "profile.certificates.my.certificates": "Mis Certificados",
+  "profile.certificates.view.certificate": "Ver Certificado",
+  "profile.certificates.types.verified": "Certificado verificado",
+  "profile.certificates.types.professional": "Certificado profesional",
+  "profile.certificates.types.unknown": "Certificado",
+  "profile.country.label": "Ubicación",
+  "profile.country.empty": "Añade ubicación",
+  "profile.education.empty": "Añade Educación",
+  "profile.education.education": "Educación",
+  "profile.education.levels.p": "Doctorado",
+  "profile.education.levels.m": "Master o magíster",
+  "profile.education.levels.b": "Pregrado o Licenciatura",
+  "profile.education.levels.a": "Grado técnico - tecnológico",
+  "profile.education.levels.hs": "Enseñanza secundaria",
+  "profile.education.levels.jhs": "Formación media",
+  "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.name.full.name": "Nombre completo",
+  "profile.name.details": "Este es el nombre que aparecerá en tu cuenta y en tus certificados.",
+  "profile.name.empty": "Añade nombre",
+  "profile.preferredlanguage.empty": "Añadir idioma",
+  "profile.preferredlanguage.label": "Idioma principal que hablas",
+  "profile.profileavatar.upload-button": "Subir foto",
+  "profile.profileavatar.remove.button": "Eliminar",
+  "profile.image.alt.attribute": "avatar del perfil",
+  "profile.profileavatar.change-button": "Cambiar",
+  "profile.sociallinks.add": "Añade {network}",
+  "profile.sociallinks.social.links": "Enlaces De Redes Sociales",
+  "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}."
+}

src/i18n/messages/fr.json

@@ -0,0 +1,52 @@
+{
+  "profile.page.title": "Profile | {siteName}",
+  "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.bio.empty": "Ajouter une courte biographie",
+  "profile.bio.about.me": "À propos de moi",
+  "profile.certificate.organization.label": "De",
+  "profile.certificate.completion.date.label": "Terminé le {date}",
+  "profile.no.certificates": "Vous n'avez pas encore de certificats.",
+  "profile.certificates.my.certificates": "Mes certificats",
+  "profile.certificates.view.certificate": "Voir le certificat",
+  "profile.certificates.types.verified": "Certificat vérifié",
+  "profile.certificates.types.professional": "Certificat professionnel",
+  "profile.certificates.types.unknown": "Certificat",
+  "profile.country.label": "Localisation",
+  "profile.country.empty": "Ajouter localisation",
+  "profile.education.empty": "Ajouter une éducation",
+  "profile.education.education": "Education",
+  "profile.education.levels.p": "Doctorat",
+  "profile.education.levels.m": "Master ou diplôme professionnel",
+  "profile.education.levels.b": "Diplôme de licence",
+  "profile.education.levels.a": "Grade de l'associé",
+  "profile.education.levels.hs": "Lycée / enseignement secondaire",
+  "profile.education.levels.jhs": "Collège / enseignement secondaire inférieur",
+  "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.name.full.name": "Nom complet",
+  "profile.name.details": "C'est le nom qui apparaît dans votre compte et sur vos certificats.",
+  "profile.name.empty": "Ajouter un nom",
+  "profile.preferredlanguage.empty": "Ajouter une langue",
+  "profile.preferredlanguage.label": "Langue principale parlée",
+  "profile.profileavatar.upload-button": "Envoyer la photo",
+  "profile.profileavatar.remove.button": "Supprimer",
+  "profile.image.alt.attribute": "Profil avatar",
+  "profile.profileavatar.change-button": "Modifier",
+  "profile.sociallinks.add": "Ajouter {network}",
+  "profile.sociallinks.social.links": "Liens vers les réseaux sociaux",
+  "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}."
+}

src/i18n/messages/fr_CA.json

@@ -0,0 +1,52 @@
+{
+  "profile.page.title": "Profil | {siteName}",
+  "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.bio.empty": "Ajouter une courte biographie",
+  "profile.bio.about.me": "À propos de moi",
+  "profile.certificate.organization.label": "De",
+  "profile.certificate.completion.date.label": "Terminé le {date}",
+  "profile.no.certificates": "Vous n'avez pas encore d'attestation.",
+  "profile.certificates.my.certificates": "Mes Attestations",
+  "profile.certificates.view.certificate": "Voir votre attestation",
+  "profile.certificates.types.verified": "Attestation vérifiée",
+  "profile.certificates.types.professional": "Attestation professionnelle",
+  "profile.certificates.types.unknown": "Attestation",
+  "profile.country.label": "Adresse",
+  "profile.country.empty": "Ajouter un emplacement",
+  "profile.education.empty": "Ajouter formation",
+  "profile.education.education": "Education",
+  "profile.education.levels.p": "Doctorat",
+  "profile.education.levels.m": "Maitrise ou diplôme professionnel",
+  "profile.education.levels.b": "Diplôme de baccalauréat",
+  "profile.education.levels.a": "Diplôme d'associé",
+  "profile.education.levels.hs": "Lycée / enseignement secondaire",
+  "profile.education.levels.jhs": "Collège / enseignement secondaire inférieur",
+  "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": "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.name.full.name": "Nom complet",
+  "profile.name.details": "C'est le nom qui apparaît dans votre compte et sur vos attestations.",
+  "profile.name.empty": "Ajouter un nom",
+  "profile.preferredlanguage.empty": "Ajouter une langue",
+  "profile.preferredlanguage.label": "Langue principale parlée",
+  "profile.profileavatar.upload-button": "Téléverser une photo",
+  "profile.profileavatar.remove.button": "Supprimer",
+  "profile.image.alt.attribute": "Avatar de profil",
+  "profile.profileavatar.change-button": "Modifier",
+  "profile.sociallinks.add": "Ajouter {network}",
+  "profile.sociallinks.social.links": "Liens vers les réseaux sociaux",
+  "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}."
+}

src/i18n/messages/hi.json

@@ -0,0 +1,52 @@
+{
+  "profile.page.title": "Profile | {siteName}",
+  "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.bio.empty": "Add a short bio",
+  "profile.bio.about.me": "About Me",
+  "profile.certificate.organization.label": "From",
+  "profile.certificate.completion.date.label": "Completed on {date}",
+  "profile.no.certificates": "You don't have any certificates yet.",
+  "profile.certificates.my.certificates": "My Certificates",
+  "profile.certificates.view.certificate": "View Certificate",
+  "profile.certificates.types.verified": "Verified Certificate",
+  "profile.certificates.types.professional": "Professional Certificate",
+  "profile.certificates.types.unknown": "Certificate",
+  "profile.country.label": "Location",
+  "profile.country.empty": "Add location",
+  "profile.education.empty": "Add education",
+  "profile.education.education": "Education",
+  "profile.education.levels.p": "Doctorate",
+  "profile.education.levels.m": "Master's or professional degree",
+  "profile.education.levels.b": "Bachelor's Degree",
+  "profile.education.levels.a": "Associate's degree",
+  "profile.education.levels.hs": "Secondary/high school",
+  "profile.education.levels.jhs": "Junior secondary/junior high/middle school",
+  "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.name.full.name": "Full Name",
+  "profile.name.details": "This is the name that appears in your account and on your certificates.",
+  "profile.name.empty": "Add name",
+  "profile.preferredlanguage.empty": "Add language",
+  "profile.preferredlanguage.label": "Primary Language Spoken",
+  "profile.profileavatar.upload-button": "Upload Photo",
+  "profile.profileavatar.remove.button": "Remove",
+  "profile.image.alt.attribute": "profile avatar",
+  "profile.profileavatar.change-button": "Change",
+  "profile.sociallinks.add": "Add {network}",
+  "profile.sociallinks.social.links": "Social Links",
+  "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}."
+}

src/i18n/messages/it.json

@@ -0,0 +1,52 @@
+{
+  "profile.page.title": "Profile | {siteName}",
+  "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.bio.empty": "Add a short bio",
+  "profile.bio.about.me": "About Me",
+  "profile.certificate.organization.label": "From",
+  "profile.certificate.completion.date.label": "Completed on {date}",
+  "profile.no.certificates": "You don't have any certificates yet.",
+  "profile.certificates.my.certificates": "My Certificates",
+  "profile.certificates.view.certificate": "View Certificate",
+  "profile.certificates.types.verified": "Verified Certificate",
+  "profile.certificates.types.professional": "Professional Certificate",
+  "profile.certificates.types.unknown": "Certificate",
+  "profile.country.label": "Location",
+  "profile.country.empty": "Add location",
+  "profile.education.empty": "Add education",
+  "profile.education.education": "Education",
+  "profile.education.levels.p": "Doctorate",
+  "profile.education.levels.m": "Master's or professional degree",
+  "profile.education.levels.b": "Bachelor's Degree",
+  "profile.education.levels.a": "Associate's degree",
+  "profile.education.levels.hs": "Secondary/high school",
+  "profile.education.levels.jhs": "Junior secondary/junior high/middle school",
+  "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.name.full.name": "Full Name",
+  "profile.name.details": "This is the name that appears in your account and on your certificates.",
+  "profile.name.empty": "Add name",
+  "profile.preferredlanguage.empty": "Add language",
+  "profile.preferredlanguage.label": "Primary Language Spoken",
+  "profile.profileavatar.upload-button": "Upload Photo",
+  "profile.profileavatar.remove.button": "Remove",
+  "profile.image.alt.attribute": "profile avatar",
+  "profile.profileavatar.change-button": "Change",
+  "profile.sociallinks.add": "Add {network}",
+  "profile.sociallinks.social.links": "Social Links",
+  "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}."
+}

src/i18n/messages/pt.json

@@ -0,0 +1,52 @@
+{
+  "profile.page.title": "Profile | {siteName}",
+  "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.bio.empty": "Add a short bio",
+  "profile.bio.about.me": "About Me",
+  "profile.certificate.organization.label": "From",
+  "profile.certificate.completion.date.label": "Completed on {date}",
+  "profile.no.certificates": "You don't have any certificates yet.",
+  "profile.certificates.my.certificates": "My Certificates",
+  "profile.certificates.view.certificate": "View Certificate",
+  "profile.certificates.types.verified": "Verified Certificate",
+  "profile.certificates.types.professional": "Professional Certificate",
+  "profile.certificates.types.unknown": "Certificate",
+  "profile.country.label": "Location",
+  "profile.country.empty": "Add location",
+  "profile.education.empty": "Add education",
+  "profile.education.education": "Education",
+  "profile.education.levels.p": "Doctorate",
+  "profile.education.levels.m": "Master's or professional degree",
+  "profile.education.levels.b": "Bachelor's Degree",
+  "profile.education.levels.a": "Associate's degree",
+  "profile.education.levels.hs": "Secondary/high school",
+  "profile.education.levels.jhs": "Junior secondary/junior high/middle school",
+  "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.name.full.name": "Full Name",
+  "profile.name.details": "This is the name that appears in your account and on your certificates.",
+  "profile.name.empty": "Add name",
+  "profile.preferredlanguage.empty": "Add language",
+  "profile.preferredlanguage.label": "Primary Language Spoken",
+  "profile.profileavatar.upload-button": "Upload Photo",
+  "profile.profileavatar.remove.button": "Remove",
+  "profile.image.alt.attribute": "profile avatar",
+  "profile.profileavatar.change-button": "Change",
+  "profile.sociallinks.add": "Add {network}",
+  "profile.sociallinks.social.links": "Social Links",
+  "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}."
+}

src/i18n/messages/ru.json

@@ -0,0 +1,52 @@
+{
+  "profile.page.title": "Profile | {siteName}",
+  "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.bio.empty": "Add a short bio",
+  "profile.bio.about.me": "About Me",
+  "profile.certificate.organization.label": "From",
+  "profile.certificate.completion.date.label": "Completed on {date}",
+  "profile.no.certificates": "You don't have any certificates yet.",
+  "profile.certificates.my.certificates": "My Certificates",
+  "profile.certificates.view.certificate": "View Certificate",
+  "profile.certificates.types.verified": "Verified Certificate",
+  "profile.certificates.types.professional": "Professional Certificate",
+  "profile.certificates.types.unknown": "Certificate",
+  "profile.country.label": "Location",
+  "profile.country.empty": "Add location",
+  "profile.education.empty": "Add education",
+  "profile.education.education": "Education",
+  "profile.education.levels.p": "Doctorate",
+  "profile.education.levels.m": "Master's or professional degree",
+  "profile.education.levels.b": "Bachelor's Degree",
+  "profile.education.levels.a": "Associate's degree",
+  "profile.education.levels.hs": "Secondary/high school",
+  "profile.education.levels.jhs": "Junior secondary/junior high/middle school",
+  "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.name.full.name": "Full Name",
+  "profile.name.details": "This is the name that appears in your account and on your certificates.",
+  "profile.name.empty": "Add name",
+  "profile.preferredlanguage.empty": "Add language",
+  "profile.preferredlanguage.label": "Primary Language Spoken",
+  "profile.profileavatar.upload-button": "Upload Photo",
+  "profile.profileavatar.remove.button": "Remove",
+  "profile.image.alt.attribute": "profile avatar",
+  "profile.profileavatar.change-button": "Change",
+  "profile.sociallinks.add": "Add {network}",
+  "profile.sociallinks.social.links": "Social Links",
+  "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}."
+}

src/i18n/messages/uk.json

@@ -0,0 +1,52 @@
+{
+  "profile.page.title": "Profile | {siteName}",
+  "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.bio.empty": "Add a short bio",
+  "profile.bio.about.me": "About Me",
+  "profile.certificate.organization.label": "From",
+  "profile.certificate.completion.date.label": "Completed on {date}",
+  "profile.no.certificates": "You don't have any certificates yet.",
+  "profile.certificates.my.certificates": "My Certificates",
+  "profile.certificates.view.certificate": "View Certificate",
+  "profile.certificates.types.verified": "Verified Certificate",
+  "profile.certificates.types.professional": "Professional Certificate",
+  "profile.certificates.types.unknown": "Certificate",
+  "profile.country.label": "Location",
+  "profile.country.empty": "Add location",
+  "profile.education.empty": "Add education",
+  "profile.education.education": "Education",
+  "profile.education.levels.p": "Doctorate",
+  "profile.education.levels.m": "Master's or professional degree",
+  "profile.education.levels.b": "Bachelor's Degree",
+  "profile.education.levels.a": "Associate's degree",
+  "profile.education.levels.hs": "Secondary/high school",
+  "profile.education.levels.jhs": "Junior secondary/junior high/middle school",
+  "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.name.full.name": "Full Name",
+  "profile.name.details": "This is the name that appears in your account and on your certificates.",
+  "profile.name.empty": "Add name",
+  "profile.preferredlanguage.empty": "Add language",
+  "profile.preferredlanguage.label": "Primary Language Spoken",
+  "profile.profileavatar.upload-button": "Upload Photo",
+  "profile.profileavatar.remove.button": "Remove",
+  "profile.image.alt.attribute": "profile avatar",
+  "profile.profileavatar.change-button": "Change",
+  "profile.sociallinks.add": "Add {network}",
+  "profile.sociallinks.social.links": "Social Links",
+  "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}."
+}

src/i18n/messages/zh_CN.json

@@ -0,0 +1,52 @@
+{
+  "profile.page.title": "Profile | {siteName}",
+  "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.bio.empty": "Add a short bio",
+  "profile.bio.about.me": "About Me",
+  "profile.certificate.organization.label": "From",
+  "profile.certificate.completion.date.label": "Completed on {date}",
+  "profile.no.certificates": "You don't have any certificates yet.",
+  "profile.certificates.my.certificates": "My Certificates",
+  "profile.certificates.view.certificate": "View Certificate",
+  "profile.certificates.types.verified": "Verified Certificate",
+  "profile.certificates.types.professional": "Professional Certificate",
+  "profile.certificates.types.unknown": "Certificate",
+  "profile.country.label": "Location",
+  "profile.country.empty": "Add location",
+  "profile.education.empty": "Add education",
+  "profile.education.education": "Education",
+  "profile.education.levels.p": "Doctorate",
+  "profile.education.levels.m": "Master's or professional degree",
+  "profile.education.levels.b": "Bachelor's Degree",
+  "profile.education.levels.a": "Associate's degree",
+  "profile.education.levels.hs": "Secondary/high school",
+  "profile.education.levels.jhs": "Junior secondary/junior high/middle school",
+  "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.name.full.name": "Full Name",
+  "profile.name.details": "This is the name that appears in your account and on your certificates.",
+  "profile.name.empty": "Add name",
+  "profile.preferredlanguage.empty": "Add language",
+  "profile.preferredlanguage.label": "Primary Language Spoken",
+  "profile.profileavatar.upload-button": "Upload Photo",
+  "profile.profileavatar.remove.button": "Remove",
+  "profile.image.alt.attribute": "profile avatar",
+  "profile.profileavatar.change-button": "Change",
+  "profile.sociallinks.add": "Add {network}",
+  "profile.sociallinks.social.links": "Social Links",
+  "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}."
+}

src/index.jsx

@@ -15,27 +15,31 @@ import {
 
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { Route, Switch } from 'react-router-dom';
 
-import Header from '@edx/frontend-component-header';
+import Header, { messages as headerMessages } from '@edx/frontend-component-header';
-import FooterSlot from '@openedx/frontend-slot-footer';
+import Footer, { messages as footerMessages } from '@edx/frontend-component-footer';
 
-import messages from './i18n';
+import appMessages from './i18n';
+import { ProfilePage, NotFoundPage } from './profile';
 import configureStore from './data/configureStore';
 
 import './index.scss';
 import Head from './head/Head';
 
-import AppRoutes from './routes/AppRoutes';
-
 subscribe(APP_READY, () => {
   ReactDOM.render(
     <AppProvider store={configureStore()}>
       <Head />
       <Header />
-      <main id="main">
+      <main>
-        <AppRoutes />
+        <Switch>
+          <Route path="/u/:username" component={ProfilePage} />
+          <Route path="/notfound" component={NotFoundPage} />
+          <Route path="*" component={NotFoundPage} />
+        </Switch>
       </main>
-      <FooterSlot />
+      <Footer />
     </AppProvider>,
     document.getElementById('root'),
   );
@@ -46,13 +50,19 @@ subscribe(APP_INIT_ERROR, (error) => {
 });
 
 initialize({
-  messages,
+  messages: [
+    appMessages,
+    headerMessages,
+    footerMessages,
+  ],
+  requireAuthenticatedUser: true,
   hydrateAuthenticatedUser: true,
   handlers: {
     config: () => {
       mergeConfig({
+        ENABLE_LEARNER_RECORD_MFE: (process.env.ENABLE_LEARNER_RECORD_MFE || false),
+        LEARNER_RECORD_MFE_BASE_URL: process.env.LEARNER_RECORD_MFE_BASE_URL,
         COLLECT_YEAR_OF_BIRTH: process.env.COLLECT_YEAR_OF_BIRTH,
-        ENABLE_SKILLS_BUILDER_PROFILE: process.env.ENABLE_SKILLS_BUILDER_PROFILE,
       }, 'App loadConfig override handler');
     },
   },

src/index.scss

@@ -1,6 +1,6 @@
 @import "~@edx/brand/paragon/fonts";
 @import "~@edx/brand/paragon/variables";
-@import "~@openedx/paragon/scss/core/core";
+@import "~@edx/paragon/scss/core/core";
 @import "~@edx/brand/paragon/overrides";
 @import "~@edx/frontend-component-header/dist/index";
 @import "~@edx/frontend-component-footer/dist/footer";

src/pacts/frontend-app-profile-edx-platform.json

@@ -1,77 +0,0 @@
-{
-  "consumer": {
-    "name": "frontend-app-profile"
-  },
-  "interactions": [
-    {
-      "description": "A request for user's basic information",
-      "providerStates": [
-        {
-          "name": "Account and user's information does not exist"
-        }
-      ],
-      "request": {
-        "method": "GET",
-        "path": "/api/user/v1/accounts/staff_not_found"
-      },
-      "response": {
-        "status": 404
-      }
-    },
-    {
-      "description": "A request for user's basic information",
-      "providerStates": [
-        {
-          "name": "I have a user's basic information"
-        }
-      ],
-      "request": {
-        "method": "GET",
-        "path": "/api/user/v1/accounts/staff"
-      },
-      "response": {
-        "body": {
-          "bio": "This is my bio",
-          "country": "ME",
-          "dateJoined": "2017-06-07T00:44:23Z",
-          "email": "staff@example.com",
-          "isActive": true,
-          "name": "Lemon Seltzer",
-          "username": "staff",
-          "yearOfBirth": 1901
-        },
-        "headers": {
-          "Content-Type": "application/json"
-        },
-        "matchingRules": {
-          "body": {
-            "$": {
-              "combine": "AND",
-              "matchers": [
-                {
-                  "match": "type"
-                }
-              ]
-            }
-          }
-        },
-        "status": 200
-      }
-    }
-  ],
-  "metadata": {
-    "pact-js": {
-      "version": "11.0.2"
-    },
-    "pactRust": {
-      "ffi": "0.4.0",
-      "models": "1.0.4"
-    },
-    "pactSpecification": {
-      "version": "3.0.0"
-    }
-  },
-  "provider": {
-    "name": "edx-platform"
-  }
-}

src/plugin-slots/FooterSlot/README.md

@@ -1,50 +0,0 @@
-# Footer Slot
-
-### Slot ID: `footer_slot`
-
-## Description
-
-This slot is used to replace/modify/hide the footer.
-
-The implementation of the `FooterSlot` component lives in [the `frontend-slot-footer` repository](https://github.com/openedx/frontend-slot-footer/).
-
-## Example
-
-The following `env.config.jsx` will replace the default footer.
-
-![Screenshot of Default Footer](./images/default_footer.png)
-
-with a simple custom footer
-
-![Screenshot of Custom Footer](./images/custom_footer.png)
-
-```jsx
-import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
-
-const config = {
-  pluginSlots: {
-    footer_slot: {
-      plugins: [
-        {
-          // Hide the default footer
-          op: PLUGIN_OPERATIONS.Hide,
-          widgetId: 'default_contents',
-        },
-        {
-          // Insert a custom footer
-          op: PLUGIN_OPERATIONS.Insert,
-          widget: {
-            id: 'custom_footer',
-            type: DIRECT_PLUGIN,
-            RenderWidget: () => (
-              <h1 style={{textAlign: 'center'}}>🦶</h1>
-            ),
-          },
-        },
-      ]
-    }
-  },
-}
-
-export default config;
-```

src/plugin-slots/README.md

@@ -1,3 +0,0 @@
-# `frontend-app-profile` Plugin Slots
-
-* [`footer_slot`](./FooterSlot/)

src/profile/AgeMessage.jsx

@@ -1,21 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Alert } from '@openedx/paragon';
+import { Alert } from '@edx/paragon';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import { getConfig } from '@edx/frontend-platform';
 
-const AgeMessage = ({ accountSettingsUrl }) => (
+function AgeMessage({ accountSettingsUrl }) {
+  return (
     <Alert
       variant="info"
       dismissible={false}
       show
     >
       <Alert.Heading id="profile.age.headline">
-      <FormattedMessage
+        Your profile cannot be shared.
-        id="profile.age.cannotShare"
-        defaultMessage="Your profile cannot be shared."
-        description="Error message indicating that the user's profile cannot be shared"
-      />
       </Alert.Heading>
       <FormattedMessage
         id="profile.age.details"
@@ -35,6 +32,7 @@ const AgeMessage = ({ accountSettingsUrl }) => (
       </Alert.Link>
     </Alert>
   );
+}
 
 AgeMessage.propTypes = {
   accountSettingsUrl: PropTypes.string.isRequired,

src/profile/Banner.jsx

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

src/profile/DateJoined.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage, FormattedDate } from '@edx/frontend-platform/i18n';
 
-const DateJoined = ({ date }) => {
+function DateJoined({ date }) {
   if (date == null) {
     return null;
   }
@@ -19,7 +19,7 @@ const DateJoined = ({ date }) => {
       />
     </p>
   );
-};
+}
 
 DateJoined.propTypes = {
   date: PropTypes.string,

src/profile/NotFoundPage.jsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
-const NotFoundPage = () => (
+export default function NotFoundPage() {
+  return (
     <div className="container-fluid d-flex py-5 justify-content-center align-items-start text-center">
       <p className="my-0 py-5 text-muted" style={{ maxWidth: '32em' }}>
         <FormattedMessage
@@ -12,5 +13,4 @@ const NotFoundPage = () => (
       </p>
     </div>
   );
-
+}
-export default NotFoundPage;

src/profile/ProfilePage.jsx

@@ -6,7 +6,7 @@ import { sendTrackingLogEvent } from '@edx/frontend-platform/analytics';
 import { ensureConfig, getConfig } from '@edx/frontend-platform';
 import { AppContext } from '@edx/frontend-platform/react';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Alert, Hyperlink } from '@openedx/paragon';
+import { Alert, Hyperlink } from '@edx/paragon';
 
 // Actions
 import {
@@ -33,7 +33,6 @@ import DateJoined from './DateJoined';
 import UsernameDescription from './UsernameDescription';
 import PageLoading from './PageLoading';
 import Banner from './Banner';
-import LearningGoal from './forms/LearningGoal';
 
 // Selectors
 import { profilePageSelector } from './data/selectors';
@@ -41,18 +40,17 @@ import { profilePageSelector } from './data/selectors';
 // i18n
 import messages from './ProfilePage.messages';
 
-import withParams from '../utils/hoc';
-
 ensureConfig(['CREDENTIALS_BASE_URL', 'LMS_BASE_URL'], 'ProfilePage');
 
 class ProfilePage extends React.Component {
   constructor(props, context) {
     super(props, context);
 
-    const credentialsBaseUrl = context.config.CREDENTIALS_BASE_URL;
+    const recordsUrl = this.getRecordsUrl(context);
+
     this.state = {
-      viewMyRecordsUrl: credentialsBaseUrl ? `${credentialsBaseUrl}/records` : null,
+      viewMyRecordsUrl: recordsUrl,
-      accountSettingsUrl: context.config.ACCOUNT_SETTINGS_URL,
+      accountSettingsUrl: `${context.config.LMS_BASE_URL}/account/settings`,
     };
 
     this.handleSaveProfilePhoto = this.handleSaveProfilePhoto.bind(this);
@@ -64,9 +62,9 @@ class ProfilePage extends React.Component {
   }
 
   componentDidMount() {
-    this.props.fetchProfile(this.props.params.username);
+    this.props.fetchProfile(this.props.match.params.username);
     sendTrackingLogEvent('edx.profile.viewed', {
-      username: this.props.params.username,
+      username: this.props.match.params.username,
     });
   }
 
@@ -94,6 +92,19 @@ class ProfilePage extends React.Component {
     this.props.updateDraft(name, value);
   }
 
+  getRecordsUrl(context) {
+    let recordsUrl = null;
+
+    if (getConfig().ENABLE_LEARNER_RECORD_MFE) {
+      recordsUrl = getConfig().LEARNER_RECORD_MFE_BASE_URL;
+    } else {
+      const credentialsBaseUrl = context.config.CREDENTIALS_BASE_URL;
+      recordsUrl = credentialsBaseUrl ? `${credentialsBaseUrl}/records` : null;
+    }
+
+    return recordsUrl;
+  }
+
   isYOBDisabled() {
     const { yearOfBirth } = this.props;
     const currentYear = new Date().getFullYear();
@@ -103,7 +114,7 @@ class ProfilePage extends React.Component {
   }
 
   isAuthenticatedUserProfile() {
-    return this.props.params.username === this.context.authenticatedUser.username;
+    return this.props.match.params.username === this.context.authenticatedUser.username;
   }
 
   // Inserted into the DOM in two places (for responsive layout)
@@ -125,7 +136,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.match.params.username}</h1>
         <DateJoined date={dateJoined} />
         {this.isYOBDisabled() && <UsernameDescription />}
         <hr className="d-none d-md-block" />
@@ -173,11 +184,8 @@ class ProfilePage extends React.Component {
       socialLinks,
       draftSocialLinksByPlatform,
       visibilitySocialLinks,
-      learningGoal,
-      visibilityLearningGoal,
       languageProficiencies,
       visibilityLanguageProficiencies,
-      courseCertificates,
       visibilityCourseCertificates,
       bio,
       visibilityBio,
@@ -196,17 +204,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">
@@ -223,7 +220,7 @@ class ProfilePage extends React.Component {
               />
             </div>
           </div>
-          <div className="col">
+          <div className="col pl-0">
             <div className="d-md-none">
               {this.renderHeadingLockup()}
             </div>
@@ -241,39 +238,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}
@@ -281,33 +269,20 @@ 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}
-                visibilityLearningGoal={visibilityLearningGoal}
-                formId="learningGoal"
-                {...commonFormProps}
-              />
-            )}
-            {isCertificatesBlockVisible && (
             <Certificates
               visibilityCourseCertificates={visibilityCourseCertificates}
               formId="certificates"
               {...commonFormProps}
             />
-            )}
           </div>
         </div>
       </div>
@@ -371,10 +346,6 @@ ProfilePage.propTypes = {
   })),
   visibilitySocialLinks: PropTypes.string.isRequired,
 
-  // Learning Goal form data
-  learningGoal: PropTypes.string,
-  visibilityLearningGoal: PropTypes.string.isRequired,
-
   // Other data we need
   profileImage: PropTypes.shape({
     src: PropTypes.string,
@@ -397,9 +368,11 @@ ProfilePage.propTypes = {
   updateDraft: PropTypes.func.isRequired,
 
   // Router
+  match: PropTypes.shape({
     params: PropTypes.shape({
       username: PropTypes.string.isRequired,
     }).isRequired,
+  }).isRequired,
 
   // i18n
   intl: intlShape.isRequired,
@@ -417,7 +390,6 @@ ProfilePage.defaultProps = {
   socialLinks: [],
   draftSocialLinksByPlatform: {},
   bio: null,
-  learningGoal: null,
   languageProficiencies: [],
   courseCertificates: null,
   requiresParentalConsent: null,
@@ -435,4 +407,4 @@ export default connect(
     closeForm,
     updateDraft,
   },
-)(injectIntl(withParams(ProfilePage)));
+)(injectIntl(ProfilePage));

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';
 
@@ -28,7 +29,7 @@ const requiredProfilePageProps = {
   deleteProfilePhoto: () => {},
   openField: () => {},
   closeField: () => {},
-  params: { username: 'staff' },
+  match: { params: { username: 'staff' } },
 };
 
 // Mock language cookie
@@ -65,29 +66,32 @@ beforeEach(() => {
   analytics.sendTrackingLogEvent.mockReset();
 });
 
-const ProfilePageWrapper = ({
+function ProfilePageWrapper({
-  contextValue, store, params, requiresParentalConsent,
+  contextValue, store, match, requiresParentalConsent,
-}) => (
+}) {
+  return (
     <AppContext.Provider
       value={contextValue}
     >
       <IntlProvider locale="en">
         <Provider store={store}>
-        <ProfilePage {...requiredProfilePageProps} params={params} requiresParentalConsent={requiresParentalConsent} />
+          <ProfilePage {...requiredProfilePageProps} match={match} requiresParentalConsent={requiresParentalConsent} />
         </Provider>
       </IntlProvider>
     </AppContext.Provider>
   );
+}
 
 ProfilePageWrapper.defaultProps = {
-  params: { username: 'staff' },
+  match: { params: { username: 'staff' } },
   requiresParentalConsent: null,
+
 };
 
 ProfilePageWrapper.propTypes = {
   contextValue: PropTypes.shape({}).isRequired,
   store: PropTypes.shape({}).isRequired,
-  params: PropTypes.shape({}),
+  match: PropTypes.shape({}),
   requiresParentalConsent: PropTypes.bool,
 };
 
@@ -99,7 +103,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 +113,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,
-            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 +144,7 @@ describe('<ProfilePage />', () => {
           store={mockStore(storeMocks.savingEditedBio)}
         />
       );
-      const { container: tree } = render(component);
+      const tree = renderer.create(component).toJSON();
       expect(tree).toMatchSnapshot();
     });
 
@@ -175,7 +161,7 @@ describe('<ProfilePage />', () => {
           store={mockStore(storeData)}
         />
       );
-      const { container: tree } = render(component);
+      const tree = renderer.create(component).toJSON();
       expect(tree).toMatchSnapshot();
     });
 
@@ -193,7 +179,7 @@ describe('<ProfilePage />', () => {
           store={mockStore(storeData)}
         />
       );
-      const { container: tree } = render(component);
+      const tree = renderer.create(component).toJSON();
       expect(tree).toMatchSnapshot();
     });
 
@@ -211,7 +197,7 @@ describe('<ProfilePage />', () => {
           store={mockStore(storeData)}
         />
       );
-      const { container: tree } = render(component);
+      const tree = renderer.create(component).toJSON();
       expect(tree).toMatchSnapshot();
     });
 
@@ -229,7 +215,7 @@ describe('<ProfilePage />', () => {
           store={mockStore(storeData)}
         />
       );
-      const { container: tree } = render(component);
+      const tree = renderer.create(component).toJSON();
       expect(tree).toMatchSnapshot();
     });
 
@@ -247,7 +233,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 +244,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 +263,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 +277,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' }}
+          match={{ 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/UsernameDescription.jsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
-import { VisibilityOff } from '@openedx/paragon/icons';
+import { VisibilityOff } from '@edx/paragon/icons';
-import { Icon } from '@openedx/paragon';
+import { Icon } from '@edx/paragon';
 import { getConfig } from '@edx/frontend-platform';
 
-const UsernameDescription = () => (
+function UsernameDescription() {
+  return (
     <div className="d-flex align-items-center mt-3 mb-2rem">
       <Icon src={VisibilityOff} className="icon-visibility-off" />
       <div className="username-description">
@@ -19,5 +20,6 @@ const UsernameDescription = () => (
       </div>
     </div>
   );
+}
 
 export default UsernameDescription;

src/profile/__mocks__/loadingApp.mockStore.js

@@ -12,8 +12,7 @@ module.exports = {
       imageUrlMedium: null,
       imageUrlLarge: null
     },
-    levelOfEducation: null,
+    levelOfEducation: null
-    learningGoal: null
   },
   profilePage: {
     errors: {},

src/profile/__mocks__/savingEditedBio.mockStore.js

@@ -42,8 +42,7 @@ module.exports = {
     secondaryEmail: null,
     timeZone: null,
     gender: null,
-    accountPrivacy: 'custom',
+    accountPrivacy: 'custom'
-    learningGoal: null,
   },
   profilePage: {
     errors: {},
@@ -92,8 +91,7 @@ module.exports = {
       timeZone: null,
       levelOfEducation: 'el',
       gender: null,
-      accountPrivacy: 'custom',
+      accountPrivacy: 'custom'
-      learningGoal: null,
     },
     preferences: {
       visibilityUserLocation: 'all_users',
@@ -106,8 +104,7 @@ module.exports = {
       visibilityName: 'private',
       visibilityLanguageProficiencies: 'all_users',
       visibilityCountry: 'all_users',
-      accountPrivacy: 'custom',
+      accountPrivacy: 'custom'
-      visibilityLearningGoal: 'private',
     },
     courseCertificates: [
       {

src/profile/__mocks__/viewOtherProfile.mockStore.js

@@ -42,8 +42,7 @@ module.exports = {
     secondaryEmail: null,
     timeZone: null,
     gender: null,
-    accountPrivacy: 'custom',
+    accountPrivacy: 'custom'
-    learningGoal: 'advance_career',
   },
   profilePage: {
     errors: {},
@@ -84,8 +83,7 @@ module.exports = {
     preferences: {},
     courseCertificates: [],
     drafts: {},
-    isLoadingProfile: false,
+    isLoadingProfile: false
-    learningGoal: 'advance_career',
   },
   router: {
     location: {

src/profile/__mocks__/viewOwnProfile.mockStore.js

@@ -42,8 +42,7 @@ module.exports = {
     secondaryEmail: null,
     timeZone: null,
     gender: null,
-    accountPrivacy: 'custom',
+    accountPrivacy: 'custom'
-    learningGoal: 'advance_career'
   },
   profilePage: {
     errors: {},
@@ -92,8 +91,7 @@ module.exports = {
       timeZone: null,
       levelOfEducation: 'el',
       gender: null,
-      accountPrivacy: 'custom',
+      accountPrivacy: 'custom'
-      learningGoal: 'advance_career'
     },
     preferences: {
       visibilityUserLocation: 'all_users',
@@ -106,8 +104,7 @@ module.exports = {
       visibilityName: 'private',
       visibilityLanguageProficiencies: 'all_users',
       visibilityCountry: 'all_users',
-      accountPrivacy: 'custom',
+      accountPrivacy: 'custom'
-      visibilityLearningGoal: 'private',
     },
     courseCertificates: [
       {

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

@@ -1,24 +1,27 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<ProfilePage /> Renders correctly in various states app loading 1`] = `
-<div>
 <div
-    class="profile-page"
+  className="profile-page"
 >
   <div
-      class="profile-page-bg-banner bg-primary d-md-block p-relative"
+    className="profile-page-bg-banner bg-primary d-none 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>
@@ -26,46 +29,46 @@ exports[`<ProfilePage /> Renders correctly in various states app loading 1`] = `
     </div>
   </div>
 </div>
-</div>
 `;
 
 exports[`<ProfilePage /> Renders correctly in various states test country edit with error 1`] = `
-<div>
 <div
-    class="profile-page"
+  className="profile-page"
 >
   <div
-      class="profile-page-bg-banner bg-primary d-md-block p-relative"
+    className="profile-page-bg-banner bg-primary d-none 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="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,20 +77,26 @@ 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>
@@ -95,66 +104,71 @@ exports[`<ProfilePage /> Renders correctly in various states test country edit w
         </div>
       </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"
-                  data-testid="hyperlink-icon"
+                style={
-                  style="height: 1em; width: 1em;"
+                  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
-                      d="M19 19H5V5h7V3H3v18h18v-9h-2v7ZM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7Z"
+                    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"
+                  className="sr-only"
                 >
                   in a new tab
                 </span>
@@ -165,69 +179,74 @@ 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"
-                  data-testid="hyperlink-icon"
+                style={
-                  style="height: 1em; width: 1em;"
+                  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
-                      d="M19 19H5V5h7V3H3v18h18v-9h-2v7ZM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7Z"
+                    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"
+                  className="sr-only"
                 >
                   in a new tab
                 </span>
@@ -236,60 +255,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.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.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.2zm9.4 130.3C378.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.5l-41.9-33zM192 256c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8L302 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.5z"
+                      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>
                    
@@ -298,44 +337,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=""
@@ -1594,54 +1646,60 @@ 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>
                     country error
                   </div>
                 </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"
@@ -1657,35 +1715,37 @@ 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
-                                  d="M22 12A10 10 0 1 1 6.122 3.91l1.176 1.618A8 8 0 1 0 20 12h2Z"
+                                d="M22 12A10 10 0 116.122 3.91l1.176 1.618A8 8 0 1020 12h2z"
                                 fill="currentColor"
                               />
                             </svg>
@@ -1697,7 +1757,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
@@ -1709,60 +1771,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.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.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>
                    
@@ -1771,68 +1853,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.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.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.2zm9.4 130.3C378.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.5l-41.9-33zM192 256c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8L302 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.5z"
+                      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>
                    
@@ -1841,68 +1943,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.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.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>
                    
@@ -1911,80 +2033,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 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z"
+                        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 
@@ -1997,63 +2127,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.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.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>
                    
@@ -2062,68 +2212,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.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.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>
                    
@@ -2132,88 +2302,97 @@ 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"
-                              data-testid="hyperlink-icon"
+                            style={
-                              style="height: 1em; width: 1em;"
+                              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
-                                  d="M19 19H5V5h7V3H3v18h18v-9h-2v7ZM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7Z"
+                                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"
+                              className="sr-only"
                             >
                               in a new tab
                             </span>
@@ -2231,46 +2410,46 @@ exports[`<ProfilePage /> Renders correctly in various states test country edit w
     </div>
   </div>
 </div>
-</div>
 `;
 
 exports[`<ProfilePage /> Renders correctly in various states test education edit with error 1`] = `
-<div>
 <div
-    class="profile-page"
+  className="profile-page"
 >
   <div
-      class="profile-page-bg-banner bg-primary d-md-block p-relative"
+    className="profile-page-bg-banner bg-primary d-none 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="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
@@ -2279,20 +2458,26 @@ 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>
@@ -2300,66 +2485,71 @@ exports[`<ProfilePage /> Renders correctly in various states test education edit
         </div>
       </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"
-                  data-testid="hyperlink-icon"
+                style={
-                  style="height: 1em; width: 1em;"
+                  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
-                      d="M19 19H5V5h7V3H3v18h18v-9h-2v7ZM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7Z"
+                    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"
+                  className="sr-only"
                 >
                   in a new tab
                 </span>
@@ -2370,69 +2560,74 @@ 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"
-                  data-testid="hyperlink-icon"
+                style={
-                  style="height: 1em; width: 1em;"
+                  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
-                      d="M19 19H5V5h7V3H3v18h18v-9h-2v7ZM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7Z"
+                    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"
+                  className="sr-only"
                 >
                   in a new tab
                 </span>
@@ -2441,60 +2636,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.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.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.2zm9.4 130.3C378.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.5l-41.9-33zM192 256c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8L302 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.5z"
+                      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>
                    
@@ -2503,73 +2718,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.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.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>
                    
@@ -2578,68 +2813,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.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.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>
                    
@@ -2648,38 +2903,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=""
@@ -2727,60 +2995,66 @@ exports[`<ProfilePage /> Renders correctly in various states test education edit
                       No formal education
                     </option>
                     <option
-                        value="other"
+                      value="o"
                     >
                       Other education
                     </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>
                     education error
                   </div>
                 </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.2zm9.4 130.3C378.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.5l-41.9-33zM192 256c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8L302 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.5z"
+                            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"
@@ -2796,35 +3070,37 @@ 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
-                                  d="M22 12A10 10 0 1 1 6.122 3.91l1.176 1.618A8 8 0 1 0 20 12h2Z"
+                                d="M22 12A10 10 0 116.122 3.91l1.176 1.618A8 8 0 1020 12h2z"
                                 fill="currentColor"
                               />
                             </svg>
@@ -2836,7 +3112,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
@@ -2848,60 +3126,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.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.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>
                    
@@ -2910,80 +3208,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 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z"
+                        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 
@@ -2996,63 +3302,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.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.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>
                    
@@ -3061,68 +3387,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.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.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>
                    
@@ -3131,88 +3477,97 @@ 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"
-                              data-testid="hyperlink-icon"
+                            style={
-                              style="height: 1em; width: 1em;"
+                              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
-                                  d="M19 19H5V5h7V3H3v18h18v-9h-2v7ZM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7Z"
+                                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"
+                              className="sr-only"
                             >
                               in a new tab
                             </span>
@@ -3230,46 +3585,46 @@ exports[`<ProfilePage /> Renders correctly in various states test education edit
     </div>
   </div>
 </div>
-</div>
 `;
 
 exports[`<ProfilePage /> Renders correctly in various states test preferreded language edit with error 1`] = `
-<div>
 <div
-    class="profile-page"
+  className="profile-page"
 >
   <div
-      class="profile-page-bg-banner bg-primary d-md-block p-relative"
+    className="profile-page-bg-banner bg-primary d-none 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="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
@@ -3278,20 +3633,26 @@ 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>
@@ -3299,66 +3660,71 @@ exports[`<ProfilePage /> Renders correctly in various states test preferreded la
         </div>
       </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"
-                  data-testid="hyperlink-icon"
+                style={
-                  style="height: 1em; width: 1em;"
+                  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
-                      d="M19 19H5V5h7V3H3v18h18v-9h-2v7ZM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7Z"
+                    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"
+                  className="sr-only"
                 >
                   in a new tab
                 </span>
@@ -3369,69 +3735,74 @@ 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"
-                  data-testid="hyperlink-icon"
+                style={
-                  style="height: 1em; width: 1em;"
+                  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
-                      d="M19 19H5V5h7V3H3v18h18v-9h-2v7ZM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7Z"
+                    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"
+                  className="sr-only"
                 >
                   in a new tab
                 </span>
@@ -3440,60 +3811,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.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.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.2zm9.4 130.3C378.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.5l-41.9-33zM192 256c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8L302 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.5z"
+                      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>
                    
@@ -3502,73 +3893,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.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.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>
                    
@@ -3577,38 +3988,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=""
@@ -4537,54 +4961,60 @@ 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>
                     preferred language error
                   </div>
                 </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"
@@ -4600,35 +5030,37 @@ 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
-                                  d="M22 12A10 10 0 1 1 6.122 3.91l1.176 1.618A8 8 0 1 0 20 12h2Z"
+                                d="M22 12A10 10 0 116.122 3.91l1.176 1.618A8 8 0 1020 12h2z"
                                 fill="currentColor"
                               />
                             </svg>
@@ -4640,7 +5072,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
@@ -4652,60 +5086,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.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.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.2zm9.4 130.3C378.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.5l-41.9-33zM192 256c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8L302 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.5z"
+                      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>
                    
@@ -4714,68 +5168,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.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.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>
                    
@@ -4784,80 +5258,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 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z"
+                        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 
@@ -4870,63 +5352,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.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.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>
                    
@@ -4935,68 +5437,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.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.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>
                    
@@ -5005,88 +5527,97 @@ 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"
-                              data-testid="hyperlink-icon"
+                            style={
-                              style="height: 1em; width: 1em;"
+                              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
-                                  d="M19 19H5V5h7V3H3v18h18v-9h-2v7ZM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7Z"
+                                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"
+                              className="sr-only"
                             >
                               in a new tab
                             </span>
@@ -5104,51 +5635,51 @@ exports[`<ProfilePage /> Renders correctly in various states test preferreded la
     </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
-    class="profile-page"
+  className="profile-page"
 >
   <div
-      class="profile-page-bg-banner bg-primary d-md-block p-relative"
+    className="profile-page-bg-banner bg-primary d-none 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>
@@ -5156,399 +5687,226 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
         </div>
       </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
-                      d="M12 6.5c2.76 0 5 2.24 5 5 0 .51-.1 1-.24 1.46l3.06 3.06c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l2.17 2.17c.47-.14.96-.24 1.47-.24ZM3.42 2.45 2.01 3.87l2.68 2.68A11.738 11.738 0 0 0 1 11.5C2.73 15.89 7 19 12 19c1.52 0 2.97-.3 4.31-.82l3.43 3.43 1.41-1.41L3.42 2.45ZM12 16.5c-2.76 0-5-2.24-5-5 0-.77.18-1.5.49-2.14l1.57 1.57c-.03.18-.06.37-.06.57 0 1.66 1.34 3 3 3 .2 0 .38-.03.57-.07L14.14 16c-.65.32-1.37.5-2.14.5Zm2.97-5.33a2.97 2.97 0 0 0-2.64-2.64l2.64 2.64Z"
+                    d="M12 6.5c2.76 0 5 2.24 5 5 0 .51-.1 1-.24 1.46l3.06 3.06c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l2.17 2.17c.47-.14.96-.24 1.47-.24zM3.42 2.45L2.01 3.87l2.68 2.68A11.738 11.738 0 001 11.5C2.73 15.89 7 19 12 19c1.52 0 2.97-.3 4.31-.82l3.43 3.43 1.41-1.41L3.42 2.45zM12 16.5c-2.76 0-5-2.24-5-5 0-.77.18-1.5.49-2.14l1.57 1.57c-.03.18-.06.37-.06.57 0 1.66 1.34 3 3 3 .2 0 .38-.03.57-.07L14.14 16c-.65.32-1.37.5-2.14.5zm2.97-5.33a2.97 2.97 0 00-2.64-2.64l2.64 2.64z"
                     fill="currentColor"
                   />
                 </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"
-                  data-testid="hyperlink-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
-                      d="M12 6.5c2.76 0 5 2.24 5 5 0 .51-.1 1-.24 1.46l3.06 3.06c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l2.17 2.17c.47-.14.96-.24 1.47-.24ZM3.42 2.45 2.01 3.87l2.68 2.68A11.738 11.738 0 0 0 1 11.5C2.73 15.89 7 19 12 19c1.52 0 2.97-.3 4.31-.82l3.43 3.43 1.41-1.41L3.42 2.45ZM12 16.5c-2.76 0-5-2.24-5-5 0-.77.18-1.5.49-2.14l1.57 1.57c-.03.18-.06.37-.06.57 0 1.66 1.34 3 3 3 .2 0 .38-.03.57-.07L14.14 16c-.65.32-1.37.5-2.14.5Zm2.97-5.33a2.97 2.97 0 0 0-2.64-2.64l2.64 2.64Z"
+                    d="M12 6.5c2.76 0 5 2.24 5 5 0 .51-.1 1-.24 1.46l3.06 3.06c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l2.17 2.17c.47-.14.96-.24 1.47-.24zM3.42 2.45L2.01 3.87l2.68 2.68A11.738 11.738 0 001 11.5C2.73 15.89 7 19 12 19c1.52 0 2.97-.3 4.31-.82l3.43 3.43 1.41-1.41L3.42 2.45zM12 16.5c-2.76 0-5-2.24-5-5 0-.77.18-1.5.49-2.14l1.57 1.57c-.03.18-.06.37-.06.57 0 1.66 1.34 3 3 3 .2 0 .38-.03.57-.07L14.14 16c-.65.32-1.37.5-2.14.5zm2.97-5.33a2.97 2.97 0 00-2.64-2.64l2.64 2.64z"
                     fill="currentColor"
                   />
                 </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"
-                  data-testid="hyperlink-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
-    class="profile-page"
+  className="profile-page"
 >
   <div
-      class="profile-page-bg-banner bg-primary d-md-block p-relative"
+    className="profile-page-bg-banner bg-primary d-none 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="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
@@ -5557,20 +5915,26 @@ 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>
@@ -5578,66 +5942,71 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
         </div>
       </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"
-                  data-testid="hyperlink-icon"
+                style={
-                  style="height: 1em; width: 1em;"
+                  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
-                      d="M19 19H5V5h7V3H3v18h18v-9h-2v7ZM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7Z"
+                    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"
+                  className="sr-only"
                 >
                   in a new tab
                 </span>
@@ -5648,69 +6017,74 @@ 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"
-                  data-testid="hyperlink-icon"
+                style={
-                  style="height: 1em; width: 1em;"
+                  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
-                      d="M19 19H5V5h7V3H3v18h18v-9h-2v7ZM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7Z"
+                    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"
+                  className="sr-only"
                 >
                   in a new tab
                 </span>
@@ -5719,60 +6093,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.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.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.2zm9.4 130.3C378.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.5l-41.9-33zM192 256c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8L302 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.5z"
+                      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>
                    
@@ -5781,73 +6175,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.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.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>
                    
@@ -5856,68 +6270,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.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.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>
                    
@@ -5926,68 +6360,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.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.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.2zm9.4 130.3C378.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.5l-41.9-33zM192 256c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8L302 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.5z"
+                      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>
                    
@@ -5996,68 +6450,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.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.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>
                    
@@ -6066,80 +6540,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 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z"
+                        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 
@@ -6152,63 +6634,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.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.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>
                    
@@ -6217,68 +6719,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.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.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>
                    
@@ -6287,88 +6809,97 @@ 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"
-                              data-testid="hyperlink-icon"
+                            style={
-                              style="height: 1em; width: 1em;"
+                              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
-                                  d="M19 19H5V5h7V3H3v18h18v-9h-2v7ZM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7Z"
+                                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"
+                              className="sr-only"
                             >
                               in a new tab
                             </span>
@@ -6386,46 +6917,46 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
     </div>
   </div>
 </div>
-</div>
 `;
 
 exports[`<ProfilePage /> Renders correctly in various states while saving an edited bio 1`] = `
-<div>
 <div
-    class="profile-page"
+  className="profile-page"
 >
   <div
-      class="profile-page-bg-banner bg-primary d-md-block p-relative"
+    className="profile-page-bg-banner bg-primary d-none 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="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
@@ -6434,20 +6965,26 @@ 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>
@@ -6455,66 +6992,71 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
         </div>
       </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"
-                  data-testid="hyperlink-icon"
+                style={
-                  style="height: 1em; width: 1em;"
+                  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
-                      d="M19 19H5V5h7V3H3v18h18v-9h-2v7ZM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7Z"
+                    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"
+                  className="sr-only"
                 >
                   in a new tab
                 </span>
@@ -6525,69 +7067,74 @@ 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"
-                  data-testid="hyperlink-icon"
+                style={
-                  style="height: 1em; width: 1em;"
+                  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
-                      d="M19 19H5V5h7V3H3v18h18v-9h-2v7ZM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7Z"
+                    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"
+                  className="sr-only"
                 >
                   in a new tab
                 </span>
@@ -6596,60 +7143,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.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.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.2zm9.4 130.3C378.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.5l-41.9-33zM192 256c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8L302 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.5z"
+                      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>
                    
@@ -6658,73 +7225,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.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.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>
                    
@@ -6733,68 +7320,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.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.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>
                    
@@ -6803,68 +7410,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.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.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.2zm9.4 130.3C378.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.5l-41.9-33zM192 256c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8L302 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.5z"
+                      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>
                    
@@ -6873,68 +7500,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.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.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>
                    
@@ -6943,80 +7590,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 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z"
+                        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 
@@ -7029,76 +7684,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"
@@ -7114,35 +7788,37 @@ 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
-                                  d="M22 12A10 10 0 1 1 6.122 3.91l1.176 1.618A8 8 0 1 0 20 12h2Z"
+                                d="M22 12A10 10 0 116.122 3.91l1.176 1.618A8 8 0 1020 12h2z"
                                 fill="currentColor"
                               />
                             </svg>
@@ -7154,7 +7830,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
@@ -7166,60 +7844,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.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.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>
                    
@@ -7228,88 +7926,97 @@ 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"
-                              data-testid="hyperlink-icon"
+                            style={
-                              style="height: 1em; width: 1em;"
+                              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
-                                  d="M19 19H5V5h7V3H3v18h18v-9h-2v7ZM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7Z"
+                                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"
+                              className="sr-only"
                             >
                               in a new tab
                             </span>
@@ -7327,46 +8034,46 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
     </div>
   </div>
 </div>
-</div>
 `;
 
 exports[`<ProfilePage /> Renders correctly in various states while saving an edited bio with error 1`] = `
-<div>
 <div
-    class="profile-page"
+  className="profile-page"
 >
   <div
-      class="profile-page-bg-banner bg-primary d-md-block p-relative"
+    className="profile-page-bg-banner bg-primary d-none 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="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
@@ -7375,20 +8082,26 @@ 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>
@@ -7396,66 +8109,71 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
         </div>
       </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"
-                  data-testid="hyperlink-icon"
+                style={
-                  style="height: 1em; width: 1em;"
+                  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
-                      d="M19 19H5V5h7V3H3v18h18v-9h-2v7ZM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7Z"
+                    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"
+                  className="sr-only"
                 >
                   in a new tab
                 </span>
@@ -7466,69 +8184,74 @@ 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"
-                  data-testid="hyperlink-icon"
+                style={
-                  style="height: 1em; width: 1em;"
+                  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
-                      d="M19 19H5V5h7V3H3v18h18v-9h-2v7ZM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7Z"
+                    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"
+                  className="sr-only"
                 >
                   in a new tab
                 </span>
@@ -7537,60 +8260,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.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.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.2zm9.4 130.3C378.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.5l-41.9-33zM192 256c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8L302 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.5z"
+                      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>
                    
@@ -7599,73 +8342,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.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.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>
                    
@@ -7674,68 +8437,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.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.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>
                    
@@ -7744,68 +8527,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.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.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.2zm9.4 130.3C378.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.5l-41.9-33zM192 256c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8L302 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.5z"
+                      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>
                    
@@ -7814,68 +8617,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.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.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>
                    
@@ -7884,80 +8707,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 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z"
+                        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 
@@ -7970,84 +8801,101 @@ 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>
                     bio error
                   </div>
                 </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"
@@ -8063,35 +8911,37 @@ 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
-                                  d="M22 12A10 10 0 1 1 6.122 3.91l1.176 1.618A8 8 0 1 0 20 12h2Z"
+                                d="M22 12A10 10 0 116.122 3.91l1.176 1.618A8 8 0 1020 12h2z"
                                 fill="currentColor"
                               />
                             </svg>
@@ -8103,7 +8953,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
@@ -8115,60 +8967,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.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.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>
                    
@@ -8177,88 +9049,97 @@ 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"
-                              data-testid="hyperlink-icon"
+                            style={
-                              style="height: 1em; width: 1em;"
+                              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
-                                  d="M19 19H5V5h7V3H3v18h18v-9h-2v7ZM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7Z"
+                                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"
+                              className="sr-only"
                             >
                               in a new tab
                             </span>
@@ -8276,46 +9157,46 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
     </div>
   </div>
 </div>
-</div>
 `;
 
 exports[`<ProfilePage /> Renders correctly in various states without credentials service 1`] = `
-<div>
 <div
-    class="profile-page"
+  className="profile-page"
 >
   <div
-      class="profile-page-bg-banner bg-primary d-md-block p-relative"
+    className="profile-page-bg-banner bg-primary d-none 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="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
@@ -8324,20 +9205,26 @@ 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>
@@ -8345,121 +9232,141 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
         </div>
       </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.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.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.2zm9.4 130.3C378.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.5l-41.9-33zM192 256c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8L302 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.5z"
+                      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>
                    
@@ -8468,73 +9375,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.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.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>
                    
@@ -8543,68 +9470,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.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.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>
                    
@@ -8613,68 +9560,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.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.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.2zm9.4 130.3C378.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.5l-41.9-33zM192 256c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8L302 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.5z"
+                      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>
                    
@@ -8683,68 +9650,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.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.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>
                    
@@ -8753,80 +9740,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 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z"
+                        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 
@@ -8839,63 +9834,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.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.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>
                    
@@ -8904,68 +9919,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.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.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>
                    
@@ -8974,88 +10009,97 @@ 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"
-                              data-testid="hyperlink-icon"
+                            style={
-                              style="height: 1em; width: 1em;"
+                              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
-                                  d="M19 19H5V5h7V3H3v18h18v-9h-2v7ZM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7Z"
+                                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"
+                              className="sr-only"
                             >
                               in a new tab
                             </span>
@@ -9073,5 +10117,4 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
     </div>
   </div>
 </div>
-</div>
 `;

src/profile/data/constants.js

@@ -7,7 +7,7 @@ const EDUCATION_LEVELS = [
   'jhs',
   'el',
   'none',
-  'other',
+  'o',
 ];
 
 const SOCIAL = {

src/profile/data/mock_data.js

@@ -1,7 +0,0 @@
-const mockData = {
-  learningGoal: 'advance_career',
-  editMode: 'static',
-  visibilityLearningGoal: 'private',
-};
-
-export default mockData;

src/profile/data/pact-profile.test.js

@@ -1,80 +0,0 @@
-// This test file simply creates a contract that defines
-// expectations and correct responses from the Pact stub server.
-
-import path from 'path';
-
-import { PactV3, MatchersV3 } from '@pact-foundation/pact';
-
-import { initializeMockApp, getConfig, setConfig } from '@edx/frontend-platform';
-import { getAccount } from './services';
-
-const expectedUserInfo200 = {
-  username: 'staff',
-  email: 'staff@example.com',
-  bio: 'This is my bio',
-  name: 'Lemon Seltzer',
-  country: 'ME',
-  dateJoined: '2017-06-07T00:44:23Z',
-  isActive: true,
-  yearOfBirth: 1901,
-};
-
-const provider = new PactV3({
-  log: path.resolve(process.cwd(), 'src/pact-logs/pact.log'),
-  dir: path.resolve(process.cwd(), 'src/pacts'),
-  consumer: 'frontend-app-profile',
-  provider: 'edx-platform',
-});
-
-describe('getAccount for one username', () => {
-  beforeAll(async () => {
-    initializeMockApp();
-  });
-  it('returns a HTTP 200 and user information', async () => {
-    const username200 = 'staff';
-    await provider.addInteraction({
-      states: [{ description: "I have a user's basic information" }],
-      uponReceiving: "A request for user's basic information",
-      withRequest: {
-        method: 'GET',
-        path: `/api/user/v1/accounts/${username200}`,
-        headers: {},
-      },
-      willRespondWith: {
-        status: 200,
-        headers: {},
-        body: MatchersV3.like(expectedUserInfo200),
-      },
-    });
-    return provider.executeTest(async (mockserver) => {
-      setConfig({
-        ...getConfig(),
-        LMS_BASE_URL: mockserver.url,
-      });
-      const response = await getAccount(username200);
-      expect(response).toEqual(expectedUserInfo200);
-    });
-  });
-
-  it('Account does not exist', async () => {
-    const username404 = 'staff_not_found';
-    await provider.addInteraction({
-      states: [{ description: "Account and user's information does not exist" }],
-      uponReceiving: "A request for user's basic information",
-      withRequest: {
-        method: 'GET',
-        path: `/api/user/v1/accounts/${username404}`,
-      },
-      willRespondWith: {
-        status: 404,
-      },
-    });
-    await provider.executeTest(async (mockserver) => {
-      setConfig({
-        ...getConfig(),
-        LMS_BASE_URL: mockserver.url,
-      });
-      await expect(getAccount(username404).then((response) => response.data)).rejects.toThrow('Request failed with status code 404');
-    });
-  });
-});

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/Bio.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Form } from '@openedx/paragon';
+import { Form } from '@edx/paragon';
 
 import messages from './Bio.messages';
 

src/profile/forms/Certificates.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import {
   FormattedDate, FormattedMessage, injectIntl, intlShape,
 } from '@edx/frontend-platform/i18n';
-import { Hyperlink } from '@openedx/paragon';
+import { Hyperlink } from '@edx/paragon';
 import { connect } from 'react-redux';
 import get from 'lodash.get';
 
@@ -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/Country.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Form } from '@openedx/paragon';
+import { Form } from '@edx/paragon';
 
 import messages from './Country.messages';
 

src/profile/forms/Education.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import get from 'lodash.get';
-import { Form } from '@openedx/paragon';
+import { Form } from '@edx/paragon';
 
 import messages from './Education.messages';
 

src/profile/forms/LearningGoal.jsx

@@ -1,92 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import get from 'lodash.get';
-
-// Mock Data
-import mockData from '../data/mock_data';
-
-import messages from './LearningGoal.messages';
-
-// Components
-import EditableItemHeader from './elements/EditableItemHeader';
-import SwitchContent from './elements/SwitchContent';
-
-// Selectors
-import { editableFormSelector } from '../data/selectors';
-
-const LearningGoal = (props) => {
-  let { learningGoal, editMode, visibilityLearningGoal } = props;
-  const { intl } = props;
-
-  if (!learningGoal) {
-    learningGoal = mockData.learningGoal;
-  }
-
-  if (!editMode || editMode === 'empty') { // editMode defaults to 'empty', not sure why yet
-    editMode = mockData.editMode;
-  }
-
-  if (!visibilityLearningGoal) {
-    visibilityLearningGoal = mockData.visibilityLearningGoal;
-  }
-
-  return (
-    <SwitchContent
-      className="mb-5"
-      expression={editMode}
-      cases={{
-        editable: (
-          <>
-            <EditableItemHeader
-              content={intl.formatMessage(messages['profile.learningGoal.learningGoal'])}
-              showVisibility={visibilityLearningGoal !== null}
-              visibility={visibilityLearningGoal}
-            />
-            <p data-hj-suppress className="lead">
-              {intl.formatMessage(get(
-                messages,
-                `profile.learningGoal.options.${learningGoal}`,
-                messages['profile.learningGoal.options.something_else'],
-              ))}
-            </p>
-          </>
-        ),
-        static: (
-          <>
-            <EditableItemHeader content={intl.formatMessage(messages['profile.learningGoal.learningGoal'])} />
-            <p data-hj-suppress className="lead">
-              {intl.formatMessage(get(
-                messages,
-                `profile.learningGoal.options.${learningGoal}`,
-                messages['profile.learningGoal.options.something_else'],
-              ))}
-            </p>
-          </>
-        ),
-      }}
-    />
-  );
-};
-
-LearningGoal.propTypes = {
-  // From Selector
-  learningGoal: PropTypes.oneOf(['advance_career', 'start_career', 'learn_something_new', 'something_else']),
-  visibilityLearningGoal: PropTypes.oneOf(['private', 'all_users']),
-  editMode: PropTypes.oneOf(['editable', 'static']),
-
-  // i18n
-  intl: intlShape.isRequired,
-};
-
-LearningGoal.defaultProps = {
-  editMode: 'static',
-  learningGoal: null,
-  visibilityLearningGoal: 'private',
-};
-
-export default connect(
-  editableFormSelector,
-  {},
-)(injectIntl(LearningGoal));

src/profile/forms/LearningGoal.messages.jsx

@@ -1,31 +0,0 @@
-import { defineMessages } from '@edx/frontend-platform/i18n';
-
-const messages = defineMessages({
-  'profile.learningGoal.learningGoal': {
-    id: 'profile.learningGoal.learningGoal',
-    defaultMessage: 'Learning Goal',
-    description: 'A section of a user profile that displays their current learning goal.',
-  },
-  'profile.learningGoal.options.start_career': {
-    id: 'profile.learningGoal.options.start_career',
-    defaultMessage: 'I want to start my career',
-    description: 'Selected by user if their goal is to start their career.',
-  },
-  'profile.learningGoal.options.advance_career': {
-    id: 'profile.learningGoal.options.advance_career',
-    defaultMessage: 'I want to advance my career',
-    description: 'Selected by user if their goal is to advance their career.',
-  },
-  'profile.learningGoal.options.learn_something_new': {
-    id: 'profile.learningGoal.options.learn_something_new',
-    defaultMessage: 'I want to learn something new',
-    description: 'Selected by user if their goal is to learn something new.',
-  },
-  'profile.learningGoal.options.something_else': {
-    id: 'profile.learningGoal.options.something_else',
-    defaultMessage: 'Something else',
-    description: 'Selected by user if their goal is not described by the other choices.',
-  },
-});
-
-export default messages;

src/profile/forms/LearningGoal.test.jsx

@@ -1,116 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { useMemo } from 'react';
-import { Provider } from 'react-redux';
-import { render, screen } from '@testing-library/react';
-import configureMockStore from 'redux-mock-store';
-import thunk from 'redux-thunk';
-import { configure as configureI18n, IntlProvider } from '@edx/frontend-platform/i18n';
-import { getConfig } from '@edx/frontend-platform';
-import { AppContext } from '@edx/frontend-platform/react';
-import messages from '../../i18n';
-
-import viewOwnProfileMockStore from '../__mocks__/viewOwnProfile.mockStore';
-import savingEditedBioMockStore from '../__mocks__/savingEditedBio.mockStore';
-
-import LearningGoal from './LearningGoal';
-
-const mockStore = configureMockStore([thunk]);
-
-// props to be passed down to LearningGoal component
-const requiredLearningGoalProps = {
-  formId: 'learningGoal',
-  learningGoal: 'advance_career',
-  drafts: {},
-  visibilityLearningGoal: 'private',
-  editMode: 'static',
-  saveState: null,
-  error: null,
-  openHandler: jest.fn(),
-};
-
-configureI18n({
-  loggingService: { logError: jest.fn() },
-  config: {
-    ENVIRONMENT: 'production',
-    LANGUAGE_PREFERENCE_COOKIE_NAME: 'yum',
-  },
-  messages,
-});
-
-const LearningGoalWrapper = (props) => {
-  const contextValue = useMemo(() => ({
-    authenticatedUser: { userId: null, username: null, administrator: false },
-    config: getConfig(),
-  }), []);
-  return (
-    <AppContext.Provider
-      value={contextValue}
-    >
-      <IntlProvider locale="en">
-        <Provider store={props.store}>
-          <LearningGoal {...props} />
-        </Provider>
-      </IntlProvider>
-    </AppContext.Provider>
-  );
-};
-
-LearningGoalWrapper.defaultProps = {
-  store: mockStore(viewOwnProfileMockStore),
-};
-
-LearningGoalWrapper.propTypes = {
-  store: PropTypes.shape({}),
-};
-
-const LearningGoalWrapperWithStore = ({ store }) => {
-  const contextValue = useMemo(() => ({
-    authenticatedUser: { userId: null, username: null, administrator: false },
-    config: getConfig(),
-  }), []);
-  return (
-    <AppContext.Provider
-      value={contextValue}
-    >
-      <IntlProvider locale="en">
-        <Provider store={mockStore(store)}>
-          <LearningGoal {...requiredLearningGoalProps} formId="learningGoal" />
-        </Provider>
-      </IntlProvider>
-    </AppContext.Provider>
-  );
-};
-
-LearningGoalWrapperWithStore.defaultProps = {
-  store: mockStore(savingEditedBioMockStore),
-};
-
-LearningGoalWrapperWithStore.propTypes = {
-  store: PropTypes.shape({}),
-};
-
-describe('<LearningGoal />', () => {
-  describe('renders the current learning goal', () => {
-    it('renders "I want to advance my career"', () => {
-      render(
-        <LearningGoalWrapper
-          {...requiredLearningGoalProps}
-          formId="learningGoal"
-        />,
-      );
-      expect(screen.getByText('I want to advance my career')).toBeTruthy();
-    });
-
-    it('renders "Something else"', () => {
-      requiredLearningGoalProps.learningGoal = 'something_else';
-
-      render(
-        <LearningGoalWrapper
-          {...requiredLearningGoalProps}
-          formId="learningGoal"
-        />,
-      );
-      expect(screen.getByText('Something else')).toBeTruthy();
-    });
-  });
-});

src/profile/forms/PreferredLanguage.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Form } from '@openedx/paragon';
+import { Form } from '@edx/paragon';
 
 import messages from './PreferredLanguage.messages';
 

src/profile/forms/ProfileAvatar.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Dropdown } from '@openedx/paragon';
+import { Button, Dropdown } from '@edx/paragon';
 import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
 import { ReactComponent as DefaultAvatar } from '../assets/avatar.svg';

src/profile/forms/SocialLinks.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Alert } from '@openedx/paragon';
+import { Alert } from '@edx/paragon';
 import { connect } from 'react-redux';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faTwitter, faFacebook, faLinkedin } from '@fortawesome/free-brands-svg-icons';
@@ -33,108 +33,6 @@ const platformDisplayInfo = {
   },
 };
 
-const SocialLink = ({ url, name, platform }) => (
-  <a href={url} className="font-weight-bold">
-    <FontAwesomeIcon className="mr-2" icon={platformDisplayInfo[platform].icon} />
-    {name}
-  </a>
-);
-
-SocialLink.propTypes = {
-  url: PropTypes.string.isRequired,
-  platform: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-};
-
-const EditableListItem = ({
-  url, platform, onClickEmptyContent, name,
-}) => {
-  const linkDisplay = url ? (
-    <SocialLink name={name} url={url} platform={platform} />
-  ) : (
-    <EmptyContent onClick={onClickEmptyContent}>Add {name}</EmptyContent>
-  );
-
-  return <li className="form-group">{linkDisplay}</li>;
-};
-
-EditableListItem.propTypes = {
-  url: PropTypes.string,
-  platform: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-  onClickEmptyContent: PropTypes.func,
-};
-EditableListItem.defaultProps = {
-  url: null,
-  onClickEmptyContent: null,
-};
-
-const EditingListItem = ({
-  platform, name, value, onChange, error,
-}) => (
-  <li className="form-group">
-    <label htmlFor={`social-${platform}`}>{name}</label>
-    <input
-      className={classNames('form-control', { 'is-invalid': Boolean(error) })}
-      type="text"
-      id={`social-${platform}`}
-      name={platform}
-      value={value || ''}
-      onChange={onChange}
-      aria-describedby="social-error-feedback"
-    />
-  </li>
-);
-
-EditingListItem.propTypes = {
-  platform: PropTypes.string.isRequired,
-  value: PropTypes.string,
-  name: PropTypes.string.isRequired,
-  onChange: PropTypes.func.isRequired,
-  error: PropTypes.string,
-};
-
-EditingListItem.defaultProps = {
-  value: null,
-  error: null,
-};
-
-const EmptyListItem = ({ onClick, name }) => (
-  <li className="mb-4">
-    <EmptyContent onClick={onClick}>
-      <FormattedMessage
-        id="profile.sociallinks.add"
-        defaultMessage="Add {network}"
-        values={{
-          network: name,
-        }}
-        description="{network} is the name of a social network such as Facebook or Twitter"
-      />
-    </EmptyContent>
-  </li>
-);
-
-EmptyListItem.propTypes = {
-  name: PropTypes.string.isRequired,
-  onClick: PropTypes.func.isRequired,
-};
-
-const StaticListItem = ({ name, url, platform }) => (
-  <li className="mb-2">
-    <SocialLink name={name} url={url} platform={platform} />
-  </li>
-);
-
-StaticListItem.propTypes = {
-  name: PropTypes.string.isRequired,
-  url: PropTypes.string,
-  platform: PropTypes.string.isRequired,
-};
-
-StaticListItem.defaultProps = {
-  url: null,
-};
-
 class SocialLinks extends React.Component {
   constructor(props) {
     super(props);
@@ -345,3 +243,113 @@ export default connect(
   editableFormSelector,
   {},
 )(injectIntl(SocialLinks));
+
+function SocialLink({ url, name, platform }) {
+  return (
+    <a href={url} className="font-weight-bold">
+      <FontAwesomeIcon className="mr-2" icon={platformDisplayInfo[platform].icon} />
+      {name}
+    </a>
+  );
+}
+
+SocialLink.propTypes = {
+  url: PropTypes.string.isRequired,
+  platform: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+};
+
+function EditableListItem({
+  url, platform, onClickEmptyContent, name,
+}) {
+  const linkDisplay = url ? (
+    <SocialLink name={name} url={url} platform={platform} />
+  ) : (
+    <EmptyContent onClick={onClickEmptyContent}>Add {name}</EmptyContent>
+  );
+
+  return <li className="form-group">{linkDisplay}</li>;
+}
+
+EditableListItem.propTypes = {
+  url: PropTypes.string,
+  platform: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  onClickEmptyContent: PropTypes.func,
+};
+EditableListItem.defaultProps = {
+  url: null,
+  onClickEmptyContent: null,
+};
+
+function EditingListItem({
+  platform, name, value, onChange, error,
+}) {
+  return (
+    <li className="form-group">
+      <label htmlFor={`social-${platform}`}>{name}</label>
+      <input
+        className={classNames('form-control', { 'is-invalid': Boolean(error) })}
+        type="text"
+        id={`social-${platform}`}
+        name={platform}
+        value={value || ''}
+        onChange={onChange}
+        aria-describedby="social-error-feedback"
+      />
+    </li>
+  );
+}
+
+EditingListItem.propTypes = {
+  platform: PropTypes.string.isRequired,
+  value: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  error: PropTypes.string,
+};
+
+EditingListItem.defaultProps = {
+  value: null,
+  error: null,
+};
+
+function EmptyListItem({ onClick, name }) {
+  return (
+    <li className="mb-4">
+      <EmptyContent onClick={onClick}>
+        <FormattedMessage
+          id="profile.sociallinks.add"
+          defaultMessage="Add {network}"
+          values={{
+            network: name,
+          }}
+          description="{network} is the name of a social network such as Facebook or Twitter"
+        />
+      </EmptyContent>
+    </li>
+  );
+}
+
+EmptyListItem.propTypes = {
+  name: PropTypes.string.isRequired,
+  onClick: PropTypes.func.isRequired,
+};
+
+function StaticListItem({ name, url, platform }) {
+  return (
+    <li className="mb-2">
+      <SocialLink name={name} url={url} platform={platform} />
+    </li>
+  );
+}
+
+StaticListItem.propTypes = {
+  name: PropTypes.string.isRequired,
+  url: PropTypes.string,
+  platform: PropTypes.string.isRequired,
+};
+
+StaticListItem.defaultProps = {
+  url: null,
+};

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';
@@ -46,7 +47,7 @@ configureI18n({
   messages,
 });
 
-const SocialLinksWrapper = (props) => {
+function SocialLinksWrapper(props) {
   const contextValue = useMemo(() => ({
     authenticatedUser: { userId: null, username: null, administrator: false },
     config: getConfig(),
@@ -62,7 +63,7 @@ const SocialLinksWrapper = (props) => {
       </IntlProvider>
     </AppContext.Provider>
   );
-};
+}
 
 SocialLinksWrapper.defaultProps = {
   store: mockStore(savingEditedBio),
@@ -72,7 +73,7 @@ SocialLinksWrapper.propTypes = {
   store: PropTypes.shape({}),
 };
 
-const SocialLinksWrapperWithStore = ({ store }) => {
+function SocialLinksWrapperWithStore({ store }) {
   const contextValue = useMemo(() => ({
     authenticatedUser: { userId: null, username: null, administrator: false },
     config: getConfig(),
@@ -88,7 +89,7 @@ const SocialLinksWrapperWithStore = ({ store }) => {
       </IntlProvider>
     </AppContext.Provider>
   );
-};
+}
 
 SocialLinksWrapperWithStore.defaultProps = {
   store: mockStore(savingEditedBio),
@@ -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
-    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="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.2zm9.4 130.3C378.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.5l-41.9-33zM192 256c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8L302 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.5z"
+                    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,35 +140,37 @@ 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
-                          d="M22 12A10 10 0 1 1 6.122 3.91l1.176 1.618A8 8 0 1 0 20 12h2Z"
+                        d="M22 12A10 10 0 116.122 3.91l1.176 1.618A8 8 0 1020 12h2z"
                         fill="currentColor"
                       />
                     </svg>
@@ -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
@@ -172,66 +195,84 @@ exports[`<SocialLinks /> calls social links with edit mode bio 1`] = `
     </div>
   </div>
 </div>
-</div>
 `;
 
 exports[`<SocialLinks /> calls social links with edit mode certificates 1`] = `
-<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.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.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.2zm9.4 130.3C378.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.5l-41.9-33zM192 256c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8L302 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.5z"
+              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
@@ -295,51 +340,63 @@ exports[`<SocialLinks /> calls social links with edit mode certificates 1`] = `
     </ul>
   </div>
 </div>
-</div>
 `;
 
 exports[`<SocialLinks /> calls social links with edit mode goals 1`] = `
-<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
       </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 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z"
+                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 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z"
+                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
@@ -377,66 +438,84 @@ exports[`<SocialLinks /> calls social links with edit mode goals 1`] = `
     </ul>
   </div>
 </div>
-</div>
 `;
 
 exports[`<SocialLinks /> calls social links with edit mode socialLinks 1`] = `
-<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.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.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.2zm9.4 130.3C378.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.5l-41.9-33zM192 256c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8L302 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.5z"
+              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
@@ -500,5 +583,4 @@ exports[`<SocialLinks /> calls social links with edit mode socialLinks 1`] = `
     </ul>
   </div>
 </div>
-</div>
 `;

src/profile/forms/elements/EditButton.jsx

@@ -3,13 +3,14 @@ import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faPencilAlt } from '@fortawesome/free-solid-svg-icons';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Button } from '@openedx/paragon';
+import { Button } from '@edx/paragon';
 
 import messages from './EditButton.messages';
 
-const EditButton = ({
+function EditButton({
   onClick, className, style, intl,
-}) => (
+}) {
+  return (
     <Button
       variant="link"
       size="sm"
@@ -21,6 +22,7 @@ const EditButton = ({
       {intl.formatMessage(messages['profile.editbutton.edit'])}
     </Button>
   );
+}
 
 export default injectIntl(EditButton);
 

src/profile/forms/elements/EditableItemHeader.jsx

@@ -4,14 +4,15 @@ import PropTypes from 'prop-types';
 import EditButton from './EditButton';
 import { Visibility } from './Visibility';
 
-const EditableItemHeader = ({
+function EditableItemHeader({
   content,
   showVisibility,
   visibility,
   showEditButton,
   onClickEdit,
   headingId,
-}) => (
+}) {
+  return (
     <div className="editable-item-header mb-2">
       <h2 className="edit-section-header" id={headingId}>
         {content}
@@ -20,6 +21,7 @@ const EditableItemHeader = ({
       {showVisibility ? <p className="mb-0"><Visibility to={visibility} /></p> : null}
     </div>
   );
+}
 
 export default EditableItemHeader;
 

src/profile/forms/elements/EmptyContent.jsx

@@ -3,7 +3,8 @@ import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faPlus } from '@fortawesome/free-solid-svg-icons';
 
-const EmptyContent = ({ children, onClick, showPlusIcon }) => (
+function EmptyContent({ children, onClick, showPlusIcon }) {
+  return (
     <div>
       {onClick ? (
         <button
@@ -19,6 +20,7 @@ const EmptyContent = ({ children, onClick, showPlusIcon }) => (
       ) : children}
     </div>
   );
+}
 
 export default EmptyContent;
 

src/profile/forms/elements/FormControls.jsx

@@ -1,15 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, StatefulButton } from '@openedx/paragon';
+import { Button, StatefulButton } from '@edx/paragon';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
 import messages from './FormControls.messages';
 
 import { VisibilitySelect } from './Visibility';
 
-const FormControls = ({
+function FormControls({
   cancelHandler, changeHandler, visibility, visibilityId, saveState, intl,
-}) => {
+}) {
   // Eliminate error/failed state for save button
   const buttonState = saveState === 'error' ? null : saveState;
 
@@ -57,7 +57,7 @@ const FormControls = ({
       </div>
     </div>
   );
-};
+}
 
 export default injectIntl(FormControls);
 

src/profile/forms/elements/SwitchContent.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { TransitionReplace } from '@openedx/paragon';
+import { TransitionReplace } from '@edx/paragon';
 
 const onChildExit = (htmlNode) => {
   // If the leaving child has focus, take control and redirect it
@@ -22,7 +22,7 @@ const onChildExit = (htmlNode) => {
   }
 };
 
-const SwitchContent = ({ expression, cases, className }) => {
+function SwitchContent({ expression, cases, className }) {
   const getContent = (caseKey) => {
     if (cases[caseKey]) {
       if (typeof cases[caseKey] === 'string') {
@@ -48,7 +48,7 @@ const SwitchContent = ({ expression, cases, className }) => {
       {getContent(expression)}
     </TransitionReplace>
   );
-};
+}
 
 SwitchContent.propTypes = {
   expression: PropTypes.string,

src/profile/forms/elements/Visibility.jsx

@@ -7,7 +7,7 @@ import { faEyeSlash, faEye } from '@fortawesome/free-regular-svg-icons';
 
 import messages from './Visibility.messages';
 
-const Visibility = ({ to, intl }) => {
+function Visibility({ to, intl }) {
   const icon = to === 'private' ? faEyeSlash : faEye;
   const label = to === 'private'
     ? intl.formatMessage(messages['profile.visibility.who.just.me'])
@@ -18,7 +18,7 @@ const Visibility = ({ to, intl }) => {
       <FontAwesomeIcon icon={icon} /> {label}
     </span>
   );
-};
+}
 
 Visibility.propTypes = {
   to: PropTypes.oneOf(['private', 'all_users']),
@@ -30,7 +30,7 @@ Visibility.defaultProps = {
   to: 'private',
 };
 
-const VisibilitySelect = ({ intl, className, ...props }) => {
+function VisibilitySelect({ intl, className, ...props }) {
   const { value } = props;
   const icon = value === 'private' ? faEyeSlash : faEye;
 
@@ -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>
@@ -49,7 +49,7 @@ const VisibilitySelect = ({ intl, className, ...props }) => {
       </select>
     </span>
   );
-};
+}
 
 VisibilitySelect.propTypes = {
   id: PropTypes.string,

src/routes/AppRoutes.jsx

@@ -1,17 +0,0 @@
-import React from 'react';
-import {
-  AuthenticatedPageRoute,
-  PageWrap,
-} from '@edx/frontend-platform/react';
-import { Routes, Route } from 'react-router-dom';
-import { ProfilePage, NotFoundPage } from '../profile';
-
-const AppRoutes = () => (
-  <Routes>
-    <Route path="/u/:username" element={<AuthenticatedPageRoute><ProfilePage /></AuthenticatedPageRoute>} />
-    <Route path="/notfound" element={<PageWrap><NotFoundPage /></PageWrap>} />
-    <Route path="*" element={<PageWrap><NotFoundPage /></PageWrap>} />
-  </Routes>
-);
-
-export default AppRoutes;

src/routes/routes.test.jsx

@@ -1,63 +0,0 @@
-import React from 'react';
-import { AppContext } from '@edx/frontend-platform/react';
-import { getConfig } from '@edx/frontend-platform';
-import { MemoryRouter as Router } from 'react-router-dom';
-import { render, screen } from '@testing-library/react';
-import { getLoginRedirectUrl } from '@edx/frontend-platform/auth';
-import AppRoutes from './AppRoutes';
-
-jest.mock('@edx/frontend-platform/analytics');
-
-jest.mock('@edx/frontend-platform/auth', () => ({
-  getLoginRedirectUrl: jest.fn(),
-}));
-
-jest.mock('../profile', () => ({
-  ProfilePage: () => (<div>Profile page</div>),
-  NotFoundPage: () => (<div>Not found page</div>),
-}));
-
-const RoutesWithProvider = (context, path) => (
-  <AppContext.Provider value={context}>
-    <Router initialEntries={[`${path}`]}>
-      <AppRoutes />
-    </Router>
-  </AppContext.Provider>
-);
-
-const unauthenticatedUser = {
-  authenticatedUser: null,
-  config: getConfig(),
-};
-
-describe('routes', () => {
-  test('Profile page should redirect for unauthenticated users', () => {
-    render(
-      RoutesWithProvider(unauthenticatedUser, '/u/edx'),
-    );
-    expect(getLoginRedirectUrl).toHaveBeenCalled();
-  });
-
-  test('Profile page should be accessible for authenticated users', () => {
-    render(
-      RoutesWithProvider(
-        {
-          authenticatedUser: {
-            username: 'edx',
-            email: 'edx@example.com',
-          },
-          config: getConfig(),
-        },
-        '/u/edx',
-      ),
-    );
-    expect(screen.getByText('Profile page')).toBeTruthy();
-  });
-
-  test('should show NotFound page for a bad route', () => {
-    render(
-      RoutesWithProvider(unauthenticatedUser, '/nonMatchingRoute'),
-    );
-    expect(screen.getByText('Not found page')).toBeTruthy();
-  });
-});

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 'enzyme-adapter-react-16';
+
+Enzyme.configure({ adapter: new Adapter() });

src/utils/hoc.jsx

@@ -1,10 +0,0 @@
-import React from 'react';
-
-import { useParams } from 'react-router-dom';
-
-const withParams = (WrappedComponent) => {
-  const WithParamsComponent = (props) => <WrappedComponent params={useParams()} {...props} />;
-  return WithParamsComponent;
-};
-
-export default withParams;