feat: remove usage of scss variables (#601)

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

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'])}