@selfcommunity/react-ui 1.1.0 → 1.2.0-alpha.1

package/lib/esm/components/PlatformWidget/PlatformWidget.js

@@ -193,7 +193,7 @@ export default function PlatformWidget(inProps) {
         ...((isAdmin || isEditor) && !hideConsoleAction
             ? [
                 {
-                    render: (_jsx(Button, Object.assign({ variant: "outlined", size: "small", onClick: () => fetchPlatform('') }, { children: _jsx(FormattedMessage, { id: "ui.platformWidget.adm", defaultMessage: "ui.platformWidget.adm" }) }))),
+                    render: (_jsx(Button, Object.assign({ variant: "contained", size: "small", onClick: () => fetchPlatform('') }, { children: _jsx(FormattedMessage, { id: "ui.platformWidget.adm", defaultMessage: "ui.platformWidget.adm" }) }))),
                     title: _jsx(FormattedMessage, { id: "ui.platformWidget.adm", defaultMessage: "ui.platformWidget.adm" }),
                     content: _jsx(FormattedMessage, { id: "ui.platformWidget.adm.desc", defaultMessage: "ui.platformWidget.adm.desc" })
                 }
@@ -202,7 +202,7 @@ export default function PlatformWidget(inProps) {
         ...((isAdmin || isModerator) && !hideModerationAction
             ? [
                 {
-                    render: (_jsx(Button, Object.assign({ variant: "outlined", size: "small", onClick: () => fetchPlatform('/moderation/flags/') }, { children: _jsx(FormattedMessage, { id: "ui.platformWidget.mod", defaultMessage: "ui.platformWidget.mod" }) }))),
+                    render: (_jsx(Button, Object.assign({ variant: "contained", size: "small", onClick: () => fetchPlatform('/moderation/flags/') }, { children: _jsx(FormattedMessage, { id: "ui.platformWidget.mod", defaultMessage: "ui.platformWidget.mod" }) }))),
                     title: _jsx(FormattedMessage, { id: "ui.platformWidget.mod", defaultMessage: "ui.platformWidget.mod" }),
                     content: _jsx(FormattedMessage, { id: "ui.platformWidget.mod.desc", defaultMessage: "ui.platformWidget.mod.desc" })
                 }
@@ -211,7 +211,7 @@ export default function PlatformWidget(inProps) {
         ...(isAdmin && isCommunityOwner && !hideHubAction
             ? [
                 {
-                    render: (_jsx(Button, Object.assign({ variant: "outlined", size: "small", component: Link, to: isStage ? HUB_STAGE : HUB_PROD, target: "_blank" }, { children: _jsx(FormattedMessage, { id: "ui.platformWidget.hub", defaultMessage: "ui.platformWidget.hub" }) }))),
+                    render: (_jsx(Button, Object.assign({ variant: "contained", size: "small", component: Link, to: isStage ? HUB_STAGE : HUB_PROD, target: "_blank" }, { children: _jsx(FormattedMessage, { id: "ui.platformWidget.hub", defaultMessage: "ui.platformWidget.hub" }) }))),
                     title: _jsx(FormattedMessage, { id: "ui.platformWidget.hub", defaultMessage: "ui.platformWidget.hub" }),
                     content: _jsx(FormattedMessage, { id: "ui.platformWidget.hub.desc", defaultMessage: "ui.platformWidget.hub.desc" })
                 }
@@ -220,7 +220,7 @@ export default function PlatformWidget(inProps) {
         ...(isCommunityOwner && !hideContactUsAction
             ? [
                 {
-                    render: (_jsx(Button, Object.assign({ variant: "outlined", size: "small", component: Link, to: isStage ? CONTACT_STAGE : CONTACT_PROD, target: "_blank" }, { children: _jsx(FormattedMessage, { id: "ui.platformWidget.contactUs", defaultMessage: "ui.platformWidget.contactUs" }) }))),
+                    render: (_jsx(Button, Object.assign({ variant: "contained", size: "small", component: Link, to: isStage ? CONTACT_STAGE : CONTACT_PROD, target: "_blank" }, { children: _jsx(FormattedMessage, { id: "ui.platformWidget.contactUs", defaultMessage: "ui.platformWidget.contactUs" }) }))),
                     title: _jsx(FormattedMessage, { id: "ui.platformWidget.contactUs", defaultMessage: "ui.platformWidget.contactUs" }),
                     content: _jsx(FormattedMessage, { id: "ui.platformWidget.contactUs.desc", defaultMessage: "ui.platformWidget.contactUs.desc" })
                 }

package/lib/esm/shared/AccordionLessons/AccordionLessons.js

@@ -18,7 +18,8 @@ const classes = {
     nameWrapper: `${PREFIX}-name-wrapper`,
     details: `${PREFIX}-details`,
     circle: `${PREFIX}-circle`,
-    link: `${PREFIX}-link`
+    link: `${PREFIX}-link`,
+    contrastColor: `${PREFIX}-contrast-color`
 };
 const Root = styled(Box, {
     name: PREFIX,
@@ -49,13 +50,13 @@ export default function AccordionLessons(inProps) {
     if (!course) {
         return _jsx(AccordionLessonSkeleton, {});
     }
-    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, { children: ((_a = course.sections) === null || _a === void 0 ? void 0 : _a.length) > 0 ? (course.sections.map((section) => (_jsxs(Accordion, Object.assign({ className: classes.accordion, expanded: expanded === section.id, onChange: handleChange(section.id), disableGutters: true, elevation: 0, square: true }, { children: [_jsxs(AccordionSummary, Object.assign({ className: classes.summary, expandIcon: _jsx(Icon, { children: "expand_more" }) }, { children: [_jsxs(Stack, Object.assign({ className: classes.nameWrapper }, { children: [_jsx(Typography, Object.assign({ component: "span", variant: "body1" }, { children: section.name })), viewerJoinStatus !== SCCourseJoinStatusType.CREATOR && viewerJoinStatus !== SCCourseJoinStatusType.MANAGER && section.locked && (_jsxs(Fragment, { children: [_jsx(Bullet, {}), _jsx(Typography, Object.assign({ component: "span", variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.course.accordionLessons.date", defaultMessage: "ui.course.accordionLessons.date", values: {
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, { children: ((_a = course.sections) === null || _a === void 0 ? void 0 : _a.length) > 0 ? (course.sections.map((section) => (_jsxs(Accordion, Object.assign({ className: classes.accordion, expanded: expanded === section.id, onChange: handleChange(section.id), disableGutters: true, elevation: 0, square: true }, { children: [_jsxs(AccordionSummary, Object.assign({ className: classes.summary, expandIcon: _jsx(Icon, { children: "expand_more" }) }, { children: [_jsxs(Stack, Object.assign({ className: classes.nameWrapper }, { children: [_jsx(Typography, Object.assign({ component: "span", variant: "body1", className: classes.contrastColor }, { children: section.name })), viewerJoinStatus !== SCCourseJoinStatusType.CREATOR && viewerJoinStatus !== SCCourseJoinStatusType.MANAGER && section.locked && (_jsxs(Fragment, { children: [_jsx(Bullet, {}), _jsx(Typography, Object.assign({ component: "span", variant: "body1", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.course.accordionLessons.date", defaultMessage: "ui.course.accordionLessons.date", values: {
                                                     date: intl.formatDate(section.available_date, { day: 'numeric', month: 'numeric', year: 'numeric' }),
                                                     hour: intl.formatDate(section.available_date, { hour: 'numeric', minute: 'numeric' })
-                                                } }) }))] }))] })), !isMobile && (_jsx(Typography, Object.assign({ component: "span", variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.course.table.lessons.title", defaultMessage: "ui.course.table.lessons.title", values: {
+                                                } }) }))] }))] })), !isMobile && (_jsx(Typography, Object.assign({ component: "span", variant: "body1", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.course.table.lessons.title", defaultMessage: "ui.course.table.lessons.title", values: {
                                     lessonsNumber: section.lessons.length
                                 } }) })))] })), section.lessons.map((lesson) => (_jsxs(AccordionDetails, Object.assign({ className: classes.details }, { children: [lesson.completion_status === SCCourseLessonCompletionStatusType.COMPLETED ? (_jsx(Icon, Object.assign({ fontSize: "small", color: "primary" }, { children: "circle_checked" }))) : lesson.locked ? (_jsx(Icon, { children: "private" })) : (_jsx(Box, { className: classes.circle })), course.join_status === null ||
                             viewerJoinStatus === SCCourseJoinStatusType.CREATOR ||
                             viewerJoinStatus === SCCourseJoinStatusType.MANAGER ||
-                            lesson.locked ? (_jsx(Typography, { children: lesson.name })) : (_jsx(Button, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.COURSE_LESSON_ROUTE_NAME, getUrlLesson(course, lesson, section)), variant: "text", color: "inherit", className: classes.link }, { children: _jsx(Typography, { children: lesson.name }) })))] }), lesson.id)))] }), section.id)))) : (_jsx(Typography, Object.assign({ variant: "body1", className: classes.empty }, { children: _jsx(FormattedMessage, { id: "ui.course.accordionLessons.empty", defaultMessage: "ui.course.accordionLessons.empty" }) }))) })));
+                            lesson.locked ? (_jsx(Typography, Object.assign({ className: classes.contrastColor }, { children: lesson.name }))) : (_jsx(Button, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.COURSE_LESSON_ROUTE_NAME, getUrlLesson(course, lesson, section)), variant: "text", color: "inherit", className: classes.link }, { children: _jsx(Typography, Object.assign({ className: classes.contrastColor }, { children: lesson.name })) })))] }), lesson.id)))] }), section.id)))) : (_jsx(Typography, Object.assign({ variant: "body1", className: classNames(classes.empty, classes.contrastColor) }, { children: _jsx(FormattedMessage, { id: "ui.course.accordionLessons.empty", defaultMessage: "ui.course.accordionLessons.empty" }) }))) })));
 }

