Revert "feat: implemented restricted countires"

This reverts commit ffe306b60f.

.env

@@ -41,5 +41,3 @@ BANNER_IMAGE_EXTRA_SMALL=''
 # ***** Miscellaneous *****
 APP_ID=''
 MFE_CONFIG_API_URL=''
-# Fallback in local style files
-PARAGON_THEME_URLS={}

.env.development

@@ -41,5 +41,3 @@ APP_ID=''
 MFE_CONFIG_API_URL=''
 ZENDESK_KEY=''
 ZENDESK_LOGO_URL=''
-# Fallback in local style files
-PARAGON_THEME_URLS={}

.env.test

@@ -18,4 +18,3 @@ SEGMENT_KEY=''
 SITE_NAME='Your Platform Name Here'
 APP_ID=''
 MFE_CONFIG_API_URL=''
-PARAGON_THEME_URLS={}

README.rst

@@ -29,13 +29,7 @@ Getting Started
 Installation
 ============
 
-`Tutor`_ is currently recommended as a development environment for your new MFE. Please refer to the `relevant tutor-mfe documentation`_ to get started using it.
-
-.. _Tutor: https://github.com/overhangio/tutor
-.. _relevant tutor-mfe documentation: https://github.com/overhangio/tutor-mfe?tab=readme-ov-file#mfe-development
-
-Devstack (Deprecated) instructions
-==================================
+This MFE is bundled with `Devstack <https://github.com/openedx/devstack>`_, see the `Getting Started <https://github.com/openedx/devstack#getting-started>`_ section for setup instructions.
 
 1. Install Devstack using the `Getting Started <https://github.com/openedx/devstack#getting-started>`_ instructions.
 
@@ -57,7 +51,7 @@ Devstack (Deprecated) instructions
 Environment Variables/Setup Notes
 =================================
 
-This MFE is configured via environment variables supplied at build time.  All micro-frontends have a shared set of required environment variables, as documented in the Open edX Developer Guide under `Required Environment Variables <https://github.com/overhangio/tutor-mfe?tab=readme-ov-file#mfe-development>`__.
+This MFE is configured via environment variables supplied at build time.  All micro-frontends have a shared set of required environment variables, as documented in the Open edX Developer Guide under `Required Environment Variables <https://edx.readthedocs.io/projects/edx-developer-docs/en/latest/developers_guide/micro_frontends_in_open_edx.html#required-environment-variables>`__.
 
 The authentication micro-frontend also requires the following additional variable:
 
@@ -148,13 +142,13 @@ Furthermore, there are several edX-specific environment variables that enable in
      - ``true`` | ``''`` (empty strings are falsy)    
 
 For more information see the document: `Micro-frontend applications in Open
-edX <https://github.com/overhangio/tutor-mfe?tab=readme-ov-file#mfe-development>`__.
+edX <https://edx.readthedocs.io/projects/edx-developer-docs/en/latest/developers_guide/micro_frontends_in_open_edx.html#required-environment-variables>`__.
 
 How To Contribute
 =================
 
 Contributions are very welcome, and strongly encouraged! We've
-put together `some documentation that describes our contribution process <https://docs.openedx.org/en/latest/developers/references/developer_guide/process/index.html>`_.
+put together `some documentation that describes our contribution process <https://edx.readthedocs.org/projects/edx-developer-guide/en/latest/process/index.html>`_.
 
 Even though they were written with edx-platform in mind, the guidelines should be followed for Open edX code in general.
 

docs/how_tos/enable_social_auth.rst

@@ -3,7 +3,7 @@ Enable Social Auth Locally
 
 Please follow the steps below to enable social auth (SSO) locally.
 
-1. Follow `Enabling Third Party Authentication <https://docs.openedx.org/en/latest/site_ops/install_configure_run_guide/configuration/tpa/index.html>`_ for backend configuration.
+1. Follow `Enabling Third Party Authentication <https://edx.readthedocs.io/projects/edx-installing-configuring-and-running/en/latest/configuration/tpa/index.html>`_ for backend configuration.
 
 2. Authn has a component for rendering Social Auth providers at frontend which goes through each provider.
 

package.json

