@selfcommunity/react-theme-default 0.2.0-live.80 → 0.2.0-live.85

package/lib/esm/assets/social/outlined/twitter.js

@@ -0,0 +1 @@
+export default `data:image/png;base64,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`;

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

@@ -1,22 +1,32 @@
 declare const Component: {
     styleOverrides: {
-        root: ({ theme }: any) => {
+        root: ({ theme, followers }: any) => {
             padding: any;
-            '& .MuiAvatarGroup-root .MuiAvatar-root': {
-                width: any;
-                height: any;
-                border: string;
-                fontSize: string;
-                '&.MuiAvatar-colorDefault': {
-                    marginLeft: number;
-                    backgroundColor: string;
-                    color: any;
+            '& .MuiAvatarGroup-root': {
+                '&:not(.SCAvatarGroupSkeleton-root) .MuiAvatar-root': {
+                    '&.MuiAvatar-colorDefault': {
+                        marginLeft: number;
+                        backgroundColor: string;
+                        color: any;
+                        border: string;
+                        borderRadius: number;
+                        padding: number;
+                    };
+                };
+                '& .MuiAvatar-root': {
+                    height: any;
                     border: string;
-                    borderRadius: number;
-                    padding: number;
+                    fontSize: string;
+                    '&:first-of-type': {
+                        width: any;
+                    };
+                    '&:not(:first-of-type)': {
+                        width: any;
+                    };
                 };
             };
         };
+        dialogRoot: () => {};
     };
 };
 export default Component;

package/lib/esm/components/SCCategoryFollowersButton.js

@@ -1,22 +1,32 @@
 const Component = {
     styleOverrides: {
-        root: ({ theme }) => ({
+        root: ({ theme, followers }) => ({
             padding: theme.spacing(),
-            '& .MuiAvatarGroup-root .MuiAvatar-root': {
-                width: theme.selfcommunity.user.avatar.sizeSmall,
-                height: theme.selfcommunity.user.avatar.sizeSmall,
-                border: '1px solid #fff',
-                fontSize: '0.76rem',
-                '&.MuiAvatar-colorDefault': {
-                    marginLeft: 0,
-                    backgroundColor: 'transparent',
-                    color: theme.palette.primary.main,
-                    border: '0 none',
-                    borderRadius: 0,
-                    padding: 1
+            '& .MuiAvatarGroup-root': {
+                '&:not(.SCAvatarGroupSkeleton-root) .MuiAvatar-root': {
+                    '&.MuiAvatar-colorDefault': {
+                        marginLeft: 0,
+                        backgroundColor: 'transparent',
+                        color: theme.palette.primary.main,
+                        border: '0 none',
+                        borderRadius: 0,
+                        padding: 1
+                    }
+                },
+                '& .MuiAvatar-root': {
+                    height: theme.selfcommunity.user.avatar.sizeSmall,
+                    border: `1px solid ${theme.palette.common.white}`,
+                    fontSize: '0.7rem',
+                    '&:first-of-type': {
+                        width: followers > 3 ? 'auto' : theme.selfcommunity.user.avatar.sizeSmall
+                    },
+                    '&:not(:first-of-type)': {
+                        width: theme.selfcommunity.user.avatar.sizeSmall
+                    }
                 }
             }
-        })
+        }),
+        dialogRoot: () => ({})
     }
 };
 export default Component;

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

@@ -68,6 +68,18 @@ declare const Component: {
                         maxWidth: string;
                     };
                 };
+                '& .SCCommentObject-flag-chip': {
+                    borderRadius: number;
+                    display: string;
+                    width: string;
+                };
+            };
+            '& .SCCommentObject-collapsed': {
+                justifyContent: string;
+                alignItems: string;
+                '& .MuiCardContent-root': {
+                    marginLeft: any;
+                };
             };
             '& .SCCommentObject-show-more-content': {
                 color: any;

package/lib/esm/components/SCCommentObject.js

@@ -68,6 +68,18 @@ const Component = {
                     '& img': {
                         maxWidth: '100%'
                     }
+                },
+                '& .SCCommentObject-flag-chip': {
+                    borderRadius: 0,
+                    display: 'flex',
+                    width: 'fit-content'
+                }
+            },
+            '& .SCCommentObject-collapsed': {
+                justifyContent: 'center',
+                alignItems: 'center',
+                '& .MuiCardContent-root': {
+                    marginLeft: theme.spacing(1)
                 }
             },
             '& .SCCommentObject-show-more-content': {

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

@@ -0,0 +1,31 @@
+declare const Component: {
+    styleOverrides: {
+        root: ({ theme }: any) => {
+            '& .SCDefaultDrawerContent-no-results': {
+                paddingLeft: any;
+            };
+            '& .SCDefaultDrawerContent-title': {
+                paddingTop: any;
+            };
+            '& .SCDefaultDrawerContent-navigation': {
+                paddingTop: any;
+                paddingBottom: number;
+                '& .MuiListItemButton-root': {
+                    paddingLeft: any;
+                    paddingRight: any;
+                    '& .MuiListItemText-root .MuiTypography-root': {
+                        fontWeight: number;
+                    };
+                };
+                '& .MuiListItemIcon-root': {
+                    minWidth: number;
+                    marginRight: any;
+                };
+                '& .MuiIcon-root': {
+                    fontSize: number;
+                };
+            };
+        };
+    };
+};
+export default Component;

package/lib/esm/components/SCDefaultDrawerContent.js

@@ -0,0 +1,31 @@
+const Component = {
+    styleOverrides: {
+        root: ({ theme }) => ({
+            '& .SCDefaultDrawerContent-no-results': {
+                paddingLeft: theme.spacing(2)
+            },
+            '& .SCDefaultDrawerContent-title': {
+                paddingTop: theme.spacing(1)
+            },
+            '& .SCDefaultDrawerContent-navigation': {
+                paddingTop: theme.spacing(0.5),
+                paddingBottom: 0,
+                '& .MuiListItemButton-root': {
+                    paddingLeft: theme.spacing(3),
+                    paddingRight: theme.spacing(3),
+                    '& .MuiListItemText-root .MuiTypography-root': {
+                        fontWeight: 700
+                    }
+                },
+                '& .MuiListItemIcon-root': {
+                    minWidth: 0,
+                    marginRight: theme.spacing(2)
+                },
+                '& .MuiIcon-root': {
+                    fontSize: 18
+                }
+            }
+        })
+    }
+};
+export default Component;

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

@@ -42,6 +42,8 @@ declare const Component: {
                 marginLeft: any;
                 marginBottom: any;
                 backgroundColor: any;
+                color: any;
+                border: string;
                 '& .SCEventHeader-chip-icon': {
                     marginLeft: any;
                 };
@@ -118,10 +120,6 @@ declare const Component: {
                     };
                 };
             };
-            '& .SCEventHeader-name': {
-                fontWeight: any;
-                fontSize: string;
-            };
         };
         skeletonRoot: ({ theme }: any) => {
             position: string;

package/lib/esm/components/SCEventHeader.js

@@ -1,4 +1,4 @@
-import { alpha } from '@mui/system';
+import { alpha } from '@mui/material';
 const Component = {
     styleOverrides: {
         root: ({ theme, isEventAdmin, isEventFinished }) => ({
@@ -42,7 +42,9 @@ const Component = {
             '& .SCEventHeader-chip': {
                 marginLeft: theme.spacing(2),
                 marginBottom: theme.spacing(),
-                backgroundColor: theme.palette.grey[500],
+                backgroundColor: theme.palette.common.white,
+                color: theme.palette.error.light,
+                border: `1px solid ${theme.palette.grey[400]}`,
                 '& .SCEventHeader-chip-icon': {
                     marginLeft: theme.spacing(1)
                 }
@@ -118,10 +120,6 @@ const Component = {
                         paddingRight: theme.spacing(2)
                     }
                 }
-            },
-            '& .SCEventHeader-name': {
-                fontWeight: theme.typography.fontWeightBold,
-                fontSize: '1.429rem'
             }
         }),
         skeletonRoot: ({ theme }) => ({

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

@@ -53,16 +53,7 @@ declare const Component: {
                 };
             };
         };
-        dialogRoot: ({ theme }: {
-            theme: any;
-        }) => {
-            '& .SCEventMembersWidget-infinite-scroll': {
-                [x: number]: {
-                    height: string;
-                };
-                height: string;
-            };
-        };
+        dialogRoot: () => {};
     };
 };
 export default Component;

package/lib/esm/components/SCEventMembersWidget.js

@@ -49,14 +49,7 @@ const Component = {
                 }
             }
         }),