package/lib/esm/shared/AutoPlayer/index.js

@@ -11,7 +11,12 @@ const Root = styled(Waypoint, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (_props, styles) => styles.root
-})(() => ({}));
+})(({ theme }) => ({
+    '& .react-player__preview': {
+        backgroundSize: 'contain !important',
+        backgroundColor: theme.palette.common.black
+    }
+}));
 export default function AutoPlayer(props) {
     // PROPS
     const { loop = false, muted = true, playsinline = true, controls = true, stopOnUnmount = true, pip = true, onVideoWatch } = props, rest = __rest(props, ["loop", "muted", "playsinline", "controls", "stopOnUnmount", "pip", "onVideoWatch"]);
@@ -46,7 +51,7 @@ export default function AutoPlayer(props) {
     /**
      * Renders root object
      */
-    return (_jsx(Root, Object.assign({ scrollableAncestor: window, onEnter: handleEnterViewport, onLeave: handleExitViewport }, { children: _jsx("div", { children: _jsx(ReactPlayer, Object.assign({ loop: loop, controls: controls, stopOnUnmount: stopOnUnmount, pip: pip, playing: shouldPlay, muted: muted, onProgress: (progress) => {
+    return (_jsx(Root, Object.assign({ scrollableAncestor: window, onEnter: handleEnterViewport, onLeave: handleExitViewport }, { children: _jsx("div", { children: _jsx(ReactPlayer, Object.assign({ light: !enableAutoplay, loop: loop, controls: controls, stopOnUnmount: stopOnUnmount, pip: pip, playing: shouldPlay, muted: muted, onProgress: (progress) => {
                     const playedSeconds = progress.playedSeconds;
                     if (played === 0) {
                         setStartPlay(playedSeconds);

package/lib/esm/shared/ConfirmDialog/ConfirmDialog.js

@@ -1,15 +1,23 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { styled, Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Card } from '@mui/material';
+import { styled, Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Card, lighten, darken, getContrastRatio } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
 const PREFIX = 'SCConfirmDialog';
+const classes = {
+    contrastColor: `${PREFIX}-contrast-color`
+};
 const Root = styled(Card, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
+    overridesResolver: (_props, styles) => styles.root
 })(({ theme }) => ({
     maxWidth: 800,
-    marginBottom: theme.spacing(2)
+    marginBottom: theme.spacing(2),
+    [`& .${PREFIX}-contrast-color`]: {
+        color: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
+            ? lighten(theme.palette.common.white, 0.5)
+            : darken(theme.palette.common.white, 0.5)
+    }
 }));
 export default function ConfirmDialog(props) {
     // PROPS
@@ -35,5 +43,5 @@ export default function ConfirmDialog(props) {
     /**
      * Renders root object
      */
-    return (_jsx(Root, { children: _jsxs(Dialog, Object.assign({ open: open, onClose: handleClose }, rest, { children: [_jsx(DialogTitle, { children: title || _jsx(FormattedMessage, { id: "ui.confirmDialog.title", defaultMessage: "ui.confirmDialog.title" }) }), content && (_jsx(DialogContent, { children: _jsx(DialogContentText, Object.assign({ component: "div" }, { children: content })) })), _jsxs(DialogActions, { children: [_jsx(Button, Object.assign({ onClick: handleClose }, { children: btnCancel || _jsx(FormattedMessage, { id: "ui.confirmDialog.btnCancel", defaultMessage: "ui.confirmDialog.btnCancel" }) })), _jsx(Button, Object.assign({ onClick: handleConfirm, variant: "contained", autoFocus: true, loading: isUpdating }, { children: btnConfirm || _jsx(FormattedMessage, { id: "ui.confirmDialog.btnConfirm", defaultMessage: "ui.confirmDialog.btnConfirm" }) }))] })] })) }));
+    return (_jsx(Root, { children: _jsxs(Dialog, Object.assign({ open: open, onClose: handleClose }, rest, { children: [_jsx(DialogTitle, Object.assign({ className: classes.contrastColor }, { children: title || _jsx(FormattedMessage, { id: "ui.confirmDialog.title", defaultMessage: "ui.confirmDialog.title" }) })), content && (_jsx(DialogContent, { children: _jsx(DialogContentText, Object.assign({ component: "div", className: classes.contrastColor }, { children: content })) })), _jsxs(DialogActions, { children: [_jsx(Button, Object.assign({ onClick: handleClose, className: classes.contrastColor }, { children: btnCancel || _jsx(FormattedMessage, { id: "ui.confirmDialog.btnCancel", defaultMessage: "ui.confirmDialog.btnCancel" }) })), _jsx(Button, Object.assign({ onClick: handleConfirm, variant: "contained", autoFocus: true, loading: isUpdating, className: classes.contrastColor }, { children: btnConfirm || _jsx(FormattedMessage, { id: "ui.confirmDialog.btnConfirm", defaultMessage: "ui.confirmDialog.btnConfirm" }) }))] })] })) }));
 }

package/lib/esm/shared/CourseUsersTable/ChangeUsersStatus.js

@@ -7,7 +7,11 @@ import { CourseService } from '@selfcommunity/api-services';
 import { Logger } from '@selfcommunity/utils';
 import { SCOPE_SC_UI } from '../../constants/Errors';
 import { useSnackbar } from 'notistack';
+import { PREFIX } from './constants';
 const OPTIONS = ['ui.editCourse.tab.users.table.select.joined', 'ui.editCourse.tab.users.table.select.manager'];
+const classes = {
+    contrastColor: `${PREFIX}-contrast-color`
+};
 function ChangeUserStatus(props) {
     // PROPS
     const { course, user } = props;
@@ -50,6 +54,6 @@ function ChangeUserStatus(props) {
                     ':hover': {
                         backgroundColor: 'unset'
                     }
-                } }, { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: option, defaultMessage: option }) })) })) }), i))) })));
+                } }, { children: _jsx(Typography, Object.assign({ variant: "body1", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: option, defaultMessage: option }) })) })) }), i))) })));
 }
 export default memo(ChangeUserStatus);

