fix: add es-6 check

Remove usage of scss variables so that the MFE doesn't need scss variables at build-time.

.github/workflows/ci.yml

@@ -9,20 +9,13 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node: [12, 14, 16]
-        npm: [6, 8.5.0]
+        node: [16]
+        npm: [8.5.0]
         npm-test:
         - i18n_extract
-        - is-es5
         - lint
+        - is-es6
         - test
-        exclude:
-          - node: 12
-            npm: 8.5.0
-          - node: 14
-            npm: 8.5.0
-          - node: 16
-            npm: 6
     steps:
     - uses: actions/checkout@v2
     - uses: actions/setup-node@v2

.github/workflows/lockfileversion-check.yml

@@ -0,0 +1,14 @@
+#check package-lock file version
+
+name: Lockfile Version check
+
+on:
+  push:
+    branches:
+    - master
+  pull_request:
+
+jobs:
+  version-check:
+    uses: edx/.github/.github/workflows/lockfileversion-check.yml@master
+    

.nvmrc

@@ -0,0 +1 @@
+v16

Makefile

@@ -11,7 +11,7 @@ tx_url2 = https://www.transifex.com/api/2/project/edx-platform/resource/$(transi
 # This directory must match .babelrc .
 transifex_temp = ./temp/babel-plugin-react-intl
 
-NPM_TESTS=build i18n_extract lint test is-es5
+NPM_TESTS=build i18n_extract lint test is-es6
 
 .PHONY: test
 test: $(addprefix test.npm.,$(NPM_TESTS))  ## validate ci suite

package-lock.json

@@ -13,7 +13,7 @@
         "@edx/frontend-component-footer": "10.2.0",
         "@edx/frontend-component-header": "2.4.5",
         "@edx/frontend-platform": "1.15.1",
-        "@edx/paragon": "19.6.0",
+        "@edx/paragon": "19.20.0",
         "@fortawesome/fontawesome-svg-core": "1.2.36",
         "@fortawesome/free-brands-svg-icons": "5.15.4",
         "@fortawesome/free-regular-svg-icons": "5.15.4",
@@ -60,6 +60,7 @@
         "universal-cookie": "4.0.4"
       },
       "devDependencies": {
+        "@edx/browserslist-config": "1.0.0",
         "@edx/frontend-build": "9.1.1",
         "@edx/reactifex": "^1.0.3",
         "@testing-library/jest-dom": "5.15.1",
@@ -2109,6 +2110,12 @@
       "resolved": "https://registry.npmjs.org/@edx/brand-openedx/-/brand-openedx-1.1.0.tgz",
       "integrity": "sha512-ne2ZKF1r0akkt0rEzCAQAk4cTDTI2GiWCpc+T7ldQpw9X57OnUB16dKsFNe40C9uEjL5h3Ps/ZsFM5dm4cIkEQ=="
     },
+    "node_modules/@edx/browserslist-config": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@edx/browserslist-config/-/browserslist-config-1.0.0.tgz",
+      "integrity": "sha512-gLAlpz9Y5VruxqiUBTROG7PvouIxoMc6dvhvNpXUDHRN0KEke+zBj+zJ4frL9kGbkeex273nzSazbG42hNDLrg==",
+      "dev": true
+    },
     "node_modules/@edx/eslint-config": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@edx/eslint-config/-/eslint-config-2.0.0.tgz",
