@selfcommunity/react-theme-default 0.1.0-alpha.302 → 0.1.0-alpha.303

package/lib/esm/components/SCNotification.js

@@ -1,4 +1,5 @@
 import { alpha } from '@mui/system';
+import { green, red } from '@mui/material/colors';
 const Component = {
     styleOverrides: {
         root: ({ theme }) => ({
@@ -41,6 +42,316 @@ const Component = {
                     textDecoration: 'underline'
                 }
             }
+        }),
+        skeletonRoot: ({ theme }) => ({
+            marginBottom: theme.spacing(2)
+        }),
+        collapsedForRoot: ({ theme }) => ({
+            width: '100%',
+            '& .SCNotification-flag-icon': {
+                backgroundColor: red[500],
+                color: '#FFF'
+            },
+            '& .SCNotification-flag-text': {
+                color: theme.palette.text.primary
+            },
+            '& .SCNotification-contribution-wrap': {
+                padding: `${theme.spacing(2)} ${theme.spacing(2)}`,
+                textOverflow: 'ellipsis',
+                display: 'inline',
+                overflow: 'hidden'
+            },
+            '& .SCNotification-contribution-text': {
+                '&:hover': {
+                    textDecoration: 'underline'
+                }
+            }
+        }),
+        commentRoot: ({ theme }) => ({
+            '& .SCNotification-username': {
+                fontWeight: theme.typography.fontWeightBold,
+                '&:hover': {
+                    textDecoration: 'underline'
+                }
+            },
+            '& .SCNotification-vote-button': {
+                color: 'inherit',
+                padding: theme.spacing(1),
+                fontSize: '1.143rem',
+                minWidth: 0,
+                borderRadius: '50%'
+            },
+            '& .SCNotification-contribution-text': {
+                color: theme.palette.text.primary,
+                textOverflow: 'ellipsis',
+                display: 'inline',
+                overflow: 'hidden',
+                '&:hover': {
+                    textDecoration: 'underline'
+                }
+            }
+        }),
+        contributionRoot: ({ theme }) => ({
+            '& .SCNotification-username': {
+                fontWeight: theme.typography.fontWeightBold,
+                '&:hover': {
+                    textDecoration: 'underline'
+                }
+            },
+            '& .SCNotification-vote-button': {
+                color: 'inherit',
+                padding: theme.spacing(1),
+                fontSize: '1.143rem',
+                minWidth: 0,
+                borderRadius: '50%'
+            },
+            '& .SCNotification-contribution-text': {
+                color: theme.palette.text.primary,
+                textOverflow: 'ellipsis',
+                overflow: 'hidden',
+                '&:hover': {
+                    textDecoration: 'underline'
+                }
+            },
+            '& .SCNotificationItem-root .SCNotificationItem-header .SCNotificationItem-secondary': {
+                marginTop: theme.spacing(1),
+                '& .SCDateTimeAgo-root': {
+                    marginTop: 0
+                }
+            }
+        }),
+        contributionFollowRoot: ({ theme }) => ({
+            '& .SCNotification-username': {
+                fontWeight: 700,
+                '&:hover': {
+                    textDecoration: 'underline'
+                }
+            },
+            '& .SCNotification-follow-text': {
+                color: theme.palette.text.primary
+            },
+            '& .SCNotification-contribution-text': {
+                '&:hover': {
+                    textDecoration: 'underline'
+                },
+                textOverflow: 'ellipsis',
+                display: 'inline',
+                overflow: 'hidden'
+            },
+            '& .MuiIcon-root': {
+                fontSize: '18px',
+                marginBottom: '0.5px'
+            }
+        }),
+        deletedForRoot: ({ theme }) => ({
+            '& .SCNotification-flag-icon': {
+                backgroundColor: red[500],
+                color: '#FFF'
+            },
+            '& .SCNotification-flag-text': {
+                color: theme.palette.text.primary
+            },
+            '& .SCNotification-contribution-wrap': {
+                marginBottom: theme.spacing(1),
+                padding: theme.spacing(2),
+                textOverflow: 'ellipsis',
+                display: 'inline',
+                overflow: 'hidden'
+            },
+            '& .SCNotification-contribution-text': {
+                '&:hover': {
+                    textDecoration: 'underline'
+                }
+            }
+        }),
+        incubatorApprovedRoot: ({ theme }) => ({
+            '& .SCNotification-category-icon': {
+                borderRadius: 3
+            },
+            '& .SCNotification-view-incubator-button': {
+                padding: theme.spacing(),
+                paddingBottom: 0,
+                textTransform: 'initial',
+                marginLeft: -8
+            }
+        }),
+        kindlyNoticeFlagRoot: ({ theme }) => ({
+            '& .SCNotification-flag-icon': {
+                backgroundColor: red[500],
+                color: '#FFF'
+            },
+            '& .SCNotification-flag-text': {
+                color: theme.palette.text.primary
+            },
+            '& .SCNotification-contribution-wrap': {
+                padding: `${theme.spacing(2)} ${theme.spacing(2)}`,
+                textOverflow: 'ellipsis',
+                display: 'inline',
+                overflow: 'hidden'
+            },
+            '& .SCNotification-contribution-text': {
+                '&:hover': {
+                    textDecoration: 'underline'
+                }
+            }
+        }),
+        kindlyNoticeForRoot: ({ theme }) => ({
+            width: '100%',
+            '& .SCNotification-flag-icon': {
+                backgroundColor: red[500],
+                color: '#FFF'
+            },
+            '& .SCNotification-flag-text': {
+                color: theme.palette.text.primary
+            },
+            '& .SCNotification-contribution-wrap': {
+                padding: `${theme.spacing(2)} ${theme.spacing(2)}`,
+                textOverflow: 'ellipsis',
+                display: 'inline',
+                overflow: 'hidden'
+            },
+            '& .SCNotification-contribution-text': {
+                '&:hover': {
+                    textDecoration: 'underline'
+                }
+            }
+        }),
+        mentionRoot: ({ theme }) => ({
+            '& .SCNotification-username': {
+                fontWeight: 700,
+                '&:hover': {
+                    textDecoration: 'underline'
+                }
+            },
+            '& .SCNotification-mention-text': {
+                color: theme.palette.text.primary
+            },
+            '& .SCNotification-contribution-text': {
+                '&:hover': {
+                    textDecoration: 'underline'
+                },
+                textOverflow: 'ellipsis',
+                display: 'inline',
+                overflow: 'hidden'
+            }
+        }),
+        privateMessageRoot: ({ theme }) => ({
+            '& .SCNotification-username': {
+                display: 'inline',
+                fontWeight: 700,
+                '&:hover': {
+                    textDecoration: 'underline'
+                }
+            },
+            '& .SCNotification-message-label': {
+                color: theme.palette.text.primary
+            },
+            '& .SCNotification-message-wrap': {
+                textOverflow: 'ellipsis',
+                overflow: 'hidden',
+                WebkitLineClamp: '2',
+                lineClamp: 2,
+                WebkitBoxOrient: 'vertical',
+                '& p': {
+                    margin: 0
+                }
+            },
+            '& .SCNotification-message': {
+                height: 20,
+                overflowY: 'hidden',
+                textOverflow: 'ellipsis',
+                display: 'inline',
+                overflow: 'hidden',
+                '&:hover': {
+                    textDecoration: 'underline'
+                },
+                '& > p': {
+                    overflowY: 'hidden',
+                    textOverflow: 'ellipsis',
+                    display: '-webkit-box',
+                    WebkitLineClamp: '2',
+                    lineClamp: 2,
+                    WebkitBoxOrient: 'vertical'
+                }
+            },
+            '& .SCNotification-actions': {
+                fontSize: '13px',
+                maxWidth: '40%'
+            }
+        }),
+        undeletedForRoot: ({ theme }) => ({
+            '& .SCNotification-undeleted-icon': {
+                backgroundColor: red[500],
+                color: '#FFF'
+            },
+            '& .SCNotification-undeleted-text': {
+                color: theme.palette.text.primary
+            },
+            '& .SCNotification-contribution-wrap': {
+                marginBottom: theme.spacing(1),
+                padding: theme.spacing(2),
+                textOverflow: 'ellipsis',
+                display: 'inline',
+                overflow: 'hidden'
+            },
+            '& .SCNotification-contribution-text': {
+                '&:hover': {
+                    textDecoration: 'underline'
+                }
+            }
+        }),
+        userBlockedRoot: ({ theme }) => ({
+            '& .SCNotification-unblocked-icon': {
+                backgroundColor: green[500],
+                color: '#FFF'
+            },
+            '& .SCNotification-blocked-icon': {
+                backgroundColor: red[500],
+                color: '#FFF'
+            },
+            '& .SCNotification-blocked-text': {
+                color: theme.palette.text.primary
+            }
+        }),
+        userConnectionRoot: ({ theme }) => ({
+            '& .SCNotification-username': {
+                fontWeight: 700,
+                '&:hover': {
+                    textDecoration: 'underline'
+                }
+            },
+            '& .SCNotification-connection-text': {
+                color: theme.palette.text.primary
+            }
+        }),
+        userFollowRoot: ({ theme }) => ({
+            width: '100%',
+            '& .SCNotification-username': {
+                fontWeight: 700,
+                '&:hover': {
+                    textDecoration: 'underline'
+                }
+            },
+            '& .SCNotification-follow-text': {
+                color: theme.palette.text.primary
+            }
+        }),
+        voteUpRoot: ({ theme }) => ({
+            width: '100%',
+            '& .SCNotification-username': {
+                fontWeight: 700,
+                '&:hover': {
+                    textDecoration: 'underline'
+                }
+            },
+            '& .SCNotification-vote-up-text': {
+                color: theme.palette.text.primary
+            },
+            '& .SCNotification-contribution-text': {
+                '&:hover': {
+                    textDecoration: 'underline'
+                }
+            }
         })
     }
 };

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