-        dialogRoot: ({ theme }) => ({
-            '& .SCEventMembersWidget-infinite-scroll': {
-                height: '400px',
-                [theme.breakpoints.down('md')]: {
-                    height: '100%'
-                }
-            }
-        })
+        dialogRoot: () => ({})
     }
 };
 export default Component;

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

@@ -1,7 +1,8 @@
 declare const Component: {
     styleOverrides: {
-        root: ({ theme }: {
+        root: ({ theme, followers }: {
             theme: any;
+            followers: any;
         }) => {
             gap: any;
             marginTop: string;
@@ -9,10 +10,28 @@ declare const Component: {
             '&:hover': {
                 backgroundColor: string;
             };
-            '& .MuiAvatarGroup-avatar': {
-                width: any;
-                height: any;
-                fontSize: string;
+            '& .MuiAvatarGroup-root': {
+                '&:not(.SCAvatarGroupSkeleton-root) .MuiAvatar-root': {
+                    '&.MuiAvatar-colorDefault': {
+                        marginLeft: number;
+                        backgroundColor: string;
+                        color: any;
+                        border: string;
+                        borderRadius: number;
+                        padding: number;
+                    };
+                };
+                '& .MuiAvatar-root': {
+                    height: any;
+                    border: string;
+                    fontSize: string;
+                    '&:first-of-type': {
+                        width: any;
+                    };
+                    '&:not(:first-of-type)': {
+                        width: any;
+                    };
+                };
             };
             '& .SCEventParticipantsButton-participants': {
                 color: any;

package/lib/esm/components/SCEventParticipantsButton.js

@@ -1,16 +1,34 @@
 const Component = {
     styleOverrides: {
-        root: ({ theme }) => ({
+        root: ({ theme, followers }) => ({
             gap: theme.spacing(1),
             marginTop: '0 !important',
             minWidth: 'auto',
             '&:hover': {
                 backgroundColor: 'unset'
             },
-            '& .MuiAvatarGroup-avatar': {
-                width: theme.selfcommunity.user.avatar.sizeSmall,
-                height: theme.selfcommunity.user.avatar.sizeSmall,
-                fontSize: '0.8rem'
+            '& .MuiAvatarGroup-root': {
+                '&:not(.SCAvatarGroupSkeleton-root) .MuiAvatar-root': {
+                    '&.MuiAvatar-colorDefault': {
+                        marginLeft: 0,
+                        backgroundColor: 'transparent',
+                        color: theme.palette.primary.main,
+                        border: '0 none',
+                        borderRadius: 0,
+                        padding: 1
+                    }
+                },
+                '& .MuiAvatar-root': {
+                    height: theme.selfcommunity.user.avatar.sizeSmall,
+                    border: `1px solid ${theme.palette.common.white}`,
+                    fontSize: '0.7rem',
+                    '&:first-of-type': {
+                        width: followers > 3 ? 'auto' : theme.selfcommunity.user.avatar.sizeSmall
+                    },
+                    '&:not(:first-of-type)': {
+                        width: theme.selfcommunity.user.avatar.sizeSmall
+                    }
+                }
             },
             '& .SCEventParticipantsButton-participants': {
                 color: theme.palette.grey[600]

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

@@ -3,6 +3,9 @@ declare const Component: {
         selectRoot: ({ theme }: {
             theme: any;
         }) => {
+            [x: number]: {
+                padding: string;
+            };
             backgroundColor: any;
             justifyContent: string;
             height: number;

package/lib/esm/components/SCEventSubscribeButton.js

@@ -5,6 +5,9 @@ const Component = {
             justifyContent: 'space-between',
             height: 33,
             borderRadius: '5px',
+            [theme.breakpoints.down('md')]: {
+                padding: '10px'
+            },
             '&:hover, &:active': {
                 backgroundColor: theme.palette.common.black,
                 color: theme.palette.common.white,

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

@@ -19,6 +19,9 @@ declare const Component: {
                 };
             };
             '& .SCEvents-events': {
+                [x: number]: {
+                    marginBottom: any;
+                };
                 marginTop: any;
                 '& .SCEvents-item': {
                     paddingTop: any;
@@ -44,6 +47,9 @@ declare const Component: {
                 flexDirection: string;
                 alignItems: string;
                 '& .SCEvent-skeleton-root': {
+                    [x: number]: {
+                        width: string;
+                    };
                     marginBottom: any;
                     minWidth: string;
                 };

package/lib/esm/components/SCEvents.js

@@ -20,6 +20,9 @@ const Component = {
             },
             '& .SCEvents-events': {
                 marginTop: theme.spacing(2),
+                [theme.breakpoints.down('md')]: {
+                    marginBottom: theme.spacing(7)
+                },
                 '& .SCEvents-item': {
                     paddingTop: theme.spacing(2)
                 },
@@ -45,7 +48,10 @@ const Component = {
                 alignItems: 'flex-start',
                 '& .SCEvent-skeleton-root': {
                     marginBottom: theme.spacing(2),
-                    minWidth: '50%'
+                    minWidth: '50%',
+                    [theme.breakpoints.down('md')]: {
+                        width: '100%'
+                    }
                 },
                 '& .SCEvent-skeleton-snippet .SCBaseItem-content': {
                     maxWidth: '70%'

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

@@ -44,9 +44,11 @@ declare const Component: {
                 '& a:not(.MuiChip-clickable)': {
                     color: string;
                     textDecoration: string;
+                    display: string;
                     '&::after': {
                         content: string;
                         padding: any;
+                        alignSelf: string;
                     };
                     '&:last-child::after': {
                         display: string;
@@ -60,7 +62,9 @@ declare const Component: {
                     };
                 };
                 '& .SCFeedObject-group, & .SCFeedObject-event': {
-                    marginRight: string;
+                    [x: number]: {
+                        marginRight: string;
+                    };
                 };
             };
             '& .SCFeedObject-group, & .SCFeedObject-event': {
@@ -78,6 +82,8 @@ declare const Component: {
                         textTransform: string;
                     };
                 };
+                borderBottom: string;
+                margin: any;
             };
             '& .SCFeedObject-content': {
                 padding: any;
@@ -137,21 +143,22 @@ declare const Component: {
                 boxShadow: string;
                 borderRadius: number;
                 '& .SCFeedObject-category': {
+                    [x: number]: {
+                        justifyContent: string;
+                    };
                     borderBottom: string;
                     margin: any;
                     '& .SCFeedObject-group, & .SCFeedObject-event': {
                         borderBottom: string;
-                        margin: any;
+                        marginTop: any;
                         '& .MuiChip-icon': {
-                            marginLeft: any;
-                            marginRight: any;
                             fontWeight: any;
                         };
                     };
-                };
-                '& .SCFeedObject-group, & .SCFeedObject-event': {
-                    borderBottom: string;
-                    margin: any;
+                    '& .SCFeedObject-group .MuiChip-icon': {
+                        marginLeft: any;
+                        marginRight: any;
+                    };
                 };
                 '& .SCFeedObject-header': {
                     '& .MuiCardHeader-avatar': {

package/lib/esm/components/SCFeedObject.js

@@ -45,9 +45,11 @@ const Component = {
                 '& a:not(.MuiChip-clickable)': {
                     color: 'inherit',
                     textDecoration: 'none',
+                    display: 'inline-flex',
                     '&::after': {
                         content: '"\\2022"',
-                        padding: theme.spacing()
+                        padding: theme.spacing(),
+                        alignSelf: 'center'
                     },
                     '&:last-child::after': {
                         display: 'none'
@@ -61,7 +63,9 @@ const Component = {
                     }
                 },
                 '& .SCFeedObject-group, & .SCFeedObject-event': {
-                    marginRight: `${theme.spacing(1)} !important`
+                    [theme.breakpoints.up('sm')]: {
+                        marginRight: `${theme.spacing(1)} !important`
+                    }
                 }
             },
             '& .SCFeedObject-group, & .SCFeedObject-event': {
@@ -78,7 +82,9 @@ const Component = {
                         color: theme.palette.common.white,
                         textTransform: 'initial'
                     }
-                }
+                },
+                borderBottom: '1px solid rgba(221, 221, 221, 1)',
+                margin: theme.spacing(1, 2, 0, 2)
             },
             '& .SCFeedObject-content': {
                 padding: theme.spacing(1, 0, 0, 0),
@@ -142,18 +148,19 @@ const Component = {
                     margin: theme.spacing(0, 2),
                     '& .SCFeedObject-group, & .SCFeedObject-event': {
                         borderBottom: 'none',
-                        margin: theme.spacing(0),
+                        marginTop: theme.spacing(0.5),
                         '& .MuiChip-icon': {
-                            marginLeft: theme.spacing(1),
-                            marginRight: theme.spacing(-1),
                             fontWeight: theme.typography.fontWeightRegular
                         }
+                    },
+                    '& .SCFeedObject-group .MuiChip-icon': {
+                        marginLeft: theme.spacing(1),
+                        marginRight: theme.spacing(-1)
+                    },
+                    [theme.breakpoints.down('md')]: {
+                        justifyContent: 'space-evenly'
                     }
                 },
-                '& .SCFeedObject-group, & .SCFeedObject-event': {
-                    borderBottom: '1px solid rgba(221, 221, 221, 1)',
-                    margin: theme.spacing(1, 2, 0, 2)
-                },
                 '& .SCFeedObject-header': {
                     '& .MuiCardHeader-avatar': {
                         marginRight: theme.spacing(1.5),

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

@@ -1,22 +1,32 @@
 declare const Component: {
     styleOverrides: {
-        root: ({ theme }: any) => {
+        root: ({ theme, subscribers }: any) => {
             padding: any;
-            '& .MuiAvatarGroup-root .MuiAvatar-root': {
-                width: any;
-                height: any;
-                border: string;
-                fontSize: string;
-                '&.MuiAvatar-colorDefault': {
-                    marginLeft: number;
-                    backgroundColor: string;
-                    color: any;
+            '& .MuiAvatarGroup-root': {
+                '&:not(.SCAvatarGroupSkeleton-root) .MuiAvatar-root': {
+                    '&.MuiAvatar-colorDefault': {
+                        marginLeft: number;
+                        backgroundColor: string;
+                        color: any;
+                        border: string;
+                        borderRadius: number;
+                        padding: number;
+                    };
+                };
+                '& .MuiAvatar-root': {
+                    height: any;
                     border: string;
-                    borderRadius: number;
-                    padding: number;
+                    fontSize: string;
+                    '&:first-of-type': {
+                        width: any;
+                    };
+                    '&:not(:first-of-type)': {
+                        width: any;
+                    };
                 };
             };
         };
+        dialogRoot: () => {};
     };
 };
 export default Component;

package/lib/esm/components/SCGroupMembersButton.js

@@ -1,22 +1,32 @@
 const Component = {
     styleOverrides: {
-        root: ({ theme }) => ({
+        root: ({ theme, subscribers }) => ({
             padding: theme.spacing(),
-            '& .MuiAvatarGroup-root .MuiAvatar-root': {
-                width: theme.selfcommunity.user.avatar.sizeSmall,
-                height: theme.selfcommunity.user.avatar.sizeSmall,
-                border: '1px solid #fff',
-                fontSize: '0.76rem',
-                '&.MuiAvatar-colorDefault': {
-                    marginLeft: 0,
-                    backgroundColor: 'transparent',
-                    color: theme.palette.primary.main,
-                    border: '0 none',
-                    borderRadius: 0,
-                    padding: 1
+            '& .MuiAvatarGroup-root': {
+                '&:not(.SCAvatarGroupSkeleton-root) .MuiAvatar-root': {
+                    '&.MuiAvatar-colorDefault': {
+                        marginLeft: 0,
+                        backgroundColor: 'transparent',
+                        color: theme.palette.primary.main,
+                        border: '0 none',
+                        borderRadius: 0,
+                        padding: 1
+                    }
+                },
+                '& .MuiAvatar-root': {
+                    height: theme.selfcommunity.user.avatar.sizeSmall,
+                    border: `1px solid ${theme.palette.common.white}`,
+                    fontSize: '0.7rem',
+                    '&:first-of-type': {
+                        width: subscribers > 3 ? 'auto' : theme.selfcommunity.user.avatar.sizeSmall
+                    },
+                    '&:not(:first-of-type)': {
+                        width: theme.selfcommunity.user.avatar.sizeSmall
+                    }
                 }
             }
-        })
+        }),
+        dialogRoot: () => ({})
     }
 };
 export default Component;