learningtribes-studio-frontend 1.4.2-alpha.4 → 1.4.2-alpha.5

package/dist/i18nMessages.min.js

@@ -1,2 +1,2 @@
-!function(r){function n(n){for(var t,f,i=n[0],l=n[1],p=n[2],a=0,c=[];a<i.length;a++)f=i[a],o[f]&&c.push(o[f][0]),o[f]=0;for(t in l)Object.prototype.hasOwnProperty.call(l,t)&&(r[t]=l[t]);for(s&&s(n);c.length;)c.shift()();return u.push.apply(u,p||[]),e()}function e(){for(var r,n=0;n<u.length;n++){for(var e=u[n],t=!0,i=1;i<e.length;i++){var l=e[i];0!==o[l]&&(t=!1)}t&&(u.splice(n--,1),r=f(f.s=e[0]))}return r}var t={},o={2:0},u=[];function f(n){if(t[n])return t[n].exports;var e=t[n]={i:n,l:!1,exports:{}};return r[n].call(e.exports,e,e.exports,f),e.l=!0,e.exports}f.m=r,f.c=t,f.d=function(r,n,e){f.o(r,n)||Object.defineProperty(r,n,{configurable:!1,enumerable:!0,get:e})},f.r=function(r){Object.defineProperty(r,"__esModule",{value:!0})},f.n=function(r){var n=r&&r.__esModule?function(){return r.default}:function(){return r};return f.d(n,"a",n),n},f.o=function(r,n){return Object.prototype.hasOwnProperty.call(r,n)},f.p="";var i=window.studiofrontendJsonP=window.studiofrontendJsonP||[],l=i.push.bind(i);i.push=n,i=i.slice();for(var p=0;p<i.length;p++)n(i[p]);var s=l;u.push([436,0]),e()}([]);
+!function(r){function n(n){for(var t,f,i=n[0],l=n[1],p=n[2],a=0,c=[];a<i.length;a++)f=i[a],o[f]&&c.push(o[f][0]),o[f]=0;for(t in l)Object.prototype.hasOwnProperty.call(l,t)&&(r[t]=l[t]);for(s&&s(n);c.length;)c.shift()();return u.push.apply(u,p||[]),e()}function e(){for(var r,n=0;n<u.length;n++){for(var e=u[n],t=!0,i=1;i<e.length;i++){var l=e[i];0!==o[l]&&(t=!1)}t&&(u.splice(n--,1),r=f(f.s=e[0]))}return r}var t={},o={2:0},u=[];function f(n){if(t[n])return t[n].exports;var e=t[n]={i:n,l:!1,exports:{}};return r[n].call(e.exports,e,e.exports,f),e.l=!0,e.exports}f.m=r,f.c=t,f.d=function(r,n,e){f.o(r,n)||Object.defineProperty(r,n,{configurable:!1,enumerable:!0,get:e})},f.r=function(r){Object.defineProperty(r,"__esModule",{value:!0})},f.n=function(r){var n=r&&r.__esModule?function(){return r.default}:function(){return r};return f.d(n,"a",n),n},f.o=function(r,n){return Object.prototype.hasOwnProperty.call(r,n)},f.p="";var i=window.studiofrontendJsonP=window.studiofrontendJsonP||[],l=i.push.bind(i);i.push=n,i=i.slice();for(var p=0;p<i.length;p++)n(i[p]);var s=l;u.push([434,0]),e()}([]);
 //# sourceMappingURL=i18nMessages.min.js.map

package/dist/i18nMessages.min.js.map