package/lib/esm/shared/CourseUsersTable/CourseUsersTable.js

@@ -27,7 +27,8 @@ const classes = {
     avatarWrapper: `${PREFIX}-avatar-wrapper`,
     progressWrapper: `${PREFIX}-progress-wrapper`,
     progress: `${PREFIX}-progress`,
-    loadingButton: `${PREFIX}-loading-button`
+    loadingButton: `${PREFIX}-loading-button`,
+    contrastColor: `${PREFIX}-contrast-color`
 };
 const Root = styled(Box, {
     name: PREFIX,
@@ -144,10 +145,10 @@ function CourseUsersTable(inProps) {
                                     if (i === array.length - 1) {
                                         return _jsx(TableCell, { width: "14%" }, i);
                                     }
-                                    return (_jsx(TableCell, Object.assign({ width: mode === SCCourseUsersTableModeType.DASHBOARD ? '20%' : '25%' }, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: cell.id, defaultMessage: cell.id }) })) }), i));
+                                    return (_jsx(TableCell, Object.assign({ width: mode === SCCourseUsersTableModeType.DASHBOARD ? '20%' : '25%' }, { children: _jsx(Typography, Object.assign({ variant: "body2", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: cell.id, defaultMessage: cell.id }) })) }), i));
                                 }) }) }), _jsxs(TableBody, { children: [users.length > 0 &&
-                                    users.map((user, i) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsxs(Stack, Object.assign({ className: classes.avatarWrapper }, { children: [_jsx(Avatar, { alt: user.username, src: user.avatar }), _jsx(Typography, Object.assign({ variant: "body2" }, { children: user.username }))] })) }), mode === SCCourseUsersTableModeType.DASHBOARD && (_jsx(TableCell, { children: _jsxs(Stack, Object.assign({ className: classes.progressWrapper }, { children: [_jsx(LinearProgress, { className: classes.progress, variant: "determinate", value: user.user_completion_rate }), _jsx(Typography, Object.assign({ variant: "body1" }, { children: `${Math.round(user.user_completion_rate)}%` }))] })) })), mode === SCCourseUsersTableModeType.EDIT && (_jsx(TableCell, { children: user.join_status !== SCCourseJoinStatusType.CREATOR && scUserContext.user.id !== user.id ? (_jsx(ChangeUserStatus, { course: course, user: user })) : (_jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: `ui.editCourse.tab.users.table.select.${user.join_status}`, defaultMessage: `ui.editCourse.tab.users.table.select.${user.join_status}` }) }))) })), _jsx(TableCell, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedDate, { value: mode === SCCourseUsersTableModeType.REQUESTS ? user.date_joined : user.joined_at || new Date() }) })) }), _jsx(TableCell, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedDate, { value: mode === SCCourseUsersTableModeType.REQUESTS ? user.date_joined : user.last_active_at || new Date() }) })) }), mode === SCCourseUsersTableModeType.EDIT &&
+                                    users.map((user, i) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsxs(Stack, Object.assign({ className: classes.avatarWrapper }, { children: [_jsx(Avatar, { alt: user.username, src: user.avatar }), _jsx(Typography, Object.assign({ variant: "body2", className: classes.contrastColor }, { children: user.username }))] })) }), mode === SCCourseUsersTableModeType.DASHBOARD && (_jsx(TableCell, { children: _jsxs(Stack, Object.assign({ className: classes.progressWrapper }, { children: [_jsx(LinearProgress, { className: classes.progress, variant: "determinate", value: user.user_completion_rate }), _jsx(Typography, Object.assign({ variant: "body1", className: classes.contrastColor }, { children: `${Math.round(user.user_completion_rate)}%` }))] })) })), mode === SCCourseUsersTableModeType.EDIT && (_jsx(TableCell, { children: user.join_status !== SCCourseJoinStatusType.CREATOR && scUserContext.user.id !== user.id ? (_jsx(ChangeUserStatus, { course: course, user: user })) : (_jsx(Typography, Object.assign({ variant: "body2", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: `ui.editCourse.tab.users.table.select.${user.join_status}`, defaultMessage: `ui.editCourse.tab.users.table.select.${user.join_status}` }) }))) })), _jsx(TableCell, { children: _jsx(Typography, Object.assign({ variant: "body2", className: classes.contrastColor }, { children: _jsx(FormattedDate, { value: mode === SCCourseUsersTableModeType.REQUESTS ? user.date_joined : user.joined_at || new Date() }) })) }), _jsx(TableCell, { children: _jsx(Typography, Object.assign({ variant: "body2", className: classes.contrastColor }, { children: _jsx(FormattedDate, { value: mode === SCCourseUsersTableModeType.REQUESTS ? user.date_joined : user.last_active_at || new Date() }) })) }), mode === SCCourseUsersTableModeType.EDIT &&
                                                 user.join_status !== SCCourseJoinStatusType.CREATOR &&
