fix: let composing site own shell and brand CSS

package.json

@@ -7,8 +7,7 @@
     "url": "git+https://github.com/openedx/frontend-app-learner-dashboard.git"
   },
   "exports": {
-    ".": "./dist/index.js",
-    "./app.scss": "./dist/app.scss"
+    ".": "./dist/index.js"
   },
   "files": [
     "/dist"
@@ -55,7 +54,6 @@
     "url": "https://github.com/openedx/frontend-app-learner-dashboard/issues"
   },
   "dependencies": {
-    "@edx/brand": "npm:@openedx/brand-openedx@^1.2.3",
     "@edx/openedx-atlas": "^0.7.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-brands-svg-icons": "^5.15.4",

site.config.dev.tsx

@@ -2,7 +2,7 @@ import { EnvironmentTypes, SiteConfig, footerApp, headerApp, shellApp } from '@o
 
 import { learnerDashboardApp } from './src';
 
-import './src/app.scss';
+import '@openedx/frontend-base/shell/style';
 
 const siteConfig: SiteConfig = {
   siteId: 'learner-dashboard-dev',

src/Main.jsx

@@ -4,7 +4,7 @@ import { appId } from './constants';
 import ContextProviders from './data/context';
 import Dashboard from './containers/Dashboard';
 
-import './app.scss';
+import './style.scss';
 
 const Main = () => (
   <CurrentAppProvider appId={appId}>

src/containers/CoursesPanel/index.scss

@@ -1,3 +1,5 @@
+@use "@openedx/paragon/styles/css/core/custom-media-breakpoints.css";
+
 .course-list-heading-container {
   display: flex;
   flex-direction: row;

src/containers/Dashboard/index.scss

@@ -1,3 +1,5 @@
+@use "@openedx/paragon/styles/css/core/custom-media-breakpoints.css";
+
 .course-list-column {
   padding: 0 var(--pgn-spacing-spacer-4);
 }

src/routes.jsx

@@ -10,7 +10,7 @@ const routes = [
       roles: [dashboardRole, homeRole]
     },
     async lazy () {
-      const module = await import('./Main');
+      const module = await import(/* webpackChunkName: "learner-dashboard-main" */ './Main');
       return { Component: module.default };
     },
   }

src/app.scss → src/style.scss

@@ -1,5 +1,3 @@
-@use "@openedx/frontend-base/shell/app.scss";
-
 $fa-font-path: "~font-awesome/fonts";
 @import "~font-awesome/scss/font-awesome";
 

src/widgets/LearnerDashboardHeader/MasqueradeBar/index.scss

@@ -1,3 +1,5 @@
+@use "@openedx/paragon/styles/css/core/custom-media-breakpoints.css";
+
 .masquerade-bar {
   display: flex;
   align-items: flex-start;