@@ -2433,16 +2440,15 @@
       }
     },
     "node_modules/@edx/paragon": {
-      "version": "19.6.0",
-      "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-19.6.0.tgz",
-      "integrity": "sha512-Rl2Al7vgCEEmAK9EirZZXa1mRDnH9eOp+oi2sJPPksFDtj9gJw+PiGPzmMVojHGuRzOnE8rymNtiwpCa7lZYdg==",
+      "version": "19.20.0",
+      "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-19.20.0.tgz",
+      "integrity": "sha512-RxzR0i89AWNDXjDv3gHNiqM5+jWrbwXGsboxojpOeHszItFJdmYCbF55J6q8EIlvLPts4jsjFrtoIaK9n5l9xg==",
       "dependencies": {
         "@fortawesome/fontawesome-svg-core": "^1.2.36",
-        "@fortawesome/free-solid-svg-icons": "^5.15.4",
-        "@fortawesome/react-fontawesome": "^0.1.16",
-        "@popperjs/core": "^2.11.2",
+        "@fortawesome/react-fontawesome": "^0.1.18",
+        "@popperjs/core": "^2.11.4",
         "airbnb-prop-types": "^2.12.0",
-        "bootstrap": "4.6.0",
+        "bootstrap": "^4.6.1",
         "classnames": "^2.3.1",
         "email-prop-type": "^3.0.0",
         "font-awesome": "^4.7.0",
@@ -2457,7 +2463,7 @@
         "react-table": "^7.7.0",
         "react-transition-group": "^4.4.2",
         "tabbable": "^4.0.0",
-        "uncontrollable": "7.2.1"
+        "uncontrollable": "^7.2.1"
       },
       "peerDependencies": {
         "prop-types": "^15.7.2",
@@ -2465,6 +2471,18 @@
         "react-dom": "^16.8.6"
       }
     },
+    "node_modules/@edx/paragon/node_modules/@fortawesome/react-fontawesome": {
+      "version": "0.1.18",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.18.tgz",
+      "integrity": "sha512-RwLIB4TZw0M9gvy5u+TusAA0afbwM4JQIimNH/j3ygd6aIvYPQLqXMhC9ErY26J23rDPyDZldIfPq/HpTTJ/tQ==",
+      "dependencies": {
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+        "react": ">=16.x"
+      }
+    },
     "node_modules/@edx/paragon/node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -6629,9 +6647,9 @@
       "dev": true
     },
     "node_modules/bootstrap": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.0.tgz",
-      "integrity": "sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw==",
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.1.tgz",
+      "integrity": "sha512-0dj+VgI9Ecom+rvvpNZ4MUZJz8dcX7WCX+eTID9+/8HgOkv3dsRzi8BGeZJCQU6flWQVYxwTQnEZFrmJSEO7og==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/bootstrap"
@@ -15831,6 +15849,12 @@
         "node": ">=6"
       }
     },
+    "node_modules/jquery": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
+      "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==",
+      "peer": true
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -18035,6 +18059,17 @@
         "node": ">= 8"
       }
     },
+    "node_modules/popper.js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
+      "deprecated": "You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/portfinder": {
       "version": "1.0.28",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
@@ -25636,6 +25671,12 @@
       "resolved": "https://registry.npmjs.org/@edx/brand-openedx/-/brand-openedx-1.1.0.tgz",
       "integrity": "sha512-ne2ZKF1r0akkt0rEzCAQAk4cTDTI2GiWCpc+T7ldQpw9X57OnUB16dKsFNe40C9uEjL5h3Ps/ZsFM5dm4cIkEQ=="
     },
+    "@edx/browserslist-config": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@edx/browserslist-config/-/browserslist-config-1.0.0.tgz",
+      "integrity": "sha512-gLAlpz9Y5VruxqiUBTROG7PvouIxoMc6dvhvNpXUDHRN0KEke+zBj+zJ4frL9kGbkeex273nzSazbG42hNDLrg==",
+      "dev": true
+    },
     "@edx/eslint-config": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@edx/eslint-config/-/eslint-config-2.0.0.tgz",