@@ -0,0 +1,9 @@
+declare const Component: {
+    styleOverrides: {
+        root: ({ theme }: any) => {};
+        skeletonRoot: ({ theme }: any) => {
+            marginTop: any;
+        };
+    };
+};
+export default Component;

package/lib/esm/components/SCNotificationFeedTemplate.js

@@ -0,0 +1,9 @@
+const Component = {
+    styleOverrides: {
+        root: ({ theme }) => ({}),
+        skeletonRoot: ({ theme }) => ({
+            marginTop: theme.spacing(2)
+        })
+    }
+};
+export default Component;

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

@@ -3,6 +3,7 @@ declare const Component: {
         root: ({ theme }: any) => {
             padding: any;
         };
+        skeletonRoot: ({ theme }: any) => {};
     };
 };
 export default Component;

package/lib/esm/components/SCPlatformWidget.js

@@ -2,7 +2,8 @@ const Component = {
     styleOverrides: {
         root: ({ theme }) => ({
             padding: theme.spacing(2)
-        })
+        }),
+        skeletonRoot: ({ theme }) => ({})
     }
 };
 export default Component;

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

@@ -0,0 +1,31 @@
+declare const Component: {
+    styleOverrides: {
+        root: ({ theme }: any) => {};
+        skeletonRoot: ({ theme }: any) => {};
+        dialogRoot: ({ theme }: any) => {};
+        pollSnippetRoot: ({ theme }: any) => {
+            '& > div': {
+                alignItems: string;
+                paddingTop: any;
+            };
+            '& .SCBaseItem-text': {
+                marginTop: number;
+            };
+            '& .SCPollSuggestionWidget-username': {
+                color: any;
+                fontWeight: any;
+                textDecoration: string;
+            };
+            '& .SCPollSuggestionWidget-avatar': {
+                width: any;
+                height: any;
+            };
+            '& .SCPollSuggestionWidget-activity-at': {
+                textDecoration: string;
+                color: string;
+                marginTop: number;
+            };
+        };
+    };
+};
+export default Component;