@@ -13,12 +13,15 @@
     "build": "fedx-scripts webpack",
     "i18n_extract": "fedx-scripts formatjs extract",
     "lint": "fedx-scripts eslint --ext .js --ext .jsx .",
-    "lint:fix": "fedx-scripts eslint --fix --ext .js --ext .jsx .",
     "snapshot": "fedx-scripts jest --updateSnapshot",
     "start": "fedx-scripts webpack-dev-server --progress",
-    "dev": "PUBLIC_PATH=/authn/ MFE_CONFIG_API_URL='http://localhost:8000/api/mfe_config/v1' fedx-scripts webpack-dev-server --progress --host apps.local.openedx.io",
     "test": "fedx-scripts jest --coverage --passWithNoTests"
   },
+  "husky": {
+    "hooks": {
+      "pre-commit": "npm run lint"
+    }
+  },
   "author": "edX",
   "license": "AGPL-3.0",
   "homepage": "https://github.com/openedx/frontend-app-authn#readme",
@@ -30,32 +33,33 @@
   },
   "dependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/frontend-platform": "^8.3.1",
+    "@edx/frontend-platform": "^8.0.0",
     "@edx/openedx-atlas": "^0.6.0",
     "@fortawesome/fontawesome-svg-core": "6.7.2",
     "@fortawesome/free-brands-svg-icons": "6.7.2",
     "@fortawesome/free-solid-svg-icons": "6.7.2",
     "@fortawesome/react-fontawesome": "0.2.2",
-    "@openedx/paragon": "^23.4.2",
+    "@openedx/paragon": "^22.1.1",
     "@optimizely/react-sdk": "^2.9.1",
     "@redux-devtools/extension": "3.3.0",
-    "@testing-library/react": "^16.2.0",
+    "@testing-library/react": "^12.1.5",
+    "@testing-library/react-hooks": "^8.0.1",
     "algoliasearch": "^4.14.3",
-    "algoliasearch-helper": "^3.26.0",
+    "algoliasearch-helper": "^3.14.0",
     "classnames": "2.5.1",
-    "core-js": "3.43.0",
+    "core-js": "3.40.0",
     "fastest-levenshtein": "1.0.16",
     "form-urlencoded": "6.1.5",
     "prop-types": "15.8.1",
     "query-string": "7.1.3",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-helmet": "6.1.0",
     "react-loading-skeleton": "3.5.0",
     "react-redux": "7.2.9",
     "react-responsive": "8.2.0",
-    "react-router": "6.30.1",
-    "react-router-dom": "6.30.1",
+    "react-router": "6.29.0",
+    "react-router-dom": "6.29.0",
     "react-zendesk": "^0.1.13",
     "redux": "4.2.1",
     "redux-logger": "3.0.6",
@@ -69,13 +73,13 @@
   "devDependencies": {
     "@edx/browserslist-config": "^1.1.1",
     "@edx/reactifex": "1.1.0",
-    "@openedx/frontend-build": "^14.6.1",
-    "babel-plugin-formatjs": "10.5.39",
+    "@openedx/frontend-build": "^14.0.3",
+    "babel-plugin-formatjs": "10.5.35",
     "eslint-plugin-import": "2.31.0",
     "glob": "7.2.3",
     "history": "5.3.0",
-    "jest": "30.0.0",
-    "react-test-renderer": "^18.3.1",
-    "ts-jest": "^29.4.0"
+    "husky": "9.1.7",
+    "jest": "29.7.0",
+    "react-test-renderer": "^17.0.2"
   }
 }

