@openedx/frontend-app-authn 1.0.0-alpha.0 → 1.0.0-alpha.10

package/{src → dist}/sass/_style.scss

@@ -1,5 +1,3 @@
-@use "@openedx/paragon/scss/core/core" as paragon;
-
 // Load component based styles
 @use "_base_component.scss";
 @use "_registration.scss";
@@ -42,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: var(--pgn-spacing-spacer-4) !important;
   min-width: 464px !important;
 }
 
@@ -82,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: paragon.$info-300 !important;
+  color: var(--pgn-color-info-300) !important;
 
   &:hover {
-    color: paragon.$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;
@@ -105,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 paragon.$primary;
+  background-color: var(--pgn-color-white);
+  border: 1px solid var(--pgn-color-primary-base);
   width: 224px;
   height: 36px;
-  color: paragon.$primary;
+  color: var(--pgn-color-primary-base);
 
   .btn-tpa__image-icon {
     background-color: transparent;
@@ -134,8 +132,8 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
 }
 
 .btn-tpa__font-container {
-  background-color: paragon.$primary;
-  color: $white;
+  background-color: var(--pgn-color-primary-base);
+  color: var(--pgn-color-white);
   font-size: 11px;
 
   margin-left: -6px;
@@ -145,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;
 
@@ -153,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;
 
@@ -173,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;
@@ -192,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;
 
@@ -205,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);
   }
 }
 
@@ -216,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: var(--pgn-spacing-spacer-1) !important;
+  color: var(--pgn-color-gray-base) !important;
   display: inline-block;
   margin-bottom: 0.25rem;
   height: 18px;