package/lib/esm/components/SCPollSuggestionWidget.js

@@ -0,0 +1,31 @@
+const Component = {
+    styleOverrides: {
+        root: ({ theme }) => ({}),
+        skeletonRoot: ({ theme }) => ({}),
+        dialogRoot: ({ theme }) => ({}),
+        pollSnippetRoot: ({ theme }) => ({
+            '& > div': {
+                alignItems: 'flex-start',
+                paddingTop: theme.spacing(1)
+            },
+            '& .SCBaseItem-text': {
+                marginTop: 0
+            },
+            '& .SCPollSuggestionWidget-username': {
+                color: theme.palette.text.primary,
+                fontWeight: theme.typography.fontWeightBold,
+                textDecoration: 'none'
+            },
+            '& .SCPollSuggestionWidget-avatar': {
+                width: theme.selfcommunity.user.avatar.sizeMedium,
+                height: theme.selfcommunity.user.avatar.sizeMedium
+            },
+            '& .SCPollSuggestionWidget-activity-at': {
+                textDecoration: 'none',
+                color: 'inherit',
+                marginTop: 3
+            }
+        })
+    }
+};
+export default Component;

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

@@ -14,6 +14,24 @@ declare const Component: {
                 display: string;
             };
         };
+        skeletonRoot: ({ theme }: any) => {
+            [x: number]: {
+                width: any;
+            };
+            '& .SCPrivateMessageComponent-thread-section': {
+                '& .MuiCardContent-root': {
+                    padding: number;
+                    '& .MuiList-root': {
+                        paddingTop: number;
+                        paddingBottom: number;
+                    };
+                };
+            };
+            ' .MuiPaper-root, MuiAppBar-root': {
+                boxShadow: string;
+                borderRadius: number;
+            };
+        };
     };
 };
 export default Component;

