@selfcommunity/react-theme-default 0.1.9-alpha.5 → 0.1.9-alpha.51

package/lib/esm/components/SCCategoryHeader.js

@@ -14,8 +14,11 @@ const Component = {
                 minHeight: 150,
                 color: '#FFF',
                 background: 'linear-gradient(180deg, rgba(177,177,177,1) 0%, rgba(255,255,255,1) 90%)',
-                height: 150,
-                borderRadius: 0
+                height: 230,
+                borderRadius: 0,
+                [theme.breakpoints.up('md')]: {
+                    borderRadius: theme.spacing(0, 0, 2.5, 2.5)
+                }
             },
             '& .SCCategoryHeader-info': {
                 paddingLeft: theme.spacing(2),
@@ -54,7 +57,13 @@ const Component = {
                 }
             }
         }),
-        skeletonRoot: ({ theme }) => ({})
+        skeletonRoot: ({ theme }) => ({
+            '& .SCCategoryHeader-skeleton-cover': {
+                [theme.breakpoints.up('md')]: {
+                    borderRadius: theme.spacing(0, 0, 2.5, 2.5)
+                }
+            }
+        })
     }
 };
 export default Component;

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

@@ -59,6 +59,25 @@ declare const Component: {
                         fontWeight: any;
                     };
                 };