@@ -25853,16 +25894,15 @@
       }
     },
     "@edx/paragon": {
-      "version": "19.6.0",
-      "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-19.6.0.tgz",
-      "integrity": "sha512-Rl2Al7vgCEEmAK9EirZZXa1mRDnH9eOp+oi2sJPPksFDtj9gJw+PiGPzmMVojHGuRzOnE8rymNtiwpCa7lZYdg==",
+      "version": "19.20.0",
+      "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-19.20.0.tgz",
+      "integrity": "sha512-RxzR0i89AWNDXjDv3gHNiqM5+jWrbwXGsboxojpOeHszItFJdmYCbF55J6q8EIlvLPts4jsjFrtoIaK9n5l9xg==",
       "requires": {
         "@fortawesome/fontawesome-svg-core": "^1.2.36",
-        "@fortawesome/free-solid-svg-icons": "^5.15.4",
-        "@fortawesome/react-fontawesome": "^0.1.16",
-        "@popperjs/core": "^2.11.2",
+        "@fortawesome/react-fontawesome": "^0.1.18",
+        "@popperjs/core": "^2.11.4",
         "airbnb-prop-types": "^2.12.0",
-        "bootstrap": "4.6.0",
+        "bootstrap": "^4.6.1",
         "classnames": "^2.3.1",
         "email-prop-type": "^3.0.0",
         "font-awesome": "^4.7.0",
@@ -25877,9 +25917,17 @@
         "react-table": "^7.7.0",
         "react-transition-group": "^4.4.2",
         "tabbable": "^4.0.0",
-        "uncontrollable": "7.2.1"
+        "uncontrollable": "^7.2.1"
       },
       "dependencies": {
+        "@fortawesome/react-fontawesome": {
+          "version": "0.1.18",
+          "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.18.tgz",
+          "integrity": "sha512-RwLIB4TZw0M9gvy5u+TusAA0afbwM4JQIimNH/j3ygd6aIvYPQLqXMhC9ErY26J23rDPyDZldIfPq/HpTTJ/tQ==",
+          "requires": {
+            "prop-types": "^15.8.1"
+          }
+        },
         "prop-types": {
           "version": "15.8.1",
           "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -29178,9 +29226,9 @@
       "dev": true
     },
     "bootstrap": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.0.tgz",
-      "integrity": "sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw==",
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.1.tgz",
+      "integrity": "sha512-0dj+VgI9Ecom+rvvpNZ4MUZJz8dcX7WCX+eTID9+/8HgOkv3dsRzi8BGeZJCQU6flWQVYxwTQnEZFrmJSEO7og==",
       "requires": {}
     },
     "bowser": {
@@ -36229,6 +36277,12 @@
         }
       }
     },
+    "jquery": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
+      "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==",
+      "peer": true
+    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -37927,6 +37981,12 @@
         }
       }
     },