package/lib/esm/components/SCPrivateMessageComponent.js

@@ -13,6 +13,24 @@ const Component = {
             '& .SCPrivateMessageComponent-hide': {
                 display: 'none'
             }
+        }),
+        skeletonRoot: ({ theme }) => ({
+            [theme.breakpoints.up('sm')]: {
+                width: theme.breakpoints.values['lg']
+            },
+            '& .SCPrivateMessageComponent-thread-section': {
+                '& .MuiCardContent-root': {
+                    padding: 0,
+                    '& .MuiList-root': {
+                        paddingTop: 0,
+                        paddingBottom: 0
+                    }
+                }
+            },
+            ' .MuiPaper-root, MuiAppBar-root': {
+                boxShadow: 'none',
+                borderRadius: 0
+            }
         })
     }
 };

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

@@ -46,7 +46,7 @@ declare const Component: {
                 backgroundColor: any;
                 '& .MuiCardHeader-root': {
                     paddingBottom: any;
-                    '& .SCMessageMediaUploader-close-button': {
+                    '& .SCPrivateMessageEditor-close-button': {
                         fontSize: string;
                         cursor: string;
                         '&:hover': {
@@ -61,8 +61,8 @@ declare const Component: {
                     overflow: string;
                     padding: any;
                     minHeight: any;
-                    '& .SCMessageMediaUploader-upload-section': {
-                        '& .SCMessageMediaUploader-upload-button': {
+                    '& .SCPrivateMessageEditor-upload-section': {
+                        '& .SCPrivateMessageEditor-upload-button': {
                             display: string;
                             margin: string;
                             fontSize: string;
@@ -72,7 +72,7 @@ declare const Component: {
                         paddingTop: any;
                         paddingBottom: any;
                     };
-                    '& .SCMessageMediaUploader-preview-content': {
+                    '& .SCPrivateMessageEditor-preview-content': {
                         position: string;
                         display: string;
                         margin: string;
@@ -91,10 +91,10 @@ declare const Component: {
                                 height: any;
                             };
                         };
-                        '& .SCMessageMediaUploader-preview-actions': {
+                        '& .SCPrivateMessageEditor-preview-actions': {
                             height: string;
                             background: string;
-                            '&:hover, &:active, &.SCMessageMediaUploader-progress': {
+                            '&:hover, &:active, &.SCPrivateMessageEditor-progress': {
                                 background: string;
                             };
                             '& .MuiButtonBase-root, .MuiTypography-root': {
@@ -105,7 +105,7 @@ declare const Component: {
                                 transform: string;
                             };
                         };
-                        '& .SCMessageMediaUploader-preview-info': {
+                        '& .SCPrivateMessageEditor-preview-info': {
                             position: string;
                             left: string;
                             bottom: number;
@@ -124,6 +124,7 @@ declare const Component: {
                 paddingBottom: string;
             };
         };
+        skeletonRoot: ({ theme }: any) => {};
     };
 };
 export default Component;

package/lib/esm/components/SCPrivateMessageEditor.js

@@ -43,7 +43,7 @@ const Component = {
                 backgroundColor: theme.palette.grey['A200'],
                 '& .MuiCardHeader-root': {
                     paddingBottom: theme.spacing(0),
-                    '& .SCMessageMediaUploader-close-button': {
+                    '& .SCPrivateMessageEditor-close-button': {
                         fontSize: '0.857rem',
                         cursor: 'pointer',
                         '&:hover': {
@@ -58,8 +58,8 @@ const Component = {
                     overflow: 'auto',
                     padding: theme.spacing(1),
                     minHeight: theme.spacing(20),
-                    '& .SCMessageMediaUploader-upload-section': {
-                        '& .SCMessageMediaUploader-upload-button': {
+                    '& .SCPrivateMessageEditor-upload-section': {
+                        '& .SCPrivateMessageEditor-upload-button': {
                             display: 'flex',
                             margin: '0 auto',
                             fontSize: '1.57rem'
@@ -69,7 +69,7 @@ const Component = {
                         paddingTop: theme.spacing(0),
                         paddingBottom: theme.spacing(0)
                     },
-                    '& .SCMessageMediaUploader-preview-content': {
+                    '& .SCPrivateMessageEditor-preview-content': {
                         position: 'relative',
                         display: 'flex',
                         margin: '0 auto',
@@ -88,10 +88,10 @@ const Component = {
                                 height: theme.spacing(10)
                             }
                         },
-                        '& .SCMessageMediaUploader-preview-actions': {
+                        '& .SCPrivateMessageEditor-preview-actions': {
                             height: '100%',
                             background: 'transparent',
-                            '&:hover, &:active, &.SCMessageMediaUploader-progress': {
+                            '&:hover, &:active, &.SCPrivateMessageEditor-progress': {
                                 background: 'rgba(0,0,0,0.5)'
                             },
                             '& .MuiButtonBase-root, .MuiTypography-root': {
@@ -102,7 +102,7 @@ const Component = {
                                 transform: 'translate(-50%, -50%)'
                             }
                         },
-                        '& .SCMessageMediaUploader-preview-info': {
+                        '& .SCPrivateMessageEditor-preview-info': {
                             position: 'absolute',
                             left: '50%',
                             bottom: 0,
@@ -120,7 +120,8 @@ const Component = {
             '&.SCPrivateMessageEditor-ios': {
                 paddingBottom: '15px'
             }
-        })
+        }),
+        skeletonRoot: ({ theme }) => ({})
     }
 };
 export default Component;

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

@@ -56,6 +56,9 @@ declare const Component: {
                 };
             };
         };
+        skeletonRoot: ({ theme }: any) => {
+            maxWidth: number;
+        };
     };
 };
 export default Component;

package/lib/esm/components/SCPrivateMessageSnippetItem.js

@@ -51,6 +51,9 @@ const Component = {
                     padding: 0
                 }
             }
+        }),
+        skeletonRoot: ({ theme }) => ({
+            maxWidth: 700
         })
     }
 };

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

@@ -48,6 +48,7 @@ declare const Component: {
                 padding: any;
             };
         };
+        skeletonRoot: ({ theme }: any) => {};
     };
 };
 export default Component;

package/lib/esm/components/SCPrivateMessageSnippets.js

@@ -44,7 +44,8 @@ const Component = {
             '& .MuiPaper-root, MuiCard-root, SCWidget-root, SCPrivateMessageSnippets-root, MuiCardContent-root': {
                 padding: theme.spacing(2)
             }
-        })
+        }),
+        skeletonRoot: ({ theme }) => ({})
     }
 };
 export default Component;

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

@@ -144,6 +144,20 @@ declare const Component: {
                 flexGrow: number;
             };
         };
+        skeletonRoot: ({ theme }: any) => {
+            height: string;
+            width: string;
+            borderRadius: number;
+            '& .MuiCardContent-root': {
+                padding: number;
+                '& .MuiList-root .MuiListItem-root': {
+                    height: any;
+                };
+                '&:last-child': {
+                    paddingBottom: number;
+                };
+            };
+        };
     };
 };
 export default Component;

package/lib/esm/components/SCPrivateMessageThread.js

@@ -142,6 +142,20 @@ const Component = {
                 }
             },
             '& .MuiList-root, .SCPrivateMessageThread-new-message-content': { flexGrow: 1 }
+        }),
+        skeletonRoot: ({ theme }) => ({
+            height: '100%',
+            width: '100%',
+            borderRadius: 0,
+            '& .MuiCardContent-root': {
+                padding: 0,
+                '& .MuiList-root .MuiListItem-root': {
+                    height: theme.spacing(10)
+                },
+                '&:last-child': {
+                    paddingBottom: 0
+                }
+            }
         })
     }
 };