Andal.LND/frontend-app-authn
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore: sync 2u-main with master (#1520)

Browse Source 
* fix(deps): update dependency @edx/frontend-platform to v8.3.2 (#1454)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update dependency babel-plugin-formatjs to v10.5.36 (#1455)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(deps): update dependency @edx/frontend-platform to v8.3.3 (#1456)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(deps): update dependency algoliasearch-helper to v3.24.3 (#1457)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update dependency @openedx/frontend-build to v14.3.3 (#1459)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(deps): update dependency @openedx/paragon to v22.16.1 (#1460)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update `@openedx` dependencies to versions that support React 18 (#1458)

* docs: Update migrated edx.rtd links to docs.openedx.org

* docs: Add instructions on using Tutor for development

* chore(deps): update dependency babel-plugin-formatjs to v10.5.37 (#1461)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(deps): update dependency @openedx/paragon to v22.16.2 (#1462)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update dependency @openedx/frontend-build to v14.4.1 (#1464)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix: properly set background color for floating labels (#1468)

* fix(deps): update dependency @edx/frontend-platform to v8.3.4 (#1471)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* feat: upgrade to react 18 (#1466)

* chore(deps): update dependency @openedx/frontend-build to v14.5.0 (#1474)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore: remove husky 🪓🐶

We remove husky, which is triggering pre-push git hooks, including
running "npm lint". This is causing failures when building Docker
images, because "npm clean-install --omit=dev" automatically triggers "npm
prepare", which attemps to run "husky". But husky is not listed in the
build dependencies, only in devDependencies. As a consequence, package
installation is failing with the following error:

        14.13 > @edx/frontend-app-ora-grading@0.0.1 prepare
        14.13 > husky install
        14.13
        14.15 sh: 1: husky: not found

Similar to: https://github.com/openedx/frontend-app-learning/pull/1622

* chore(deps): update dependency @openedx/frontend-build to v14.6.0 (#1477)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(deps): update dependency algoliasearch-helper to v3.25.0 (#1478)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(deps): update dependency core-js to v3.42.0 (#1479)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update dependency babel-plugin-formatjs to v10.5.38 (#1480)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(deps): update dependency @edx/frontend-platform to v8.3.5 (#1481)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(deps): update dependency @edx/frontend-platform to v8.3.6 (#1482)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(deps): update dependency @edx/frontend-platform to v8.3.7 (#1484)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(deps): update react-router monorepo to v6.30.1 (#1486)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(deps): update dependency @openedx/paragon to v22.18.0 (#1487)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(deps): update dependency @openedx/paragon to v22.18.1 (#1488)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(deps): update dependency @edx/frontend-platform to v8.3.8 (#1489)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(deps): update dependency @openedx/paragon to v22.18.2 (#1490)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(deps): update dependency @openedx/paragon to v22.20.0 (#1491)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(deps): update dependency @edx/frontend-platform to v8.3.9 (#1492)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(deps): update dependency core-js to v3.43.0 (#1493)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(deps): update dependency @edx/frontend-platform to v8.4.0 (#1494)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update dependency jest to v30 (#1495)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(deps): update dependency @openedx/paragon to v22.20.1 (#1496)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update dependency babel-plugin-formatjs to v10.5.39 (#1499)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(deps): update dependency @openedx/paragon to v22.20.2 (#1500)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(deps): update dependency algoliasearch-helper to v3.26.0 (#1501)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update dependency @openedx/frontend-build to v14.6.1 (#1503)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* feat!: add design tokens support (#1504)

BREAKING CHANGE: Pre-design-tokens theming is no longer supported.

Co-authored-by: Diana Olarte <diana.olarte@edunext.co>

* chore(deps): update dependency jest to v30.0.1 (#1506)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update dependency jest to v30.0.2 (#1507)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(deps): update dependency algoliasearch to v4.25.0 (#1508)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update dependency eslint-plugin-import to v2.32.0 (#1509)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(deps): update dependency algoliasearch to v4.25.2 (#1510)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update dependency jest to v30.0.3 (#1513)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(deps): update dependency @openedx/paragon to v23.13.0 (#1514)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update dependency jest to v30.0.4 (#1516)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(deps): update dependency @openedx/paragon to v23.14.0 (#1517)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix: component destory issue after react 18 upgrade

* fix: fixed lint issue

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Brian Smith <112954497+brian-smith-tcril@users.noreply.github.com>
Co-authored-by: sarina <sarina@axim.org>
Co-authored-by: Régis Behmo <regis@behmo.com>
Co-authored-by: Adolfo R. Brandes <adolfo@axim.org>
Co-authored-by: Diana Olarte <diana.olarte@edunext.co>
Co-authored-by: eemaanamir <eemaan.amir@gmail.com>
This commit is contained in:
Awais Ansari
2025-07-09 12:05:30 +05:00
committed by GitHub
parent f3f14fb3e7
commit 2cb62ca6d4
17 changed files with 12205 additions and 3779 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.env
View File

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

2
.env.development
View File

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

1
.env.test
View File

@@ -20,3 +20,4 @@ APP_ID=''
MFE_CONFIG_API_URL=''
COHESION_WRITE_KEY=''
COHESION_SOURCE_KEY=''
PARAGON_THEME_URLS={}

14
README.rst
View File

@@ -29,7 +29,13 @@ Getting Started
Installation
============
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.
`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
==================================
1. Install Devstack using the `Getting Started <https://github.com/openedx/devstack#getting-started>`_ instructions.
@@ -51,7 +57,7 @@ This MFE is bundled with `Devstack <https://github.com/openedx/devstack>`_, see
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://edx.readthedocs.io/projects/edx-developer-docs/en/latest/developers_guide/micro_frontends_in_open_edx.html#required-environment-variables>`__.
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>`__.
The authentication micro-frontend also requires the following additional variable:
@@ -142,13 +148,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://edx.readthedocs.io/projects/edx-developer-docs/en/latest/developers_guide/micro_frontends_in_open_edx.html#required-environment-variables>`__.
edX <https://github.com/overhangio/tutor-mfe?tab=readme-ov-file#mfe-development>`__.
How To Contribute
=================
Contributions are very welcome, and strongly encouraged! We've
put together `some documentation that describes our contribution process <https://edx.readthedocs.org/projects/edx-developer-guide/en/latest/process/index.html>`_.
put together `some documentation that describes our contribution process <https://docs.openedx.org/en/latest/developers/references/developer_guide/process/index.html>`_.
Even though they were written with edx-platform in mind, the guidelines should be followed for Open edX code in general.

2
docs/how_tos/enable_social_auth.rst
View File

@@ -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://edx.readthedocs.io/projects/edx-installing-configuring-and-running/en/latest/configuration/tpa/index.html>`_ for backend configuration.
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.
2. Authn has a component for rendering Social Auth providers at frontend which goes through each provider.

15688
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

38
package.json
View File

@@ -13,15 +13,12 @@
"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",
@@ -33,35 +30,34 @@
},
"dependencies": {
"@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
"@edx/frontend-platform": "^8.0.0",
"@edx/frontend-platform": "^8.3.1",
"@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/frontend-plugin-framework": "^1.3.0",
"@openedx/paragon": "^22.16.2",
"@openedx/paragon": "^23.4.2",
"@optimizely/react-sdk": "^2.9.1",
"@redux-devtools/extension": "3.3.0",
"@testing-library/react": "^12.1.5",
"@testing-library/react-hooks": "^8.0.1",
"@testing-library/react": "^16.2.0",
"algoliasearch": "^4.14.3",
"algoliasearch-helper": "^3.14.0",
"algoliasearch-helper": "^3.26.0",
"classnames": "2.5.1",
"core-js": "3.41.0",
"core-js": "3.43.0",
"fastest-levenshtein": "1.0.16",
"form-urlencoded": "6.1.5",
"prop-types": "15.8.1",
"query-string": "7.1.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-error-boundary": "^4.0.13",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"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.0",
"react-router-dom": "6.30.0",
"react-router": "6.30.1",
"react-router-dom": "6.30.1",
"react-zendesk": "^0.1.13",
"redux": "4.2.1",
"redux-logger": "3.0.6",
@@ -75,14 +71,14 @@
"devDependencies": {
"@edx/browserslist-config": "^1.1.1",
"@edx/reactifex": "1.1.0",
"@openedx/frontend-build": "^14.4.2",
"copy-webpack-plugin": "^11.0.0",
"babel-plugin-formatjs": "10.5.35",
"eslint-plugin-import": "2.31.0",
"@openedx/frontend-build": "^14.6.1",
"babel-plugin-formatjs": "10.5.39",
"eslint-plugin-import": "2.32.0",
"glob": "7.2.3",
"history": "5.3.0",
"husky": "9.1.7",
"jest": "29.7.0",
"react-test-renderer": "^17.0.2"
"jest": "30.0.4",
"react-test-renderer": "^18.3.1",
"ts-jest": "^29.4.0"
}
}

21
src/index.jsx
View File

@@ -1,27 +1,36 @@
import 'core-js/stable';
import 'regenerator-runtime/runtime';
import React from 'react';
import ReactDOM from 'react-dom';
import React, { StrictMode } from 'react';
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, () => {
ReactDOM.render(
<MainApp />,
document.getElementById('root'),
const root = createRoot(document.getElementById('root'));
root.render(
<StrictMode>
<MainApp />
</StrictMode>,
);
});
subscribe(APP_INIT_ERROR, (error) => {
ReactDOM.render(<ErrorPage message={error.message} />, document.getElementById('root'));
const root = createRoot(document.getElementById('root'));
root.render(
<StrictMode>
<ErrorPage message={error.message} />
</StrictMode>,
);
});
initialize({

6
src/index.scss
View File

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

2
src/recommendations/data/tests/hooks.test.jsx
View File

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

3
src/register/data/optimizelyExperiment/useAutoGeneratedUsernameExperimentVariation.js
View File

@@ -1,3 +1,4 @@
/* eslint-disable consistent-return */
import { useEffect, useState } from 'react';
import {
@@ -22,7 +23,7 @@ const useAutoGeneratedUsernameExperimentVariation = (
useEffect(() => {
if (initExpVariation || registrationEmbedded || !!tpaHint || !!currentProvider
|| thirdPartyAuthApiStatus !== COMPLETE_STATE) {
return variation;
return;
}
const getVariation = () => {

80
src/sass/_base_component.scss
View File

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

2
src/sass/_progressive_profiling_page.scss
View File

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

28
src/sass/_recommendations_card_base.scss
View File

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

8
src/sass/_recommendations_page.scss
View File

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

12
src/sass/_registration.scss
View File

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

75
src/sass/_style.scss
View File

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