@@ -234,7 +231,7 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
 }
 
 .invalid-feedback {
-  color: paragon.$red;
+  color: var(--pgn-color-red);
 }
 
 .full-vertical-height {
@@ -292,24 +289,24 @@ 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: paragon.$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;
@@ -318,31 +315,31 @@ select.form-control {
 
   .tooltip-inner {
     min-width: 464px !important;
-    background: $white;
+    background: var(--pgn-color-white);
     display: block;
-    color: paragon.$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 paragon.$accent-b;
+  border: 2px solid var(--pgn-color-accent-b);
 }
 
 .institutions__heading {
-  color: paragon.$primary-700;
+  color: var(--pgn-color-primary-700);
 }
 
 .logistration-button {
-  color: paragon.$gray-700;
+  color: var(--pgn-color-gray-700);
 }
 
-.logistration-button:hover {
-  color: paragon.$gray-700;
+.logistration-button:hover{
+  color: var(--pgn-color-gray-700);
   text-decoration: none;
 }
 
@@ -358,7 +355,7 @@ select.form-control {
 }
 
 .has-floating-label {
-  color: paragon.$gray-500;
+  color: var(--pgn-color-gray-500);
 }
 
 .pgn__form-control-floating-label .pgn__form-control-floating-label-content {
@@ -370,9 +367,9 @@ select.form-control {
   font-size: 0.75rem;
 }
 
-.form-group__form-field .form-control:focus~.pgn__form-control-floating-label .pgn__form-control-floating-label-content {
-  font-size: 16px;
-  color: paragon.$primary-700;
+.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);
 }
 
 .form-group__form-field .form-control:not([value='']):not(:focus)~.pgn__form-control-floating-label .pgn__form-control-floating-label-content {
@@ -450,14 +447,14 @@ select.form-control {
 }
 
 .table-striped tbody tr:nth-of-type(odd) {
-  background-color: paragon.$light-200;
+  background-color: var(--pgn-color-light-200);
 }
 
 .institutions--provider-link {
   font-weight: normal;
   font-size: 0.875rem;
   line-height: 1.5rem;
-  color: paragon.$primary-700
+  color: var(--pgn-color-primary-700)
 }
 
 .pgn__form-control-decorator-trailing {

package/dist/slots/LoginComponentSlot/index.d.ts

@@ -0,0 +1,12 @@
+export default LoginComponentSlot;
+declare function LoginComponentSlot({ institutionLogin, handleInstitutionLogin, }: {
+    institutionLogin: any;
+    handleInstitutionLogin: any;
+}): import("react/jsx-runtime").JSX.Element;
+declare namespace LoginComponentSlot {
+    namespace propTypes {
+        let institutionLogin: PropTypes.Requireable<boolean>;
+        let handleInstitutionLogin: PropTypes.Requireable<(...args: any[]) => any>;
+    }
+}
+import PropTypes from 'prop-types';

package/dist/slots/LoginComponentSlot/index.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slot } from '@openedx/frontend-base';
+import PropTypes from 'prop-types';
+import LoginPage from '../../login/LoginPage';
+const LoginComponentSlot = ({ institutionLogin, handleInstitutionLogin, }) => (_jsx(Slot, { id: "org.openedx.frontend.slot.authn.loginComponent.v1", institutionLogin: institutionLogin, handleInstitutionLogin: handleInstitutionLogin, children: _jsx(LoginPage, { institutionLogin: institutionLogin, handleInstitutionLogin: handleInstitutionLogin }) }));
+LoginComponentSlot.propTypes = {
+    institutionLogin: PropTypes.bool,
+    handleInstitutionLogin: PropTypes.func,
+};
+export default LoginComponentSlot;
+//# sourceMappingURL=index.js.map

package/dist/slots/LoginComponentSlot/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/slots/LoginComponentSlot/index.jsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,SAAS,MAAM,uBAAuB,CAAC;AAE9C,MAAM,kBAAkB,GAAG,CAAC,EAC1B,gBAAgB,EAChB,sBAAsB,GACvB,EAAE,EAAE,CAAC,CACJ,KAAC,IAAI,IACH,EAAE,EAAC,mDAAmD,EACtD,gBAAgB,EAAE,gBAAgB,EAClC,sBAAsB,EAAE,sBAAsB,YAE9C,KAAC,SAAS,IACR,gBAAgB,EAAE,gBAAgB,EAClC,sBAAsB,EAAE,sBAAsB,GAC9C,GACG,CACR,CAAC;AAEF,kBAAkB,CAAC,SAAS,GAAG;IAC7B,gBAAgB,EAAE,SAAS,CAAC,IAAI;IAChC,sBAAsB,EAAE,SAAS,CAAC,IAAI;CACvC,CAAC;AAEF,eAAe,kBAAkB,CAAC","sourcesContent":["import { Slot } from '@openedx/frontend-base';\nimport PropTypes from 'prop-types';\n\nimport LoginPage from '../../login/LoginPage';\n\nconst LoginComponentSlot = ({\n  institutionLogin,\n  handleInstitutionLogin,\n}) => (\n  <Slot\n    id=\"org.openedx.frontend.slot.authn.loginComponent.v1\"\n    institutionLogin={institutionLogin}\n    handleInstitutionLogin={handleInstitutionLogin}\n  >\n    <LoginPage\n      institutionLogin={institutionLogin}\n      handleInstitutionLogin={handleInstitutionLogin}\n    />\n  </Slot>\n);\n\nLoginComponentSlot.propTypes = {\n  institutionLogin: PropTypes.bool,\n  handleInstitutionLogin: PropTypes.func,\n};\n\nexport default LoginComponentSlot;\n"]}

package/package.json

@@ -1,14 +1,23 @@
 {
   "name": "@openedx/frontend-app-authn",
-  "version": "1.0.0-alpha.0",
+  "version": "1.0.0-alpha.10",
   "description": "Frontend authentication",
+  "engines": {
+    "node": "^24.12"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/openedx/frontend-app-authn.git"
   },
-  "main": "src/index.ts",
+  "exports": {
+    ".": "./dist/index.js",
+    "./app.scss": "./dist/app.scss"
+  },
   "files": [
-    "/src"
+    "/dist"
+  ],
+  "workspaces": [
+    "packages/*"
   ],
   "browserslist": [
     "extends @edx/browserslist-config"
@@ -17,13 +26,28 @@
     "*.css",
     "*.scss"
   ],
+  "atlasTranslations": {
+    "path": "translations/frontend-app-authn/src/i18n/messages",
+    "dependencies": [
+      "@openedx/frontend-base"
+    ]
+  },
   "scripts": {
+    "build": "make build",
+    "build:packages": "make build-packages",
+    "clean": "make clean",
+    "clean:packages": "make clean-packages",
     "dev": "PORT=1999 PUBLIC_PATH=/authn openedx dev",
+    "dev:site": "make dev-site",
+    "dev:packages": "make dev-packages",
     "i18n_extract": "openedx formatjs extract",
     "lint": "openedx lint .",
     "lint:fix": "openedx lint --fix .",
+    "prepack": "npm run clean && npm run build",
     "snapshot": "openedx test --updateSnapshot",
-    "test": "openedx test --coverage --passWithNoTests"
+    "test": "openedx test --coverage --passWithNoTests",
+    "watch:build": "nodemon --exec 'npm run build'",
+    "translations:pull": "openedx translations:pull"
   },
   "author": "Open edX",
   "license": "AGPL-3.0",
@@ -41,7 +65,6 @@
     "@fortawesome/free-brands-svg-icons": "^6.7.2",
     "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@fortawesome/react-fontawesome": "^0.2.2",
-    "@redux-devtools/extension": "^3.3.0",
     "classnames": "^2.5.1",
     "fastest-levenshtein": "^1.0.16",
     "form-urlencoded": "^6.1.5",
@@ -51,29 +74,28 @@
     "react-helmet": "^6.1.0",
     "react-loading-skeleton": "^3.5.0",
     "react-responsive": "^8.2.0",
-    "redux-logger": "^3.0.6",
-    "redux-mock-store": "^1.5.5",
-    "redux-saga": "^1.3.0",
-    "redux-thunk": "^2.4.2",
-    "reselect": "^5.1.1",
     "universal-cookie": "^8.0.1"
   },
   "devDependencies": {
     "@edx/browserslist-config": "^1.5.0",
     "@testing-library/react": "^16.3.0",
+    "@types/jest": "^29.5.14",
     "babel-plugin-formatjs": "10.5.38",
     "eslint-plugin-import": "2.31.0",
     "jest": "^29.7.0",
-    "react-test-renderer": "^18.3.1"
+    "nodemon": "^3.1.14",
+    "react-test-renderer": "^18.3.1",
+    "ts-jest": "^29.4.0",
+    "tsc-alias": "^1.8.16",
+    "turbo": "^2.8.16"
   },
   "peerDependencies": {
-    "@openedx/frontend-base": "^1.0.0-alpha.1",
-    "@openedx/paragon": "^22",
+    "@openedx/frontend-base": "^1.0.0-alpha || 0.0.0-dev",
+    "@openedx/paragon": "^23",
+    "@tanstack/react-query": "^5",
     "react": "^18",
     "react-dom": "^18",
-    "react-redux": "^8",
     "react-router": "^6",
-    "react-router-dom": "^6",
-    "redux": "^4"
+    "react-router-dom": "^6"
   }
 }

package/src/Main.tsx

@@ -1,23 +0,0 @@
-import { Provider as ReduxProvider } from 'react-redux';
-import { Outlet } from 'react-router-dom';
-import { CurrentAppProvider } from '@openedx/frontend-base';
-
-import { appId } from './constants';
-import {
-  registerIcons,
-} from './common-components';
-import configureStore from './data/configureStore';
-
-import './sass/_style.scss';
-
-registerIcons();
-
-const Main = () => (
-  <CurrentAppProvider appId={appId}>
-    <ReduxProvider store={configureStore()}>
-      <Outlet />
-    </ReduxProvider>
-  </CurrentAppProvider>
-);
-
-export default Main;

package/src/__mocks__/file.js

@@ -1 +0,0 @@
-module.exports = 'FileMock';

package/src/__mocks__/svg.js

@@ -1 +0,0 @@
-module.exports = 'SvgURL';

package/src/app.scss

@@ -1,6 +0,0 @@
-@use "@edx/brand/paragon/fonts";
-@use "@edx/brand/paragon/variables";
-@use "@openedx/paragon/scss/core/core";
-@use "@edx/brand/paragon/overrides";
-
-@use "sass/style";

package/src/app.ts

@@ -1,43 +0,0 @@
-import { App } from '@openedx/frontend-base';
-import { appId } from './constants';
-import routes from './routes';
-import messages from './i18n';
-
-const app: App = {
-  appId,
-  routes,
-  messages,
-  config: {
-    ACTIVATION_EMAIL_SUPPORT_LINK: null,
-    ALLOW_PUBLIC_ACCOUNT_CREATION: true,
-    AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK: null,
-    BANNER_IMAGE_EXTRA_SMALL: '',
-    BANNER_IMAGE_LARGE: '',
-    BANNER_IMAGE_MEDIUM: '',
-    BANNER_IMAGE_SMALL: '',
-    DISABLE_ENTERPRISE_LOGIN: true,
-    ENABLE_AUTO_GENERATED_USERNAME: false,
-    ENABLE_DYNAMIC_REGISTRATION_FIELDS: false,
-    ENABLE_IMAGE_LAYOUT: false,
-    ENABLE_PROGRESSIVE_PROFILING_ON_AUTHN: false,
-    FAVICON_URL: 'https://edx-cdn.org/v3/default/favicon.ico',
-    INFO_EMAIL: '',
-    LOGIN_ISSUE_SUPPORT_LINK: null,
-    LOGO_TRADEMARK_URL: 'https://edx-cdn.org/v3/default/logo-trademark.svg',
-    LOGO_URL: 'https://edx-cdn.org/v3/default/logo.svg',
-    LOGO_WHITE_URL: 'https://edx-cdn.org/v3/default/logo-white.svg',
-    MARKETING_EMAILS_OPT_IN: '',
-    MARKETING_SITE_BASE_URL: 'http://local.openedx.io',
-    PASSWORD_RESET_SUPPORT_LINK: null,
-    POST_REGISTRATION_REDIRECT_URL: '',
-    PRIVACY_POLICY: null,
-    SEARCH_CATALOG_URL: null,
-    SESSION_COOKIE_DOMAIN: 'local.openedx.io',
-    SHOW_REGISTRATION_LINKS: true,
-    TOS_AND_HONOR_CODE: null,
-    TOS_LINK: null,
-    USER_RETENTION_COOKIE_NAME: '',
-  },
-};
-
-export default app;

package/src/base-container/components/default-layout/DefaultLayout.test.jsx

@@ -1,48 +0,0 @@
-import { IntlProvider } from '@openedx/frontend-base';
-import { render, screen } from '@testing-library/react';
-
-import { DefaultLargeLayout, DefaultMediumLayout, DefaultSmallLayout } from './index';
-
-describe('Default Layout tests', () => {
-  it('should display the form passed as a child in SmallScreenLayout', () => {
-    render(
-      <IntlProvider locale="en">
-        <div>
-          <DefaultSmallLayout />
-          <form aria-label="form">
-            <input type="text" />
-          </form>
-        </div>
-      </IntlProvider>,
-    );
-    expect(screen.getByRole('form')).toBeDefined();
-  });
-
-  it('should display the form passed as a child in MediumScreenLayout', () => {
-    render(
-      <IntlProvider locale="en">
-        <div>
-          <DefaultMediumLayout />
-          <form aria-label="form">
-            <input type="text" />
-          </form>
-        </div>
-      </IntlProvider>,
-    );
-    expect(screen.getByRole('form')).toBeDefined();
-  });
-
-  it('should display the form passed as a child in LargeScreenLayout', () => {
-    render(
-      <IntlProvider locale="en">
-        <div>
-          <DefaultLargeLayout />
-          <form aria-label="form">
-            <input type="text" />
-          </form>
-        </div>
-      </IntlProvider>,
-    );
-    expect(screen.getByRole('form')).toBeDefined();
-  });
-});

package/src/base-container/components/default-layout/LargeLayout.jsx

@@ -1,42 +0,0 @@
-import { useAppConfig, getSiteConfig, useIntl } from '@openedx/frontend-base';
-import { Hyperlink, Image } from '@openedx/paragon';
-import classNames from 'classnames';
-
-import messages from './messages';
-
-const LargeLayout = () => {
-  const { formatMessage } = useIntl();
-
-  return (
-    <div className="w-50 d-flex">
-      <div className="col-md-9 bg-primary-400">
-        <Hyperlink destination={useAppConfig().MARKETING_SITE_BASE_URL}>
-          <Image className="logo position-absolute" alt={getSiteConfig().siteName} src={useAppConfig().LOGO_WHITE_URL} />
-        </Hyperlink>
-        <div className="min-vh-100 d-flex align-items-center">
-          <div className={classNames({ 'large-yellow-line mr-n4.5': getSiteConfig().siteName === 'edX' })} />
-          <h1
-            className={classNames(
-              'display-2 text-white mw-xs',
-              { 'ml-6': getSiteConfig().siteName !== 'edX' },
-            )}
-          >
-            {formatMessage(messages['start.learning'])}
-            <div className="text-accent-a">
-              {formatMessage(messages['with.site.name'], { siteName: getSiteConfig().siteName })}
-            </div>
-          </h1>
-        </div>
-      </div>
-      <div className="col-md-3 bg-white p-0">
-        <svg className="ml-n1 w-100 h-100 large-screen-svg-primary" preserveAspectRatio="xMaxYMin meet">
-          <g transform="skewX(171.6)">
-            <rect x="0" y="0" height="100%" width="100%" />
-          </g>
-        </svg>
-      </div>
-    </div>
-  );
-};
-
-export default LargeLayout;

package/src/base-container/components/default-layout/MediumLayout.jsx

@@ -1,49 +0,0 @@
-import { useAppConfig, getSiteConfig, useIntl } from '@openedx/frontend-base';
-import { Hyperlink, Image } from '@openedx/paragon';
-import classNames from 'classnames';
-
-import messages from './messages';
-
-const MediumLayout = () => {
-  const { formatMessage } = useIntl();
-
-  return (
-    <>
-      <div className="w-100 medium-screen-top-stripe" />
-      <div className="w-100 p-0 mb-3 d-flex">
-        <div className="col-md-10 bg-primary-400">
-          <Hyperlink destination={useAppConfig().MARKETING_SITE_BASE_URL}>
-            <Image alt={getSiteConfig().siteName} className="logo" src={useAppConfig().LOGO_WHITE_URL} />
-          </Hyperlink>
-          <div className="d-flex align-items-center justify-content-center mb-4 ">
-            <div className={classNames({ 'mt-1 medium-yellow-line': getSiteConfig().siteName === 'edX' })} />
-            <div>
-              <h1
-                className={classNames(
-                  'display-1 text-white mt-5 mb-5 mr-2 main-heading',
-                  { 'ml-4.5': getSiteConfig().siteName !== 'edX' },
-                )}
-              >
-                <span>
-                  {formatMessage(messages['start.learning'])}{' '}
-                  <span className="text-accent-a d-inline-block">
-                    {formatMessage(messages['with.site.name'], { siteName: getSiteConfig().siteName })}
-                  </span>
-                </span>
-              </h1>
-            </div>
-          </div>
-        </div>
-        <div className="col-md-2 bg-white p-0">
-          <svg className="w-100 h-100 medium-screen-svg-primary" preserveAspectRatio="xMaxYMin meet">
-            <g transform="skewX(168)">
-              <rect x="0" y="0" height="100%" width="100%" />
-            </g>
-          </svg>
-        </div>
-      </div>
-    </>
-  );
-};
-
-export default MediumLayout;

package/src/base-container/components/default-layout/SmallLayout.jsx

@@ -1,37 +0,0 @@
-import { useAppConfig, getSiteConfig, useIntl } from '@openedx/frontend-base';
-import { Hyperlink, Image } from '@openedx/paragon';
-import classNames from 'classnames';
-
-import messages from './messages';
-
-const SmallLayout = () => {
-  const { formatMessage } = useIntl();
-
-  return (
-    <span className="bg-primary-400 w-100">
-      <div className="col-md-12 small-screen-top-stripe" />
-      <div>
-        <Hyperlink destination={useAppConfig().MARKETING_SITE_BASE_URL}>
-          <Image className="logo-small" alt={getSiteConfig().siteName} src={useAppConfig().LOGO_WHITE_URL} />
-        </Hyperlink>
-        <div className="d-flex align-items-center m-3.5">
-          <div className={classNames({ 'small-yellow-line mr-n2.5': getSiteConfig().siteName === 'edX' })} />
-          <h1
-            className={classNames(
-              'text-white mt-3.5 mb-3.5',
-            )}
-          >
-            <span>
-              {formatMessage(messages['start.learning'])}{' '}
-              <span className="text-accent-a d-inline-block">
-                {formatMessage(messages['with.site.name'], { siteName: getSiteConfig().siteName })}
-              </span>
-            </span>
-          </h1>
-        </div>
-      </div>
-    </span>
-  );
-};
-
-export default SmallLayout;

package/src/base-container/components/default-layout/messages.js

@@ -1,16 +0,0 @@
-import { defineMessages } from '@openedx/frontend-base';
-
-const messages = defineMessages({
-  'start.learning': {
-    id: 'start.learning',
-    defaultMessage: 'Start learning',
-    description: 'Header text for logistration MFE pages',
-  },
-  'with.site.name': {
-    id: 'with.site.name',
-    defaultMessage: 'with {siteName}',
-    description: 'Header text with site name for logistration MFE pages',
-  },
-});
-
-export default messages;