@@ -1 +1 @@
-{"version":3,"sources":["webpack:///webpack/bootstrap"],"names":["webpackJsonpCallback","data","moduleId","chunkId","chunkIds","moreModules","executeModules","i","resolves","length","installedChunks","push","Object","prototype","hasOwnProperty","call","modules","parentJsonpFunction","shift","deferredModules","apply","checkDeferredModules","result","deferredModule","fulfilled","j","depId","splice","__webpack_require__","s","installedModules","2","exports","module","l","m","c","d","name","getter","o","defineProperty","configurable","enumerable","get","r","value","n","__esModule","object","property","p","jsonpArray","window","oldJsonpFunction","bind","slice"],"mappings":"aACA,SAAAA,EAAAC,GAOA,IANA,IAKAC,EAAAC,EALAC,EAAAH,EAAA,GACAI,EAAAJ,EAAA,GACAK,EAAAL,EAAA,GAGAM,EAAA,EAAAC,KACQD,EAAAH,EAAAK,OAAoBF,IAC5BJ,EAAAC,EAAAG,GACAG,EAAAP,IACAK,EAAAG,KAAAD,EAAAP,GAAA,IAEAO,EAAAP,GAAA,EAEA,IAAAD,KAAAG,EACAO,OAAAC,UAAAC,eAAAC,KAAAV,EAAAH,KACAc,EAAAd,GAAAG,EAAAH,IAIA,IADAe,KAAAhB,GACAO,EAAAC,QACAD,EAAAU,OAAAV,GAOA,OAHAW,EAAAR,KAAAS,MAAAD,EAAAb,OAGAe,IAEA,SAAAA,IAEA,IADA,IAAAC,EACAf,EAAA,EAAiBA,EAAAY,EAAAV,OAA4BF,IAAA,CAG7C,IAFA,IAAAgB,EAAAJ,EAAAZ,GACAiB,GAAA,EACAC,EAAA,EAAkBA,EAAAF,EAAAd,OAA2BgB,IAAA,CAC7C,IAAAC,EAAAH,EAAAE,GACA,IAAAf,EAAAgB,KAAAF,GAAA,GAEAA,IACAL,EAAAQ,OAAApB,IAAA,GACAe,EAAAM,IAAAC,EAAAN,EAAA,KAGA,OAAAD,EAIA,IAAAQ,KAKApB,GACAqB,EAAA,GAGAZ,KAGA,SAAAS,EAAA1B,GAGA,GAAA4B,EAAA5B,GACA,OAAA4B,EAAA5B,GAAA8B,QAGA,IAAAC,EAAAH,EAAA5B,IACAK,EAAAL,EACAgC,GAAA,EACAF,YAUA,OANAhB,EAAAd,GAAAa,KAAAkB,EAAAD,QAAAC,IAAAD,QAAAJ,GAGAK,EAAAC,GAAA,EAGAD,EAAAD,QAKAJ,EAAAO,EAAAnB,EAGAY,EAAAQ,EAAAN,EAGAF,EAAAS,EAAA,SAAAL,EAAAM,EAAAC,GACAX,EAAAY,EAAAR,EAAAM,IACA1B,OAAA6B,eAAAT,EAAAM,GACAI,cAAA,EACAC,YAAA,EACAC,IAAAL,KAMAX,EAAAiB,EAAA,SAAAb,GACApB,OAAA6B,eAAAT,EAAA,cAAiDc,OAAA,KAIjDlB,EAAAmB,EAAA,SAAAd,GACA,IAAAM,EAAAN,KAAAe,WACA,WAA2B,OAAAf,EAAA,SAC3B,WAAiC,OAAAA,GAEjC,OADAL,EAAAS,EAAAE,EAAA,IAAAA,GACAA,GAIAX,EAAAY,EAAA,SAAAS,EAAAC,GAAsD,OAAAtC,OAAAC,UAAAC,eAAAC,KAAAkC,EAAAC,IAGtDtB,EAAAuB,EAAA,GAEA,IAAAC,EAAAC,OAAA,oBAAAA,OAAA,wBACAC,EAAAF,EAAAzC,KAAA4C,KAAAH,GACAA,EAAAzC,KAAAX,EACAoD,IAAAI,QACA,QAAAjD,EAAA,EAAgBA,EAAA6C,EAAA3C,OAAuBF,IAAAP,EAAAoD,EAAA7C,IACvC,IAAAU,EAAAqC,EAIAnC,EAAAR,MAAA,QAEAU","file":"i18nMessages.min.js","sourcesContent":[" \t// install a JSONP callback for chunk loading\n \tfunction webpackJsonpCallback(data) {\n \t\tvar chunkIds = data[0];\n \t\tvar moreModules = data[1];\n \t\tvar executeModules = data[2];\n \t\t// add \"moreModules\" to the modules object,\n \t\t// then flag all \"chunkIds\" as loaded and fire callback\n \t\tvar moduleId, chunkId, i = 0, resolves = [];\n \t\tfor(;i < chunkIds.length; i++) {\n \t\t\tchunkId = chunkIds[i];\n \t\t\tif(installedChunks[chunkId]) {\n \t\t\t\tresolves.push(installedChunks[chunkId][0]);\n \t\t\t}\n \t\t\tinstalledChunks[chunkId] = 0;\n \t\t}\n \t\tfor(moduleId in moreModules) {\n \t\t\tif(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {\n \t\t\t\tmodules[moduleId] = moreModules[moduleId];\n \t\t\t}\n \t\t}\n \t\tif(parentJsonpFunction) parentJsonpFunction(data);\n \t\twhile(resolves.length) {\n \t\t\tresolves.shift()();\n \t\t}\n\n \t\t// add entry modules from loaded chunk to deferred list\n \t\tdeferredModules.push.apply(deferredModules, executeModules || []);\n\n \t\t// run deferred modules when all chunks ready\n \t\treturn checkDeferredModules();\n \t};\n \tfunction checkDeferredModules() {\n \t\tvar result;\n \t\tfor(var i = 0; i < deferredModules.length; i++) {\n \t\t\tvar deferredModule = deferredModules[i];\n \t\t\tvar fulfilled = true;\n \t\t\tfor(var j = 1; j < deferredModule.length; j++) {\n \t\t\t\tvar depId = deferredModule[j];\n \t\t\t\tif(installedChunks[depId] !== 0) fulfilled = false;\n \t\t\t}\n \t\t\tif(fulfilled) {\n \t\t\t\tdeferredModules.splice(i--, 1);\n \t\t\t\tresult = __webpack_require__(__webpack_require__.s = deferredModule[0]);\n \t\t\t}\n \t\t}\n \t\treturn result;\n \t}\n\n \t// The module cache\n \tvar installedModules = {};\n\n \t// object to store loaded and loading chunks\n \t// undefined = chunk not loaded, null = chunk preloaded/prefetched\n \t// Promise = chunk loading, 0 = chunk loaded\n \tvar installedChunks = {\n \t\t2: 0\n \t};\n\n \tvar deferredModules = [];\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, {\n \t\t\t\tconfigurable: false,\n \t\t\t\tenumerable: true,\n \t\t\t\tget: getter\n \t\t\t});\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \tvar jsonpArray = window[\"studiofrontendJsonP\"] = window[\"studiofrontendJsonP\"] || [];\n \tvar oldJsonpFunction = jsonpArray.push.bind(jsonpArray);\n \tjsonpArray.push = webpackJsonpCallback;\n \tjsonpArray = jsonpArray.slice();\n \tfor(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);\n \tvar parentJsonpFunction = oldJsonpFunction;\n\n\n \t// add entry module to deferred list\n \tdeferredModules.push([436,0]);\n \t// run deferred modules when ready\n \treturn checkDeferredModules();\n"],"sourceRoot":""}
+{"version":3,"sources":["webpack:///webpack/bootstrap"],"names":["webpackJsonpCallback","data","moduleId","chunkId","chunkIds","moreModules","executeModules","i","resolves","length","installedChunks","push","Object","prototype","hasOwnProperty","call","modules","parentJsonpFunction","shift","deferredModules","apply","checkDeferredModules","result","deferredModule","fulfilled","j","depId","splice","__webpack_require__","s","installedModules","2","exports","module","l","m","c","d","name","getter","o","defineProperty","configurable","enumerable","get","r","value","n","__esModule","object","property","p","jsonpArray","window","oldJsonpFunction","bind","slice"],"mappings":"aACA,SAAAA,EAAAC,GAOA,IANA,IAKAC,EAAAC,EALAC,EAAAH,EAAA,GACAI,EAAAJ,EAAA,GACAK,EAAAL,EAAA,GAGAM,EAAA,EAAAC,KACQD,EAAAH,EAAAK,OAAoBF,IAC5BJ,EAAAC,EAAAG,GACAG,EAAAP,IACAK,EAAAG,KAAAD,EAAAP,GAAA,IAEAO,EAAAP,GAAA,EAEA,IAAAD,KAAAG,EACAO,OAAAC,UAAAC,eAAAC,KAAAV,EAAAH,KACAc,EAAAd,GAAAG,EAAAH,IAIA,IADAe,KAAAhB,GACAO,EAAAC,QACAD,EAAAU,OAAAV,GAOA,OAHAW,EAAAR,KAAAS,MAAAD,EAAAb,OAGAe,IAEA,SAAAA,IAEA,IADA,IAAAC,EACAf,EAAA,EAAiBA,EAAAY,EAAAV,OAA4BF,IAAA,CAG7C,IAFA,IAAAgB,EAAAJ,EAAAZ,GACAiB,GAAA,EACAC,EAAA,EAAkBA,EAAAF,EAAAd,OAA2BgB,IAAA,CAC7C,IAAAC,EAAAH,EAAAE,GACA,IAAAf,EAAAgB,KAAAF,GAAA,GAEAA,IACAL,EAAAQ,OAAApB,IAAA,GACAe,EAAAM,IAAAC,EAAAN,EAAA,KAGA,OAAAD,EAIA,IAAAQ,KAKApB,GACAqB,EAAA,GAGAZ,KAGA,SAAAS,EAAA1B,GAGA,GAAA4B,EAAA5B,GACA,OAAA4B,EAAA5B,GAAA8B,QAGA,IAAAC,EAAAH,EAAA5B,IACAK,EAAAL,EACAgC,GAAA,EACAF,YAUA,OANAhB,EAAAd,GAAAa,KAAAkB,EAAAD,QAAAC,IAAAD,QAAAJ,GAGAK,EAAAC,GAAA,EAGAD,EAAAD,QAKAJ,EAAAO,EAAAnB,EAGAY,EAAAQ,EAAAN,EAGAF,EAAAS,EAAA,SAAAL,EAAAM,EAAAC,GACAX,EAAAY,EAAAR,EAAAM,IACA1B,OAAA6B,eAAAT,EAAAM,GACAI,cAAA,EACAC,YAAA,EACAC,IAAAL,KAMAX,EAAAiB,EAAA,SAAAb,GACApB,OAAA6B,eAAAT,EAAA,cAAiDc,OAAA,KAIjDlB,EAAAmB,EAAA,SAAAd,GACA,IAAAM,EAAAN,KAAAe,WACA,WAA2B,OAAAf,EAAA,SAC3B,WAAiC,OAAAA,GAEjC,OADAL,EAAAS,EAAAE,EAAA,IAAAA,GACAA,GAIAX,EAAAY,EAAA,SAAAS,EAAAC,GAAsD,OAAAtC,OAAAC,UAAAC,eAAAC,KAAAkC,EAAAC,IAGtDtB,EAAAuB,EAAA,GAEA,IAAAC,EAAAC,OAAA,oBAAAA,OAAA,wBACAC,EAAAF,EAAAzC,KAAA4C,KAAAH,GACAA,EAAAzC,KAAAX,EACAoD,IAAAI,QACA,QAAAjD,EAAA,EAAgBA,EAAA6C,EAAA3C,OAAuBF,IAAAP,EAAAoD,EAAA7C,IACvC,IAAAU,EAAAqC,EAIAnC,EAAAR,MAAA,QAEAU","file":"i18nMessages.min.js","sourcesContent":[" \t// install a JSONP callback for chunk loading\n \tfunction webpackJsonpCallback(data) {\n \t\tvar chunkIds = data[0];\n \t\tvar moreModules = data[1];\n \t\tvar executeModules = data[2];\n \t\t// add \"moreModules\" to the modules object,\n \t\t// then flag all \"chunkIds\" as loaded and fire callback\n \t\tvar moduleId, chunkId, i = 0, resolves = [];\n \t\tfor(;i < chunkIds.length; i++) {\n \t\t\tchunkId = chunkIds[i];\n \t\t\tif(installedChunks[chunkId]) {\n \t\t\t\tresolves.push(installedChunks[chunkId][0]);\n \t\t\t}\n \t\t\tinstalledChunks[chunkId] = 0;\n \t\t}\n \t\tfor(moduleId in moreModules) {\n \t\t\tif(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {\n \t\t\t\tmodules[moduleId] = moreModules[moduleId];\n \t\t\t}\n \t\t}\n \t\tif(parentJsonpFunction) parentJsonpFunction(data);\n \t\twhile(resolves.length) {\n \t\t\tresolves.shift()();\n \t\t}\n\n \t\t// add entry modules from loaded chunk to deferred list\n \t\tdeferredModules.push.apply(deferredModules, executeModules || []);\n\n \t\t// run deferred modules when all chunks ready\n \t\treturn checkDeferredModules();\n \t};\n \tfunction checkDeferredModules() {\n \t\tvar result;\n \t\tfor(var i = 0; i < deferredModules.length; i++) {\n \t\t\tvar deferredModule = deferredModules[i];\n \t\t\tvar fulfilled = true;\n \t\t\tfor(var j = 1; j < deferredModule.length; j++) {\n \t\t\t\tvar depId = deferredModule[j];\n \t\t\t\tif(installedChunks[depId] !== 0) fulfilled = false;\n \t\t\t}\n \t\t\tif(fulfilled) {\n \t\t\t\tdeferredModules.splice(i--, 1);\n \t\t\t\tresult = __webpack_require__(__webpack_require__.s = deferredModule[0]);\n \t\t\t}\n \t\t}\n \t\treturn result;\n \t}\n\n \t// The module cache\n \tvar installedModules = {};\n\n \t// object to store loaded and loading chunks\n \t// undefined = chunk not loaded, null = chunk preloaded/prefetched\n \t// Promise = chunk loading, 0 = chunk loaded\n \tvar installedChunks = {\n \t\t2: 0\n \t};\n\n \tvar deferredModules = [];\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, {\n \t\t\t\tconfigurable: false,\n \t\t\t\tenumerable: true,\n \t\t\t\tget: getter\n \t\t\t});\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \tvar jsonpArray = window[\"studiofrontendJsonP\"] = window[\"studiofrontendJsonP\"] || [];\n \tvar oldJsonpFunction = jsonpArray.push.bind(jsonpArray);\n \tjsonpArray.push = webpackJsonpCallback;\n \tjsonpArray = jsonpArray.slice();\n \tfor(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);\n \tvar parentJsonpFunction = oldJsonpFunction;\n\n\n \t// add entry module to deferred list\n \tdeferredModules.push([434,0]);\n \t// run deferred modules when ready\n \treturn checkDeferredModules();\n"],"sourceRoot":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "learningtribes-studio-frontend",
-  "version": "1.4.2-alpha.4",
+  "version": "1.4.2-alpha.5",
   "description": "The frontend for the Open edX platform",
   "repository": "Learningtribes/studio-frontend",
   "scripts": {

package/src/components/AssetsDropZone/AssetsDropZone.scss

@@ -1,106 +1,139 @@
 @import 'edx-bootstrap';
 
-// Matches the shared upload widget used by the Uploads page and PDF editor.
+// Matches the shared upload widget used by the image modal.
 $upload-border: #ebebf1;
 $upload-brand: #5959eb;
 $upload-prompt-primary: #3535cd;
 $upload-prompt-secondary: #1f1f59;
 $upload-icon: #4c4c8e;
 
-.center-text {
-  text-align: center !important;
-}
+.assets-drop-zone {
+  .center-text {
+    text-align: center !important;
+  }
 
-.drop-zone-compact {
-  border: 1px dashed $upload-border;
-  border-radius: 8px;
-  padding: 20px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  cursor: pointer;
-  background-color: #fff;
-  transition: all 0.3s ease;
-
-  &:hover {
-    border-color: $upload-brand;
-    background-color: #fff;
+  .drop-zone {
+    border: $dark dashed 1px;
+    padding: 0;
+
+    button {
+      white-space: normal;
+      margin-top: $spacer;
+      margin-bottom: $spacer;
+    }
+
+    h2 {
+      text-align: center !important;
+      font-weight: $font-weight-bold;
+      font-size: $font-size-lg;
+      margin-bottom: 0;
+    }
+
+    p {
+      font-size: $font-size-sm;
+      margin-bottom: $spacer * 0.5;
+    }
+
+    @media (min-width: map-get($grid-breakpoints, 'md')) {
+      padding: $spacer;
+
+      h2 {
+        margin-bottom: inherit;
+      }
+    }
+
+    &.drop-active {
+      outline: $dark dashed 2px;
+      background-color: rgba($primary, 0.2);
+    }
   }
-}
 
-.drop-zone {
-  @extend .drop-zone-compact;
-}
+  .drop-zone-compact {
+    border: 1px dashed $upload-border;
+    border-radius: 8px;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    cursor: pointer;
+    background-color: #fff;
+    transition: all 0.3s ease;
 
-.drop-active {
-  outline: none;
-  border-color: $upload-brand;
-  background-color: #fff;
-}
+    &:hover {
+      border-color: $upload-brand;
+      background-color: #fff;
+    }
 
-.upload-icon {
-  font-size: 32px;
-  width: 32px;
-  height: 32px;
-  color: $upload-icon;
-  margin-bottom: 8px;
-  line-height: 1;
+    &.drop-active {
+      outline: none;
+      border-color: $upload-brand;
+      background-color: #fff;
+    }
+  }
 
-  i {
+  .upload-icon {
     font-size: 32px;
+    width: 32px;
+    height: 32px;
+    color: $upload-icon;
+    margin-bottom: 8px;
     line-height: 1;
-    display: block;
-    font-style: normal;
+
+    i {
+      font-size: 32px;
+      line-height: 1;
+      display: block;
+      font-style: normal;
+    }
   }
-}
 
-.upload-prompt {
-  font-size: 16px;
-  font-weight: 600;
-  margin-bottom: 4px;
-}
+  .upload-prompt {
+    font-size: 16px;
+    font-weight: 600;
+    margin-bottom: 4px;
+  }
 
-.upload-prompt-primary {
-  color: $upload-prompt-primary;
-  cursor: pointer;
-}
+  .upload-prompt-primary {
+    color: $upload-prompt-primary;
+    cursor: pointer;
+  }
 
-.upload-prompt-secondary {
-  color: $upload-prompt-secondary;
-  font-size: 16px;
-  font-weight: 600;
-}
+  .upload-prompt-secondary {
+    color: $upload-prompt-secondary;
+    font-size: 16px;
+    font-weight: 600;
+  }
 
-.upload-info {
-  font-size: 14px;
-  color: $upload-prompt-secondary;
-}
+  .upload-info {
+    font-size: 14px;
+    color: $upload-prompt-secondary;
+  }
 
-.supported-files-types {
-  color: #727272;
-  font-size: 12px !important;
-  font-weight: 400;
-}
+  .supported-files-types {
+    color: #727272;
+    font-size: 12px !important;
+    font-weight: 400;
+  }
 
-.image-size-recommendation {
-  color: #727272;
-  font-size: 12px !important;
-  font-weight: 400;
-}
+  .image-size-recommendation {
+    color: #727272;
+    font-size: 12px !important;
+    font-weight: 400;
+  }
 
-// Collapsed zone in image modal
-.collapsedZoneStyle {
-  .drop-zone-compact,
-  .drop-zone {
-    padding: 20px 16px;
+  &.collapsedZoneStyle {
+    .drop-zone-compact,
+    .drop-zone {
+      padding: 20px 16px;
 
-    [data-identifier="asset-drop-zone-icon"] {
-      margin-bottom: 8px;
+      [data-identifier="asset-drop-zone-icon"] {
+        margin-bottom: 8px;
 
-      span {
-        font-size: 28px;
+        span {
+          font-size: 28px;
+        }
       }
     }
   }

package/src/components/AssetsDropZone/AssetsDropZone.test.jsx

@@ -27,7 +27,7 @@ describe('<AssetsDropZone />', () => {
 
   describe('renders', () => {
     it('contains file browser button', () => {
-      expect(wrapper.find('[data-identifier="asset-drop-zone-browse-button"]').text()).toEqual('Click to upload');
+      expect(wrapper.find('[data-identifier="asset-drop-zone-browse-button"]').text()).toEqual('Select from your computer');
     });
     it('hides the icon & upload file size from screen readers', () => {
       expect(wrapper.find('[aria-hidden=true]').length).toBe(2);
@@ -42,6 +42,8 @@ describe('<AssetsDropZone />', () => {
         compactStyle: true,
       });
       expect(wrapper.find(dropZoneID).at(0).hasClass('drop-zone-compact')).toEqual(true);
+      expect(wrapper.find('[data-identifier="asset-drop-zone-browse-button"]').text()).toEqual('Click to upload');
+      expect(wrapper.find('[data-identifier="asset-drop-zone-header"]').text()).toEqual(' or drag and drop');
     });
   });
 

package/src/components/AssetsDropZone/displayMessages.jsx

@@ -8,14 +8,24 @@ const messages = defineMessages({
   },
   assetsDropZoneBrowseLabel: {
     id: 'assetsDropZoneBrowseLabel',
-    defaultMessage: 'Click to upload',
+    defaultMessage: 'Select from your computer',
     description: 'Upload label for the "Browse" button',
   },
   assetsDropZoneHeader: {
     id: 'assetsDropZoneHeader',
-    defaultMessage: 'or drag and drop',
+    defaultMessage: 'Drag & Drop',
     description: 'Upload with dropzone section heading',
   },
+  assetsDropZoneClickToUpload: {
+    id: 'assetsDropZoneClickToUpload',
+    defaultMessage: 'Click to upload',
+    description: 'Primary prompt on the compact image upload zone',
+  },
+  assetsDropZoneOrDragAndDrop: {
+    id: 'assetsDropZoneOrDragAndDrop',
+    defaultMessage: 'or drag and drop',
+    description: 'Secondary prompt on the compact image upload zone',
+  },
   assetsDropZoneMaxFileSizeLabel: {
     id: 'assetsDropZoneMaxFileSizeLabel',
     defaultMessage: 'Size limit: {maxFileSizeMB} MB',

package/src/components/AssetsDropZone/index.jsx

@@ -1,6 +1,8 @@
+import { Button } from '@edx/paragon';
 import React from 'react';
 import classNames from 'classnames';
 import Dropzone from 'react-dropzone';
+import FontAwesomeStyles from 'font-awesome/css/font-awesome.min.css';
 import PropTypes from 'prop-types';
 
 import WrappedMessage from '../../utils/i18n/formattedMessageWrapper';
@@ -32,11 +34,17 @@ export default class AssetsDropZone extends React.Component {
 
   setDropZoneRef = (ref) => {
     this.dropZoneRef = ref;
-    if (this.props.buttonRef) {
+    if (this.props.compactStyle && this.props.buttonRef) {
       this.props.buttonRef(ref ? ref.node : null);
     }
   };
 
+  setUploadButtonRef = (ref) => {
+    if (this.props.buttonRef) {
+      this.props.buttonRef(ref);
+    }
+  };
+
   handleKeyDown = (event) => {
     if (event.key === 'Enter' || event.key === ' ') {
       event.preventDefault();
@@ -48,97 +56,171 @@ export default class AssetsDropZone extends React.Component {
     this.dropZoneRef.open();
   };
 
+  renderCompactZone = () => (
+    <Dropzone
+      accept={this.props.acceptedFileTypes}
+      activeClassName={styles['drop-active']}
+      aria-describedby="asset-drop-zone-max-file-size-label"
+      className={styles['drop-zone-compact']}
+      data-identifier="asset-drop-zone"
+      maxSize={this.dropZoneMaxFileSizeBytes}
+      onDrop={this.onDrop}
+      onKeyDown={this.handleKeyDown}
+      ref={this.setDropZoneRef}
+      role="button"
+      tabIndex="0"
+    >
+      <div
+        aria-hidden="true"
+        className={styles['upload-icon']}
+        data-identifier="asset-drop-zone-icon"
+      >
+        <i className="far fa-images" />
+      </div>
+      <div className={styles['upload-prompt']}>
+        <WrappedMessage message={messages.assetsDropZoneClickToUpload}>
+          { displayText => (
+            <span
+              className={styles['upload-prompt-primary']}
+              data-identifier="asset-drop-zone-browse-button"
+            >
+              {displayText}
+            </span>
+          )}
+        </WrappedMessage>
+        <WrappedMessage message={messages.assetsDropZoneOrDragAndDrop}>
+          { displayText => (
+            <span className={styles['upload-prompt-secondary']} data-identifier="asset-drop-zone-header"> {displayText}</span>
+          )}
+        </WrappedMessage>
+      </div>
+      {this.renderFileSizeLabel(styles['upload-info'])}
+      {this.renderExtraFileInfo()}
+    </Dropzone>
+  );
+
+  renderDefaultZone = () => (
+    <Dropzone
+      accept={this.props.acceptedFileTypes}
+      activeClassName={styles['drop-active']}
+      className={classNames(styles['drop-zone'], styles['center-text'])}
+      data-identifier="asset-drop-zone"
+      disableClick
+      maxSize={this.dropZoneMaxFileSizeBytes}
+      onDrop={this.onDrop}
+      ref={this.setDropZoneRef}
+    >
+      <div className={styles['center-text']} data-identifier="asset-drop-zone-icon">
+        <span
+          aria-hidden
+          className={classNames(
+            'fad fa-cloud-upload-alt',
+            styles['center-text'],
+            FontAwesomeStyles['fa-3x'],
+          )}
+        />
+      </div>
+      <WrappedMessage message={messages.assetsDropZoneHeader}>
+        { displayText => (
+          <h2 data-identifier="asset-drop-zone-header">{displayText}</h2>
+        )}
+      </WrappedMessage>
+      <span className="label-or">or</span>
+      <div className={styles['center-text']}>
+        <WrappedMessage message={messages.assetsDropZoneBrowseLabel}>
+          { displayText => (
+            <Button
+              aria-describedby="asset-drop-zone-max-file-size-label"
+              className={['btn', 'btn-outline-primary']}
+              data-identifier="asset-drop-zone-browse-button"
+              label={displayText}
+              onClick={this.handleClick}
+              inputRef={this.setUploadButtonRef}
+            />
+          )}
+        </WrappedMessage>
+      </div>
+      {this.renderFileSizeLabel(styles['center-text'], 'p')}
+      {this.renderExtraFileInfo()}
+    </Dropzone>
+  );
+
+  renderFileSizeLabel = (className, Tag = 'div') => (
+    <WrappedMessage
+      message={messages.assetsDropZoneMaxFileSizeLabel}
+      values={{
+        maxFileSizeMB: this.props.maxFileSizeMB,
+      }}
+    >
+      { displayText => (
+        <Tag
+          aria-hidden
+          className={className}
+          data-identifier="asset-drop-zone-max-file-size-label"
+          id="asset-drop-zone-max-file-size-label"
+        >
+          {displayText}
+        </Tag>
+      )}
+    </WrappedMessage>
+  );
+
+  renderExtraFileInfo = () => (
+    <React.Fragment>
+      {this.props.supportedFileTypes !== undefined &&
+        <WrappedMessage
+          message={messages.assetsDropZoneSupportedFileTypesLabel}
+          values={{ filesTypesList: this.props.supportedFileTypes }}
+        >
+          { displayText => (
+            <p
+              aria-hidden
+              className={`${styles['center-text']} supported-files-types`}
+              data-identifier="asset-drop-zone-supported-file-types-label"
+              id="asset-drop-zone-supported-file-types-label"
+            >
+              {displayText}
+            </p>
+          )}
+        </WrappedMessage>
+      }
+      {this.props.imageSize !== undefined &&
+        <WrappedMessage
+          message={messages.assetsDropZoneImageSizeRecommandationLabel}
+          values={{ imageSize: this.props.imageSize }}
+        >
+          { displayText => (
+            <p
+              aria-hidden
+              className={`${styles['center-text']} image-size-recommendation`}
+              data-identifier="asset-drop-zone-image-size-recommandation-label"
+              id="asset-drop-zone-image-size-recommandation-label"
+            >
+              {displayText}
+            </p>
+          )}
+        </WrappedMessage>
+      }
+    </React.Fragment>
+  );
+
   render() {
     return (
-      <WrappedMessage message={messages.assetsDropZoneAriaLabel} collapseBorder={this.props.collapseBorder}>
+      <WrappedMessage
+        message={messages.assetsDropZoneAriaLabel}
+        collapseBorder={this.props.collapseBorder}
+      >
         { regionLabel =>
           (
-            <div role="region" aria-label={regionLabel} className={this.props.collapseBorder ? "collapsedZoneStyle": ""}>
-              <Dropzone
-                accept={this.props.acceptedFileTypes}
-                activeClassName={styles['drop-active']}
-                aria-describedby="asset-drop-zone-max-file-size-label"
-                className={classNames([
-                  this.props.compactStyle ? styles['drop-zone-compact'] : styles['drop-zone'],
-                ])}
-                data-identifier="asset-drop-zone"
-                maxSize={this.dropZoneMaxFileSizeBytes}
-                onDrop={this.onDrop}
-                onKeyDown={this.handleKeyDown}
-                ref={this.setDropZoneRef}
-                role="button"
-                tabIndex="0"
-              >
-                <div
-                  aria-hidden="true"
-                  className={styles['upload-icon']}
-                  data-identifier="asset-drop-zone-icon"
-                >
-                  <i className="far fa-images" />
-                </div>
-                <div className={styles['upload-prompt']}>
-                  <WrappedMessage message={messages.assetsDropZoneBrowseLabel} >
-                    { displayText => (
-                      <span
-                        className={styles['upload-prompt-primary']}
-                        data-identifier="asset-drop-zone-browse-button"
-                      >
-                        {displayText}
-                      </span>
-                    )}
-                  </WrappedMessage>
-                  <WrappedMessage message={messages.assetsDropZoneHeader}>
-                    { displayText => (
-                      <span className={styles['upload-prompt-secondary']} data-identifier="asset-drop-zone-header"> {displayText}</span>
-                    )}
-                  </WrappedMessage>
-                </div>
-                <WrappedMessage
-                  message={messages.assetsDropZoneMaxFileSizeLabel}
-                  values={{
-                    maxFileSizeMB: this.props.maxFileSizeMB,
-                  }}
-                >
-                  { displayText => (
-                    <div
-                      aria-hidden="true"
-                      className={styles['upload-info']}
-                      data-identifier="asset-drop-zone-max-file-size-label"
-                      id="asset-drop-zone-max-file-size-label"
-                    >
-                      {displayText}
-                    </div>
-                  )}
-                </WrappedMessage>
-                {this.props.supportedFileTypes !== undefined &&
-                    <WrappedMessage message={messages.assetsDropZoneSupportedFileTypesLabel} values={{filesTypesList: this.props.supportedFileTypes}}>
-                    { displayText => (
-                      <p
-                        aria-hidden
-                        className={styles['center-text'] + " supported-files-types"}
-                        data-identifier="asset-drop-zone-supported-file-types-label"
-                        id="asset-drop-zone-supported-file-types-label"
-                      >
-                        {displayText}
-                      </p>
-                    )}
-                    </WrappedMessage>
-                }
-                {this.props.imageSize !== undefined &&
-                    <WrappedMessage message={messages.assetsDropZoneImageSizeRecommandationLabel} values={{imageSize: this.props.imageSize}}>
-                    { displayText => (
-                      <p
-                        aria-hidden
-                        className={styles['center-text'] + " image-size-recommendation"}
-                        data-identifier="asset-drop-zone-image-size-recommandation-label"
-                        id="asset-drop-zone-image-size-recommandation-label"
-                      >
-                        {displayText}
-                      </p>
-                    )}
-                    </WrappedMessage>
-                }
-              </Dropzone>
+            <div
+              role="region"
+              aria-label={regionLabel}
+              className={classNames(
+                styles['assets-drop-zone'],
+                { [styles.collapsedZoneStyle]: this.props.collapseBorder },
+              )}
+            >
+              {this.props.compactStyle ? this.renderCompactZone() : this.renderDefaultZone()}
             </div>
           )
         }
@@ -150,6 +232,7 @@ export default class AssetsDropZone extends React.Component {
 AssetsDropZone.propTypes = {
   acceptedFileTypes: PropTypes.string,
   buttonRef: PropTypes.func,
+  collapseBorder: PropTypes.bool,
   compactStyle: PropTypes.bool,
   courseDetails: PropTypes.shape({
     lang: PropTypes.string,
@@ -161,8 +244,10 @@ AssetsDropZone.propTypes = {
     id: PropTypes.string,
     revision: PropTypes.string,
   }).isRequired,
+  imageSize: PropTypes.string,
   maxFileCount: PropTypes.number,
   maxFileSizeMB: PropTypes.number,
+  supportedFileTypes: PropTypes.string,
   uploadAssets: PropTypes.func.isRequired,
   uploadExceedMaxCount: PropTypes.func.isRequired,
   uploadExceedMaxSize: PropTypes.func.isRequired,
@@ -173,7 +258,10 @@ AssetsDropZone.propTypes = {
 AssetsDropZone.defaultProps = {
   acceptedFileTypes: undefined,
   buttonRef: () => {},
+  collapseBorder: undefined,
   compactStyle: false,
+  imageSize: undefined,
   maxFileCount: 1000,
   maxFileSizeMB: 10,
+  supportedFileTypes: undefined,
 };

package/src/components/AssetsList/AssetsList.scss

@@ -38,9 +38,8 @@ $badge-fg: #1717ab;
       background: #b0b0cd;
     }
   }
-}
 
-.asset-grid-item {
+  .asset-grid-item {
   flex-shrink: 0;
   width: 100px;
   cursor: pointer;
@@ -182,3 +181,4 @@ ol {
 .unbulleted-list-item {
   list-style: none;
 }
+}