@nualang/nualang-ui-components 0.1.1293 → 0.1.1295

package/dist/Assignments/AssignmentBotSelection/AssignmentBotSelection.js

@@ -110,7 +110,10 @@ function Bot({
             xs: "column",
             sm: "row"
           },
-          marginLeft: "60px"
+          marginLeft: {
+            sm: "0px",
+            md: "60px"
+          }
         },
         children: [/*#__PURE__*/_jsxs(Box, {
           display: "flex",

package/dist/Assignments/AssignmentCard/AssignmentCard.js

@@ -210,7 +210,6 @@ export default function AssignmentCard({
             })]
           }), /*#__PURE__*/_jsx(Grid, {
             size: {
-              xs: 3,
               md: 2
             },
             children: isCreator && /*#__PURE__*/_jsxs(Box, {

package/dist/Assignments/AssignmentCourseSelection/AssignmentCourseSelection.js

@@ -127,7 +127,10 @@ function Course({
                     })]
                   }),
                   sx: {
-                    marginLeft: 2
+                    marginLeft: {
+                      xs: 1,
+                      md: 2
+                    }
                   }
                 })]
               }), open ? /*#__PURE__*/_jsx(ExpandLessIcon, {

package/dist/Assignments/AssignmentExerciseSelection/AssignmentExerciseSelection.js

@@ -10,7 +10,7 @@ import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import ExpandLessIcon from "@mui/icons-material/ExpandLess";
 import RecordVoiceOverIcon from "@mui/icons-material/RecordVoiceOver";
 import ForumIcon from "@mui/icons-material/Forum";
-import FaceIcon from '@mui/icons-material/Face';
+import FaceIcon from "@mui/icons-material/Face";
 import OndemandVideoIcon from "@mui/icons-material/OndemandVideo";
 import AssignmentRoleplaySelection from "../AssignmentRoleplaySelection/AssignmentRoleplaySelection";
 import { CardInfoSectionItem } from "../../Cards/CardElements";
@@ -22,7 +22,7 @@ import ColorLinearProgress from "../../Misc/ColorLinearProgress/ColorLinearProgr
 import { calcCompletions } from "../../utils";
 import AssignmentBotSelection from "../AssignmentBotSelection/AssignmentBotSelection";
 import { Clear } from "@mui/icons-material";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 function Exercise({
   name,
   description,
@@ -168,20 +168,26 @@ function Exercise({
       justifyContent: "space-between",
       disabled: isExerciseSelected || !isValidExercise || noRoleplays || noBots,
       sx: theme => ({
-        [theme.breakpoints.up("sm")]: {
+        [theme.breakpoints.up("md")]: {
           ml: "60px"
         }
       }),
-      children: [name.toLowerCase() === "listening" && /*#__PURE__*/_jsx(ListItemIcon, {
-        children: /*#__PURE__*/_jsx(HearingIcon, {})
-      }), name.toLowerCase() === "translation" && /*#__PURE__*/_jsx(ListItemIcon, {
-        children: /*#__PURE__*/_jsx(SwapHorizIcon, {})
-      }), name.toLowerCase() === "pronunciation" && /*#__PURE__*/_jsx(ListItemIcon, {
-        children: /*#__PURE__*/_jsx(RecordVoiceOverIcon, {})
-      }), name.toLowerCase() === "roleplays" && /*#__PURE__*/_jsx(ListItemIcon, {
-        children: /*#__PURE__*/_jsx(ForumIcon, {})
-      }), name.toLowerCase() === "bots" && /*#__PURE__*/_jsx(ListItemIcon, {
-        children: /*#__PURE__*/_jsx(FaceIcon, {})
+      children: [/*#__PURE__*/_jsxs(Box, {
+        display: {
+          xs: "none",
+          sm: "flex"
+        },
+        children: [name.toLowerCase() === "listening" && /*#__PURE__*/_jsx(ListItemIcon, {
+          children: /*#__PURE__*/_jsx(HearingIcon, {})
+        }), name.toLowerCase() === "translation" && /*#__PURE__*/_jsx(ListItemIcon, {
+          children: /*#__PURE__*/_jsx(SwapHorizIcon, {})
+        }), name.toLowerCase() === "pronunciation" && /*#__PURE__*/_jsx(ListItemIcon, {
+          children: /*#__PURE__*/_jsx(RecordVoiceOverIcon, {})
+        }), name.toLowerCase() === "roleplays" && /*#__PURE__*/_jsx(ListItemIcon, {
+          children: /*#__PURE__*/_jsx(ForumIcon, {})
+        }), name.toLowerCase() === "bots" && /*#__PURE__*/_jsx(ListItemIcon, {
+          children: /*#__PURE__*/_jsx(FaceIcon, {})
+        })]
       }), /*#__PURE__*/_jsx(Box, {
         width: "100%",
         children: /*#__PURE__*/_jsx(ListItemText, {
@@ -190,12 +196,12 @@ function Exercise({
         })
       }), name.toLowerCase() === "roleplays" && /*#__PURE__*/_jsx(IconButton, {
         sx: {
-          marginRight: "15px"
+          mr: useCase === "assignment-select" ? 2 : 0
         },
         children: roleplaysOpen ? /*#__PURE__*/_jsx(ExpandLessIcon, {}) : /*#__PURE__*/_jsx(ExpandMoreIcon, {})
       }), name.toLowerCase() === "bots" && /*#__PURE__*/_jsx(IconButton, {
         sx: {
-          marginRight: "15px"
+          mr: useCase === "assignment-select" ? 2 : 0
         },
         children: botsOpen ? /*#__PURE__*/_jsx(ExpandLessIcon, {}) : /*#__PURE__*/_jsx(ExpandMoreIcon, {})
       }), (name.toLowerCase() === "listening" || name.toLowerCase() === "translation" || name.toLowerCase() === "pronunciation") && /*#__PURE__*/_jsxs(ListItemIcon, {
@@ -249,7 +255,10 @@ function Exercise({
       timeout: "auto",
       unmountOnExit: true,
       children: /*#__PURE__*/_jsx(Box, {
-        ml: 7,
+        ml: {
+          sm: 0,
+          md: 7
+        },
         children: /*#__PURE__*/_jsx(AssignmentRoleplaySelection, {
           roleplays: roleplays,
           viewOnly: viewOnly,
@@ -273,7 +282,10 @@ function Exercise({
       timeout: "auto",
       unmountOnExit: true,
       children: /*#__PURE__*/_jsx(Box, {
-        ml: 7,
+        ml: {
+          sm: 0,
+          md: 7
+        },
         children: /*#__PURE__*/_jsx(AssignmentBotSelection, {
           bots: bots,
           viewOnly: viewOnly,

package/dist/Assignments/AssignmentRoleplaySelection/AssignmentRoleplaySelection.js

@@ -188,11 +188,15 @@ function Roleplay({
             display: "flex",
             alignItems: "center",
             justifyContent: "space-between",
-            flexDirection: {
-              xs: "column",
-              sm: "row"
+            flexDirection: "row",
+            marginLeft: {
+              sm: "0px",
+              md: "60px"
             },
-            marginLeft: "60px"
+            gap: {
+              xs: 1,
+              sm: 2
+            }
           },
           children: [/*#__PURE__*/_jsxs(Box, {
             display: "flex",
@@ -202,25 +206,36 @@ function Roleplay({
               sm: "85%"
             },
             children: [/*#__PURE__*/_jsx(Avatar, {
-              src: roleplay.picture
+              src: roleplay.picture,
+              sx: {
+                display: "flex",
+                width: 32,
+                height: 32
+              }
             }), /*#__PURE__*/_jsx(ListItemText, {
               primary: roleplay.roleplayName,
               secondary: roleplay.description,
               sx: {
-                marginLeft: 2
+                ml: {
+                  sm: 2,
+                  xs: 1
+                }
               }
             })]
           }), roleplayHasInteractions && /*#__PURE__*/_jsxs(Box, {
-            display: "flex",
+            display: {
+              xs: "none",
+              sm: "flex"
+            },
             alignItems: "center",
             children: [/*#__PURE__*/_jsx(ListItemText, {
               secondary: numberOfRoleplayInteractions,
               sx: {
-                marginRight: 0.5
+                mr: 0.5
               }
             }), /*#__PURE__*/_jsx(ListItemIcon, {
               sx: {
-                marginRight: {
+                mr: {
                   xs: 0,
                   sm: -3
                 }
@@ -236,12 +251,15 @@ function Roleplay({
               })
             })]
           }), roleplayHasQuestions && /*#__PURE__*/_jsxs(Box, {
-            display: "flex",
+            display: {
+              xs: "none",
+              sm: "flex"
+            },
             alignItems: "center",
             children: [/*#__PURE__*/_jsx(ListItemText, {
               secondary: numberOfRoleplayQuestions,
               sx: {
-                marginRight: 0.5
+                mr: 0.5
               }
             }), /*#__PURE__*/_jsx(ListItemIcon, {
               children: /*#__PURE__*/_jsx(Tooltip, {
@@ -254,19 +272,25 @@ function Roleplay({
                 })
               })
             })]
-          }), /*#__PURE__*/_jsx(IconButton, {
-            onClick: () => setOpen(!open),
-            children: open ? /*#__PURE__*/_jsx(ExpandLessIcon, {
-              sx: {
-                color: "#757575"
-              }
-            }) : /*#__PURE__*/_jsx(ExpandMoreIcon, {
+          }), /*#__PURE__*/_jsxs(Box, {
+            display: "flex",
+            alignItems: "center",
+            gap: 1,
+            children: [/*#__PURE__*/_jsx(IconButton, {
+              onClick: () => setOpen(!open),
               sx: {
-                color: "#757575"
-              }
-            })
-          }), useCase === "assignment-view" && isPreview && /*#__PURE__*/_jsx(ListItemIcon, {
-            children: /*#__PURE__*/_jsx(IconButton, {
+                ml: 2
+              },
+              children: open ? /*#__PURE__*/_jsx(ExpandLessIcon, {
+                sx: {
+                  color: "#757575"
+                }
+              }) : /*#__PURE__*/_jsx(ExpandMoreIcon, {
+                sx: {
+                  color: "#757575"
+                }
+              })
+            }), useCase === "assignment-view" && isPreview && /*#__PURE__*/_jsx(IconButton, {
               edge: "end",
               "aria-label": "remove-roleplay",
               onClick: e => {
@@ -277,20 +301,21 @@ function Roleplay({
               children: /*#__PURE__*/_jsx(ClearIcon, {
                 fontSize: "small"
               })
-            })
-          }), useCase === "assignment-select" && /*#__PURE__*/_jsx(Tooltip, {
-            title: t("select_all"),
-            placement: "top",
-            children: /*#__PURE__*/_jsx(ListItemIcon, {
+            }), useCase === "assignment-select" && /*#__PURE__*/_jsx(Tooltip, {
+              title: t("select_all"),
+              placement: "top",
               children: /*#__PURE__*/_jsx(Checkbox, {
                 checked: isSelectAllChecked,
                 indeterminate: indeterminate,
                 onChange: handleSelectAll,
                 onClick: event => {
                   event.stopPropagation();
+                },
+                sx: {
+                  mr: 2
                 }
               })
-            })
+            })]
           })]
         })
       })
@@ -299,7 +324,10 @@ function Roleplay({
       timeout: "auto",
       unmountOnExit: true,
       children: /*#__PURE__*/_jsxs(Box, {
-        ml: 3.5,
+        ml: {
+          sm: 0,
+          md: 3.5
+        },
         children: [useCase === "assignment-select" && games.map((name, index) => /*#__PURE__*/_jsxs(ListItemButton, {
           onClick: () => handleSelectExercise([{
             roleplayId: roleplay.roleplayId,
@@ -310,13 +338,19 @@ function Roleplay({
             display: "flex",
             alignItems: "center",
             justifyContent: "space-between",
-            flexDirection: {
-              xs: "column",
-              sm: "row"
-            },
-            marginLeft: "95px"
+            flexDirection: "row",
+            marginLeft: {
+              sm: "0px",
+              md: "95px"
+            }
           },
           children: [/*#__PURE__*/_jsx(ListItemIcon, {
+            sx: {
+              display: {
+                xs: "none",
+                sm: "flex"
+              }
+            },
             children: getIconAndStatusForGame(name)[0]
           }), /*#__PURE__*/_jsx(ListItemText, {
             primary: t(name.replace(/roleplay-/, "").replace(/-/g, "_")),
@@ -337,13 +371,19 @@ function Roleplay({
             display: "flex",
             alignItems: "center",
             justifyContent: "space-between",
-            flexDirection: {
-              xs: "column",
-              sm: "row"
-            },
-            marginLeft: "95px"
+            flexDirection: "row",
+            marginLeft: {
+              sm: "0px",
+              md: "95px"
+            }
           },
           children: [/*#__PURE__*/_jsx(ListItemIcon, {
+            sx: {
+              display: {
+                xs: "none",
+                sm: "flex"
+              }
+            },
             children: getIconAndStatusForGame(name)[0]
           }), /*#__PURE__*/_jsx(ListItemText, {
             primary: t(name.replace(/roleplay-/, "").replace(/-/g, "_")),

package/dist/Assignments/CreateAssignmentDialog/CreateAssignmentDialog.js

@@ -49,7 +49,7 @@ export default function CreateAssignmentDialog({
   getCourses,
   initialData = {},
   dialogTitle,
-  userEmail = '',
+  userEmail = "",
   assignedStudents
 }) {
   const {
@@ -298,17 +298,30 @@ export default function CreateAssignmentDialog({
     }), /*#__PURE__*/_jsxs(Box, {
       component: "main",
       className: classes.dialogContent,
+      sx: {
+        display: "flex",
+        flexDirection: {
+          xs: "column",
+          md: "row"
+        },
+        gap: 2,
+        width: "100%",
+        boxSizing: "border-box"
+      },
       children: [/*#__PURE__*/_jsx(Card, {
         sx: {
-          display: "flex",
-          flexDirection: "column",
+          flex: "unset",
+          minWidth: 0,
           padding: 1,
           boxShadow: 3,
-          width: "50%"
+          width: {
+            xs: "100%",
+            md: "50%"
+          },
+          boxSizing: "border-box"
         },
         children: /*#__PURE__*/_jsxs(CardContent, {
           sx: {
-            flexGrow: 1,
             display: "flex",
             flexDirection: "column",
             gap: 2
@@ -438,15 +451,18 @@ export default function CreateAssignmentDialog({
         })
       }), /*#__PURE__*/_jsx(Card, {
         sx: {
-          display: "flex",
-          flexDirection: "column",
+          flex: "unset",
+          minWidth: 0,
           padding: 1,
           boxShadow: 3,
-          width: "50%"
+          width: {
+            xs: "100%",
+            md: "50%"
+          },
+          boxSizing: "border-box"
         },
         children: /*#__PURE__*/_jsxs(CardContent, {
           sx: {
-            flexGrow: 1,
             display: "flex",
             flexDirection: "column",
             gap: 2

package/dist/Navigation/ResponsiveTabs/ResponsiveTabs.js

@@ -270,6 +270,7 @@ function ResponsiveTabs({
       localStorage.setItem(`creator-discuss-tour-completed`, "true");
     }
   };
+  const activeFabs = fabs.flat().filter(fab => fab.tabIndex === value);
   return /*#__PURE__*/_jsxs("div", {
     className: classes.root,
     children: [appbar ? /*#__PURE__*/_jsx(AppBar, {
@@ -286,15 +287,12 @@ function ResponsiveTabs({
       index: i,
       children: Child
     }, i) : null), /*#__PURE__*/_jsx(FabContainer, {
-      children: fabs.map(btns => btns.map((fab, idx) => fab.link ? /*#__PURE__*/_jsx(Link, {
+      children: activeFabs.map(fab => fab.link ? /*#__PURE__*/_jsx(Link, {
         to: fab.link,
         id: fab.id,
         children: /*#__PURE__*/_jsx(Zoom, {
-          in: value === fab.tabIndex,
+          in: true,
           timeout: transitionDuration,
-          style: {
-            transitionDelay: `${value === fab.tabIndex ? transitionDuration.exit : 0}ms`
-          },
           unmountOnExit: true,
           children: /*#__PURE__*/_jsx(Tooltip, {
             title: fab.disabled ? t("no_members_tooltip") : fab.title,
@@ -308,12 +306,9 @@ function ResponsiveTabs({
             })
           })
         })
-      }, idx) : /*#__PURE__*/_jsx(Zoom, {
-        in: value === fab.tabIndex,
+      }, fab.id) : /*#__PURE__*/_jsx(Zoom, {
+        in: true,
         timeout: transitionDuration,
-        style: {
-          transitionDelay: `${value === fab.tabIndex ? transitionDuration.exit : 0}ms`
-        },
         unmountOnExit: true,
         children: /*#__PURE__*/_jsx(Tooltip, {
           title: fab.disabled ? t("no_members_tooltip") : fab.title,
@@ -329,7 +324,7 @@ function ResponsiveTabs({
             })
           })
         })
-      }, idx)))
+      }, fab.id))
     }), run && /*#__PURE__*/_jsx(Joyride, {
       callback: handleJoyrideCallback,
       continuous: true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nualang/nualang-ui-components",
-  "version": "0.1.1293",
+  "version": "0.1.1295",
   "type": "module",
   "main": "dist/index.js",
   "files": [
@@ -21,7 +21,7 @@
     "@hookform/resolvers": "^3.6.0",
     "@json2csv/plainjs": "^7.0.1",
     "@nualang/avatars": "2.0.3",
-    "@nualang/nualang-api-and-queries": "^1.1.20",
+    "@nualang/nualang-api-and-queries": "^1.1.22",
     "@stripe/react-stripe-js": "^2.1.1",
     "@stripe/stripe-js": "^1.54.2",
     "ajv-keywords": "^3.5.2",