+                '& .SCFeedObject-group': {
+                    marginRight: string;
+                };
+            };
+            '& .SCFeedObject-group': {
+                justifyContent: string;
+                padding: any;
+                '& a': {
+                    padding: any;
+                    marginBottom: any;
+                    color: any;
+                    '&:hover': {
+                        backgroundColor: any;
+                    };
+                    '& span': {
+                        color: any;
+                        textTransform: string;
+                    };
+                };
             };
             '& .SCFeedObject-content': {
                 padding: any;
@@ -120,6 +139,19 @@ declare const Component: {
                 '& .SCFeedObject-category': {
                     borderBottom: string;
                     margin: any;
+                    '& .SCFeedObject-group': {
+                        borderBottom: string;
+                        margin: any;
+                        '& .MuiChip-icon': {
+                            marginLeft: any;
+                            marginRight: any;
+                            fontWeight: any;
+                        };
+                    };
+                };
+                '& .SCFeedObject-group': {
+                    borderBottom: string;
+                    margin: any;
                 };
                 '& .SCFeedObject-header': {
                     '& .MuiCardHeader-avatar': {

package/lib/esm/components/SCFeedObject.js

@@ -59,6 +59,25 @@ const Component = {
                         textTransform: 'initial',
                         fontWeight: theme.typography.fontWeightBold
                     }
+                },
+                '& .SCFeedObject-group': {
+                    marginRight: `${theme.spacing(1)} !important`
+                }
+            },
+            '& .SCFeedObject-group': {
+                justifyContent: 'flex-start',
+                padding: theme.spacing(0.5),
+                '& a': {
+                    padding: theme.spacing(0.5),
+                    marginBottom: theme.spacing(0.5),
+                    color: theme.palette.common.white,
+                    '&:hover': {
+                        backgroundColor: theme.palette.common.black
+                    },
+                    '& span': {
+                        color: theme.palette.common.white,
+                        textTransform: 'initial'
+                    }
                 }
             },
             '& .SCFeedObject-content': {
@@ -120,7 +139,20 @@ const Component = {
                 },
                 '& .SCFeedObject-category': {
                     borderBottom: '1px solid rgba(221, 221, 221, 1)',
-                    margin: theme.spacing(0, 2)
+                    margin: theme.spacing(0, 2),
+                    '& .SCFeedObject-group': {
+                        borderBottom: 'none',
+                        margin: theme.spacing(0),
+                        '& .MuiChip-icon': {
+                            marginLeft: theme.spacing(1),
+                            marginRight: theme.spacing(-1),
+                            fontWeight: theme.typography.fontWeightRegular
+                        }
+                    }
+                },
+                '& .SCFeedObject-group': {
+                    borderBottom: '1px solid rgba(221, 221, 221, 1)',
+                    margin: theme.spacing(1, 2, 0, 2)
                 },
                 '& .SCFeedObject-header': {
                     '& .MuiCardHeader-avatar': {

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

@@ -18,7 +18,12 @@ declare const Component: {
                 };
             };
             '& .SCBaseItemButton-primary': {
+                display: string;
+                alignItems: string;
                 fontWeight: any;
+                '& .SCGroup-icon': {
+                    marginLeft: any;
+                };
             };
             '& .SCBaseItemButton-secondary': {
                 fontSize: string;

package/lib/esm/components/SCGroup.js

@@ -18,7 +18,12 @@ const Component = {
                 }
             },
             '& .SCBaseItemButton-primary': {
-                fontWeight: theme.typography.fontWeightBold
+                display: 'flex',
+                alignItems: 'center',
+                fontWeight: theme.typography.fontWeightBold,
+                '& .SCGroup-icon': {
+                    marginLeft: theme.spacing(0.5)
+                }
             },
             '& .SCBaseItemButton-secondary': {
                 fontSize: '0.857rem'

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

@@ -4,10 +4,6 @@ declare const Component: {
             '& .SCGroupHeader-cover': {
                 [x: number]: {
                     borderRadius: any;
-                    margin?: undefined;
-                } | {
-                    margin: any;
-                    borderRadius?: undefined;
                 };
                 position: string;
                 height: number;
@@ -17,6 +13,7 @@ declare const Component: {
                 boxShadow: string;
             };
             '& .SCGroupHeader-info': {
+                marginTop: any;
                 display: string;
                 flexDirection: string;
                 justifyContent: string;
@@ -47,6 +44,9 @@ declare const Component: {
                     marginLeft: string;
                     marginTop: any;
                 };
+                '& .SCGroupSubscribeButton-root': {
+                    marginTop: any;
+                };
             };
             '& .SCGroupHeader-avatar': {
                 top: number;
@@ -85,7 +85,7 @@ declare const Component: {
             position: string;
             '& .SCGroupHeader-cover': {
                 [x: number]: {
-                    margin: any;
+                    borderRadius: any;
                 };
                 height: number;
             };
@@ -99,23 +99,12 @@ declare const Component: {
                     border: string;
                 };
             };
-            '& .SCGroupHeader-section': {
+            '& .SCGroupHeader-info': {
                 display: string;
                 justifyContent: string;
-                '& .SCGroupHeader-name': {
-                    marginTop: number;
-                    textAlign: string;
-                    "& .MuiSkeleton-root": {
-                        justifyContent: string;
-                    };
-                };
-                '& .SCGroupHeader-actions': {
-                    [x: number]: {
-                        margin: any;
-                    };
-                    height: string;
-                    marginTop: any;
-                };
+                flexDirection: string;
+                alignItems: string;
+                marginTop: number;
             };
         };
     };

package/lib/esm/components/SCGroupHeader.js

@@ -3,19 +3,17 @@ const Component = {
         root: ({ theme }) => ({
             '& .SCGroupHeader-cover': {
                 position: 'relative',
-                height: 150,
+                height: 230,
                 minHeight: 150,
                 borderRadius: 0,
                 background: 'linear-gradient(180deg, rgba(177,177,177,1) 0%, rgba(255,255,255,1) 90%)',
                 boxShadow: 'unset',
                 [theme.breakpoints.up('md')]: {
                     borderRadius: theme.spacing(0, 0, 2.5, 2.5)
-                },
-                [theme.breakpoints.up('lg')]: {
-                    margin: theme.spacing(0, -5, 0, -5)
                 }
             },
             '& .SCGroupHeader-info': {
+                marginTop: theme.spacing(6.5),
                 display: 'flex',
                 flexDirection: 'column',
                 justifyContent: 'center',
@@ -44,7 +42,10 @@ const Component = {
                 },
                 '& .SCEditGroupButton-root': {
                     marginLeft: 'auto',
-                    marginTop: theme.spacing(2)
+                    marginTop: theme.spacing(-4.25)
+                },
+                '& .SCGroupSubscribeButton-root': {
+                    marginTop: theme.spacing(1)
                 }
             },
             '& .SCGroupHeader-avatar': {
@@ -69,7 +70,7 @@ const Component = {
                 display: 'flex'
             },
             '& .SCGroupHeader-name': {
-                marginBottom: theme.spacing(2),
+                marginBottom: theme.spacing(1),
                 fontWeight: theme.typography.fontWeightBold,
                 fontSize: '1.429rem',
                 textAlign: 'center'
@@ -83,10 +84,10 @@ const Component = {
         skeletonRoot: ({ theme }) => ({
             position: 'relative',
             '& .SCGroupHeader-cover': {
-                [theme.breakpoints.up('lg')]: {
-                    margin: theme.spacing(0, -5, 0, -5)
+                [theme.breakpoints.up('md')]: {
+                    borderRadius: theme.spacing(0, 0, 2.5, 2.5)
                 },
-                height: 150
+                height: 230
             },
             '& .SCGroupHeader-avatar': {
                 top: 150,
@@ -98,23 +99,12 @@ const Component = {
                     border: '#FFF solid 5px'
                 }
             },
-            '& .SCGroupHeader-section': {
+            '& .SCGroupHeader-info': {
                 display: 'flex',
                 justifyContent: 'center',
-                '& .SCGroupHeader-name': {
-                    marginTop: 50,
-                    textAlign: 'start',
-                    [`& .MuiSkeleton-root`]: {
-                        justifyContent: 'center'
-                    }
-                },
-                '& .SCGroupHeader-actions': {
-                    [theme.breakpoints.up('md')]: {
-                        margin: theme.spacing(1, 2, 2, 2)
-                    },
-                    height: 'fit-content',
-                    marginTop: theme.spacing(1)
-                }
+                flexDirection: 'column',
+                alignItems: 'center',
+                marginTop: 60
             }
         })
     }

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

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

package/lib/esm/components/SCGroupInvitedWidget.js

@@ -0,0 +1,8 @@
+const Component = {
+    styleOverrides: {
+        root: ({ theme }) => ({}),
+        skeletonRoot: ({ theme }) => ({}),
+        dialogRoot: ({ theme }) => ({})
+    }
+};
+export default Component;

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

@@ -0,0 +1,19 @@
+declare const Component: {
+    styleOverrides: {
+        root: ({ theme }: any) => {};
+        menuRoot: ({ theme }: any) => {
+            '& .SCGroupSettingsIconButton-paper': {
+                maxWidth: number;
+                padding: any;
+            };
+        };
+        drawerRoot: ({ theme }: any) => {
+            '& .MuiList-root': {
+                '& a': {
+                    color: string;
+                };
+            };
+        };
+    };
+};
+export default Component;

package/lib/esm/components/SCGroupSettingsIconButton.js

@@ -0,0 +1,19 @@
+const Component = {
+    styleOverrides: {
+        root: ({ theme }) => ({}),
+        menuRoot: ({ theme }) => ({
+            '& .SCGroupSettingsIconButton-paper': {
+                maxWidth: 400,
+                padding: theme.spacing(1)
+            }
+        }),
+        drawerRoot: ({ theme }) => ({
+            '& .MuiList-root': {
+                '& a': {
+                    color: 'inherit'
+                }
+            }
+        })
+    }
+};
+export default Component;

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

@@ -5,6 +5,9 @@ declare const Component: {
             '& .SCCategoryTemplate-feed': {
                 marginTop: any;
             };
+            '& .SCGroupInfoWidget-root': {
+                marginTop: any;
+            };
         };
         skeletonRoot: ({ theme }: any) => {
             [x: number]: {

package/lib/esm/components/SCGroupTemplate.js

@@ -4,6 +4,9 @@ const Component = {
             marginTop: 0,
             '& .SCCategoryTemplate-feed': {
                 marginTop: theme.spacing(2)
+            },
+            '& .SCGroupInfoWidget-root': {
+                marginTop: theme.spacing(2)
             }
         }),
         skeletonRoot: ({ theme }) => ({

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

@@ -1,10 +1,19 @@
 declare const Component: {
     styleOverrides: {
         root: ({ theme }: any) => {
+            '& .MuiGrid-container': {
+                justifyContent: string;
+            };
+            '& .SCGroups-filters': {
+                marginTop: any;
+                marginBottom: any;
+            };
             '& .SCGroups-groups': {
                 marginTop: any;
                 '& .SCGroups-item': {
-                    padding: any;
+                    [x: number]: {
+                        padding: any;
+                    };
                     width: string;
                     '& > div': {
                         cursor: string;
@@ -12,6 +21,32 @@ declare const Component: {
                     };
                 };
             };
+            '& .SCGroups-no-results': {
+                marginTop: any;
+                display: string;
+                flexDirection: string;
+                justifyContent: string;
+                alignItems: string;
+                '& h4': {
+                    fontWeight: any;
+                    fontSize: any;
+                };
+                '& .MuiTypography-body1': {
+                    fontWeight: any;
+                    fontSize: any;
+                };
+            };
+            '& .SCGroups-end-message': {
+                display: string;
+                alignItems: string;
+                justifyContent: string;
+                '& .MuiButtonBase-root': {
+                    paddingLeft: any;
+                    '&.Mui-selected, &:hover': {
+                        backgroundColor: string;
+                    };
+                };
+            };
         };
         skeletonRoot: ({ theme }: any) => {
             '& .SCGroups-groups': {

package/lib/esm/components/SCGroups.js

@@ -1,16 +1,51 @@
 const Component = {
     styleOverrides: {
         root: ({ theme }) => ({
+            '& .MuiGrid-container': {
+                justifyContent: 'center'
+            },
+            '& .SCGroups-filters': {
+                marginTop: theme.spacing(),
+                marginBottom: theme.spacing(2)
+            },
             '& .SCGroups-groups': {
-                marginTop: theme.spacing(3),
+                marginTop: theme.spacing(2),
                 '& .SCGroups-item': {
-                    padding: theme.spacing(2),
+                    [theme.breakpoints.up('md')]: {
+                        padding: theme.spacing(2)
+                    },
                     width: 'auto',
                     '& > div': {
                         cursor: 'default',
                         padding: theme.spacing(1)
                     }
                 }
+            },
+            '& .SCGroups-no-results': {
+                marginTop: theme.spacing(3),
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'center',
+                alignItems: 'center',
+                '& h4': {
+                    fontWeight: theme.typography.fontWeightBold,
+                    fontSize: theme.typography.h4.fontSize
+                },
+                '& .MuiTypography-body1': {
+                    fontWeight: theme.typography.fontWeightMedium,
+                    fontSize: theme.typography.body1.fontSize
+                }
+            },
+            '& .SCGroups-end-message': {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                '& .MuiButtonBase-root': {
+                    paddingLeft: theme.spacing(1),
+                    '&.Mui-selected, &:hover': {
+                        backgroundColor: 'transparent'
+                    }
+                }
             }
         }),
         skeletonRoot: ({ theme }) => ({

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

@@ -17,7 +17,7 @@ declare const Component: {
                 marginRight: any;
                 '& img': {
                     verticalAlign: string;
-                    maxHeight: any;
+                    maxHeight: number;
                 };
             };
             '& .SCNavigationToolbar-navigation': {

package/lib/esm/components/SCNavigationToolbar.js

@@ -6,7 +6,7 @@ const Component = {
                 marginRight: theme.spacing(2),
                 '& img': {
                     verticalAlign: 'middle',
-                    maxHeight: theme.mixins.toolbar.minHeight
+                    maxHeight: theme.mixins.toolbar.minHeight - 10
                 }
             },
             '& .SCNavigationToolbar-navigation': {

package/lib/esm/components/SCNavigationToolbarMobile.js

@@ -3,7 +3,7 @@ const Component = {
         root: ({ theme }) => ({
             padding: theme.spacing(0, 1, 0, 1),
             '& .SCNavigationToolbarMobile-logo': {
-                margin: theme.spacing(0.5, 2, 0.5, 2),
+                margin: theme.spacing(0.5, 2, 0.5, 0.5),
                 flexGrow: 1,
                 '& img': {
                     verticalAlign: 'middle',

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

@@ -278,6 +278,7 @@ declare const Component: {
                 maxWidth: string;
             };
         };
+        groupRoot: ({ theme }: any) => {};
         undeletedForRoot: ({ theme }: any) => {
             '& .SCNotification-undeleted-icon': {
                 backgroundColor: "#f44336";

package/lib/esm/components/SCNotification.js

@@ -280,6 +280,7 @@ const Component = {
                 maxWidth: '40%'
             }
         }),
+        groupRoot: ({ theme }) => ({}),
         undeletedForRoot: ({ theme }) => ({
             '& .SCNotification-undeleted-icon': {
                 backgroundColor: red[500],

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

@@ -3,6 +3,7 @@ declare const Component: {
         root: ({ theme }: any) => {
             height: string;
             width: string;
+            borderRadius: number;
             '& .MuiCardContent-root': {
                 display: string;
                 flexDirection: string;

package/lib/esm/components/SCPrivateMessageSnippets.js

@@ -3,6 +3,7 @@ const Component = {
         root: ({ theme }) => ({
             height: '100%',
             width: '100%',
+            borderRadius: 0,
             '& .MuiCardContent-root': {
                 display: 'flex',
                 flexDirection: 'column',

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

@@ -69,6 +69,17 @@ declare const Component: {
                         };
                     };
                 };
+                '& .SCPrivateMessageThread-item': {
+                    display: string;
+                    marginBottom: any;
+                    '& .SCPrivateMessageThread-avatar': {
+                        marginRight: any;
+                        '& img': {
+                            height: any;
+                            width: any;
+                        };
+                    };
+                };
             };
             '& .SCPrivateMessageThread-empty-message': {
                 height: string;

package/lib/esm/components/SCPrivateMessageThread.js

@@ -4,7 +4,7 @@ const Component = {
         root: ({ theme }) => ({
             height: '100%',
             width: '100%',
-            backgroundColor: alpha(theme.palette.common.white, theme.palette.action.selectedOpacity),
+            backgroundColor: alpha(theme.palette.common.white, 0.5),
             borderRadius: 0,
             '& .MuiCardContent-root': {
                 display: 'flex',
@@ -48,7 +48,7 @@ const Component = {
                                         position: 'absolute',
                                         border: `${theme.spacing(3)} solid transparent`,
                                         borderTop: `${theme.spacing(3)} solid ${theme.palette.common.white}`,
-                                        top: theme.spacing(1),
+                                        top: theme.spacing(0),
                                         left: theme.spacing(-2)
                                     }
                                 },
@@ -62,13 +62,24 @@ const Component = {
                                         position: 'absolute',
                                         border: `${theme.spacing(3)} solid transparent`,
                                         borderTop: `${theme.spacing(3)} solid ${theme.palette.grey[300]}`,
-                                        top: theme.spacing(1),
+                                        top: theme.spacing(0),
                                         right: theme.spacing(-2)
                                     }
                                 }
                             }
                         }
                     }
+                },
+                '& .SCPrivateMessageThread-item': {
+                    display: 'flex',
+                    marginBottom: theme.spacing(1),
+                    '& .SCPrivateMessageThread-avatar': {
+                        marginRight: theme.spacing(6),
+                        '& img': {
+                            height: theme.selfcommunity.group.avatar.sizeMedium,
+                            width: theme.selfcommunity.group.avatar.sizeMedium
+                        }
+                    }
                 }
             },
             '& .SCPrivateMessageThread-empty-message': {
@@ -84,7 +95,7 @@ const Component = {
                 height: theme.mixins.toolbar.minHeight,
                 alignItems: 'center',
                 justifyContent: 'center',
-                backgroundColor: alpha(theme.palette.secondary.main, theme.palette.action.activatedOpacity),
+                backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.activatedOpacity),
                 '& .SCPrivateMessageThread-new-message-header-content': {
                     display: 'flex',
                     alignItems: 'center',

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

@@ -1,6 +1,7 @@
 declare const Component: {
     styleOverrides: {
         root: ({ theme }: any) => {
+            flexDirection: string;
             borderRadius: any;
             padding: any;
             boxShadow: string;
@@ -19,6 +20,10 @@ declare const Component: {
                 right: any;
                 padding: any;
             };
+            '& .SCPrivateMessageThreadItem-username': {
+                marginRight: string;
+                marginBottom: any;
+            };
             '& .SCPrivateMessageThreadItem-text': {
                 display: string;
                 alignItems: string;