+    "popper.js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
+      "peer": true
+    },
     "portfinder": {
       "version": "1.0.28",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",

package.json

@@ -11,8 +11,8 @@
   "scripts": {
     "build": "fedx-scripts webpack",
     "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 .",
+    "is-es6": "es-check es6 ./dist/*.js",
     "snapshot": "fedx-scripts jest --updateSnapshot",
     "start": "fedx-scripts webpack-dev-server --progress",
     "test": "fedx-scripts jest --coverage --passWithNoTests"
@@ -25,15 +25,14 @@
     "access": "public"
   },
   "browserslist": [
-    "last 2 versions",
-    "ie 11"
+    "extends @edx/browserslist-config"
   ],
   "dependencies": {
     "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
     "@edx/frontend-component-footer": "10.2.0",
     "@edx/frontend-component-header": "2.4.5",
     "@edx/frontend-platform": "1.15.1",
-    "@edx/paragon": "19.6.0",
+    "@edx/paragon": "19.20.0",
     "@fortawesome/fontawesome-svg-core": "1.2.36",
     "@fortawesome/free-brands-svg-icons": "5.15.4",
     "@fortawesome/free-regular-svg-icons": "5.15.4",
@@ -80,6 +79,7 @@
     "universal-cookie": "4.0.4"
   },
   "devDependencies": {
+    "@edx/browserslist-config": "1.0.0",
     "@edx/frontend-build": "9.1.1",
     "@edx/reactifex": "^1.0.3",
     "@testing-library/jest-dom": "5.15.1",

src/account-settings/AccountSettingsPage.jsx

@@ -496,13 +496,13 @@ class AccountSettingsPage extends React.Component {
     const hasLinkedTPA = findIndex(this.props.tpaProviders, provider => provider.connected) >= 0;
     return (
       <>
-        <div className="account-section" id="basic-information" ref={this.navLinkRefs['#basic-information']}>
+        <div className="account-section pt-3 mb-5" id="basic-information" ref={this.navLinkRefs['#basic-information']}>
           {
             this.props.mostRecentVerifiedName
             && this.renderVerifiedNameMessage(this.props.mostRecentVerifiedName)
           }
 
-          <h2 className="section-heading">
+          <h2 className="section-heading h4 mb-3">
             {this.props.intl.formatMessage(messages['account.settings.section.account.information'])}
           </h2>
           <p>{this.props.intl.formatMessage(messages['account.settings.section.account.information.description'])}</p>
@@ -641,8 +641,8 @@ class AccountSettingsPage extends React.Component {
             )}
         </div>
 
-        <div className="account-section" id="profile-information" ref={this.navLinkRefs['#profile-information']}>
-          <h2 className="section-heading">
+        <div className="account-section pt-3 mb-5" id="profile-information" ref={this.navLinkRefs['#profile-information']}>
+          <h2 className="section-heading h4 mb-3">
             {this.props.intl.formatMessage(messages['account.settings.section.profile.information'])}
           </h2>
 
@@ -684,8 +684,8 @@ class AccountSettingsPage extends React.Component {
             )}
         </div>
         {getConfig().ENABLE_DEMOGRAPHICS_COLLECTION && this.renderDemographicsSection()}
-        <div className="account-section" id="social-media">
-          <h2 className="section-heading">
+        <div className="account-section pt-3 mb-5" id="social-media">
+          <h2 className="section-heading h4 mb-3">
             {this.props.intl.formatMessage(messages['account.settings.section.social.media'])}
           </h2>
           <p>
@@ -721,8 +721,8 @@ class AccountSettingsPage extends React.Component {
           />
         </div>
 
-        <div className="account-section" id="site-preferences" ref={this.navLinkRefs['#site-preferences']}>
-          <h2 className="section-heading">
+        <div className="account-section pt-3 mb-5" id="site-preferences" ref={this.navLinkRefs['#site-preferences']}>
+          <h2 className="section-heading h4 mb-3">
             {this.props.intl.formatMessage(messages['account.settings.section.site.preferences'])}
           </h2>
 
@@ -752,8 +752,8 @@ class AccountSettingsPage extends React.Component {
           />
         </div>
 
-        <div className="account-section" id="linked-accounts" ref={this.navLinkRefs['#linked-accounts']}>
-          <h2 className="section-heading">{this.props.intl.formatMessage(messages['account.settings.section.linked.accounts'])}</h2>
+        <div className="account-section pt-3 mb-5" id="linked-accounts" ref={this.navLinkRefs['#linked-accounts']}>
+          <h2 className="section-heading h4 mb-3">{this.props.intl.formatMessage(messages['account.settings.section.linked.accounts'])}</h2>
           <p>
             {this.props.intl.formatMessage(
               messages['account.settings.section.linked.accounts.description'],
@@ -763,7 +763,7 @@ class AccountSettingsPage extends React.Component {
           <ThirdPartyAuth />
         </div>
 
-        <div className="account-section" id="delete-account" ref={this.navLinkRefs['#delete-account']}>
+        <div className="account-section pt-3 mb-5" id="delete-account" ref={this.navLinkRefs['#delete-account']}>
           <DeleteAccount
             isVerifiedAccount={this.props.isActive}
             hasLinkedTPA={hasLinkedTPA}

src/account-settings/JumpNav.jsx

@@ -1,15 +1,20 @@
-import React from 'react';
+import { getConfig } from '@edx/frontend-platform';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { breakpoints, useWindowSize } from '@edx/paragon';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
 import { NavHashLink } from 'react-router-hash-link';
 import Scrollspy from 'react-scrollspy';
-
-import { getConfig } from '@edx/frontend-platform';
-import PropTypes from 'prop-types';
 import messages from './AccountSettingsPage.messages';
 
-function JumpNav({ intl, displayDemographicsLink }) {
+function JumpNav({
+  intl,
+  displayDemographicsLink,
+}) {
+  const stickToTop = useWindowSize().width > breakpoints.small.minWidth;
   return (
-    <div className="jump-nav">
+    <div className={classNames('jump-nav', { 'jump-nav-sm position-sticky pt-3': stickToTop })}>
       <Scrollspy
         items={[
           'basic-information',

src/account-settings/_style.scss

@@ -14,12 +14,11 @@
     display: inline-block;
   }
 
+  .jump-nav-sm {
+    top: 1rem;
+  }
+
   .jump-nav {
-    @media (min-width: map-get($grid-breakpoints, "sm")) {
-      padding-top: 1rem;
-      position: sticky;
-      top: 1rem;
-    }
 
     li {
       margin-bottom: .5rem;
@@ -30,16 +29,6 @@
     }
   }
 
-  .section-heading {
-    @extend .h4;
-    margin-bottom: map-get($spacers, 3);
-  }
-
-  .account-section {
-    // These properties together will shift the hashlink position
-    margin-bottom: map-get($spacers, 5);
-    padding-top: 1rem;
-  }
 
   .custom-switch {
     padding: 0;

src/account-settings/delete-account/DeleteAccount.jsx

@@ -72,7 +72,7 @@ export class DeleteAccount extends React.Component {
 
     return (
       <div>
-        <h2 className="section-heading">
+        <h2 className="section-heading h4 mb-3">
           {intl.formatMessage(messages['account.settings.delete.account.header'])}
         </h2>
         <p>{intl.formatMessage(messages['account.settings.delete.account.subheader'])}</p>

src/account-settings/delete-account/__snapshots__/DeleteAccount.test.jsx.snap

@@ -3,7 +3,7 @@
 exports[`DeleteAccount should match default section snapshot 1`] = `
 <div>
   <h2
-    className="section-heading"
+    className="section-heading h4 mb-3"
   >
     Delete My Account
   </h2>
@@ -52,7 +52,7 @@ exports[`DeleteAccount should match default section snapshot 1`] = `
 exports[`DeleteAccount should match unverified account section snapshot 1`] = `
 <div>
   <h2
-    className="section-heading"
+    className="section-heading h4 mb-3"
   >
     Delete My Account
   </h2>
@@ -138,7 +138,7 @@ exports[`DeleteAccount should match unverified account section snapshot 1`] = `
 exports[`DeleteAccount should match unverified account section snapshot 2`] = `
 <div>
   <h2
-    className="section-heading"
+    className="section-heading h4 mb-3"
   >
     Delete My Account
   </h2>

src/account-settings/demographics/DemographicsSection.jsx

@@ -162,8 +162,8 @@ class DemographicsSection extends React.Component {
     const showWorkStatusDescribe = this.props.formValues.demographics_work_status === OTHER;
 
     return (
-      <div className="account-section" id="demographics-information" ref={this.props.forwardRef}>
-        <h2 className="section-heading">
+      <div className="account-section pt-3 mb-5" id="demographics-information" ref={this.props.forwardRef}>
+        <h2 className="section-heading h4 mb-3">
           {this.props.intl.formatMessage(messages['account.settings.section.demographics.information'])}
         </h2>
         <p>

src/account-settings/demographics/test/__snapshots__/DemographicsSection.test.jsx.snap

@@ -2,11 +2,11 @@
 
 exports[`DemographicsSection should render 1`] = `
 <div
-  className="account-section"
+  className="account-section pt-3 mb-5"
   id="demographics-information"
 >
   <h2
-    className="section-heading"
+    className="section-heading h4 mb-3"
   >
     Optional Information
   </h2>
@@ -648,11 +648,11 @@ exports[`DemographicsSection should render 1`] = `
 
 exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
 <div
-  className="account-section"
+  className="account-section pt-3 mb-5"
   id="demographics-information"
 >
   <h2
-    className="section-heading"
+    className="section-heading h4 mb-3"
   >
     Optional Information
   </h2>
@@ -1308,11 +1308,11 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
 
 exports[`DemographicsSection should render an Alert when demographicsOptions props are empty 1`] = `
 <div
-  className="account-section"
+  className="account-section pt-3 mb-5"
   id="demographics-information"
 >
   <h2
-    className="section-heading"
+    className="section-heading h4 mb-3"
   >
     Optional Information
   </h2>
@@ -1381,11 +1381,11 @@ exports[`DemographicsSection should render an Alert when demographicsOptions pro
 
 exports[`DemographicsSection should render ethnicity correctly when multiple options are selected 1`] = `
 <div
-  className="account-section"
+  className="account-section pt-3 mb-5"
   id="demographics-information"
 >
   <h2
-    className="section-heading"
+    className="section-heading h4 mb-3"
   >
     Optional Information
   </h2>
@@ -2020,11 +2020,11 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
 
 exports[`DemographicsSection should render ethnicity text correctly 1`] = `
 <div
-  className="account-section"
+  className="account-section pt-3 mb-5"
   id="demographics-information"
 >
   <h2
-    className="section-heading"
+    className="section-heading h4 mb-3"
   >
     Optional Information
   </h2>
@@ -2659,11 +2659,11 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
 
 exports[`DemographicsSection should set user input correctly when user provides answers to work_status question 1`] = `
 <div
-  className="account-section"
+  className="account-section pt-3 mb-5"
   id="demographics-information"
 >
   <h2
-    className="section-heading"
+    className="section-heading h4 mb-3"
   >
     Optional Information
   </h2>
@@ -3305,11 +3305,11 @@ exports[`DemographicsSection should set user input correctly when user provides
 
 exports[`DemographicsSection should set user input correctly when user provides gender self-description 1`] = `
 <div
-  className="account-section"
+  className="account-section pt-3 mb-5"
   id="demographics-information"
 >
   <h2
-    className="section-heading"
+    className="section-heading h4 mb-3"
   >
     Optional Information
   </h2>

src/account-settings/test/__snapshots__/JumpNav.test.jsx.snap

@@ -2,7 +2,7 @@
 
 exports[`JumpNav should not render Optional Information link 1`] = `
 <div
-  className="jump-nav"
+  className="jump-nav jump-nav-sm position-sticky pt-3"
 >
   <ul
     className="list-unstyled"
@@ -92,7 +92,7 @@ exports[`JumpNav should not render Optional Information link 1`] = `
 
 exports[`JumpNav should render Optional Information link 1`] = `
 <div
-  className="jump-nav"
+  className="jump-nav jump-nav-sm position-sticky pt-3"
 >
   <ul
     className="list-unstyled"

src/id-verification/_id-verification.scss

@@ -4,7 +4,8 @@
       max-width: 100%;
     }
     .card.accent {
-      border-top: solid 4px theme-color('warning');
+      border-top-width: 4px;
+      border-top-style: solid;
     }
     .image-preview {
       margin-bottom: 1rem;

src/id-verification/panels/IdContextPanel.jsx

@@ -17,7 +17,7 @@ function IdContextPanel(props) {
       title={props.intl.formatMessage(messages['id.verification.id.tips.title'])}
     >
       <p>{props.intl.formatMessage(messages['id.verification.id.tips.description'])}</p>
-      <div className="card mb-4 shadow accent">
+      <div className="card mb-4 shadow accent border-warning">
         <div className="card-body">
           <h6>
             {props.intl.formatMessage(messages['id.verification.photo.tips.list.title'])}

src/id-verification/panels/PortraitPhotoContextPanel.jsx

@@ -18,7 +18,7 @@ function PortraitPhotoContextPanel(props) {
       <p>
         {props.intl.formatMessage(messages['id.verification.photo.tips.description'])}
       </p>
-      <div className="card mb-4 shadow accent">
+      <div className="card mb-4 shadow accent border-warning">
         <div className="card-body">
           <h6>
             {props.intl.formatMessage(messages['id.verification.photo.tips.list.title'])}

src/id-verification/panels/ReviewRequirementsPanel.jsx

@@ -61,7 +61,7 @@ function ReviewRequirementsPanel(props) {
       <p>
         {props.intl.formatMessage(messages['id.verification.requirements.description'])}
       </p>
-      <div className="card mb-4 shadow accent">
+      <div className="card mb-4 shadow accent border-warning">
         <div className="card-body">
           <h6 aria-level="3">
             {props.intl.formatMessage(messages['id.verification.requirements.card.device.title'])}
@@ -78,7 +78,7 @@ function ReviewRequirementsPanel(props) {
           </p>
         </div>
       </div>
-      <div className="card mb-4 shadow accent">
+      <div className="card mb-4 shadow accent border-warning">
         <div className="card-body">
           <h6 aria-level="3">
             {props.intl.formatMessage(messages['id.verification.requirements.card.id.title'])}