@opencraft/frontend-plugin-sandbox 1.2.0-alpha.2 → 1.3.0-alpha.0

package/dist/components/CatalogBanner.js

@@ -1,28 +1,23 @@
 import React from 'react';
-import { Image, Row, Stack } from '@openedx/paragon';
-import bannerBg from '../assets/banner-bg.png';
+import { Image, Row, Col } from '@openedx/paragon';
+import largeBannerBg from '../assets/desktop-openclass.jpg';
+import smallBannerBg from '../assets/mobile-openclass.jpg';
 export const CatalogBanner = () => /*#__PURE__*/React.createElement(Row, {
   direction: "horizontal",
   className: "bg-primary"
-}, /*#__PURE__*/React.createElement(Stack, {
+}, /*#__PURE__*/React.createElement(Col, {
   direction: "vertical",
-  className: "justify-content-center px-6",
-  style: {
-    maxWidth: '55rem'
-  }
+  className: "justify-content-center align-content-center px-6 col-12 col-lg-6 col-xl-5"
 }, /*#__PURE__*/React.createElement("h1", {
-  className: "display-2 text-light-100"
+  className: "intro-header text-light-100"
 }, "You\u2019re viewing a live", /*#__PURE__*/React.createElement("span", {
   className: "text-brand-500"
 }, ' Open edX® '), "demo"), /*#__PURE__*/React.createElement("p", {
-  className: "h4 text-light-100 "
-}, "OpenClass is a demo site by OpenCraft where you can explore the Open edX platform as a learner or course author.")), /*#__PURE__*/React.createElement(Stack, {
-  className: "justify-content-end",
-  style: {
-    backgroundImage: 'url(../assets/banner-bg.png)'
-  }
+  className: "text-light-100"
+}, "OpenClass is a demo site by OpenCraft where you can explore the Open edX platform as a learner or course author.")), /*#__PURE__*/React.createElement(Col, {
+  className: 'col-12 col-lg-6 col-xl-7'
 }, /*#__PURE__*/React.createElement(Image, {
-  src: bannerBg,
+  src: largeBannerBg,
   style: {
     height: '100%',
     width: '100%',
@@ -30,6 +25,15 @@ export const CatalogBanner = () => /*#__PURE__*/React.createElement(Row, {
     objectFit: 'contain',
     objectPosition: 'right top'
   },
+  className: 'd-none d-xl-block',
+  alt: "illustration of a workspace with a computer screen displaying charts and graphs, accompanied by a desk lamp, coffee cup, and potted plant"
+}), /*#__PURE__*/React.createElement(Image, {
+  src: smallBannerBg,
+  style: {
+    width: '100%',
+    objectFit: 'contain'
+  },
+  className: 'd-block d-xl-none',
   alt: "illustration of a workspace with a computer screen displaying charts and graphs, accompanied by a desk lamp, coffee cup, and potted plant"
 })));
 //# sourceMappingURL=CatalogBanner.js.map

package/dist/components/CatalogBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"CatalogBanner.js","names":["React","Image","Row","Stack","bannerBg","CatalogBanner","createElement","direction","className","style","maxWidth","backgroundImage","src","height","width","maxHeight","objectFit","objectPosition","alt"],"sources":["../../src/components/CatalogBanner.tsx"],"sourcesContent":["import React from 'react';\nimport { Image, Row, Stack } from '@openedx/paragon';\nimport bannerBg from '../assets/banner-bg.png';\n\nexport const CatalogBanner = () => (\n  <Row\n    direction=\"horizontal\"\n    className=\"bg-primary\"\n  >\n    <Stack\n      direction=\"vertical\"\n      className=\"justify-content-center px-6\"\n      style={{ maxWidth: '55rem' }}\n    >\n      <h1 className=\"display-2 text-light-100\">\n        You’re viewing a live\n        <span className=\"text-brand-500\">\n          {' Open edX® '}\n        </span>\n        demo\n      </h1>\n      <p className=\"h4 text-light-100 \">\n        OpenClass is a demo site by OpenCraft where you can explore the\n        Open edX platform as a learner or course author.\n      </p>\n    </Stack>\n    <Stack\n      className=\"justify-content-end\"\n      style={{\n        backgroundImage: 'url(../assets/banner-bg.png)',\n      }}\n    >\n      <Image\n        src={bannerBg}\n        style={{\n          height: '100%',\n          width: '100%',\n          maxHeight: '550px',\n          objectFit: 'contain',\n          objectPosition: 'right top',\n        }}\n        alt=\"illustration of a workspace with a computer screen displaying charts and graphs, accompanied by a desk lamp, coffee cup, and potted plant\"\n      />\n    </Stack>\n  </Row>\n);\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,KAAK,EAAEC,GAAG,EAAEC,KAAK,QAAQ,kBAAkB;AACpD,OAAOC,QAAQ,MAAM,yBAAyB;AAE9C,OAAO,MAAMC,aAAa,GAAGA,CAAA,kBAC3BL,KAAA,CAAAM,aAAA,CAACJ,GAAG;EACFK,SAAS,EAAC,YAAY;EACtBC,SAAS,EAAC;AAAY,gBAEtBR,KAAA,CAAAM,aAAA,CAACH,KAAK;EACJI,SAAS,EAAC,UAAU;EACpBC,SAAS,EAAC,6BAA6B;EACvCC,KAAK,EAAE;IAAEC,QAAQ,EAAE;EAAQ;AAAE,gBAE7BV,KAAA,CAAAM,aAAA;EAAIE,SAAS,EAAC;AAA0B,GAAC,4BAEvC,eAAAR,KAAA,CAAAM,aAAA;EAAME,SAAS,EAAC;AAAgB,GAC7B,aACG,CAAC,QAEL,CAAC,eACLR,KAAA,CAAAM,aAAA;EAAGE,SAAS,EAAC;AAAoB,GAAC,kHAG/B,CACE,CAAC,eACRR,KAAA,CAAAM,aAAA,CAACH,KAAK;EACJK,SAAS,EAAC,qBAAqB;EAC/BC,KAAK,EAAE;IACLE,eAAe,EAAE;EACnB;AAAE,gBAEFX,KAAA,CAAAM,aAAA,CAACL,KAAK;EACJW,GAAG,EAAER,QAAS;EACdK,KAAK,EAAE;IACLI,MAAM,EAAE,MAAM;IACdC,KAAK,EAAE,MAAM;IACbC,SAAS,EAAE,OAAO;IAClBC,SAAS,EAAE,SAAS;IACpBC,cAAc,EAAE;EAClB,CAAE;EACFC,GAAG,EAAC;AAA2I,CAChJ,CACI,CACJ,CACN","ignoreList":[]}
+{"version":3,"file":"CatalogBanner.js","names":["React","Image","Row","Col","largeBannerBg","smallBannerBg","CatalogBanner","createElement","direction","className","src","style","height","width","maxHeight","objectFit","objectPosition","alt"],"sources":["../../src/components/CatalogBanner.tsx"],"sourcesContent":["import React from 'react';\nimport { Image, Row, Col } from '@openedx/paragon';\nimport largeBannerBg from '../assets/desktop-openclass.jpg';\nimport smallBannerBg from '../assets/mobile-openclass.jpg';\n\nexport const CatalogBanner = () => (\n  <Row\n    direction=\"horizontal\"\n    className=\"bg-primary\"\n  >\n    <Col\n      direction=\"vertical\"\n      className=\"justify-content-center align-content-center px-6 col-12 col-lg-6 col-xl-5\"\n    >\n      <h1 className=\"intro-header text-light-100\">\n        You’re viewing a live\n        <span className=\"text-brand-500\">\n          {' Open edX® '}\n        </span>\n        demo\n      </h1>\n      <p className=\"text-light-100\">\n        OpenClass is a demo site by OpenCraft where you can explore the\n        Open edX platform as a learner or course author.\n      </p>\n    </Col>\n    <Col className={'col-12 col-lg-6 col-xl-7'}>\n      <Image\n        src={largeBannerBg}\n        style={{\n          height: '100%',\n          width: '100%',\n          maxHeight: '550px',\n          objectFit: 'contain',\n          objectPosition: 'right top',\n        }}\n        className={'d-none d-xl-block'}\n        alt=\"illustration of a workspace with a computer screen displaying charts and graphs, accompanied by a desk lamp, coffee cup, and potted plant\"\n      />\n      <Image\n        src={smallBannerBg}\n        style={{\n            width: '100%',\n            objectFit: 'contain',\n        }}\n        className={'d-block d-xl-none'}\n        alt=\"illustration of a workspace with a computer screen displaying charts and graphs, accompanied by a desk lamp, coffee cup, and potted plant\"\n    />\n    </Col>\n  </Row>\n);\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,KAAK,EAAEC,GAAG,EAAEC,GAAG,QAAQ,kBAAkB;AAClD,OAAOC,aAAa,MAAM,iCAAiC;AAC3D,OAAOC,aAAa,MAAM,gCAAgC;AAE1D,OAAO,MAAMC,aAAa,GAAGA,CAAA,kBAC3BN,KAAA,CAAAO,aAAA,CAACL,GAAG;EACFM,SAAS,EAAC,YAAY;EACtBC,SAAS,EAAC;AAAY,gBAEtBT,KAAA,CAAAO,aAAA,CAACJ,GAAG;EACFK,SAAS,EAAC,UAAU;EACpBC,SAAS,EAAC;AAA2E,gBAErFT,KAAA,CAAAO,aAAA;EAAIE,SAAS,EAAC;AAA6B,GAAC,4BAE1C,eAAAT,KAAA,CAAAO,aAAA;EAAME,SAAS,EAAC;AAAgB,GAC7B,aACG,CAAC,QAEL,CAAC,eACLT,KAAA,CAAAO,aAAA;EAAGE,SAAS,EAAC;AAAgB,GAAC,kHAG3B,CACA,CAAC,eACNT,KAAA,CAAAO,aAAA,CAACJ,GAAG;EAACM,SAAS,EAAE;AAA2B,gBACzCT,KAAA,CAAAO,aAAA,CAACN,KAAK;EACJS,GAAG,EAAEN,aAAc;EACnBO,KAAK,EAAE;IACLC,MAAM,EAAE,MAAM;IACdC,KAAK,EAAE,MAAM;IACbC,SAAS,EAAE,OAAO;IAClBC,SAAS,EAAE,SAAS;IACpBC,cAAc,EAAE;EAClB,CAAE;EACFP,SAAS,EAAE,mBAAoB;EAC/BQ,GAAG,EAAC;AAA2I,CAChJ,CAAC,eACFjB,KAAA,CAAAO,aAAA,CAACN,KAAK;EACJS,GAAG,EAAEL,aAAc;EACnBM,KAAK,EAAE;IACHE,KAAK,EAAE,MAAM;IACbE,SAAS,EAAE;EACf,CAAE;EACFN,SAAS,EAAE,mBAAoB;EAC/BQ,GAAG,EAAC;AAA2I,CAClJ,CACI,CACF,CACN","ignoreList":[]}

package/dist/index.js

@@ -18,7 +18,7 @@ export const slotSettings = {
       }
     }]
   },