-                                                scUserContext.user.id !== user.id ? (_jsx(TableCell, { children: _jsx(RemoveButton, { ref: buttonRef, course: course, user: user, handleOpenDialog: handleOpenDialog }) })) : (mode === SCCourseUsersTableModeType.EDIT && _jsx(TableCell, {})), mode === SCCourseUsersTableModeType.DASHBOARD && (_jsx(TableCell, { children: _jsx(SeeProgressButton, { course: course, user: user }) })), mode === SCCourseUsersTableModeType.REQUESTS && (_jsx(TableCell, { children: _jsx(RequestButton, { ref: buttonRef, course: course, user: user, handleOpenDialog: handleOpenDialog }) }))] }, i))), state.isLoadingNext && _jsx(RowSkeleton, { editMode: mode !== SCCourseUsersTableModeType.DASHBOARD })] })] }) }), users.length > 0 && (_jsx(Button, Object.assign({ size: "small", variant: "outlined", color: "inherit", loading: state.isLoadingNext, disabled: value.length > 0 || !state.next, className: classes.loadingButton, onClick: handleNext }, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.courseUsersTable.btn.label", defaultMessage: "ui.courseUsersTable.btn.label" }) })) }))), users.length === 0 && (_jsx(EmptyStatus, { icon: "face", title: value.length > 0 ? 'ui.courseUsersTable.empty.search.title' : emptyStatusTitle, description: value.length > 0 ? 'ui.courseUsersTable.empty.search.description' : emptyStatusDescription })), dialog && _jsx(ConfirmDialog, { open: true, onClose: () => handleOpenDialog(null), onConfirm: handleConfirm })] })));
+                                                scUserContext.user.id !== user.id ? (_jsx(TableCell, { children: _jsx(RemoveButton, { ref: buttonRef, course: course, user: user, handleOpenDialog: handleOpenDialog }) })) : (mode === SCCourseUsersTableModeType.EDIT && _jsx(TableCell, {})), mode === SCCourseUsersTableModeType.DASHBOARD && (_jsx(TableCell, { children: _jsx(SeeProgressButton, { course: course, user: user }) })), mode === SCCourseUsersTableModeType.REQUESTS && (_jsx(TableCell, { children: _jsx(RequestButton, { ref: buttonRef, course: course, user: user, handleOpenDialog: handleOpenDialog }) }))] }, i))), state.isLoadingNext && _jsx(RowSkeleton, { editMode: mode !== SCCourseUsersTableModeType.DASHBOARD })] })] }) }), users.length > 0 && (_jsx(Button, Object.assign({ size: "small", variant: "contained", color: "inherit", loading: state.isLoadingNext, disabled: value.length > 0 || !state.next, className: classes.loadingButton, onClick: handleNext }, { children: _jsx(Typography, Object.assign({ variant: "body2", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.courseUsersTable.btn.label", defaultMessage: "ui.courseUsersTable.btn.label" }) })) }))), users.length === 0 && (_jsx(EmptyStatus, { icon: "face", title: value.length > 0 ? 'ui.courseUsersTable.empty.search.title' : emptyStatusTitle, description: value.length > 0 ? 'ui.courseUsersTable.empty.search.description' : emptyStatusDescription })), dialog && _jsx(ConfirmDialog, { open: true, onClose: () => handleOpenDialog(null), onConfirm: handleConfirm })] })));
 }
 export default memo(CourseUsersTable);

package/lib/esm/shared/CourseUsersTable/RemoveButton.js

@@ -42,6 +42,6 @@ function RemoveButton(props, ref) {
     useImperativeHandle(ref, () => ({
         handleManageUser: (userToRemove) => handleSubmit(userToRemove)
     }), [handleSubmit]);
-    return (_jsx(Button, Object.assign({ size: "small", color: "inherit", variant: "outlined", onClick: () => handleOpenDialog({ tab: SCCourseEditTabType.USERS, user }), loading: loading, disabled: loading }, { children: _jsx(Icon, { children: "close" }) })));
+    return (_jsx(Button, Object.assign({ size: "small", color: "inherit", variant: "contained", onClick: () => handleOpenDialog({ tab: SCCourseEditTabType.USERS, user }), loading: loading, disabled: loading }, { children: _jsx(Icon, { children: "close" }) })));
 }
 export default memo(forwardRef(RemoveButton));

package/lib/esm/shared/CourseUsersTable/RequestButton.js

@@ -70,6 +70,6 @@ function RequestButton(props, ref) {
     useImperativeHandle(ref, () => ({
         handleManageUser: (userToReject) => handleReject(userToReject)
     }), [handleReject]);
-    return (_jsxs(Stack, Object.assign({ className: classes.requestButtonWrapper }, { children: [_jsx(Button, Object.assign({ size: "small", color: "primary", variant: "outlined", onClick: handleAccept, loading: acceptLoading, disabled: acceptLoading }, { children: _jsx(Icon, { children: "check" }) })), _jsx(Button, Object.assign({ size: "small", color: "inherit", variant: "outlined", onClick: () => handleOpenDialog({ tab: SCCourseEditTabType.REQUESTS, request: user }), loading: rejectLoading, disabled: rejectLoading }, { children: _jsx(Icon, { children: "close" }) }))] })));
+    return (_jsxs(Stack, Object.assign({ className: classes.requestButtonWrapper }, { children: [_jsx(Button, Object.assign({ size: "small", color: "primary", variant: "contained", onClick: handleAccept, loading: acceptLoading, disabled: acceptLoading }, { children: _jsx(Icon, { children: "check" }) })), _jsx(Button, Object.assign({ size: "small", color: "inherit", variant: "contained", onClick: () => handleOpenDialog({ tab: SCCourseEditTabType.REQUESTS, request: user }), loading: rejectLoading, disabled: rejectLoading }, { children: _jsx(Icon, { children: "close" }) }))] })));
 }
 export default memo(forwardRef(RequestButton));

package/lib/esm/shared/CourseUsersTable/SeeProgressButton.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Avatar, Button, Icon, IconButton, Skeleton, Stack, styled, Typography, useMediaQuery, useTheme } from '@mui/material';
 import { Fragment, memo, useCallback, useEffect, useMemo, useState } from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, useIntl } from 'react-intl';
 import BaseDialog from '../BaseDialog';
 import { Link, SCPreferences, SCRoutes, useSCPreferences, useSCRouting } from '@selfcommunity/react-core';
 import { PREFIX } from './constants';
@@ -16,7 +16,8 @@ const classes = {
     infoOuterWrapper: `${PREFIX}-info-outer-wrapper`,
     infoInnerWrapper: `${PREFIX}-info-inner-wrapper`,
     avatarWrapper: `${PREFIX}-avatar-wrapper`,
-    avatar: `${PREFIX}-avatar`
+    avatar: `${PREFIX}-avatar`,
+    contrastColor: `${PREFIX}-contrast-color`
 };
 const DialogRoot = styled(BaseDialog, {
     name: PREFIX,
@@ -35,6 +36,7 @@ function SeeProgressButton(props) {
     // HOOKS
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+    const intl = useIntl();
     const privateMessagingEnabled = useMemo(() => SCPreferences.ADDONS_PRIVATE_MESSAGES_ENABLED in preferences && preferences[SCPreferences.ADDONS_PRIVATE_MESSAGES_ENABLED].value, [preferences]);
     // EFFECTS
     useEffect(() => {
@@ -48,8 +50,8 @@ function SeeProgressButton(props) {
     const handleToggleOpen = useCallback(() => {
         setOpen((prev) => !prev);
     }, [setOpen]);
-    return (_jsxs(Fragment, { children: [isMobile ? (_jsx(IconButton, Object.assign({ size: "small", color: "inherit", onClick: handleToggleOpen }, { children: _jsx(Icon, { children: "chevron_right" }) }))) : (_jsx(Button, Object.assign({ variant: "outlined", size: "small", color: "inherit", onClick: handleToggleOpen }, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.courseUsersTable.action.btn.label", defaultMessage: "ui.courseUsersTable.action.btn.label" }) })) }))), open && (_jsx(DialogRoot, Object.assign({ DialogContentProps: { dividers: isMobile }, open: true, scroll: "paper", onClose: handleToggleOpen, title: _jsx(Typography, Object.assign({ variant: "h3" }, { children: _jsx(FormattedMessage, { id: "ui.courseUsersTable.dialog.title", defaultMessage: "ui.courseUsersTable.dialog.title" }) })), className: classes.dialogRoot }, { children: _jsxs(Stack, Object.assign({ className: classes.contentWrapper }, { children: [_jsxs(Stack, Object.assign({ className: classes.infoOuterWrapper }, { children: [_jsxs(Stack, Object.assign({ className: classes.infoInnerWrapper }, { children: [_jsxs(Stack, Object.assign({ className: classes.avatarWrapper }, { children: [_jsx(Link, Object.assign({}, (!course.created_by.deleted && {
+    return (_jsxs(Fragment, { children: [isMobile ? (_jsx(IconButton, Object.assign({ size: "small", color: "inherit", onClick: handleToggleOpen }, { children: _jsx(Icon, { children: "chevron_right" }) }))) : (_jsx(Button, Object.assign({ variant: "contained", size: "small", color: "inherit", onClick: handleToggleOpen }, { children: _jsx(Typography, Object.assign({ variant: "body2", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.courseUsersTable.action.btn.label", defaultMessage: "ui.courseUsersTable.action.btn.label" }) })) }))), open && (_jsx(DialogRoot, Object.assign({ DialogContentProps: { dividers: isMobile }, open: true, scroll: "paper", onClose: handleToggleOpen, title: intl.formatMessage({ id: 'ui.courseUsersTable.dialog.title', defaultMessage: 'ui.courseUsersTable.dialog.title' }), className: classes.dialogRoot }, { children: _jsxs(Stack, Object.assign({ className: classes.contentWrapper }, { children: [_jsxs(Stack, Object.assign({ className: classes.infoOuterWrapper }, { children: [_jsxs(Stack, Object.assign({ className: classes.infoInnerWrapper }, { children: [_jsxs(Stack, Object.assign({ className: classes.avatarWrapper }, { children: [_jsx(Link, Object.assign({}, (!course.created_by.deleted && {
                                                     to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, course.created_by)
-                                                }), { children: _jsx(UserAvatar, Object.assign({ hide: !course.created_by.community_badge, smaller: true }, { children: _jsx(Avatar, { className: classes.avatar, src: user.avatar, alt: user.username }) })) })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: user.username }))] })), privateMessagingEnabled && (_jsx(Button, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, user), variant: "outlined", size: "small", color: "inherit" }, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.courseUsersTable.dialog.btn.label", defaultMessage: "ui.courseUsersTable.dialog.btn.label" }) })) })))] })), student ? (_jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.courseUsersTable.dialog.info.text1", defaultMessage: "ui.courseUsersTable.dialog.info.text1", values: { lessonsCompleted: student.num_lessons_completed } }) }))) : (_jsx(Skeleton, { animation: "wave", variant: "text", width: "100px", height: "21px" })), student ? (_jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.courseUsersTable.dialog.info.text2", defaultMessage: "ui.courseUsersTable.dialog.info.text2", values: { courseCompleted: student.user_completion_rate } }) }))) : (_jsx(Skeleton, { animation: "wave", variant: "text", width: "100px", height: "21px" }))] })), _jsx(AccordionLessons, { course: student, viewerJoinStatus: course.join_status })] })) })))] }));
+                                                }), { children: _jsx(UserAvatar, Object.assign({ hide: !course.created_by.community_badge, smaller: true }, { children: _jsx(Avatar, { className: classes.avatar, src: user.avatar, alt: user.username }) })) })), _jsx(Typography, Object.assign({ variant: "body1", className: classes.contrastColor }, { children: user.username }))] })), privateMessagingEnabled && (_jsx(Button, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, user), variant: "contained", size: "small", color: "inherit" }, { children: _jsx(Typography, Object.assign({ variant: "body2", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.courseUsersTable.dialog.btn.label", defaultMessage: "ui.courseUsersTable.dialog.btn.label" }) })) })))] })), student ? (_jsx(Typography, Object.assign({ variant: "body1", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.courseUsersTable.dialog.info.text1", defaultMessage: "ui.courseUsersTable.dialog.info.text1", values: { lessonsCompleted: student.num_lessons_completed } }) }))) : (_jsx(Skeleton, { animation: "wave", variant: "text", width: "100px", height: "21px" })), student ? (_jsx(Typography, Object.assign({ variant: "body1", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.courseUsersTable.dialog.info.text2", defaultMessage: "ui.courseUsersTable.dialog.info.text2", values: { courseCompleted: student.user_completion_rate } }) }))) : (_jsx(Skeleton, { animation: "wave", variant: "text", width: "100px", height: "21px" }))] })), _jsx(AccordionLessons, { course: student, viewerJoinStatus: course.join_status })] })) })))] }));
 }
 export default memo(SeeProgressButton);

package/lib/esm/shared/EmptyStatus/EmptyStatus.js

@@ -8,7 +8,8 @@ const classes = {
     root: `${PREFIX}-root`,
     box: `${PREFIX}-box`,
     rotatedBox: `${PREFIX}-rotated-box`,
-    icon: `${PREFIX}-icon`
+    icon: `${PREFIX}-icon`,
+    contrastColor: `${PREFIX}-contrast-color`
 };
 const Root = styled(Stack, {
     name: PREFIX,
@@ -18,6 +19,6 @@ const Root = styled(Stack, {
 function EmptyStatus(props) {
     // PROPS
     const { icon, title, description, actions, className } = props;
-    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [_jsx(Stack, Object.assign({ className: classes.box }, { children: _jsx(Stack, Object.assign({ className: classes.rotatedBox }, { children: _jsx(Icon, Object.assign({ className: classes.icon, color: "disabled", fontSize: "large" }, { children: icon })) })) })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: title, defaultMessage: title }) })), description && (_jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: description, defaultMessage: description }) }))), actions] })));
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [_jsx(Stack, Object.assign({ className: classes.box }, { children: _jsx(Stack, Object.assign({ className: classes.rotatedBox }, { children: _jsx(Icon, Object.assign({ className: classes.icon, color: "disabled", fontSize: "large" }, { children: icon })) })) })), _jsx(Typography, Object.assign({ variant: "body1", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: title, defaultMessage: title }) })), description && (_jsx(Typography, Object.assign({ variant: "body1", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: description, defaultMessage: description }) }))), actions] })));
 }
 export default memo(EmptyStatus);

