@selfcommunity/react-ui 0.7.0-alpha.349 → 0.7.0-alpha.350

package/lib/esm/components/IncubatorListWidget/Skeleton.js

@@ -4,12 +4,15 @@ import List from '@mui/material/List';
 import { styled } from '@mui/material/styles';
 import { IncubatorSkeleton } from '../Incubator';
 import Widget from '../Widget';
-const PREFIX = 'SCIncubatorListWidgetSkeleton';
+import { PREFIX } from './constants';
 const classes = {
-    root: `${PREFIX}-root`,
+    root: `${PREFIX}-skeleton-root`,
     list: `${PREFIX}-list`
 };
-const Root = styled(Widget)(({ theme }) => ({}));
+const Root = styled(Widget, {
+    name: PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Incubator List Skeleton component. Learn about the available props and the CSS API.
 
@@ -21,14 +24,14 @@ const Root = styled(Widget)(({ theme }) => ({}));
 
  #### Component Name
 
- The name `SCIncubatorListWidgetSkeleton` can be used when providing style overrides in the theme.
+ The name `SCIncubatorListWidget-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCIncubatorListWidgetSkeleton-root|Styles applied to the root element.|
- |list|.SCIncubatorListWidgetSkeleton-list|Styles applied to the list element.|
+ |root|.SCIncubatorListWidget-skeleton-root-root|Styles applied to the root element.|
+ |list|.SCIncubatorListWidget-list|Styles applied to the list element.|
  *
  */
 export default function IncubatorListWidgetSkeleton(props) {

package/lib/esm/components/IncubatorListWidget/constants.d.ts

@@ -0,0 +1 @@
+export declare const PREFIX = "SCIncubatorListWidget";

package/lib/esm/components/IncubatorListWidget/constants.js

@@ -0,0 +1 @@
+export const PREFIX = 'SCIncubatorListWidget';

package/lib/esm/components/IncubatorSuggestionWidget/IncubatorSuggestionWidget.js

@@ -18,7 +18,7 @@ import Widget from '../Widget';
 import IncubatorDetail from '../IncubatorDetail';
 import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
 import { actionWidgetTypes, dataWidgetReducer, stateWidgetInitializer } from '../../utils/widget';
-const PREFIX = 'SCIncubatorSuggestionWidget';
+import { PREFIX } from './constants';
 const classes = {
     root: `${PREFIX}-root`,
     title: `${PREFIX}-title`,
@@ -29,14 +29,12 @@ const classes = {
 };
 const Root = styled(Widget, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    slot: 'Root'
+})(() => ({}));
 const DialogRoot = styled(BaseDialog, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.dialogRoot
-})(({ theme }) => ({}));
+    slot: 'DialogRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Incubator Suggestion component. Learn about the available props and the CSS API.
  *

package/lib/esm/components/IncubatorSuggestionWidget/Skeleton.d.ts

@@ -9,14 +9,14 @@
 
  #### Component Name
 
- The name `SCIncubatorSuggestionWidgetSkeleton` can be used when providing style overrides in the theme.
+ The name `SCIncubatorSuggestionWidget-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCIncubatorSuggestionWidgetSkeleton-root|Styles applied to the root element.|
- |list|.SCIncubatorSuggestionWidgetSkeleton-list|Styles applied to the list element.|
+ |root|.SCIncubatorSuggestionWidget-skeleton-root-root|Styles applied to the root element.|
+ |list|.SCIncubatorSuggestionWidget-list|Styles applied to the list element.|
  *
  */
 export default function IncubatorSuggestionWidgetSkeleton(props: any): JSX.Element;

package/lib/esm/components/IncubatorSuggestionWidget/Skeleton.js

@@ -4,12 +4,15 @@ import List from '@mui/material/List';
 import { styled } from '@mui/material/styles';
 import { IncubatorSkeleton } from '../Incubator';
 import Widget from '../Widget';
-const PREFIX = 'SCIncubatorSuggestionWidgetSkeleton';
+import { PREFIX } from './constants';
 const classes = {
-    root: `${PREFIX}-root`,
+    root: `${PREFIX}-skeleton-root`,
     list: `${PREFIX}-list`
 };
-const Root = styled(Widget)(({ theme }) => ({}));
+const Root = styled(Widget, {
+    name: PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Incubator Suggestion Widget Skeleton component. Learn about the available props and the CSS API.
 
@@ -21,14 +24,14 @@ const Root = styled(Widget)(({ theme }) => ({}));
 
  #### Component Name
 
- The name `SCIncubatorSuggestionWidgetSkeleton` can be used when providing style overrides in the theme.
+ The name `SCIncubatorSuggestionWidget-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCIncubatorSuggestionWidgetSkeleton-root|Styles applied to the root element.|
- |list|.SCIncubatorSuggestionWidgetSkeleton-list|Styles applied to the list element.|
+ |root|.SCIncubatorSuggestionWidget-skeleton-root-root|Styles applied to the root element.|
+ |list|.SCIncubatorSuggestionWidget-list|Styles applied to the list element.|
  *
  */
 export default function IncubatorSuggestionWidgetSkeleton(props) {

package/lib/esm/components/IncubatorSuggestionWidget/constants.d.ts

@@ -0,0 +1 @@
+export declare const PREFIX = "SCIncubatorSuggestionWidget";

package/lib/esm/components/IncubatorSuggestionWidget/constants.js

@@ -0,0 +1 @@
+export const PREFIX = 'SCIncubatorSuggestionWidget';

package/lib/esm/components/LoyaltyProgramWidget/LoyaltyProgramWidget.js

@@ -14,7 +14,7 @@ import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
 import Skeleton from './Skeleton';
 import { SCOPE_SC_UI } from '../../constants/Errors';
 import { Logger } from '@selfcommunity/utils';
-const PREFIX = 'SCLoyaltyProgramWidget';
+import { PREFIX } from './constants';
 const classes = {
     root: `${PREFIX}-root`,
     title: `${PREFIX}-title`,
@@ -24,9 +24,8 @@ const classes = {
 };
 const Root = styled(Widget, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    slot: 'Root'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Loyalty Program Widget component. Learn about the available props and the CSS API.
  *

package/lib/esm/components/LoyaltyProgramWidget/Skeleton.d.ts

@@ -9,18 +9,18 @@
 
  #### Component Name
 
- The name `SCLoyaltyProgramWidgetSkeleton` can be used when providing style overrides in the theme.
+ The name `SCLoyaltyProgramWidget-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCLoyaltyProgramWidgetSkeleton-root|Styles applied to the root element.|
- |title|.SCLoyaltyProgramWidgetSkeleton-title|Styles applied to the title element.|
- |content|.SCLoyaltyProgramWidgetSkeleton-content|Styles applied to the card content section.|
- |chip|.SCLoyaltyProgramWidgetSkeleton-chip|Styles applied to the card chip element.|
- |points|.SCLoyaltyProgramWidgetSkeleton-points|Styles applied to the card actions points element.|
- |actions|.SCLoyaltyProgramWidgetSkeleton-actions|Styles applied to the action section.|
+ |root|.SCLoyaltyProgramWidget-skeleton-root|Styles applied to the root element.|
+ |title|.SCLoyaltyProgramWidget-title|Styles applied to the title element.|
+ |content|.SCLoyaltyProgramWidget-content|Styles applied to the card content section.|
+ |chip|.SCLoyaltyProgramWidget-chip|Styles applied to the card chip element.|
+ |points|.SCLoyaltyProgramWidget-points|Styles applied to the card actions points element.|
+ |actions|.SCLoyaltyProgramWidget-actions|Styles applied to the action section.|
  *
  */
 export default function LoyaltyProgramWidgetSkeleton(): JSX.Element;

package/lib/esm/components/LoyaltyProgramWidget/Skeleton.js

@@ -2,9 +2,9 @@ import React from 'react';
 import { styled } from '@mui/material/styles';
 import { Button, CardActions, CardContent, Skeleton, Typography } from '@mui/material';
 import Widget from '../Widget';
-const PREFIX = 'SCLoyaltyProgramWidgetSkeleton';
+import { PREFIX } from './constants';
 const classes = {
-    root: `${PREFIX}-root`,
+    root: `${PREFIX}-skeleton-root`,
     title: `${PREFIX}-title`,
     content: `${PREFIX}-content`,
     chip: `${PREFIX}-chip`,
@@ -13,9 +13,8 @@ const classes = {
 };
 const Root = styled(Widget, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    slot: 'SkeletonRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Loyalty Program Widget Skeleton component. Learn about the available props and the CSS API.
 
@@ -27,18 +26,18 @@ const Root = styled(Widget, {
 
  #### Component Name
 
- The name `SCLoyaltyProgramWidgetSkeleton` can be used when providing style overrides in the theme.
+ The name `SCLoyaltyProgramWidget-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCLoyaltyProgramWidgetSkeleton-root|Styles applied to the root element.|
- |title|.SCLoyaltyProgramWidgetSkeleton-title|Styles applied to the title element.|
- |content|.SCLoyaltyProgramWidgetSkeleton-content|Styles applied to the card content section.|
- |chip|.SCLoyaltyProgramWidgetSkeleton-chip|Styles applied to the card chip element.|
- |points|.SCLoyaltyProgramWidgetSkeleton-points|Styles applied to the card actions points element.|
- |actions|.SCLoyaltyProgramWidgetSkeleton-actions|Styles applied to the action section.|
+ |root|.SCLoyaltyProgramWidget-skeleton-root|Styles applied to the root element.|
+ |title|.SCLoyaltyProgramWidget-title|Styles applied to the title element.|
+ |content|.SCLoyaltyProgramWidget-content|Styles applied to the card content section.|
+ |chip|.SCLoyaltyProgramWidget-chip|Styles applied to the card chip element.|
+ |points|.SCLoyaltyProgramWidget-points|Styles applied to the card actions points element.|
+ |actions|.SCLoyaltyProgramWidget-actions|Styles applied to the action section.|
  *
  */
 export default function LoyaltyProgramWidgetSkeleton() {

package/lib/esm/components/LoyaltyProgramWidget/constants.d.ts

@@ -0,0 +1 @@
+export declare const PREFIX = "SCLoyaltyProgramWidget";

package/lib/esm/components/LoyaltyProgramWidget/constants.js

@@ -0,0 +1 @@
+export const PREFIX = 'SCLoyaltyProgramWidget';

package/lib/esm/components/NavigationToolbar/NavigationToolbar.d.ts

@@ -84,6 +84,7 @@ export interface NavigationToolbarProps extends ToolbarProps {
  |composer|.SCNavigationToolbar-composer|Styles applied to the composer component|
  |profile|.SCNavigationToolbar-profile|Styles applied to the profile button|
  |notification|.SCNavigationToolbar-notification|Styles applied to the notification button|
+ |notificationsMenu|.SCNavigationToolbar-notifications-menu|Styles applied to the notifications menu|
  |messages|.SCNavigationToolbar-messages|Styles applied to the messages button|
  |settings|.SCNavigationToolbar-settings|Styles applied to the settings button|
  |active|.SCNavigationToolbar-active|Styles applied to the active button on navigation|

package/lib/esm/components/NavigationToolbar/NavigationToolbar.js

@@ -13,7 +13,7 @@ import ComposerIconButton from '../ComposerIconButton';
 import { SCFeatureName } from '@selfcommunity/types';
 import { Link, SCPreferences, SCRoutes, useSCPreferences, useSCRouting, useSCUser } from '@selfcommunity/react-core';
 import NavigationMenuIconButton from '../NavigationMenuIconButton';
-const PREFIX = 'SCNavigationToolbar';
+import { PREFIX } from './constants';
 const classes = {
     root: `${PREFIX}-root`,
     logo: `${PREFIX}-logo`,
@@ -25,14 +25,14 @@ const classes = {
     composer: `${PREFIX}-composer`,
     profile: `${PREFIX}-profile`,
     notification: `${PREFIX}-notification`,
+    notificationsMenu: `${PREFIX}-notifications-menu`,
     messages: `${PREFIX}-messages`,
     settings: `${PREFIX}-settings`,
     active: `${PREFIX}-active`
 };
 const Root = styled(Toolbar, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
+    slot: 'Root'
 })(() => ({}));
 const PREFERENCES = [
     SCPreferences.CONFIGURATIONS_EXPLORE_STREAM_ENABLED,
@@ -72,6 +72,7 @@ const PREFERENCES = [
  |composer|.SCNavigationToolbar-composer|Styles applied to the composer component|
  |profile|.SCNavigationToolbar-profile|Styles applied to the profile button|
  |notification|.SCNavigationToolbar-notification|Styles applied to the notification button|
+ |notificationsMenu|.SCNavigationToolbar-notifications-menu|Styles applied to the notifications menu|
  |messages|.SCNavigationToolbar-messages|Styles applied to the messages button|
  |settings|.SCNavigationToolbar-settings|Styles applied to the settings button|
  |active|.SCNavigationToolbar-active|Styles applied to the active button on navigation|
@@ -138,7 +139,7 @@ export default function NavigationToolbar(inProps) {
                     }), "aria-label": "Notification", onClick: handleOpenNotificationMenu },
                     React.createElement(Badge, { badgeContent: scUserContext.user.unseen_notification_banners_counter + scUserContext.user.unseen_interactions_counter, color: "secondary" },
                         React.createElement(Icon, null, "notifications_active"))),
-                React.createElement(NotificationMenu, Object.assign({ id: "notification-menu", anchorEl: anchorNotification, open: Boolean(anchorNotification), onClose: handleCloseNotificationMenu, onClick: handleCloseNotificationMenu, transformOrigin: { horizontal: 'right', vertical: 'top' }, anchorOrigin: { horizontal: 'right', vertical: 'bottom' } }, NotificationMenuProps))),
+                React.createElement(NotificationMenu, Object.assign({ className: classes.notificationsMenu, id: "notification-menu", anchorEl: anchorNotification, open: Boolean(anchorNotification), onClose: handleCloseNotificationMenu, onClick: handleCloseNotificationMenu, transformOrigin: { horizontal: 'right', vertical: 'top' }, anchorOrigin: { horizontal: 'right', vertical: 'bottom' } }, NotificationMenuProps))),
             privateMessagingEnabled && (React.createElement(IconButton, { className: classNames(classes.messages, {
                     [classes.active]: value.startsWith(scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}))
                 }), "aria-label": "Messages", to: scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}), component: Link },

package/lib/esm/components/NavigationToolbar/NotificationMenu.js

@@ -5,28 +5,17 @@ import { FormattedMessage } from 'react-intl';
 import React from 'react';
 import { useThemeProps } from '@mui/system';
 import SnippetNotifications from '../SnippetNotifications';
-const PREFIX = 'SCNotificationsMenu';
+import { PREFIX } from './constants';
 const classes = {
-    root: `${PREFIX}-root`,
+    root: `${PREFIX}-notifications-menu-root`,
     paper: `${PREFIX}-paper`,
     notifications: `${PREFIX}-notifications`,
     link: `${PREFIX}-link`
 };
 const Root = styled(Menu, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    [`& .${classes.paper}`]: {
-        minWidth: 370,
-        padding: theme.spacing(2)
-    },
-    [`& .${classes.link}`]: {
-        display: 'block',
-        textAlign: 'center',
-        margin: theme.spacing(0, 'auto')
-    }
-}));
+    slot: 'NotificationsMenuRoot'
+})(() => ({}));
 export default function NotificationMenu(inProps) {
     // PROPS
     const props = useThemeProps({

package/lib/esm/components/NavigationToolbar/Skeleton.d.ts

@@ -9,16 +9,16 @@
 
  #### Component Name
 
- The name `SCNavigationToolbarSkeleton` can be used when providing style overrides in the theme.
+ The name `SCNavigationToolbar-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCNavigationToolbarSkeleton-root|Styles applied to the root element.|
- |logo|.SCNavigationToolbarSkeleton-logo|Styles applied to the logo element.|
- |navigation|.SCNavigationToolbarSkeleton-navigation|Styles applied to the navigation element.|
- |avatar|.SCNavigationToolbarSkeleton-avatar|Styles applied to the avatar element.|
+ |root|.SCNavigationToolbar-skeleton-root|Styles applied to the root element.|
+ |logo|.SCNavigationToolbar-logo|Styles applied to the logo element.|
+ |navigation|.SCNavigationToolbar-navigation|Styles applied to the navigation element.|
+ |avatar|.SCNavigationToolbar-avatar|Styles applied to the avatar element.|
  *
  */
 export default function NavigationToolbarSkeleton(): JSX.Element;

package/lib/esm/components/NavigationToolbar/Skeleton.js

@@ -2,18 +2,17 @@ import React from 'react';
 import { Toolbar } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import Skeleton from '@mui/material/Skeleton';
-const PREFIX = 'SCNavigationToolbarSkeleton';
+import { PREFIX } from './constants';
 const classes = {
-    root: `${PREFIX}-root`,
+    root: `${PREFIX}-skeleton-root`,
     logo: `${PREFIX}-logo`,
     navigation: `${PREFIX}-navigation`,
     avatar: `${PREFIX}-avatar`
 };
 const Root = styled(Toolbar, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    slot: 'SkeletonRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Navigation Toolbar Skeleton component. Learn about the available props and the CSS API.
 
@@ -25,16 +24,16 @@ const Root = styled(Toolbar, {
 
  #### Component Name
 
- The name `SCNavigationToolbarSkeleton` can be used when providing style overrides in the theme.
+ The name `SCNavigationToolbar-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCNavigationToolbarSkeleton-root|Styles applied to the root element.|
- |logo|.SCNavigationToolbarSkeleton-logo|Styles applied to the logo element.|
- |navigation|.SCNavigationToolbarSkeleton-navigation|Styles applied to the navigation element.|
- |avatar|.SCNavigationToolbarSkeleton-avatar|Styles applied to the avatar element.|
+ |root|.SCNavigationToolbar-skeleton-root|Styles applied to the root element.|
+ |logo|.SCNavigationToolbar-logo|Styles applied to the logo element.|
+ |navigation|.SCNavigationToolbar-navigation|Styles applied to the navigation element.|
+ |avatar|.SCNavigationToolbar-avatar|Styles applied to the avatar element.|
  *
  */
 export default function NavigationToolbarSkeleton() {

package/lib/esm/components/NavigationToolbar/constants.d.ts

@@ -0,0 +1 @@
+export declare const PREFIX = "SCNavigationToolbar";

package/lib/esm/components/NavigationToolbar/constants.js

@@ -0,0 +1 @@
+export const PREFIX = 'SCNavigationToolbar';

package/lib/esm/components/Notification/CollapsedFor/CollapsedFor.js

@@ -12,7 +12,7 @@ import classNames from 'classnames';
 import { SCNotificationObjectTemplateType } from '../../../types';
 import { useThemeProps } from '@mui/system';
 import NotificationItem from '../../../shared/NotificationItem';
-import { red } from '@mui/material/colors';
+import { PREFIX } from '../constants';
 const messages = defineMessages({
     collapsedForAdvertising: {
         id: 'ui.notification.collapsedFor.collapsedForAdvertising',
@@ -35,9 +35,8 @@ const messages = defineMessages({
         defaultMessage: 'ui.notification.collapsedFor.collapsedForOfftopic'
     }
 });
-const PREFIX = 'SCCollapsedForNotification';
 const classes = {
-    root: `${PREFIX}-root`,
+    root: `${PREFIX}-collapsed-for-root`,
     flagIcon: `${PREFIX}-flag-icon`,
     flagText: `${PREFIX}-flag-text`,
     activeAt: `${PREFIX}-active-at`,
@@ -47,29 +46,8 @@ const classes = {
 };
 const Root = styled(NotificationItem, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    width: '100%',
-    [`& .${classes.flagIcon}`]: {
-        backgroundColor: red[500],
-        color: '#FFF'
-    },
-    [`& .${classes.flagText}`]: {
-        color: theme.palette.text.primary
-    },
-    [`& .${classes.contributionWrap}`]: {
-        padding: `${theme.spacing(2)} ${theme.spacing(2)}`,
-        textOverflow: 'ellipsis',
-        display: 'inline',
-        overflow: 'hidden'
-    },
-    [`& .${classes.contributionText}`]: {
-        '&:hover': {
-            textDecoration: 'underline'
-        }
-    }
-}));
+    slot: 'CollapsedForRoot'
+})(() => ({}));
 /**
  * This component render the content of the notification of type collapsed for
  * @param inProps

package/lib/esm/components/Notification/Comment/Comment.js

@@ -15,6 +15,7 @@ import NotificationItem from '../../../shared/NotificationItem';
 import VoteButton from '../../VoteButton';
 import UserDeletedSnackBar from '../../../shared/UserDeletedSnackBar';
 import UserAvatar from '../../../shared/UserAvatar';
+import { PREFIX } from '../constants';
 const messages = defineMessages({
     comment: {
         id: 'ui.notification.comment.comment',
@@ -25,9 +26,8 @@ const messages = defineMessages({
         defaultMessage: 'ui.notification.comment.nestedComment'
     }
 });
-const PREFIX = 'SCCommentNotification';
 const classes = {
-    root: `${PREFIX}-root`,
+    root: `${PREFIX}-comment-root`,
     avatar: `${PREFIX}-avatar`,
     username: `${PREFIX}-username`,
     voteButton: `${PREFIX}-vote-button`,
@@ -37,9 +37,8 @@ const classes = {
 };
 const Root = styled(NotificationItem, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    slot: 'CommentRoot'
+})(() => ({}));
 /**
  * This component render the content of the notification of type comment/nested comment
  * @param inProps

package/lib/esm/components/Notification/Contribution/Contribution.js

@@ -15,6 +15,7 @@ import Bullet from '../../../shared/Bullet';
 import VoteButton from '../../VoteButton';
 import UserDeletedSnackBar from '../../../shared/UserDeletedSnackBar';
 import UserAvatar from '../../../shared/UserAvatar';
+import { PREFIX } from '../constants';
 const messages = defineMessages({
     postOrStatus: {
         id: 'ui.notification.contribution.newPostOrStatus',
@@ -33,9 +34,8 @@ const messages = defineMessages({
         defaultMessage: 'ui.notification.contribution.snippet.discussion'
     }
 });
-const PREFIX = 'SCContributionNotification';
 const classes = {
-    root: `${PREFIX}-root`,
+    root: `${PREFIX}-contribution-root`,
     avatar: `${PREFIX}-avatar`,
     username: `${PREFIX}-username`,
     voteButton: `${PREFIX}-vote-button`,
@@ -45,9 +45,8 @@ const classes = {
 };
 const Root = styled(NotificationItem, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    slot: 'ContributionRoot'
+})(() => ({}));
 /**
  * This component render the content of the notification of type follow (contribution)
  * @param inProps

package/lib/esm/components/Notification/ContributionFollow/ContributionFollow.js

@@ -12,15 +12,15 @@ import { useThemeProps } from '@mui/system';
 import NotificationItem from '../../../shared/NotificationItem';
 import UserDeletedSnackBar from '../../../shared/UserDeletedSnackBar';
 import UserAvatar from '../../../shared/UserAvatar';
+import { PREFIX } from '../constants';
 const messages = defineMessages({
     contributionFollow: {
         id: 'ui.notification.contributionFollow.follow',
         defaultMessage: 'ui.notification.contributionFollow.follow'
     }
 });
-const PREFIX = 'SCContributionFollowNotification';
 const classes = {
-    root: `${PREFIX}-root`,
+    root: `${PREFIX}-contribution-follow-root`,
     avatar: `${PREFIX}-avatar`,
     username: `${PREFIX}-username`,
     followText: `${PREFIX}-follow-text`,
@@ -29,31 +29,8 @@ const classes = {
 };
 const Root = styled(NotificationItem, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    [`& .${classes.username}`]: {
-        fontWeight: 700,
-        '&:hover': {
-            textDecoration: 'underline'
-        }
-    },
-    [`& .${classes.followText}`]: {
-        color: theme.palette.text.primary
-    },
-    [`& .${classes.contributionText}`]: {
-        '&:hover': {
-            textDecoration: 'underline'
-        },
-        textOverflow: 'ellipsis',
-        display: 'inline',
-        overflow: 'hidden'
-    },
-    '& .MuiIcon-root': {
-        fontSize: '18px',
-        marginBottom: '0.5px'
-    }
-}));
+    slot: 'ContributionFollowRoot'
+})(() => ({}));
 /**
  * This component render the content of the notification of type follow (contribution)
  * @param inProps

package/lib/esm/components/Notification/DeletedFor/DeletedFor.js

@@ -13,7 +13,7 @@ import classNames from 'classnames';
 import { SCNotificationObjectTemplateType } from '../../../types';
 import { useThemeProps } from '@mui/system';
 import NotificationItem from '../../../shared/NotificationItem';
-import { red } from '@mui/material/colors';
+import { PREFIX } from '../constants';
 const messages = defineMessages({
     deletedForAdvertising: {
         id: 'ui.notification.deletedFor.deletedForAdvertising',
@@ -36,9 +36,8 @@ const messages = defineMessages({
         defaultMessage: 'ui.notification.deletedFor.deletedForOfftopic'
     }
 });
-const PREFIX = 'SCDeletedForNotification';
 const classes = {
-    root: `${PREFIX}-root`,
+    root: `${PREFIX}-deleted-for-root`,
     flagIcon: `${PREFIX}-flag-icon`,
     flagText: `${PREFIX}-flag-text`,
     activeAt: `${PREFIX}-active-at`,
@@ -48,29 +47,9 @@ const classes = {
 };
 const Root = styled(NotificationItem, {
     name: PREFIX,
-    slot: 'Root',
+    slot: 'DeletedForRoot',
     overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    [`& .${classes.flagIcon}`]: {
-        backgroundColor: red[500],
-        color: '#FFF'
-    },
-    [`& .${classes.flagText}`]: {
-        color: theme.palette.text.primary
-    },
-    [`& .${classes.contributionWrap}`]: {
-        marginBottom: theme.spacing(1),
-        padding: theme.spacing(2),
-        textOverflow: 'ellipsis',
-        display: 'inline',
-        overflow: 'hidden'
-    },
-    [`& .${classes.contributionText}`]: {
-        '&:hover': {
-            textDecoration: 'underline'
-        }
-    }
-}));
+})(() => ({}));
 /**
  * This component render the content of the notification of type deleted for
  * @param inProps
@@ -93,7 +72,7 @@ export default function DeletedForNotification(inProps) {
     /**
      * Renders root object
      */
-    return (React.createElement(NotificationItem, Object.assign({ id: id, className: classNames(classes.root, className, `${PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: React.createElement(Avatar, { variant: "circular", classes: { root: classes.flagIcon } },
+    return (React.createElement(Root, Object.assign({ id: id, className: classNames(classes.root, className, `${PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: React.createElement(Avatar, { variant: "circular", classes: { root: classes.flagIcon } },
             React.createElement(Icon, null, "outlined_flag")), primary: React.createElement(React.Fragment, null, isSnippetTemplate ? (React.createElement(Link, { to: scRoutingContext.url(SCRoutes[`${contributionType.toUpperCase()}_ROUTE_NAME`], getRouteData(notificationObject[contributionType])) },
             React.createElement(Typography, { component: "div", color: "inherit", className: classes.flagText },
                 React.createElement(FormattedMessage, { id: `ui.notification.deletedFor.${camelCase(notificationObject.type)}Snippet`, defaultMessage: `ui.notification.deletedFor.${camelCase(notificationObject.type)}Snippet` })))) : (React.createElement(React.Fragment, null,