src/common-components/FormGroup.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 import {
   Form, TransitionReplace,
@@ -7,9 +7,34 @@ import PropTypes from 'prop-types';
 
 const FormGroup = (props) => {
   const [hasFocus, setHasFocus] = useState(false);
+  const [inputValue, setInputValue] = useState(props.value || '');
+  const valueRef = useRef('');
+
+  useEffect(() => {
+    const input = document.getElementsByName(props.name)[0];
+    if (!input) { return undefined; }
+
+    const updateValue = () => {
+      if (input.value && input.value !== valueRef.current) {
+        valueRef.current = input.value;
+        setInputValue(input.value);
+      }
+    };
+
+    requestAnimationFrame(updateValue); // Detect autofill on page load
+
+    input.addEventListener('input', updateValue);
+    input.addEventListener('focus', updateValue);
+
+    return () => {
+      input.removeEventListener('input', updateValue);
+      input.removeEventListener('focus', updateValue);
+    };
+  }, [props.name]);
 
   const handleFocus = (e) => {
     setHasFocus(true);
+    setInputValue(inputValue || '');
     if (props.handleFocus) { props.handleFocus(e); }
   };
   const handleClick = (e) => {
@@ -19,6 +44,10 @@ const FormGroup = (props) => {
     setHasFocus(false);
     if (props.handleBlur) { props.handleBlur(e); }
   };
+  const handleChange = (e) => {
+    setInputValue(e.target.value);
+    if (props.handleChange) { props.handleChange(e); }
+  };
 
   return (
     <Form.Group controlId={props.name} className={props.className} isInvalid={props.errorMessage !== ''}>
@@ -31,11 +60,11 @@ const FormGroup = (props) => {
         autoComplete={props.autoComplete}
         spellCheck={props.spellCheck}
         name={props.name}
-        value={props.value}
+        value={inputValue}
         onFocus={handleFocus}
         onBlur={handleOnBlur}
         onClick={handleClick}
-        onChange={props.handleChange}
+        onChange={handleChange}
         controlClassName={props.borderClass}
         trailingElement={props.trailingElement}
         floatingLabel={props.floatingLabel}

src/index.jsx

@@ -1,36 +1,27 @@
 import 'core-js/stable';
 import 'regenerator-runtime/runtime';
 
-import React, { StrictMode } from 'react';
+import React from 'react';
+import ReactDOM from 'react-dom';
 
 import {
   APP_INIT_ERROR, APP_READY, initialize, mergeConfig, subscribe,
 } from '@edx/frontend-platform';
 import { ErrorPage } from '@edx/frontend-platform/react';
-import { createRoot } from 'react-dom/client';
 
 import configuration from './config';
 import messages from './i18n';
 import MainApp from './MainApp';
 
 subscribe(APP_READY, () => {
-  const root = createRoot(document.getElementById('root'));
-
-  root.render(
-    <StrictMode>
-      <MainApp />
-    </StrictMode>,
+  ReactDOM.render(
+    <MainApp />,
+    document.getElementById('root'),
   );
 });
 
 subscribe(APP_INIT_ERROR, (error) => {
-  const root = createRoot(document.getElementById('root'));
-
-  root.render(
-    <StrictMode>
-      <ErrorPage message={error.message} />
-    </StrictMode>,
-  );
+  ReactDOM.render(<ErrorPage message={error.message} />, document.getElementById('root'));
 });
 
 initialize({

src/index.scss

@@ -1,2 +1,6 @@
-@use "@openedx/paragon/styles/css/core/custom-media-breakpoints" as paragonCustomMediaBreakpoints;
+@import "~@edx/brand/paragon/fonts";
+@import "~@edx/brand/paragon/variables";
+@import "~@openedx/paragon/scss/core/core";
+@import "~@edx/brand/paragon/overrides";
+
 @import "sass/style";

src/recommendations/data/tests/hooks.test.jsx

@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react';
+import { renderHook } from '@testing-library/react-hooks';
 import algoliasearchHelper from 'algoliasearch-helper';
 
 import mockedRecommendedProducts from './mockedData';

src/register/RegistrationPage.test.jsx

@@ -618,6 +618,15 @@ describe('RegistrationPage', () => {
         ...initialState,
         register: {
           ...initialState.register,
+          registrationFormData: {
+            ...registrationFormData,
+            formFields: {
+              name: 'test',
+              username: 'test',
+              email: 'test@example.com',
+              password: 'test',
+            },
+          },
           backedUpFormData: { ...registrationFormData },
         },
         commonComponents: {

src/sass/_base_component.scss

@@ -2,19 +2,19 @@
 .layout {
   display: flex;
 
-  @media (--pgn-size-breakpoint-max-width-lg) {
+  @include media-breakpoint-down('lg') {
     flex-direction: column;
     justify-content: center;
     align-items: center;
   }
 
-  @media (--pgn-size-breakpoint-min-width-xl) {
+  @include media-breakpoint-up('xl') {
     justify-content: space-between;
   }
 }
 
 .content {
-  @media (--pgn-size-breakpoint-min-width-xl) {
+  @include media-breakpoint-up('xl') {
     display: flex;
     justify-content: center;
     width: 50vw;
@@ -47,7 +47,7 @@
   font-weight: 700;
   line-height: 1;
 
-  @media (--pgn-size-breakpoint-max-width-xl) {
+  @include media-breakpoint-down('xl') {
     font-size: 3.75rem;
   }
 
@@ -60,7 +60,7 @@
   margin-bottom: 0.5rem;
   font-weight: 700;
 
-  @media (-pgn-size-breakpoint-max-width-xl) {
+  @include media-breakpoint-down('xl') {
     font-size: 1.375rem;
     line-height: 1.75rem;
   }
@@ -72,7 +72,7 @@
 }
 
 .large-screen-left-container {
-  @media (-pgn-size-breakpoint-max-width-xl) {
+  @include media-breakpoint-down('xl') {
     flex: 0 0 25%;
     max-width: 25%;
   }
@@ -87,43 +87,43 @@
   height: 0.25rem;
   background-image: linear-gradient(
     102.02deg,
-    var(--pgn-color-brand-700),
-    var(--pgn-color-brand-700) 20%,
-    var(--pgn-color-brand-base) 20%,
+    $brand-700,
+    $brand-700 20%,
+    $brand 20%,
   );
   background-repeat: no-repeat;
 }
 
-@media (--pgn-size-breakpoint-min-width-md) and (--pgn-size-breakpoint-max-width-md) {
+@include media-breakpoint-only('md') {
   .medium-screen-top-stripe {
     display: flex;
     height: 0.5rem;
     background-image: linear-gradient(
       102.02deg,
-      var(--pgn-color-brand-700),
-      var(--pgn-color-brand-700) 10%,
-      var(--pgn-color-brand-base) 10%,
-      var(--pgn-color-brand-base) 90%,
-      var(--pgn-color-primary-700) 90%,
-      var(--pgn-color-primary-700) 100%,
+      $brand-700,
+      $brand-700 10%,
+      $brand 10%,
+      $brand 90%,
+      $primary-700 90%,
+      $primary-700 100%,
     );
     background-repeat: no-repeat;
   }
 }
 
-@media (--pgn-size-breakpoint-min-width-lg) and (--pgn-size-breakpoint-max-width-lg){
+@include media-breakpoint-only('lg') {
   .medium-screen-top-stripe {
     display: flex;
     height: 0.5rem;
     background-image: linear-gradient(
       102.02deg,
-      var(--pgn-color-brand-700) 10%,
-      var(--pgn-color-brand-base) 10%,
-      var(--pgn-color-brand-base) 65%,
-      var(--pgn-color-primary-700) 65%,
-      var(--pgn-color-primary-700) 75%,
-      var(--pgn-color-accent-a) 75%,
-      var(--pgn-color-accent-a) 75%
+      $brand-700 10%,
+      $brand 10%,
+      $brand 65%,
+      $primary-700 65%,
+      $primary-700 75%,
+      $accent-a 75%,
+      $accent-a 75%
     );
     background-repeat: no-repeat;
   }
@@ -131,20 +131,20 @@
 
 .extra-large-screen-top-stripe { display: none; }
 
-@media (--pgn-size-breakpoint-min-width-xl) {
+@include media-breakpoint-up('xl') {
  .extra-large-screen-top-stripe {
    display: flex;
    height: 0.5rem;
    background-image: linear-gradient(
      102.02deg,
-     var(--pgn-color-brand-700) 10%,
-     var(--pgn-color-brand-base) 10%,
-     var(--pgn-color-brand-base) 45%,
-     var(--pgn-color-primary-700) 45%,
-     var(--pgn-color-primary-700) 55%,
-     var(--pgn-color-accent-a) 55%,
-     var(--pgn-color-accent-a) 75%,
-     var(--pgn-color-info-200) 75%,
+     $brand-700 10%,
+     $brand 10%,
+     $brand 45%,
+     $primary-700 45%,
+     $primary-700 55%,
+     $accent-a 55%,
+     $accent-a 75%,
+     $info-200 75%,
   );
    background-repeat: no-repeat;
  }
@@ -152,24 +152,24 @@
 
 .large-screen-svg-light,
 .large-screen-svg-primary {
-  fill: var(--pgn-color-light-200);
+  fill: $light-200;
   overflow: hidden;
   position: absolute;
 }
 
 .large-screen-svg-primary {
-  fill: var(--pgn-color-primary-400);
+  fill: $primary-400;
 }
 
 .medium-screen-svg-light,
 .medium-screen-svg-primary {
-  fill: var(--pgn-color-light-200);
+  fill: $light-200;
   overflow: inherit;
   position: absolute;
 }
 
 .medium-screen-svg-primary {
-  fill: var(--pgn-color-primary-400);
+  fill: $primary-400;
 }
 
 [dir=rtl]{
@@ -184,20 +184,20 @@
 .small-yellow-line {
   width: 80px;
   height: 0;
-  border: 2px solid var(--pgn-color-accent-b);
+  border: 2px solid $accent-b;
   transform: rotate(102.02deg);
 }
 
 .medium-yellow-line {
   width: 120px;
   height: 0;
-  border: 3px solid var(--pgn-color-accent-b);
+  border: 3px solid $accent-b;
   transform: rotate(102.02deg);
 }
 
 .large-yellow-line {
   width: 240px;
   height: 0;
-  border: 3px solid var(--pgn-color-accent-b);
+  border: 3px solid $accent-b;
   transform: rotate(102.02deg);
 }

src/sass/_progressive_profiling_page.scss

@@ -11,7 +11,7 @@
     margin-bottom: 0.5rem;
     font-weight: 700;
 
-    @media (--pgn-size-breakpoint-max-width-md) {
+    @include media-breakpoint-down('md') {
       line-height: 1.5rem;
       font-size: 1.125rem;
     }

src/sass/_recommendations_card_base.scss

@@ -64,52 +64,52 @@ $header-height: 104px;
   }
 
   &.light {
-    background-color: var(--pgn-color-white);
+    background-color: $white;
 
     .title {
-      color: var(--pgn-color-black);
+      color: $black;
     }
 
     .subtitle {
-      color: var(--pgn-color-gray-700);
+      color: $gray-700;
     }
 
     .badge {
-      background-color: var(--pgn-color-light-500);
-      color: var(--pgn-color-black);
+      background-color: $light-500;
+      color: $black;
     }
 
     .footer-content {
-      color: var(--pgn-color-gray-700);
+      color: $gray-700;
     }
   }
 
   &.dark {
-    background-color: var(--pgn-color-primary-500);
+    background-color: $primary-500;
 
     .pgn__card-header-title-md {
-      color: var(--pgn-color-white);
+      color: $white;
     }
 
     .pgn__card-header-subtitle-md {
-      color: var(--pgn-color-light-200);
+      color: $light-200;
     }
 
     .title {
-      color: var(--pgn-color-white);
+      color: $white;
     }
 
     .subtitle {
-      color: var(--pgn-color-light-200);
+      color: $light-200;
     }
 
     .badge {
-      background-color: var(--pgn-color-dark-200);
-      color: var(--pgn-color-white);
+      background-color: $dark-200;
+      color: $white;
     }
 
     .footer-content {
-      color: var(--pgn-color-light-200);
+      color: $light-200;
     }
   }
 }

src/sass/_recommendations_page.scss

@@ -3,7 +3,7 @@ $card-gap: 24px;
 .recommendations-container__card-list {
   gap: $card-gap $card-gap;
 
-  @media (-pgn-size-breakpoint-max-width-sm) {
+  @include media-breakpoint-down(sm) {
     margin-bottom: 0 !important;
   }
 
@@ -11,15 +11,15 @@ $card-gap: 24px;
     flex: 0 1 100%;
     cursor: pointer;
 
-    @media (--pgn-size-breakpoint-min-width-sm) {
+    @include media-breakpoint-up(sm) {
       flex: 0 1 calc(50% - #{$card-gap - 12});
     }
 
-    @media (--pgn-size-breakpoint-min-width-md) {
+    @include media-breakpoint-up(md) {
       flex: 0 1 calc(33.333% - #{$card-gap - 8});
     }
 
-    @media (--pgn-size-breakpoint-min-width-lg) {
+    @include media-breakpoint-up(lg) {
       flex: 0 1 calc(25% - #{$card-gap - 6});
     }
   }

src/sass/_registration.scss

@@ -23,21 +23,21 @@
   }
 
   .alert-link  {
-    color: var(--pgn-color-primary-base) !important;
+    color: $primary !important;
 
     &:hover {
       text-decoration: underline;
-      color: var(--pgn-color-info-700) !important;
+      color: $info-700 !important;
     }
   }
 }
 
 .email-suggestion-alert-warning {
-  color: var(--pgn-color-info-500) !important;
+  color: $info-500 !important;
 
   &:hover {
     text-decoration: underline;
-    color: var(--pgn-color-info-700) !important;
+    color: $info-700 !important;
   }
 }
 
@@ -56,7 +56,7 @@
   line-height: 24px;
   font-size: 12px;
   font-weight: normal;
-  color: var(--pgn-color-primary-700);
+  color: $primary-700;
 }
 
 .username-suggestion--label {
@@ -99,7 +99,7 @@
   }
 }
 
-@media (--pgn-size-breakpoint-max-width-sm) {
+@media (max-width: map-get($grid-breakpoints, "sm")) {
   .username-scroll-suggested--form-field {
     width: 15rem;
   }

src/sass/_style.scss

@@ -40,7 +40,7 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
 }
 
 .main-content {
-  padding-top: calc(var(--pgn-spacing-spacer-base) * 1.5) !important;
+  @extend .pt-4;
   min-width: 464px !important;
 }
 
@@ -80,15 +80,15 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
 .alert-link {
   font-weight: normal;
   text-decoration: underline;
-  color: var(--pgn-color-info-300) !important;
+  color: $info-300 !important;
 
   &:hover {
-    color: var(--pgn-color-info-500) !important;
+    color: $info-500 !important;
   }
 }
 
 .form-control {
-  background-color: var(--pgn-color-white) !important;
+  background-color: $white !important;
   font-size: 0.875rem;
   line-height: 1.5;
   height: 2.75rem;
@@ -103,11 +103,11 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
   margin-bottom: 1rem;
   font-size: 14px;
 
-  background-color: var(--pgn-color-white);
-  border: 1px solid var(--pgn-color-primary-base);
+  background-color: $white;
+  border: 1px solid $primary;
   width: 224px;
   height: 36px;
-  color: var(--pgn-color-primary-base);
+  color: $primary;
 
   .btn-tpa__image-icon{
     background-color: transparent;
@@ -132,8 +132,8 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
 }
 
 .btn-tpa__font-container {
-  background-color: var(--pgn-color-primary-base);
-  color: var(--pgn-color-white);
+  background-color: $primary;
+  color: $white;
   font-size: 11px;
 
   margin-left: -6px;
@@ -143,7 +143,7 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
 }
 
 .btn-oa2-facebook {
-  color: var(--pgn-color-white);
+  color: $white;
   border-color: $facebook-blue;
   background-color: $facebook-blue;
 
@@ -151,12 +151,12 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
   &:focus {
     background-color: $facebook-focus-blue;
     border: 1px solid $facebook-focus-blue;
-    color: var(--pgn-color-white);
+    color: $white;
   }
 }
 
 .btn-oa2-google-oauth2 {
-  color: var(--pgn-color-white);
+  color: $white;
   border-color: $google-blue;
   background-color: $google-blue;
 
@@ -171,12 +171,12 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
   &:focus {
     background-color: $google-focus-blue;
     border: 1px solid $google-focus-blue;
-    color: var(--pgn-color-white);
+    color: $white;
   }
 }
 
 .btn-oa2-apple-id {
-  color: var(--pgn-color-white);
+  color: $white;
   border-color: $apple-black;
   background-color: $apple-black;
   font-size: 16px;
@@ -190,12 +190,12 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
   &:focus {
     background-color: $apple-focus-black;
     border: 1px solid $apple-focus-black;
-    color: var(--pgn-color-white);
+    color: $white;
   }
 }
 
 .btn-oa2-azuread-oauth2 {
-  color: var(--pgn-color-white);
+  color: $white;
   border-color: $microsoft-black;
   background-color: $microsoft-black;
 
@@ -203,7 +203,7 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
   &:focus {
     background-color: $microsoft-focus-black;
     border: 1px solid $microsoft-focus-black;
-    color: var(--pgn-color-white);
+    color: $white;
   }
 }
 
@@ -214,8 +214,9 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
 }
 
 .institute-icon {
-  margin: calc(var(--pgn-spacing-spacer-base) * 0.25) !important;
-  color: var(--pgn-color-gray-base) !important;
+  @extend .mr-1;
+  @extend .text-gray;
+
   display: inline-block;
   margin-bottom: 0.25rem;
   height: 18px;
@@ -231,7 +232,7 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
 }
 
 .invalid-feedback {
-  color: var(--pgn-color-red);
+  color: $red;
 }
 
 .full-vertical-height {
@@ -289,22 +290,22 @@ select.form-control {
 
 #password-requirement-left {
   opacity: 1;
-  font-size: var(--pgn-typography-font-size-xs) !important;
+  @extend .x-small;
   filter: drop-shadow($elevation-level-2-shadow) drop-shadow($elevation-level-2-shadow) !important;
   right: 0.2rem !important;
   .tooltip-inner {
-    background: var(--pgn-color-white);
+    background: $white;
     display: block;
-    color: var(--pgn-color-gray-500);
+    color: $gray-500;
   }
   .arrow::before {
-    border-left-color: var(--pgn-color-white);
+    border-left-color: $white;
   }
 }
 
 #password-requirement-top {
-  font-size: var(--pgn-typography-font-size-xs) !important;
-  filter: drop-shadow(var(--pgn-elevation-box-shadow-level-2)) drop-shadow(var(--pgn-elevation-box-shadow-level-2)) !important;
+  @extend .x-small;
+  filter: drop-shadow($elevation-level-2-shadow) drop-shadow($elevation-level-2-shadow) !important;
   opacity: 1;
   width: 90%;
   bottom: 10px !important;
@@ -313,30 +314,30 @@ select.form-control {
 
   .tooltip-inner {
     min-width: 464px !important;
-    background: var(--pgn-color-white);
+    background: $white;
     display: block;
-    color: var(--pgn-color-gray-500);
+    color: $gray-500;
   }
   .arrow::before {
-    border-top-color: var(--pgn-color-white);
+    border-top-color: $white;
   }
 
 }
 
 .yellow-border {
-  border: 2px solid var(--pgn-color-accent-b);
+  border: 2px solid $accent-b;
 }
 
 .institutions__heading {
-  color: var(--pgn-color-primary-700);
+  color: $primary-700;
 }
 
 .logistration-button {
-  color: var(--pgn-color-gray-700);
+  color: $gray-700;
 }
 
 .logistration-button:hover{
-  color: var(--pgn-color-gray-700);
+  color: $gray-700;
   text-decoration: none;
 }
 
@@ -351,7 +352,7 @@ select.form-control {
   width: 2.3rem;
 }
 .has-floating-label {
-  color: var(--pgn-color-gray-500);
+  color: $gray-500;
 }
 
 .pgn__form-control-floating-label .pgn__form-control-floating-label-content {
@@ -365,7 +366,7 @@ select.form-control {
 
 .form-group__form-field .form-control:focus ~ .pgn__form-control-floating-label .pgn__form-control-floating-label-content {
     font-size: 16px;
-    color: var(--pgn-color-primary-700);
+    color: $primary-700;
 }
 
 .form-group__form-field .form-control:not([value='']):not(:focus) ~
@@ -443,14 +444,14 @@ select.form-control {
 }
 
 .table-striped tbody tr:nth-of-type(odd) {
-  background-color: var(--pgn-color-light-200);
+  background-color: $light-200;
 }
 
 .institutions--provider-link {
   font-weight: normal;
   font-size: 0.875rem;
   line-height: 1.5rem;
-  color: var(--pgn-color-primary-700)
+  color: $primary-700
 }
 
 .pgn__form-control-decorator-trailing {