-  desktop_user_menu_slot: {
+  'org.openedx.frontend.layout.header_desktop_user_menu.v1': {
     keepDefault: true,
     plugins: [{
       op: PLUGIN_OPERATIONS.Wrap,
@@ -26,7 +26,7 @@ export const slotSettings = {
       wrapper: MenuWrapper
     }]
   },
-  mobile_user_menu_slot: {
+  'org.openedx.frontend.layout.header_mobile_user_menu.v1': {
     keepDefault: true,
     plugins: [{
       op: PLUGIN_OPERATIONS.Wrap,
@@ -34,7 +34,7 @@ export const slotSettings = {
       wrapper: MenuWrapper
     }]
   },
-  footer_slot: {
+  'org.openedx.frontend.layout.footer.v1': {
     plugins: [{
       op: PLUGIN_OPERATIONS.Hide,
       widgetId: 'default_contents'

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["DIRECT_PLUGIN","PLUGIN_OPERATIONS","MenuWrapper","SandboxFooter","DropDownToggler","CatalogBanner","slotSettings","keepDefault","plugins","op","Insert","widget","id","type","RenderWidget","desktop_user_menu_slot","Wrap","widgetId","wrapper","mobile_user_menu_slot","footer_slot","Hide"],"sources":["../src/index.ts"],"sourcesContent":["import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';\nimport { MenuWrapper } from './components/MenuWrapper';\nimport { SandboxFooter } from './components/SandboxFooter';\nimport { DropDownToggler } from './components/DropDownToggler';\nimport { CatalogBanner } from './components/CatalogBanner';\n\nexport {\n  MenuWrapper, SandboxFooter, DropDownToggler, CatalogBanner,\n};\n// Example slot settings you can use in your deployment. You may be able to import these\n// for quick development usage.\nexport const slotSettings = {\n  'org.openedx.frontend.layout.header_desktop_user_menu_toggle.v1': {\n    keepDefault: false,\n    plugins: [\n      {\n        op: PLUGIN_OPERATIONS.Insert,\n        widget: {\n          id: 'custom_desktop_toggle',\n          type: DIRECT_PLUGIN,\n          RenderWidget: DropDownToggler,\n        },\n      },\n    ],\n  },\n  desktop_user_menu_slot: {\n    keepDefault: true,\n    plugins: [\n      {\n        op: PLUGIN_OPERATIONS.Wrap,\n        widgetId: 'default_contents',\n        wrapper: MenuWrapper,\n      },\n    ],\n  },\n  mobile_user_menu_slot: {\n    keepDefault: true,\n    plugins: [\n      {\n        op: PLUGIN_OPERATIONS.Wrap,\n        widgetId: 'default_contents',\n        wrapper: MenuWrapper,\n      },\n    ],\n  },\n  footer_slot: {\n    plugins: [\n      {\n        op: PLUGIN_OPERATIONS.Hide,\n        widgetId: 'default_contents',\n      },\n      {\n        op: PLUGIN_OPERATIONS.Insert,\n        widget: {\n          id: 'custom_footer',\n          type: DIRECT_PLUGIN,\n          RenderWidget: SandboxFooter,\n        },\n      },\n    ],\n  },\n  'org.openedx.frontend.catalog.home_page.banner': {\n    plugins: [\n      {\n        op: PLUGIN_OPERATIONS.Hide,\n        widgetId: 'default_contents',\n      },\n      {\n        op: PLUGIN_OPERATIONS.Insert,\n        widget: {\n          id: 'custom_catalog_banner',\n          type: DIRECT_PLUGIN,\n          RenderWidget: CatalogBanner,\n        },\n      },\n    ],\n  },\n};\n"],"mappings":"AAAA,SAASA,aAAa,EAAEC,iBAAiB,QAAQ,oCAAoC;AACrF,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAASC,aAAa,QAAQ,4BAA4B;AAE1D,SACEH,WAAW,EAAEC,aAAa,EAAEC,eAAe,EAAEC,aAAa;AAE5D;AACA;AACA,OAAO,MAAMC,YAAY,GAAG;EAC1B,gEAAgE,EAAE;IAChEC,WAAW,EAAE,KAAK;IAClBC,OAAO,EAAE,CACP;MACEC,EAAE,EAAER,iBAAiB,CAACS,MAAM;MAC5BC,MAAM,EAAE;QACNC,EAAE,EAAE,uBAAuB;QAC3BC,IAAI,EAAEb,aAAa;QACnBc,YAAY,EAAEV;MAChB;IACF,CAAC;EAEL,CAAC;EACDW,sBAAsB,EAAE;IACtBR,WAAW,EAAE,IAAI;IACjBC,OAAO,EAAE,CACP;MACEC,EAAE,EAAER,iBAAiB,CAACe,IAAI;MAC1BC,QAAQ,EAAE,kBAAkB;MAC5BC,OAAO,EAAEhB;IACX,CAAC;EAEL,CAAC;EACDiB,qBAAqB,EAAE;IACrBZ,WAAW,EAAE,IAAI;IACjBC,OAAO,EAAE,CACP;MACEC,EAAE,EAAER,iBAAiB,CAACe,IAAI;MAC1BC,QAAQ,EAAE,kBAAkB;MAC5BC,OAAO,EAAEhB;IACX,CAAC;EAEL,CAAC;EACDkB,WAAW,EAAE;IACXZ,OAAO,EAAE,CACP;MACEC,EAAE,EAAER,iBAAiB,CAACoB,IAAI;MAC1BJ,QAAQ,EAAE;IACZ,CAAC,EACD;MACER,EAAE,EAAER,iBAAiB,CAACS,MAAM;MAC5BC,MAAM,EAAE;QACNC,EAAE,EAAE,eAAe;QACnBC,IAAI,EAAEb,aAAa;QACnBc,YAAY,EAAEX;MAChB;IACF,CAAC;EAEL,CAAC;EACD,+CAA+C,EAAE;IAC/CK,OAAO,EAAE,CACP;MACEC,EAAE,EAAER,iBAAiB,CAACoB,IAAI;MAC1BJ,QAAQ,EAAE;IACZ,CAAC,EACD;MACER,EAAE,EAAER,iBAAiB,CAACS,MAAM;MAC5BC,MAAM,EAAE;QACNC,EAAE,EAAE,uBAAuB;QAC3BC,IAAI,EAAEb,aAAa;QACnBc,YAAY,EAAET;MAChB;IACF,CAAC;EAEL;AACF,CAAC","ignoreList":[]}
+{"version":3,"file":"index.js","names":["DIRECT_PLUGIN","PLUGIN_OPERATIONS","MenuWrapper","SandboxFooter","DropDownToggler","CatalogBanner","slotSettings","keepDefault","plugins","op","Insert","widget","id","type","RenderWidget","Wrap","widgetId","wrapper","Hide"],"sources":["../src/index.ts"],"sourcesContent":["import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';\nimport { MenuWrapper } from './components/MenuWrapper';\nimport { SandboxFooter } from './components/SandboxFooter';\nimport { DropDownToggler } from './components/DropDownToggler';\nimport { CatalogBanner } from './components/CatalogBanner';\n\nexport {\n  MenuWrapper, SandboxFooter, DropDownToggler, CatalogBanner,\n};\n// Example slot settings you can use in your deployment. You may be able to import these\n// for quick development usage.\nexport const slotSettings = {\n  'org.openedx.frontend.layout.header_desktop_user_menu_toggle.v1': {\n    keepDefault: false,\n    plugins: [\n      {\n        op: PLUGIN_OPERATIONS.Insert,\n        widget: {\n          id: 'custom_desktop_toggle',\n          type: DIRECT_PLUGIN,\n          RenderWidget: DropDownToggler,\n        },\n      },\n    ],\n  },\n  'org.openedx.frontend.layout.header_desktop_user_menu.v1': {\n    keepDefault: true,\n    plugins: [\n      {\n        op: PLUGIN_OPERATIONS.Wrap,\n        widgetId: 'default_contents',\n        wrapper: MenuWrapper,\n      },\n    ],\n  },\n  'org.openedx.frontend.layout.header_mobile_user_menu.v1': {\n    keepDefault: true,\n    plugins: [\n      {\n        op: PLUGIN_OPERATIONS.Wrap,\n        widgetId: 'default_contents',\n        wrapper: MenuWrapper,\n      },\n    ],\n  },\n  'org.openedx.frontend.layout.footer.v1': {\n    plugins: [\n      {\n        op: PLUGIN_OPERATIONS.Hide,\n        widgetId: 'default_contents',\n      },\n      {\n        op: PLUGIN_OPERATIONS.Insert,\n        widget: {\n          id: 'custom_footer',\n          type: DIRECT_PLUGIN,\n          RenderWidget: SandboxFooter,\n        },\n      },\n    ],\n  },\n  'org.openedx.frontend.catalog.home_page.banner': {\n    plugins: [\n      {\n        op: PLUGIN_OPERATIONS.Hide,\n        widgetId: 'default_contents',\n      },\n      {\n        op: PLUGIN_OPERATIONS.Insert,\n        widget: {\n          id: 'custom_catalog_banner',\n          type: DIRECT_PLUGIN,\n          RenderWidget: CatalogBanner,\n        },\n      },\n    ],\n  },\n};\n"],"mappings":"AAAA,SAASA,aAAa,EAAEC,iBAAiB,QAAQ,oCAAoC;AACrF,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAASC,aAAa,QAAQ,4BAA4B;AAE1D,SACEH,WAAW,EAAEC,aAAa,EAAEC,eAAe,EAAEC,aAAa;AAE5D;AACA;AACA,OAAO,MAAMC,YAAY,GAAG;EAC1B,gEAAgE,EAAE;IAChEC,WAAW,EAAE,KAAK;IAClBC,OAAO,EAAE,CACP;MACEC,EAAE,EAAER,iBAAiB,CAACS,MAAM;MAC5BC,MAAM,EAAE;QACNC,EAAE,EAAE,uBAAuB;QAC3BC,IAAI,EAAEb,aAAa;QACnBc,YAAY,EAAEV;MAChB;IACF,CAAC;EAEL,CAAC;EACD,yDAAyD,EAAE;IACzDG,WAAW,EAAE,IAAI;IACjBC,OAAO,EAAE,CACP;MACEC,EAAE,EAAER,iBAAiB,CAACc,IAAI;MAC1BC,QAAQ,EAAE,kBAAkB;MAC5BC,OAAO,EAAEf;IACX,CAAC;EAEL,CAAC;EACD,wDAAwD,EAAE;IACxDK,WAAW,EAAE,IAAI;IACjBC,OAAO,EAAE,CACP;MACEC,EAAE,EAAER,iBAAiB,CAACc,IAAI;MAC1BC,QAAQ,EAAE,kBAAkB;MAC5BC,OAAO,EAAEf;IACX,CAAC;EAEL,CAAC;EACD,uCAAuC,EAAE;IACvCM,OAAO,EAAE,CACP;MACEC,EAAE,EAAER,iBAAiB,CAACiB,IAAI;MAC1BF,QAAQ,EAAE;IACZ,CAAC,EACD;MACEP,EAAE,EAAER,iBAAiB,CAACS,MAAM;MAC5BC,MAAM,EAAE;QACNC,EAAE,EAAE,eAAe;QACnBC,IAAI,EAAEb,aAAa;QACnBc,YAAY,EAAEX;MAChB;IACF,CAAC;EAEL,CAAC;EACD,+CAA+C,EAAE;IAC/CK,OAAO,EAAE,CACP;MACEC,EAAE,EAAER,iBAAiB,CAACiB,IAAI;MAC1BF,QAAQ,EAAE;IACZ,CAAC,EACD;MACEP,EAAE,EAAER,iBAAiB,CAACS,MAAM;MAC5BC,MAAM,EAAE;QACNC,EAAE,EAAE,uBAAuB;QAC3BC,IAAI,EAAEb,aAAa;QACnBc,YAAY,EAAET;MAChB;IACF,CAAC;EAEL;AACF,CAAC","ignoreList":[]}

package/dist/types.d.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.js","names":[],"sources":["../src/types.d.ts"],"sourcesContent":["declare module '*.png';\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"types.d.js","names":[],"sources":["../src/types.d.ts"],"sourcesContent":["declare module '*.png';\ndeclare module '*.jpg';"],"mappings":"","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencraft/frontend-plugin-sandbox",
-  "version": "1.2.0-alpha.2",
+  "version": "1.3.0-alpha.0",
   "description": "Plugin for custom headers and footers in OpenCraft's sandboxes",
   "repository": {
     "type": "git",

package/src/components/CatalogBanner.tsx

@@ -1,37 +1,32 @@
 import React from 'react';
-import { Image, Row, Stack } from '@openedx/paragon';
-import bannerBg from '../assets/banner-bg.png';
+import { Image, Row, Col } from '@openedx/paragon';
+import largeBannerBg from '../assets/desktop-openclass.jpg';
+import smallBannerBg from '../assets/mobile-openclass.jpg';
 
 export const CatalogBanner = () => (
   <Row
     direction="horizontal"
     className="bg-primary"
   >
-    <Stack
+    <Col
       direction="vertical"
-      className="justify-content-center px-6"
-      style={{ maxWidth: '55rem' }}
+      className="justify-content-center align-content-center px-6 col-12 col-lg-6 col-xl-5"
     >
-      <h1 className="display-2 text-light-100">
+      <h1 className="intro-header text-light-100">
         You’re viewing a live
         <span className="text-brand-500">
           {' Open edX® '}
         </span>
         demo
       </h1>
-      <p className="h4 text-light-100 ">
+      <p className="text-light-100">
         OpenClass is a demo site by OpenCraft where you can explore the
         Open edX platform as a learner or course author.
       </p>
-    </Stack>
-    <Stack
-      className="justify-content-end"
-      style={{
-        backgroundImage: 'url(../assets/banner-bg.png)',
-      }}
-    >
+    </Col>
+    <Col className={'col-12 col-lg-6 col-xl-7'}>
       <Image
-        src={bannerBg}
+        src={largeBannerBg}
         style={{
           height: '100%',
           width: '100%',
@@ -39,8 +34,18 @@ export const CatalogBanner = () => (
           objectFit: 'contain',
           objectPosition: 'right top',
         }}
+        className={'d-none d-xl-block'}
         alt="illustration of a workspace with a computer screen displaying charts and graphs, accompanied by a desk lamp, coffee cup, and potted plant"
       />
-    </Stack>
+      <Image
+        src={smallBannerBg}
+        style={{
+            width: '100%',
+            objectFit: 'contain',
+        }}
+        className={'d-block d-xl-none'}
+        alt="illustration of a workspace with a computer screen displaying charts and graphs, accompanied by a desk lamp, coffee cup, and potted plant"
+    />
+    </Col>
   </Row>
 );

package/src/index.ts

@@ -23,7 +23,7 @@ export const slotSettings = {
       },
     ],
   },
-  desktop_user_menu_slot: {
+  'org.openedx.frontend.layout.header_desktop_user_menu.v1': {
     keepDefault: true,
     plugins: [
       {
@@ -33,7 +33,7 @@ export const slotSettings = {
       },
     ],
   },
-  mobile_user_menu_slot: {
+  'org.openedx.frontend.layout.header_mobile_user_menu.v1': {
     keepDefault: true,
     plugins: [
       {
@@ -43,7 +43,7 @@ export const slotSettings = {
       },
     ],
   },
-  footer_slot: {
+  'org.openedx.frontend.layout.footer.v1': {
     plugins: [
       {
         op: PLUGIN_OPERATIONS.Hide,

package/src/types.d.ts

@@ -1 +1,2 @@
 declare module '*.png';
+declare module '*.jpg';