@nualang/nualang-ui-components 0.1.1167 → 0.1.1168

package/dist/Chat/Messages/Message/Message.js

@@ -18,17 +18,16 @@ var _RecordVoiceOver = _interopRequireDefault(require("@mui/icons-material/Recor
 var _VoiceOverOff = _interopRequireDefault(require("@mui/icons-material/VoiceOverOff"));
 var _Delete = _interopRequireDefault(require("@mui/icons-material/Delete"));
 var _Create = _interopRequireDefault(require("@mui/icons-material/Create"));
-var _ArrowUpward = _interopRequireDefault(require("@mui/icons-material/ArrowUpward"));
-var _ArrowDownward = _interopRequireDefault(require("@mui/icons-material/ArrowDownward"));
 var _Button = _interopRequireDefault(require("@mui/material/Button"));
-var _ButtonGroup = _interopRequireDefault(require("@mui/material/ButtonGroup"));
 var _HoverText = _interopRequireDefault(require("../../../Misc/HoverText/HoverText"));
 var _VoiceMessage = _interopRequireDefault(require("../../VoiceMessage"));
 var _material = require("@mui/material");
 var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
+var _DragIndicator = _interopRequireDefault(require("@mui/icons-material/DragIndicator"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const useStyles = (0, _mui.makeStyles)()((theme, {
   isMyMessage,
   isButton,
@@ -44,7 +43,8 @@ const useStyles = (0, _mui.makeStyles)()((theme, {
   },
   message: {
     display: "flex",
-    maxWidth: 500
+    maxWidth: 500,
+    gap: "3px"
   },
   avatar: {
     [theme.breakpoints.down("md")]: {
@@ -297,7 +297,8 @@ function Message({
   accessibilityText,
   accessibilityIndex,
   isLivePlayer = false,
-  siteLanguage
+  siteLanguage,
+  provided
 }) {
   const theme = (0, _styles.useTheme)();
   const messageContainerId = `message${messageIndex}`;
@@ -413,8 +414,13 @@ function Message({
     languageTag: languageTag
   }), isListenOnly && /*#__PURE__*/_react.default.createElement(WaveformImage, null)), !isButton && /*#__PURE__*/_react.default.createElement("div", {
     className: classes.bubble,
-    id: messageContainerId
-  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    id: messageContainerId,
+    style: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between"
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
     variant: "subtitle2",
     component: "h4",
     gutterBottom: true,
@@ -470,7 +476,7 @@ function Message({
     label: /*#__PURE__*/_react.default.createElement(_Typography.default, {
       variant: "body2"
     }, t("save_recording_to_report"))
-  })))), /*#__PURE__*/_react.default.createElement("div", {
+  }))))), /*#__PURE__*/_react.default.createElement("div", {
     className: classes.additionalInfo
   }, !isLivePlayer && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, isCurrentMessagePlaying ? /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
     title: t("stop_speaking")
@@ -532,18 +538,7 @@ function Message({
     className: classes.visuallyHidden
   }, liveMessage))), /*#__PURE__*/_react.default.createElement("div", {
     className: classes.actions
-  }, moveScriptItem && /*#__PURE__*/_react.default.createElement(_ButtonGroup.default, {
-    color: "inherit",
-    size: "small",
-    className: classes.button,
-    fullWidth: true
-  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
-    onClick: () => moveScriptItem(messageIndex, messageIndex - 1),
-    disabled: messageIndex < 1
-  }, /*#__PURE__*/_react.default.createElement(_ArrowUpward.default, null)), /*#__PURE__*/_react.default.createElement(_Button.default, {
-    onClick: () => moveScriptItem(messageIndex, messageIndex + 1),
-    disabled: messageIndex + 1 === messageCount
-  }, /*#__PURE__*/_react.default.createElement(_ArrowDownward.default, null))), handleEditMessage && /*#__PURE__*/_react.default.createElement(_Button.default, {
+  }, handleEditMessage && /*#__PURE__*/_react.default.createElement(_Button.default, {
     variant: "outlined",
     className: classes.button,
     disabled: !handleEditMessage,
@@ -559,5 +554,14 @@ function Message({
     size: "small",
     startIcon: /*#__PURE__*/_react.default.createElement(_Delete.default, null),
     color: "inherit"
-  }, t("remove"))))));
+  }, t("remove")))), /*#__PURE__*/_react.default.createElement("div", null, moveScriptItem && /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+    title: t("move_message"),
+    enterDelay: 300
+  }, /*#__PURE__*/_react.default.createElement(_IconButton.default, _extends({
+    size: "large",
+    "aria-label": "Drag Message",
+    sx: {
+      cursor: "grab"
+    }
+  }, provided ? provided.dragHandleProps : {}), /*#__PURE__*/_react.default.createElement(_DragIndicator.default, null))))));
 }

package/dist/Chat/Messages/Messages.js

@@ -10,6 +10,7 @@ var _Box = _interopRequireDefault(require("@mui/material/Box"));
 var _Message = _interopRequireDefault(require("./Message"));
 var _Question = _interopRequireDefault(require("./Question"));
 var _material = require("@mui/material");
+var _reactBeautifulDnd = require("react-beautiful-dnd");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -57,6 +58,7 @@ function Messages({
   roleplayImage,
   siteLanguage,
   answerCounts,
+  moveScriptItem,
   ...otherProps
 }) {
   const {
@@ -80,6 +82,9 @@ function Messages({
       }, 0);
     }
   }, [disableScroll, messages.length, currentMessage, isTimeUp]);