package/lib/esm/shared/Media/File/DocComponent.js

@@ -18,7 +18,8 @@ const classes = {
     title: `${PREFIX}-title`,
     subtitle: `${PREFIX}-subtitle`,
     actionWrapper: `${PREFIX}-action-wrapper`,
-    action: `${PREFIX}-action`
+    action: `${PREFIX}-action`,
+    contrastColor: `${PREFIX}-contrast-color`
 };
 const Root = styled(Stack, {
     name: PREFIX,
@@ -69,5 +70,5 @@ export default function DocComponent(props) {
                 return fallback;
         }
     }, [document.mimetype]);
-    return (_jsxs(Root, Object.assign({ className: classNames(classes.docRoot, className) }, { children: [_jsx(Box, { component: "img", alt: document.title, src: getImage() }), _jsxs(Stack, Object.assign({ className: classes.textWrapper }, { children: [_jsx(Typography, Object.assign({ className: classes.title }, { children: document.title })), document.size && _jsx(Typography, Object.assign({ className: classes.subtitle }, { children: formatBytes(document.size) }))] })), (handleDownload || onDelete) && (_jsxs(Stack, Object.assign({ className: classes.actionWrapper }, { children: [onDelete && (_jsx(IconButton, Object.assign({ className: classes.action, onClick: () => onDelete(document.id) }, { children: _jsx(Icon, { children: "delete" }) }))), handleDownload && (_jsxs(_Fragment, { children: [document.mimetype === SCMimeTypes.PDF && (_jsx(IconButton, Object.assign({ className: classes.action, component: Link, to: document.url, target: "_blank", onClick: () => onMediaClick === null || onMediaClick === void 0 ? void 0 : onMediaClick(document) }, { children: _jsx(Icon, { children: "visibility" }) }))), _jsx(IconButton, Object.assign({ className: classes.action, onClick: () => handleDownload(index) }, { children: _jsx(Icon, { children: "download" }) }))] }))] })))] })));
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.docRoot, className) }, { children: [_jsx(Box, { component: "img", alt: document.title, src: getImage() }), _jsxs(Stack, Object.assign({ className: classes.textWrapper }, { children: [_jsx(Typography, Object.assign({ className: classNames(classes.title, classes.contrastColor) }, { children: document.title })), document.size && _jsx(Typography, Object.assign({ className: classNames(classes.subtitle, classes.contrastColor) }, { children: formatBytes(document.size) }))] })), (handleDownload || onDelete) && (_jsxs(Stack, Object.assign({ className: classes.actionWrapper }, { children: [onDelete && (_jsx(IconButton, Object.assign({ className: classes.action, onClick: () => onDelete(document.id) }, { children: _jsx(Icon, { children: "delete" }) }))), handleDownload && (_jsxs(_Fragment, { children: [document.mimetype === SCMimeTypes.PDF && (_jsx(IconButton, Object.assign({ className: classes.action, component: Link, to: document.url, target: "_blank", onClick: () => onMediaClick === null || onMediaClick === void 0 ? void 0 : onMediaClick(document) }, { children: _jsx(Icon, { children: "visibility" }) }))), _jsx(IconButton, Object.assign({ className: classes.action, onClick: () => handleDownload(index) }, { children: _jsx(Icon, { children: "download" }) }))] }))] })))] })));
 }