+  const onDragEnd = result => {
+    result.destination && moveScriptItem(result.source.index, result.destination.index);
+  };
   return /*#__PURE__*/_react.default.createElement("div", {
     id: "messages",
     className: classes.root,
@@ -90,7 +95,13 @@ function Messages({
       maxWidth: 800,
       mx: "auto"
     }
-  }, isLiveGame && isLivePlayer && /*#__PURE__*/_react.default.createElement(_Box.default, {
+  }, /*#__PURE__*/_react.default.createElement(_reactBeautifulDnd.DragDropContext, {
+    onDragEnd: onDragEnd
+  }, /*#__PURE__*/_react.default.createElement(_reactBeautifulDnd.Droppable, {
+    droppableId: "droppableMessages"
+  }, provided => /*#__PURE__*/_react.default.createElement("div", _extends({}, provided.droppableProps, {
+    ref: provided.innerRef
+  }), isLiveGame && isLivePlayer && /*#__PURE__*/_react.default.createElement(_Box.default, {
     sx: {
       display: "flex",
       flexDirection: "column"
@@ -121,13 +132,45 @@ function Messages({
     sx: {
       pb: 5
     }
-  }, t("story_description")), messages.map((m, i) => {
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isLivePlayer && !m.question && /*#__PURE__*/_react.default.createElement(_Message.default, _extends({
+  }, t("story_description"))), messages.map((m, i) => {
+    let isCurrentMessage = m === currentMessage;
+    return moveScriptItem ? /*#__PURE__*/_react.default.createElement(_reactBeautifulDnd.Draggable, {
+      key: i,
+      draggableId: `message-${i}`,
+      index: i
+    }, (provided, snapshot) => /*#__PURE__*/_react.default.createElement("div", _extends({
+      ref: provided.innerRef
+    }, provided.draggableProps, {
+      style: {
+        ...provided.draggableProps.style,
+        opacity: snapshot.isDragging ? 0.8 : 1
+      }
+    }), m?.question && !isLivePlayer ? /*#__PURE__*/_react.default.createElement(_Question.default, _extends({
+      t: t,
       languageTag: languageTag,
+      key: `messx_${i}`,
+      messageIndex: i,
+      messageCount: messages.length,
+      answerAttempts: answerAttempts,
+      isLiveGame: isLiveGame,
+      isLivePlayer: isLivePlayer,
+      isTimeUp: isCurrentMessage ? isTimeUp : true,
+      time: time,
+      handleTimeUp: handleTimeUp,
+      setCurrentAnswer: setCurrentAnswer,
+      setIsAnswered: setIsAnswered,
+      isAnswered: isAnswered,
+      handleContinue: handleContinue,
+      isCurrentMessage: isCurrentMessage,
+      answerCounts: answerCounts,
+      messages: messages,
+      moveScriptItem: moveScriptItem,
+      provided: provided
+    }, m, otherProps)) : /*#__PURE__*/_react.default.createElement(_Message.default, _extends({
       t: t,
+      languageTag: languageTag,
       key: `messy_${i}`,
       disableTranslation: disableTranslation,
-      disableHover: disableHover,
       messageIndex: i,
       voiceSpeed: voiceSpeed,
       messageCount: messages.length,
@@ -142,11 +185,10 @@ function Messages({
       gameId: gameId,
       speak: speak,
       isLivePlayer: isLivePlayer,
-      siteLanguage: siteLanguage
-    }, m, otherProps)));
-  })), messages.map((m, i) => {
-    let isCurrentMessage = m === currentMessage;
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, m?.question && !isLivePlayer && /*#__PURE__*/_react.default.createElement(_Question.default, _extends({
+      siteLanguage: siteLanguage,
+      moveScriptItem: moveScriptItem,
+      provided: provided
+    }, m, otherProps)))) : /*#__PURE__*/_react.default.createElement("div", null, m?.question && !isLivePlayer ? /*#__PURE__*/_react.default.createElement(_Question.default, _extends({
       languageTag: languageTag,
       key: `messx_${i}`,
       messageIndex: i,
@@ -164,9 +206,8 @@ function Messages({
       isCurrentMessage: isCurrentMessage,
       answerCounts: answerCounts,
       messages: messages
-    }, m, otherProps)), !m?.question && !isLivePlayer && /*#__PURE__*/_react.default.createElement(_Message.default, _extends({
+    }, m, otherProps)) : /*#__PURE__*/_react.default.createElement(_Message.default, _extends({
       languageTag: languageTag,
-      t: t,
       key: `messy_${i}`,
       disableTranslation: disableTranslation,
       messageIndex: i,
@@ -185,6 +226,6 @@ function Messages({
       isLivePlayer: isLivePlayer,
       siteLanguage: siteLanguage
     }, m, otherProps)));
-  })), afterElements);
+  }), provided.placeholder)))), afterElements);
 }
 var _default = exports.default = /*#__PURE__*/_react.default.memo(Messages);

package/dist/Chat/Messages/Question/Question.js

@@ -11,17 +11,17 @@ var _Check = _interopRequireDefault(require("@mui/icons-material/Check"));
 var _Cancel = _interopRequireDefault(require("@mui/icons-material/Cancel"));
 var _Delete = _interopRequireDefault(require("@mui/icons-material/Delete"));
 var _Create = _interopRequireDefault(require("@mui/icons-material/Create"));
-var _ArrowUpward = _interopRequireDefault(require("@mui/icons-material/ArrowUpward"));
-var _ArrowDownward = _interopRequireDefault(require("@mui/icons-material/ArrowDownward"));
 var _Circle = _interopRequireDefault(require("@mui/icons-material/Circle"));
 var _reactCountdownCircleTimer = require("react-countdown-circle-timer");
 var _styles = require("@mui/material/styles");
 var _material = require("@mui/material");
 var _PlayArrow = _interopRequireDefault(require("@mui/icons-material/PlayArrow"));
 var _Pause = _interopRequireDefault(require("@mui/icons-material/Pause"));
+var _DragIndicator = _interopRequireDefault(require("@mui/icons-material/DragIndicator"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 // utils
 // import { shuffle } from "../../../utils/index";
 
@@ -272,7 +272,8 @@ function Question({
   isAnswered,
   handleContinue,
   answerCounts,
-  messages
+  messages,
+  provided
 }) {
   const {
     classes
@@ -300,6 +301,11 @@ function Question({
     className: classes.root
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: classes.question
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: "flex",
+      alignItems: "center"
+    }
   }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
     container: true,
     justifyContent: "center",
@@ -374,20 +380,18 @@ function Question({
     answerCounts: answerCounts,
     messages: messages,
     messageIndex: messageIndex
-  }))), /*#__PURE__*/_react.default.createElement("div", {
+  }))), moveScriptItem && /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
+    title: t("move_question"),
+    enterDelay: 300
+  }, /*#__PURE__*/_react.default.createElement(_material.IconButton, _extends({
+    size: "large",
+    "aria-label": "Drag Message",
+    sx: {
+      cursor: "grab"
+    }
+  }, provided ? provided.dragHandleProps : {}), /*#__PURE__*/_react.default.createElement(_DragIndicator.default, null)))), /*#__PURE__*/_react.default.createElement("div", {
     className: classes.actions
-  }, moveScriptItem && /*#__PURE__*/_react.default.createElement(_material.ButtonGroup, {
-    color: "inherit",
-    size: "small",
-    className: classes.button,
-    fullWidth: true
-  }, /*#__PURE__*/_react.default.createElement(_material.Button, {
-    onClick: () => moveScriptItem(messageIndex, messageIndex - 1),
-    disabled: messageIndex < 1
-  }, /*#__PURE__*/_react.default.createElement(_ArrowUpward.default, null)), /*#__PURE__*/_react.default.createElement(_material.Button, {
-    onClick: () => moveScriptItem(messageIndex, messageIndex + 1),
-    disabled: messageIndex + 1 === messageCount
-  }, /*#__PURE__*/_react.default.createElement(_ArrowDownward.default, null))), handleEditQuestion && /*#__PURE__*/_react.default.createElement(_material.Button, {
+  }, handleEditQuestion && /*#__PURE__*/_react.default.createElement(_material.Button, {
     onClick: () => handleEditQuestion(messageIndex),
     variant: "outlined",
     className: classes.button,

package/dist/Containers/App/App.js

@@ -6,8 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactRouterDom = require("react-router-dom");
-var _Hidden = _interopRequireDefault(require("@mui/material/Hidden"));
-var _Button = _interopRequireDefault(require("@mui/material/Button"));
 var _DefaultColourButton = _interopRequireDefault(require("../../Misc/DefaultColourButton/DefaultColourButton"));
 var _styles = require("@mui/material/styles");
 var _mui = require("tss-react/mui");
@@ -21,7 +19,12 @@ var _WhatsNew = _interopRequireDefault(require("../../Misc/WhatsNew/WhatsNew"));
 var _ThemeToggle = _interopRequireDefault(require("../../Misc/ThemeToggle"));
 var _SignOut = _interopRequireDefault(require("../../Misc/SignOut"));
 var _Snackbar = _interopRequireDefault(require("../../Misc/Snackbar"));
+var _School = _interopRequireDefault(require("@mui/icons-material/School"));
+var _BubbleChart = _interopRequireDefault(require("@mui/icons-material/BubbleChart"));
+var _Add = _interopRequireDefault(require("@mui/icons-material/Add"));
+var _UpgradeSubscription = _interopRequireDefault(require("../../Dialogs/UpgradeSubscription/UpgradeSubscription"));
 var _nav = _interopRequireDefault(require("../../Navigation/_nav"));
+var _material = require("@mui/material");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -85,6 +88,17 @@ function App({
   const isLgScreen = (0, _useMediaQuery.default)(theme.breakpoints.up("md"));
   const [hideSkipNavigation, setHideSkipNavigation] = (0, _react.useState)(true);
   const [isAppContainerLoading, setIsAppContainerLoading] = (0, _react.useState)(true);
+  const [anchorEl, setAnchorEl] = (0, _react.useState)(null);
+  const [isUpgradeSubscriptionOpen, setIsUpgradeSubscriptionOpen] = (0, _react.useState)(false);
+  const handleOpenUpgradeSubscriptionModal = () => {
+    setIsUpgradeSubscriptionOpen(true);
+  };
+  const handleCloseUpgradeSubcriptionModal = () => {
+    setIsUpgradeSubscriptionOpen(false);
+  };
+  const handleSubscriptionPage = () => {
+    window.open(upgradePlanURL, "_blank");
+  };
   const {
     classes
   } = useStyles({
@@ -92,6 +106,8 @@ function App({
     isLgScreen,
     isAppContainerLoading
   });
+  const isCreateMenuOpen = Boolean(anchorEl);
+  const navigate = (0, _reactRouterDom.useNavigate)();
   (0, _react.useEffect)(() => {
     const isSidebarCollapsed = localStorage.getItem("nualang-is-sidebar-collapsed");
     if (isSidebarCollapsed && isSidebarCollapsed === "true") {
@@ -104,6 +120,24 @@ function App({
     setIsCollapsed(newVal);
     localStorage.setItem("nualang-is-sidebar-collapsed", newVal.toString());
   };
+  const handleClickCreate = event => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleCloseCreate = () => {
+    setAnchorEl(null);
+  };
+  const handleCreateClassroom = () => {
+    if (subscription.isPaidUser) {
+      navigate("/classrooms/create");
+    } else {
+      handleOpenUpgradeSubscriptionModal();
+    }
+    handleCloseCreate();
+  };
+  const handleCreateCourse = () => {
+    navigate("/courses/create");
+    handleCloseCreate();
+  };
   const hiddenStyle = {
     position: "absolute",
     left: "-10000px",
@@ -152,15 +186,36 @@ function App({
     sx: {
       fontSize: isLgScreen ? null : 12
     }
-  }, t("upgrade_plan")), isLgScreen && /*#__PURE__*/_react.default.createElement(_WhatsNew.default, {
+  }, t("upgrade_plan")), user && user["custom:role"] === "teach" && (isLgScreen ? /*#__PURE__*/_react.default.createElement(_material.Button, {
+    variant: "contained",
+    onClick: handleClickCreate,
+    startIcon: /*#__PURE__*/_react.default.createElement(_Add.default, null),
+    color: "secondary"
+  }, t("create")) : /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
+    title: t("create"),
+    enterDelay: 300
+  }, /*#__PURE__*/_react.default.createElement(_material.IconButton, {
+    color: "inherit",
+    "aria-label": t("create"),
+    "aria-haspopup": "true",
+    onClick: handleClickCreate
+  }, /*#__PURE__*/_react.default.createElement(_Add.default, null)))), isLgScreen && /*#__PURE__*/_react.default.createElement(_WhatsNew.default, {
     t: t,
     whatsNewMarkdown: whatsNewMarkdown,
     whatsNewDate: whatsNewDate
-  }), /*#__PURE__*/_react.default.createElement(_LanguageSelector.default, {
+  }), /*#__PURE__*/_react.default.createElement(_material.Menu, {
+    anchorEl: anchorEl,
+    open: isCreateMenuOpen,
+    onClose: handleCloseCreate
+  }, /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
+    onClick: handleCreateClassroom
+  }, /*#__PURE__*/_react.default.createElement(_material.ListItemIcon, null, /*#__PURE__*/_react.default.createElement(_School.default, null)), /*#__PURE__*/_react.default.createElement(_material.ListItemText, null, t("classroom"))), /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
+    onClick: handleCreateCourse
+  }, /*#__PURE__*/_react.default.createElement(_material.ListItemIcon, null, /*#__PURE__*/_react.default.createElement(_BubbleChart.default, null)), /*#__PURE__*/_react.default.createElement(_material.ListItemText, null, t("course")))), /*#__PURE__*/_react.default.createElement(_LanguageSelector.default, {
     t: t,
     currentLanguage: currentLanguage,
     handleChangeLanguage: handleChangeLanguage
-  }), /*#__PURE__*/_react.default.createElement(_Hidden.default, {
+  }), /*#__PURE__*/_react.default.createElement(_material.Hidden, {
     smDown: true,
     implementation: "js"
   }, /*#__PURE__*/_react.default.createElement(_ThemeToggle.default, {
@@ -180,7 +235,7 @@ function App({
     color: "inherit",
     component: "a",
     href: `${window.location.search ? `${window.location.search}&action=signIn` : "?action=signIn"}`
-  }, t("sign_in")), /*#__PURE__*/_react.default.createElement(_Button.default, {
+  }, t("sign_in")), /*#__PURE__*/_react.default.createElement(_material.Button, {
     color: "secondary",
     variant: "contained",
     component: "a",
@@ -216,6 +271,13 @@ function App({
     closeSnackbar: closeSnackbar,
     snackbarMessage: snackbarMessage,
     snackbarType: snackbarType
+  }), /*#__PURE__*/_react.default.createElement(_UpgradeSubscription.default, {
+    key: "UpgradeSubscription",
+    t: t,
+    open: isUpgradeSubscriptionOpen,
+    handleClose: handleCloseUpgradeSubcriptionModal,
+    onConfirm: handleSubscriptionPage,
+    subscription: subscription
   }));
 }
 var _default = exports.default = App;

package/dist/Exercises/Bot/Bot.js

@@ -302,6 +302,38 @@ function Bot({
       setNotEnoughMessages(false);
     }
   }, [botMessages]);
+  const getBotRiveScriptEndingText = rs => {
+    //variables names as we have it in each riveScript template.
+    const botEndVarNames = ["ending", "correctfinal", "incorrectfinal", "endMessage"];
+    const lines = rs.split("\n");
+    const botEndingTextArray = [];
+    for (let line of lines) {
+      for (let varName of botEndVarNames) {
+        //looking to see if any of the variables names from the array exist in the current bot riveScript
+        const varPattern = new RegExp(`^! var ${varName} = (.+)$`);
+        const match = line.match(varPattern);
+        if (match) {
+          botEndingTextArray.push(match[1].trim());
+        }
+      }
+    }
+    //returning the ending variable text(s) of the bot e.g. ['The conversation has ended.']
+    return botEndingTextArray.length > 0 ? botEndingTextArray : null;
+  };
+  (0, _react.useEffect)(() => {
+    if (bot && bot.riveFile) {
+      const botEndingTextArray = getBotRiveScriptEndingText(bot.riveFile);
+      const normalizedCurrentPhrase = currentPhrase.trim().normalize();
+      const normalizedEndingVars = botEndingTextArray.map(varString => varString.trim().normalize());
+
+      //Checking if the current phrase text and the bot end text is the same
+      if (normalizedEndingVars.includes(normalizedCurrentPhrase)) {
+        setTimeout(() => {
+          handleCompleteExercise();
+        }, 2000);
+      }
+    }
+  }, [currentPhrase, bot]);
   (0, _react.useEffect)(() => {
     if (open && !run && !localStorage.getItem(`bot-exercise-tour-completed`)) {
       setJoyrideState(prevState => ({

package/dist/Forms/CreateMeetingMultiStepForm/MeetingForm.js

@@ -40,7 +40,9 @@ function MeetingForm({
     editMeetingImages,
     meetingLink,
     backgroundImages = [],
-    meetingImages = []
+    meetingImages = [],
+    meetingTime,
+    meetingDate
   } = values;
   const [selectedSample, setSelectedSample] = (0, _react.useState)("");
   const [showForm, setShowForm] = (0, _react.useState)(false);
@@ -52,8 +54,8 @@ function MeetingForm({
   if (currentDateTime.add(1, "hour").date() !== currentDateTime.date()) {
     defaultMeetingDate = currentDateTime.add(1, "hour").format("MM/DD/YYYY");
   }
-  const [meetingDate, setMeetingDate] = (0, _react.useState)(defaultMeetingDate);
-  const [meetingTime, setMeetingTime] = (0, _react.useState)(defaultMeetingTime);
+  const [newMeetingDate, setNewMeetingDate] = (0, _react.useState)(defaultMeetingDate);
+  const [newMeetingTime, setNewMeetingTime] = (0, _react.useState)(defaultMeetingTime);
   const [initialBackgroundImages, setInitialBackgroundImages] = (0, _react.useState)([]);
   const [initialMeetingImages, setInitialMeetingImages] = (0, _react.useState)([]);
   (0, _react.useEffect)(() => {
@@ -72,16 +74,16 @@ function MeetingForm({
     handleChange({
       target: {
         name: "meetingDate",
-        value: meetingDate
+        value: newMeetingDate
       }
     });
     handleChange({
       target: {
         name: "meetingTime",
-        value: meetingTime
+        value: newMeetingTime
       }
     });
-  }, [meetingDate, meetingTime, handleChange]);
+  }, [newMeetingDate, newMeetingTime, handleChange]);
   const onChange = event => {
     handleChange({
       target: {
@@ -150,6 +152,7 @@ function MeetingForm({
       setInitialMeetingImages([]);
     }
   };
+  const dateTimePlaceholder = meetingTime && meetingDate ? (0, _dayjs.default)(meetingDate + " " + meetingTime) : (0, _dayjs.default)(defaultMeetingDate + " " + defaultMeetingTime);
   return /*#__PURE__*/_react.default.createElement(_material.Grid, {
     container: true,
     spacing: 2
@@ -352,13 +355,13 @@ function MeetingForm({
     components: ["DateTimePicker", "DateTimePicker"]
   }, /*#__PURE__*/_react.default.createElement(_DateTimePicker.DateTimePicker, {
     label: t("due_date"),
-    value: (0, _dayjs.default)(defaultMeetingDate + " " + defaultMeetingTime),
+    value: dateTimePlaceholder,
     onChange: newValue => {
       const datePickerValue = (0, _dayjs.default)(newValue);
       const date = datePickerValue.format("MM/DD/YYYY");
       const time = datePickerValue.format("h:mm A");
-      setMeetingDate(date);
-      setMeetingTime(time);
+      setNewMeetingDate(date);
+      setNewMeetingTime(time);
     }
   }))))));
 }

package/dist/Screens/Classrooms/Classrooms.js

@@ -45,6 +45,7 @@ function Classrooms({
   role,
   learnClassrooms = [],
   teachClassrooms = [],
+  archivedClassrooms = [],
   isLoading,
   placeholderImageUrl,
   singleLineGrid = false,
@@ -84,20 +85,16 @@ function Classrooms({
     window.open(`${mainSiteUrl}/pricing/app`, "_blank");
   };
   const tabs = [{
-    label: `${t("learn")} ${isLoading ? "" : `(${learnClassrooms.length})`}`,
-    id: "Learn"
+    label: `${t("active")} ${isLoading ? "" : `(${teachClassrooms.length})`}`,
+    id: "active"
   }, {
-    label: `${t("teach")} ${isLoading ? "" : `(${teachClassrooms.length})`}`,
-    id: "Teach"
+    label: `${t("archived")} ${isLoading ? "" : `(${archivedClassrooms.length})`}`,
+    id: "archived"
   }];
-  let initialTabValue;
+  let initialTabValue = 0;
   if (window.location.hash) {
     const selectedTab = window.location.hash;
     initialTabValue = tabs.findIndex(tab => tab.id === selectedTab.replace("#", ""));
-  } else if (role === "teach") {
-    initialTabValue = 1; // Set initial tab to "Teach"
-  } else {
-    initialTabValue = learnClassrooms.length === 0 && teachClassrooms.length > 0 ? 1 : 0;
   }
   return /*#__PURE__*/_react.default.createElement("div", {
     className: classes.root
@@ -115,28 +112,18 @@ function Classrooms({
     "aria-label": t("find_classroom"),
     color: "inherit",
     size: "large"
-  }, /*#__PURE__*/_react.default.createElement(_Search.default, null))), /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
-    title: t("create_classroom")
-  }, /*#__PURE__*/_react.default.createElement(_material.IconButton, {
-    "data-cy": "add-classroom-fab",
-    onClick: authenticated ? subscription.isPaidUser ? handleCreateClassroom : handleOpenUpgradeSubscriptionModal : () => {
-      handleSignIn();
-    },
-    "aria-label": t("create_classroom"),
-    color: "inherit",
-    size: "large"
-  }, /*#__PURE__*/_react.default.createElement(_Add.default, null)))), /*#__PURE__*/_react.default.createElement(_ResponsiveTabs.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Search.default, null)))), role === "teach" ? /*#__PURE__*/_react.default.createElement(_ResponsiveTabs.default, {
     t: t,
     tabs: tabs,
     centered: true,
     initialValue: initialTabValue
   }, /*#__PURE__*/_react.default.createElement(_material.Box, {
     py: 1
-  }, isLoading || learnClassrooms.length > 0 ? /*#__PURE__*/_react.default.createElement(_Classrooms.default, {
+  }, isLoading || teachClassrooms.length > 0 ? /*#__PURE__*/_react.default.createElement(_Classrooms.default, {
     t: t,
     reviewPlaceholderImageUrl: reviewPlaceholderImageUrl,
     memberPlaceholderImageUrl: memberPlaceholderImageUrl,
-    classrooms: Array.isArray(learnClassrooms) && learnClassrooms.length ? learnClassrooms : null,
+    classrooms: Array.isArray(teachClassrooms) && teachClassrooms.length ? teachClassrooms : null,
     handleJoinClassroom: handleJoinClassroom,
     handleLeaveClassroom: handleLeaveClassroom,
     handleViewClassroom: handleViewClassroom,
@@ -159,17 +146,17 @@ function Classrooms({
     placeholderImageUrl: placeholderImageUrl,
     title: /*#__PURE__*/_react.default.createElement(_material.Typography, {
       className: classes.title
-    }, t("learn_classrooms_title")),
-    description: t("learn_classrooms_desc"),
+    }, t("teach_classrooms_title")),
+    description: t("teach_classrooms_desc"),
     handleSearchClassrooms: handleSearchClassrooms,
     mainSiteUrl: mainSiteUrl
   }))), /*#__PURE__*/_react.default.createElement(_material.Box, {
     py: 1
-  }, isLoading || teachClassrooms.length > 0 ? /*#__PURE__*/_react.default.createElement(_Classrooms.default, {
+  }, isLoading || archivedClassrooms.length > 0 ? /*#__PURE__*/_react.default.createElement(_Classrooms.default, {
     t: t,
     reviewPlaceholderImageUrl: reviewPlaceholderImageUrl,
     memberPlaceholderImageUrl: memberPlaceholderImageUrl,
-    classrooms: Array.isArray(teachClassrooms) && teachClassrooms.length ? teachClassrooms : null,
+    classrooms: Array.isArray(archivedClassrooms) && archivedClassrooms.length ? archivedClassrooms : null,
     handleJoinClassroom: handleJoinClassroom,
     handleLeaveClassroom: handleLeaveClassroom,
     handleViewClassroom: handleViewClassroom,
@@ -191,11 +178,44 @@ function Classrooms({
     placeholderImageUrl: placeholderImageUrl,
     title: /*#__PURE__*/_react.default.createElement(_material.Typography, {
       className: classes.title
-    }, t("teach_classrooms_title")),
-    description: t("teach_classrooms_desc"),
-    handleCreateClassroom: handleCreateClassroom,
+    }, t("archived_classrooms_title")),
+    description: t("archived_classrooms_desc"),
+    handleCreateClassroom: null,
     subscription: subscription
-  })))), /*#__PURE__*/_react.default.createElement(_UpgradeSubscription.default, {
+  })))) : /*#__PURE__*/_react.default.createElement(_material.Box, {
+    py: 1
+  }, isLoading || learnClassrooms.length > 0 ? /*#__PURE__*/_react.default.createElement(_Classrooms.default, {
+    t: t,
+    reviewPlaceholderImageUrl: reviewPlaceholderImageUrl,
+    memberPlaceholderImageUrl: memberPlaceholderImageUrl,
+    classrooms: Array.isArray(learnClassrooms) && learnClassrooms.length ? learnClassrooms : null,
+    handleJoinClassroom: handleJoinClassroom,
+    handleLeaveClassroom: handleLeaveClassroom,
+    handleViewClassroom: handleViewClassroom,
+    membersProps: membersProps,
+    getMemberDetails: getMemberDetails,
+    getMemberInfo: getMemberInfo,
+    getUserReviews: getUserReviews,
+    singleLineGrid: singleLineGrid,
+    singleLineGridCols: singleLineGridCols,
+    getClassroomReviews: getClassroomReviews,
+    getClassroomMember: getClassroomMember,
+    getClassroomMembers: getClassroomMembers,
+    username: username,
+    handleViewUserProfile: handleViewUserProfile,
+    cardTitleComponent: "h2"
+  }) : /*#__PURE__*/_react.default.createElement(_material.Box, {
+    py: 2
+  }, /*#__PURE__*/_react.default.createElement(_Classrooms2.default, {
+    t: t,
+    placeholderImageUrl: placeholderImageUrl,
+    title: /*#__PURE__*/_react.default.createElement(_material.Typography, {
+      className: classes.title
+    }, t("learn_classrooms_title")),
+    description: t("learn_classrooms_desc"),
+    handleSearchClassrooms: handleSearchClassrooms,
+    mainSiteUrl: mainSiteUrl
+  }))), /*#__PURE__*/_react.default.createElement(_UpgradeSubscription.default, {
     key: "UpgradeSubscription",
     t: t,
     open: isUpgradeSubscriptionOpen,

package/dist/Screens/Classrooms/Classrooms.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.props = exports.default = exports.SingleLineGrid = exports.NotFoundWithoutSub = exports.NotFoundWithSub = exports.Loading = exports.Loaded = void 0;
+exports.props = exports.default = exports.Teacher = exports.Student = exports.SingleLineGrid = exports.NotFoundWithoutSub = exports.NotFoundWithSub = exports.Loading = exports.Loaded = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _Classrooms = _interopRequireDefault(require("./Classrooms"));
 var _Classrooms2 = require("../../Lists/Classrooms/Classrooms.stories");
@@ -13,6 +13,7 @@ const Template = args => /*#__PURE__*/_react.default.createElement(_Classrooms.d
 const props = exports.props = {
   learnClassrooms: [],
   teachClassrooms: [],
+  archivedClassrooms: [],
   isLoading: false,
   getMemberDetails: _Members.getMemberDetails,
   subscription: {
@@ -59,4 +60,17 @@ SingleLineGrid.args = {
   singleLineGrid: true,
   singleLineGridCols: 4
 };
-SingleLineGrid.storyName = "loaded - single line grid";
+SingleLineGrid.storyName = "loaded - single line grid";
+const Teacher = exports.Teacher = Template.bind({});
+Teacher.args = {
+  ...props,
+  role: "teach",
+  teachClassrooms: _Classrooms2.classrooms,
+  archivedClassrooms: _Classrooms2.classrooms
+};
+const Student = exports.Student = Template.bind({});
+Student.args = {
+  ...props,
+  role: "learn",
+  learnClassrooms: _Classrooms2.classrooms
+};

package/dist/Screens/Classrooms/SearchClassrooms/SearchClassrooms.js

@@ -161,13 +161,7 @@ function SearchFilters({
     item: true,
     xs: 12,
     sm: 2.5
-  }, /*#__PURE__*/_react.default.createElement(_material.Button, {
-    onClick: subscription.isPaidUser ? handleCreateClassroom : handleOpenUpgradeSubscriptionModal,
-    variant: "contained",
-    color: "primary",
-    endIcon: /*#__PURE__*/_react.default.createElement(_Add.default, null),
-    fullWidth: true
-  }, t("create_classroom")), /*#__PURE__*/_react.default.createElement(_UpgradeSubscription.default, {
+  }, /*#__PURE__*/_react.default.createElement(_UpgradeSubscription.default, {
     key: "UpgradeSubscription",
     t: t,
     open: isUpgradeSubscriptionOpen,

package/dist/Screens/Classrooms/ViewClassroom/ViewClassroom.js

@@ -1049,7 +1049,13 @@ function Classroom({
     display: "flex",
     alignItems: "center",
     mt: 2,
-    mb: 1
+    mb: 1,
+    sx: {
+      [theme.breakpoints.down("md")]: {
+        flexWrap: "wrap",
+        gap: 1
+      }
+    }
   }, isArchived && isCreator && /*#__PURE__*/_react.default.createElement(_material.Box, {
     mr: 1
   }, /*#__PURE__*/_react.default.createElement(_DefaultColourButton.default, {

package/dist/Screens/Courses/Courses.js

@@ -73,20 +73,20 @@ function Courses({
     classes
   } = useStyles();
   const tabs = [{
-    label: `${t("learn")} ${isLoading ? "" : `(${learnCourses.length})`}`,
-    id: "Learn"
+    label: `${t("created")} ${isLoading ? "" : `(${teachCourses.length})`}`,
+    id: "Created"
   }, {
-    label: `${t("teach")} ${isLoading ? "" : `(${teachCourses.length})`}`,
-    id: "Teach"
+    label: `${t("joined")} ${isLoading ? "" : `(${learnCourses.length})`}`,
+    id: "Joined"
   }];
   let initialTabValue;
   if (window.location.hash) {
     const selectedTab = window.location.hash;
     initialTabValue = tabs.findIndex(tab => tab.id === selectedTab.replace("#", ""));
   } else if (role === "teach") {
-    initialTabValue = 1; // Set initial tab to "Teach"
+    initialTabValue = 0; // Set initial tab to "Created"
   } else {
-    initialTabValue = learnCourses.length === 0 && teachCourses.length > 0 ? 1 : 0;
+    initialTabValue = learnCourses.length > 0 && teachCourses.length === 0 ? 1 : 0;
   }
   return /*#__PURE__*/_react.default.createElement("div", {
     className: classes.root
@@ -106,40 +106,31 @@ function Courses({
     "data-cy": "search-course-fab",
     size: "large",
     role: "link"
-  }, /*#__PURE__*/_react.default.createElement(_Search.default, null))), /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
-    title: t("create_course")
-  }, /*#__PURE__*/_react.default.createElement(_material.IconButton, {
-    onClick: handleCreateCourse,
-    "aria-label": t("create_course"),
-    color: "inherit",
-    "data-cy": "add-course-fab",
-    size: "large",
-    role: "link"
-  }, /*#__PURE__*/_react.default.createElement(_Add.default, null)))), /*#__PURE__*/_react.default.createElement(_ResponsiveTabs.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Search.default, null)))), /*#__PURE__*/_react.default.createElement(_ResponsiveTabs.default, {
     t: t,
     tabs: tabs,
     centered: true,
     initialValue: initialTabValue
   }, /*#__PURE__*/_react.default.createElement(_material.Box, {
     py: 1
-  }, isLoading || learnCourses.length > 0 ? /*#__PURE__*/_react.default.createElement(_Courses.default, {
+  }, isLoading || teachCourses.length > 0 ? /*#__PURE__*/_react.default.createElement(_Courses.default, {
     t: t,
-    courses: learnCourses !== undefined && Array.isArray(learnCourses) && learnCourses.length ? learnCourses : null,
+    courses: Array.isArray(teachCourses) && teachCourses.length ? teachCourses : null,
     completions: completions,
     handleStartCourse: handleStartCourse,
     handleLeaveCourse: handleLeaveCourse,
+    handleViewCourseTopic: handleViewCourseTopic,
     handleViewCourse: handleViewCourse,
     handleViewUserProfile: handleViewUserProfile,
     membersProps: membersProps,
-    handleViewCourseTopic: handleViewCourseTopic,
     getMemberDetails: getMemberDetails,
     getMemberInfo: getMemberInfo,
     getUserReviews: getUserReviews,
     avatars: avatars,
     singleLineGrid: singleLineGrid,
     singleLineGridCols: singleLineGridCols,
-    reviewPlaceholderImageUrl: reviewPlaceholderImageUrl,
     memberPlaceholderImageUrl: memberPlaceholderImageUrl,
+    reviewPlaceholderImageUrl: reviewPlaceholderImageUrl,
     getCourseSections: getCourseSections,
     getCourseReviews: getCourseReviews,
     getCourseMember: getCourseMember,
@@ -155,29 +146,29 @@ function Courses({
     placeholderImageUrl: placeholderImageUrl,
     title: /*#__PURE__*/_react.default.createElement(_material.Typography, {
       className: classes.title
-    }, t("learn_courses_title")),
-    description: t("learn_courses_desc"),
-    handleSearchCourses: handleSearchCourses
+    }, t("teach_courses_title")),
+    description: t("teach_courses_desc"),
+    handleCreateCourse: handleCreateCourse
   }))), /*#__PURE__*/_react.default.createElement(_material.Box, {
     py: 1
-  }, isLoading || teachCourses.length > 0 ? /*#__PURE__*/_react.default.createElement(_Courses.default, {
+  }, isLoading || learnCourses.length > 0 ? /*#__PURE__*/_react.default.createElement(_Courses.default, {
     t: t,
-    courses: Array.isArray(teachCourses) && teachCourses.length ? teachCourses : null,
+    courses: Array.isArray(learnCourses) && learnCourses.length ? learnCourses : null,
     completions: completions,
     handleStartCourse: handleStartCourse,
     handleLeaveCourse: handleLeaveCourse,
-    handleViewCourseTopic: handleViewCourseTopic,
     handleViewCourse: handleViewCourse,
     handleViewUserProfile: handleViewUserProfile,
     membersProps: membersProps,
+    handleViewCourseTopic: handleViewCourseTopic,
     getMemberDetails: getMemberDetails,
     getMemberInfo: getMemberInfo,
     getUserReviews: getUserReviews,
     avatars: avatars,
     singleLineGrid: singleLineGrid,
     singleLineGridCols: singleLineGridCols,
-    memberPlaceholderImageUrl: memberPlaceholderImageUrl,
     reviewPlaceholderImageUrl: reviewPlaceholderImageUrl,
+    memberPlaceholderImageUrl: memberPlaceholderImageUrl,
     getCourseSections: getCourseSections,
     getCourseReviews: getCourseReviews,
     getCourseMember: getCourseMember,
@@ -193,8 +184,8 @@ function Courses({
     placeholderImageUrl: placeholderImageUrl,
     title: /*#__PURE__*/_react.default.createElement(_material.Typography, {
       className: classes.title
-    }, t("teach_courses_title")),
-    description: t("teach_courses_desc"),
-    handleCreateCourse: handleCreateCourse
+    }, t("learn_courses_title")),
+    description: t("learn_courses_desc"),
+    handleSearchCourses: handleSearchCourses
   })))));
 }

package/dist/Screens/Courses/SearchCourses/SearchCourses.js

@@ -203,23 +203,94 @@ function SearchFilters({
   }))), /*#__PURE__*/_react.default.createElement(_material.Grid, {
     item: true,
     xs: 12,
-    md: 2.5
-  }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
-    container: true,
-    direction: "row",
-    alignItems: "center",
-    spacing: 1
-  }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    sm: 12,
+    md: 2
+  }, /*#__PURE__*/_react.default.createElement(_LanguageSelector.default, {
+    id: "forLang",
+    name: "forLang",
+    label: t("speakers_of"),
+    margin: "dense",
+    variant: "outlined",
+    fullWidth: true,
+    t: t,
+    languages: forLanguageOptions,
+    value: forLang,
+    onChange: handleFilterChange
+  })), /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    xs: 12,
+    sm: 12,
+    md: 2
+  }, /*#__PURE__*/_react.default.createElement(_material.TextField, {
+    select: true,
+    id: "difficulty",
+    name: "difficulty",
+    "data-cy": "difficulty",
+    label: t("difficulty"),
+    value: difficulty,
+    onChange: handleFilterChange,
+    margin: "dense",
+    variant: "outlined",
+    fullWidth: true
+  }, difficultyOptions)), /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    xs: 12,
+    sm: 12,
+    md: 2
+  }, /*#__PURE__*/_react.default.createElement(_SortBySelector.default, {
+    id: "sortBy",
+    name: "sort",
+    label: t("sort"),
+    margin: "dense",
+    variant: "outlined",
+    fullWidth: true,
+    t: t,
+    value: sort,
+    onChange: handleFilterChange,
+    sortByOptions: sortByOptions,
+    disabled: (!learnLang || learnLang === "all") && (!forLang || forLang === "all")
+  })), /*#__PURE__*/_react.default.createElement(_material.Grid, {
     item: true,
-    xs: 12
-  }, /*#__PURE__*/_react.default.createElement(_material.Button, {
-    onClick: handleCreateCourse,
-    variant: "contained",
-    color: "primary",
-    endIcon: /*#__PURE__*/_react.default.createElement(_Add.default, null),
+    xs: 12,
+    sm: 12,
+    md: searchText ? 3.35 : 2.5,
+    sx: theme => ({
+      transition: theme.transitions.create("all", {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.leavingScreen
+      })
+    })
+  }, /*#__PURE__*/_react.default.createElement(_material.TextField, {
+    id: "search",
+    name: "search",
+    "data-cy": "search",
+    label: t("search"),
+    value: searchText,
+    onChange: ev => setSearchText(ev.target.value),
+    margin: "dense",
+    variant: "outlined",
     fullWidth: true,
-    role: "link"
-  }, t("create_course"))))))));
+    InputProps: {
+      endAdornment: /*#__PURE__*/_react.default.createElement(_material.InputAdornment, {
+        position: "end",
+        "aria-label": t("find_bot"),
+        color: "inherit",
+        "data-cy": "search-bot",
+        size: "large"
+      }, /*#__PURE__*/_react.default.createElement(_Search.default, null))
+    }
+  })), /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    xs: 12,
+    sm: 12,
+    md: searchText ? 0.15 : 1,
+    sx: theme => ({
+      transition: theme.transitions.create("all", {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.leavingScreen
+      })
+    })
+  }))));
 }
 function SearchCourses({
   t = text => text,

package/dist/Screens/Courses/ViewCourse/ViewCourse.js

@@ -783,8 +783,10 @@ function Course({
     mt: 2,
     mb: 1,
     sx: {
-      flexWrap: "wrap",
-      gap: 1
+      [theme.breakpoints.down("md")]: {
+        flexWrap: "wrap",
+        gap: 1
+      }
     }
   }, !isMember && !isCreator && /*#__PURE__*/_react.default.createElement(_material.Box, {
     mr: 1

package/dist/Screens/Courses/ViewCourse/ViewTopic/ViewTopic.js

@@ -925,8 +925,10 @@ function Topic({
     mt: 2,
     mb: 1,
     sx: {
-      flexWrap: "wrap",
-      gap: 1
+      [theme.breakpoints.down("md")]: {
+        flexWrap: "wrap",
+        gap: 1
+      }
     }
   }, videoUrl && (isMember || isCreator) && /*#__PURE__*/_react.default.createElement(_material.Box, {
     mr: 1

package/dist/Screens/Dashboard/Dashboard.js

@@ -80,7 +80,6 @@ function Dashboard({
   getMemberInfo,
   getUserReviews,
   handleSearchCourses,
-  handleCreateCourse,
   handleSearchRoleplays,
   handleCreateRoleplay,
   handleSearchBots,
@@ -171,10 +170,7 @@ function Dashboard({
   }, /*#__PURE__*/_react.default.createElement(_material.ListItemIcon, null, /*#__PURE__*/_react.default.createElement(_Forum.default, null)), t("roleplay")), /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
     onClick: handleCreateBot,
     role: "link"
-  }, /*#__PURE__*/_react.default.createElement(_material.ListItemIcon, null, /*#__PURE__*/_react.default.createElement(_Face.default, null)), t("bot")), /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
-    onClick: handleCreateCourse,
-    role: "link"
-  }, /*#__PURE__*/_react.default.createElement(_material.ListItemIcon, null, /*#__PURE__*/_react.default.createElement(_BubbleChart.default, null)), t("course")))))), isPopularCoursesLoading || popularCourses.length > 0 ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.Box, {
+  }, /*#__PURE__*/_react.default.createElement(_material.ListItemIcon, null, /*#__PURE__*/_react.default.createElement(_Face.default, null)), t("bot")))))), isPopularCoursesLoading || popularCourses.length > 0 ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.Box, {
     pb: 2
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: classes.header
@@ -196,16 +192,7 @@ function Dashboard({
     "data-cy": "search-course-fab",
     size: "large",
     role: "link"
-  }, /*#__PURE__*/_react.default.createElement(_Search.default, null))), /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
-    title: t("create_course")
-  }, /*#__PURE__*/_react.default.createElement(_material.IconButton, {
-    onClick: handleCreateCourse,
-    "aria-label": t("create_course"),
-    color: "inherit",
-    "data-cy": "add-course-fab",
-    size: "large",
-    role: "link"
-  }, /*#__PURE__*/_react.default.createElement(_Add.default, null)))), /*#__PURE__*/_react.default.createElement(_Courses.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Search.default, null)))), /*#__PURE__*/_react.default.createElement(_Courses.default, {
     t: t,
     reviewPlaceholderImageUrl: reviewPlaceholderImageUrl,
     memberPlaceholderImageUrl: memberPlaceholderImageUrl,
@@ -254,16 +241,7 @@ function Dashboard({
     "data-cy": "search-course-fab",
     size: "large",
     role: "link"
-  }, /*#__PURE__*/_react.default.createElement(_Search.default, null))), /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
-    title: t("create_course")
-  }, /*#__PURE__*/_react.default.createElement(_material.IconButton, {
-    onClick: handleCreateCourse,
-    "aria-label": t("create_course"),
-    color: "inherit",
-    "data-cy": "add-course-fab",
-    size: "large",
-    role: "link"
-  }, /*#__PURE__*/_react.default.createElement(_Add.default, null)))), /*#__PURE__*/_react.default.createElement(_Courses.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Search.default, null)))), /*#__PURE__*/_react.default.createElement(_Courses.default, {
     t: t,
     reviewPlaceholderImageUrl: reviewPlaceholderImageUrl,
     memberPlaceholderImageUrl: memberPlaceholderImageUrl,
@@ -312,16 +290,7 @@ function Dashboard({
     "data-cy": "search-course-fab",
     size: "large",
     role: "link"
-  }, /*#__PURE__*/_react.default.createElement(_Search.default, null))), /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
-    title: t("create_course")
-  }, /*#__PURE__*/_react.default.createElement(_material.IconButton, {
-    onClick: handleCreateCourse,
-    "aria-label": t("create_course"),
-    color: "inherit",
-    "data-cy": "add-course-fab",
-    size: "large",
-    role: "link"
-  }, /*#__PURE__*/_react.default.createElement(_Add.default, null)))), /*#__PURE__*/_react.default.createElement(_Courses.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Search.default, null)))), /*#__PURE__*/_react.default.createElement(_Courses.default, {
     t: t,
     reviewPlaceholderImageUrl: reviewPlaceholderImageUrl,
     memberPlaceholderImageUrl: memberPlaceholderImageUrl,

package/dist/Screens/Profile/Profile.js

@@ -75,7 +75,6 @@ function Profile({
   getMemberInfo,
   getUserReviews,
   handleSearchCourses,
-  handleCreateCourse,
   handleSearchRoleplays,
   handleCreateRoleplay,
   handleSearchBots,
@@ -336,16 +335,7 @@ function Profile({
     "data-cy": "search-course-fab",
     size: "large",
     role: "link"
-  }, /*#__PURE__*/_react.default.createElement(_Search.default, null))), /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
-    title: t("create_course")
-  }, /*#__PURE__*/_react.default.createElement(_material.IconButton, {
-    onClick: handleCreateCourse,
-    "aria-label": t("create_course"),
-    color: "inherit",
-    "data-cy": "add-course-fab",
-    size: "large",
-    role: "link"
-  }, /*#__PURE__*/_react.default.createElement(_Add.default, null)))), /*#__PURE__*/_react.default.createElement(_Courses.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Search.default, null)))), /*#__PURE__*/_react.default.createElement(_Courses.default, {
     t: t,
     reviewPlaceholderImageUrl: reviewPlaceholderImageUrl,
     memberPlaceholderImageUrl: memberPlaceholderImageUrl,
@@ -393,15 +383,7 @@ function Profile({
     color: "inherit",
     "data-cy": "search-classroom-fab",
     size: "large"
-  }, /*#__PURE__*/_react.default.createElement(_Search.default, null))), /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
-    title: t("create_classroom")
-  }, /*#__PURE__*/_react.default.createElement(_material.IconButton, {
-    onClick: handleCreateClassroom,
-    "aria-label": t("create_classroom"),
-    color: "inherit",
-    "data-cy": "add-classroom-fab",
-    size: "large"
-  }, /*#__PURE__*/_react.default.createElement(_Add.default, null)))), /*#__PURE__*/_react.default.createElement(_Classrooms.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Search.default, null)))), /*#__PURE__*/_react.default.createElement(_Classrooms.default, {
     t: t,
     reviewPlaceholderImageUrl: reviewPlaceholderImageUrl,
     memberPlaceholderImageUrl: memberPlaceholderImageUrl,
@@ -534,16 +516,7 @@ function Profile({
     color: "inherit",
     "data-cy": "search-course-fab",
     size: "large"
-  }, /*#__PURE__*/_react.default.createElement(_Search.default, null))), /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
-    title: t("create_course")
-  }, /*#__PURE__*/_react.default.createElement(_material.IconButton, {
-    onClick: handleCreateCourse,
-    "aria-label": t("create_course"),
-    color: "inherit",
-    "data-cy": "add-course-fab",
-    size: "large",
-    role: "link"
-  }, /*#__PURE__*/_react.default.createElement(_Add.default, null)))), /*#__PURE__*/_react.default.createElement(_Courses.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Search.default, null)))), /*#__PURE__*/_react.default.createElement(_Courses.default, {
     t: t,
     reviewPlaceholderImageUrl: reviewPlaceholderImageUrl,
     memberPlaceholderImageUrl: memberPlaceholderImageUrl,
@@ -591,15 +564,7 @@ function Profile({
     color: "inherit",
     "data-cy": "search-classroom-fab",
     size: "large"
-  }, /*#__PURE__*/_react.default.createElement(_Search.default, null))), /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
-    title: t("create_classroom")
-  }, /*#__PURE__*/_react.default.createElement(_material.IconButton, {
-    onClick: handleCreateClassroom,
-    "aria-label": t("create_classroom"),
-    color: "inherit",
-    "data-cy": "add-classroom-fab",
-    size: "large"
-  }, /*#__PURE__*/_react.default.createElement(_Add.default, null)))), /*#__PURE__*/_react.default.createElement(_Classrooms.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Search.default, null)))), /*#__PURE__*/_react.default.createElement(_Classrooms.default, {
     t: t,
     reviewPlaceholderImageUrl: reviewPlaceholderImageUrl,
     memberPlaceholderImageUrl: memberPlaceholderImageUrl,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nualang/nualang-ui-components",
-  "version": "0.1.1167",
+  "version": "0.1.1168",
   "main": "dist/index.js",
   "files": [
     "dist",