@selfcommunity/react-theme-default 0.1.0-alpha.28 → 0.1.0-alpha.281

package/lib/esm/components/SCComposer.js

@@ -1,129 +1,351 @@
 import { alpha } from '@mui/system';
+import { hexToRgb } from '@mui/material';
 const Component = {
     styleOverrides: {
-        root: ({ theme }) => ({
-            '& .MuiDialog-paper': {
-                padding: theme.spacing(2, 3, 3)
-            },
-            '& .SCComposer-title': {
-                borderBottom: `1px solid ${theme.palette.grey[400]}`,
-                padding: theme.spacing(0, 0, 2, 0),
-                lineHeight: 1,
-                fontSize: '1.143rem',
-                '& .SCComposer-types .MuiInputBase-input': {
-                    fontWeight: theme.typography.fontWeightBold,
-                    fontSize: '1.286rem'
-                }
-            },
-            '& .SCComposer-content': {
-                padding: theme.spacing(3, 0),
-                minHeight: 300,
-                display: 'flex',
-                flexDirection: 'column',
-                justifyContent: 'space-between',
+        root: ({ theme }) => {
+            let mediaActionBackground = theme.palette.getContrastText(theme.palette.primary.main);
+            if (mediaActionBackground.startsWith('#')) {
+                mediaActionBackground = hexToRgb(mediaActionBackground).replace(')', ', .5)');
+            }
+            return {
+                '& .SCComposer-title': {
+                    borderBottom: `1px solid ${theme.palette.grey[400]}`,
+                    padding: theme.spacing(0, 0, 2, 0),
+                    lineHeight: 1,
+                    fontSize: '1.143rem',
+                    display: 'flex',
+                    flexDirection: 'row',
+                    flexWrap: 'nowrap',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    '& .SCComposer-types .MuiInputBase-input': {
+                        fontWeight: theme.typography.fontWeightBold,
+                        fontSize: '1.286rem',
+                        minHeight: 'auto'
+                    },
+                    '& > div': {
+                        flex: 1,
+                        textAlign: 'center'
+                    },
+                    '& > div:first-of-type': {
+                        textAlign: 'left'
+                    },
+                    '& > div:last-of-type': {
+                        textAlign: 'right',
+                        display: 'block'
+                    }
+                },
+                '& .SCComposer-types': {
+                    flexDirection: 'row',
+                    alignItems: 'center'
+                },
+                '& .SCComposer-avatar': {
+                    width: theme.selfcommunity.user.avatar.sizeMedium,
+                    height: theme.selfcommunity.user.avatar.sizeMedium,
+                    display: 'inline-block'
+                },
+                '& .SCComposer-content': {
+                    position: 'relative',
+                    overflowY: 'visible',
+                    padding: theme.spacing(3, 0),
+                    minHeight: 300,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    justifyContent: 'space-between',
+                    '& .SCComposer-editor': {
+                        flexGrow: 1,
+                        padding: 0,
+                        fontSize: '1rem',
+                        '& .SCEditor-placeholder': {
+                            top: 0,
+                            left: 0
+                        },
+                        '& .SCEditor-actions': {
+                            bottom: theme.spacing(4),
+                            padding: theme.spacing(3, 0, 0, 0),
+                            '& > p.MuiTypography-alignLeft > .MuiIconButton-root': {
+                                marginLeft: theme.spacing(0.3),
+                                marginRight: theme.spacing(0.3),
+                                '&:first-of-type': {
+                                    marginLeft: 0
+                                },
+                                '&:last-child': {
+                                    marginRight: 0
+                                }
+                            },
+                            '& > p.MuiTypography-alignRight > .MuiIconButton-root': {
+                                marginRight: theme.spacing(1.5)
+                            },
+                            '& .MuiIconButton-sizeMedium': {
+                                fontSize: '1.429rem'
+                            }
+                        },
+                        '&.SCEditor-toolbar': {
+                            '& .SCEditor-placeholder': {
+                                top: theme.spacing(6),
+                                left: 0
+                            },
+                            '& .SCEditor-actions': {
+                                bottom: theme.spacing(2)
+                            }
+                        }
+                    },
+                    '& .SCComposer-medias, & .SCComposer-audience, & .SCComposer-block': {
+                        margin: theme.spacing(1, 0),
+                        padding: 0
+                    },
+                    '& .SCComposer-medias': {
+                        '& .SCComposer-mediasActions': {
+                            position: 'relative',
+                            borderTop: `1px solid ${theme.palette.grey[400]}`,
+                            backgroundColor: theme.palette.background.paper,
+                            padding: theme.spacing(1, 0),
+                            '& .SCComposer-mediasActionsTitle': {
+                                fontSize: '1.143rem'
+                            }
+                        }
+                    }
+                },
+                '& .SCComposer-mediaContent, & .SCComposer-audienceContent, & .SCComposer-locationContent': {
+                    minHeight: 300
+                },
+                '& .SCComposer-audienceContent': {
+                    maxWidth: 400,
+                    margin: theme.spacing(0, 'auto'),
+                    '& .MuiTabs-root': {
+                        margin: theme.spacing(0),
+                        '& .MuiTabs-flexContainer': {
+                            justifyContent: 'center',
+                            '& .MuiTab-root': {
+                                minHeight: theme.spacing(6),
+                                flexDirection: 'row',
+                                '& .MuiTab-iconWrapper': {
+                                    marginRight: theme.spacing(1),
+                                    fontSize: '1.429rem'
+                                }
+                            }
+                        }
+                    },
+                    '& .SCComposer-block': {
+                        marginBottom: theme.spacing(4)
+                    }
+                },
+                '& .SCComposer-block': {
+                    padding: theme.spacing(1)
+                },
                 '& .SCComposer-editor': {
-                    padding: 0,
-                    fontSize: '1rem',
-                    minHeight: 'auto',
+                    minHeight: 200,
                     '& .SCEditor-placeholder': {
-                        top: 0,
-                        left: 0
-                    },
-                    '& .SCEditor-actions': {
-                        bottom: theme.spacing(4)
+                        top: theme.spacing(1),
+                        left: theme.spacing(1)
                     }
                 },
-                '& .SCComposer-medias, & .SCComposer-audience, & .SCComposer-block': {
-                    margin: theme.spacing(1, 0),
-                    padding: 0
+                '& .SCComposer-divider': {
+                    borderTop: '1px solid #D1D1D1'
                 },
                 '& .SCComposer-medias': {
-                    '& .SCComposer-mediasActions': {
-                        position: 'relative',
-                        borderTop: `1px solid ${theme.palette.grey[400]}`,
-                        backgroundColor: theme.palette.background.paper,
-                        padding: theme.spacing(1, 0),
-                        '& .SCComposer-mediasActionsTitle': {
-                            fontSize: '1.143rem'
-                        }
+                    margin: '0 23px'
+                },
+                '& .SCComposer-location, & .SCComposer-audience': {
+                    padding: theme.spacing(2),
+                    paddingBottom: 0
+                },
+                '& .SCComposer-mediasActions': {
+                    position: 'absolute',
+                    left: 0,
+                    right: 0,
+                    background: mediaActionBackground,
+                    padding: theme.spacing(),
+                    zIndex: 1,
+                    display: 'flex',
+                    flexWrap: 'nowrap',
+                    justifyContent: 'space-between',
+                    '& .SCComposer-mediasActionsActions': {
+                        textAlign: 'right'
                     }
-                }
-            },
-            '& .SCComposer-mediaContent': {
-                '& .SCMediaActionImage-root': {
-                    padding: 0,
-                    '& .SCMediaActionImage-upload': {
-                        padding: theme.spacing(2),
-                        backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.activatedOpacity),
-                        borderRadius: theme.shape.borderRadius,
-                        color: theme.palette.primary.main,
-                        '&.SCMediaActionImage-dragOver': {
-                            backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity)
-                        },
-                        '& .SCMediaActionImage-uploadBtn': {
-                            border: '0 none'
+                },
+                '& .SCComposer-sortableMedia': {
+                    position: 'relative'
+                },
+                '& .SCComposer-sortableMediaCover': {
+                    backgroundSize: 'cover !important',
+                    backgroundPosition: 'center !important',
+                    backgroundRepeat: 'no-repeat !important',
+                    border: '2px solid white',
+                    borderRadius: 6,
+                    height: 300
+                },
+                '& .SCComposer-links': {
+                    padding: theme.spacing(2)
+                },
+                '& .SCComposer-actions': {
+                    margin: 0,
+                    borderTop: '1px solid #D1D1D1',
+                    padding: theme.spacing(1),
+                    '& .SCComposer-media-actions': {},
+                    '& .SCComposer-filter-actions': {
+                        flexGrow: 1,
+                        textAlign: 'right'
+                    },
+                    display: 'flex',
+                    flexDirection: 'row',
+                    flexWrap: 'nowrap',
+                    justifyContent: 'space-between',
+                    alignItems: 'center'
+                },
+                '& .SCComposer-actionInput': {
+                    display: 'none !important'
+                },
+                '& .SCComposer-badgeError .MuiBadge-badge': {
+                    padding: 0
+                },
+                '& .MuiDialog-paper': {
+                    padding: theme.spacing(2, 3, 3)
+                },
+                '& .SCComposer-mediaContent': {
+                    '& .SCMediaActionImage-root': {
+                        padding: 0,
+                        '& .SCMediaActionImage-upload': {
+                            padding: theme.spacing(2),
+                            backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.activatedOpacity),
+                            borderRadius: theme.shape.borderRadius,
+                            color: theme.palette.primary.main,
+                            '&.SCMediaActionImage-dragOver': {
+                                backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity)
+                            },
+                            '& .SCMediaActionImage-uploadBtn': {
+                                border: '0 none'
+                            }
+                        }
+                    },
+                    '& .SCMediaActionDocument-root': {
+                        padding: 0,
+                        '& .SCMediaActionDocument-upload': {
+                            padding: theme.spacing(2),
+                            backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.activatedOpacity),
+                            borderRadius: theme.shape.borderRadius,
+                            color: theme.palette.primary.main,
+                            '&.SCMediaActionDocument-dragOver': {
+                                backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity)
+                            },
+                            '& .SCMediaActionDocument-uploadBtn': {
+                                border: '0 none'
+                            }
                         }
                     }
                 },
-                '& .SCMediaActionDocument-root': {
-                    padding: 0,
-                    '& .SCMediaActionDocument-upload': {
-                        padding: theme.spacing(2),
-                        backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.activatedOpacity),
-                        borderRadius: theme.shape.borderRadius,
-                        color: theme.palette.primary.main,
-                        '&.SCMediaActionDocument-dragOver': {
-                            backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity)
+                '& .SCComposer-locationContent': {
+                    padding: theme.spacing(3, 0),
+                    minHeight: 300
+                },
+                '& .MuiDialog-container': {
+                    '& .MuiDialog-paper': {
+                        boxShadow: theme.shadows[12],
+                        [theme.breakpoints.up('md')]: {
+                            borderRadius: theme.shape.borderRadius
                         },
-                        '& .SCMediaActionDocument-uploadBtn': {
-                            border: '0 none'
+                        '&.MuiDialog-paperFullScreen': {
+                            height: 'auto',
+                            minHeight: '100%'
                         }
                     }
-                }
-            },
-            '& .SCComposer-locationContent': {
-                padding: theme.spacing(3, 0),
-                minHeight: 300
-            },
-            '& .SCComposer-actions': {
-                borderTop: `1px solid ${theme.palette.grey[300]}`,
-                padding: theme.spacing(3, 0, 0, 0),
-                '& > p.MuiTypography-alignLeft > .MuiIconButton-root': {
-                    marginLeft: theme.spacing(0.3),
-                    marginRight: theme.spacing(0.3),
-                    '&:first-child': {
-                        marginLeft: 0
-                    },
-                    '&:last-child': {
-                        marginRight: 0
+                },
+                '& .SCCategoryAutocomplete-root': {
+                    minWidth: 120,
+                    '& .MuiFormControl-root': {
+                        margin: 0
                     }
                 },
-                '& > p.MuiTypography-alignRight > .MuiIconButton-root': {
-                    marginRight: theme.spacing(1.5)
+                '& .MuiDialog-paperFullScreen': {
+                    // Mobile view
+                    position: 'relative',
+                    '& .SCComposer-title': {
+                        transition: 'opacity 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750)',
+                        position: 'fixed',
+                        top: 0,
+                        left: 0,
+                        right: 0,
+                        padding: theme.spacing(2, 3),
+                        backgroundColor: theme.palette.background.paper,
+                        zIndex: 1000
+                    },
+                    '& .SCComposer-content': {
+                        transition: 'padding 100ms cubic-bezier(0.250, 0.250, 0.750, 0.750)',
+                        padding: theme.spacing(9, 0)
+                    },
+                    '& .SCComposer-actions': {
+                        position: 'fixed',
+                        bottom: 0,
+                        left: 0,
+                        right: 0,
+                        padding: theme.spacing(2, 2),
+                        zIndex: 1000,
+                        backgroundColor: theme.palette.background.paper,
+                        '& .SCComposer-media-actions': {
+                            borderRight: `1px solid ${theme.palette.grey[400]}`,
+                            paddingRight: theme.spacing(1)
+                        },
+                        '& .SCComposer-filter-actions': {
+                            textAlign: 'right'
+                        }
+                    }
                 },
-                '& .MuiIconButton-sizeMedium': {
-                    fontSize: '1.429rem'
-                }
-            },
-            '& .SCComposer-block': {
-                padding: theme.spacing(1)
-            },
-            '& .SCComposer-editor': {
-                '& .SCEditor-placeholder': {
-                    top: theme.spacing(1),
-                    left: theme.spacing(1)
-                }
-            },
-            '& .MuiDialog-container': {
-                '& .MuiDialog-paper': {
-                    boxShadow: theme.shadows[12],
-                    [theme.breakpoints.up('md')]: {
-                        borderRadius: theme.shape.borderRadius
+                '&.SCComposer-writing': {
+                    '& .MuiDialog-paperFullScreen': {
+                        // Expanded view for editor
+                        '& .SCComposer-title': {
+                            opacity: 0
+                        },
+                        '& .SCComposer-title-dense': {
+                            position: 'fixed',
+                            top: theme.spacing(2),
+                            right: theme.spacing(2),
+                            zIndex: 1002,
+                            borderRadius: theme.shape.borderRadius * 0.2,
+                            borderColor: alpha(theme.palette.primary.main, theme.palette.action.activatedOpacity),
+                            borderWidth: 1,
+                            borderStyle: 'solid',
+                            display: 'flex',
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            justifyContent: 'left',
+                            '& .MuiButtonBase-root': {
+                                margin: theme.spacing(0.5),
+                                padding: theme.spacing(1),
+                                fontSize: '1rem',
+                                border: 0,
+                                borderRadius: theme.shape.borderRadius * 0.2
+                            }
+                        },
+                        '& .SCComposer-content': {
+                            paddingTop: 0,
+                            '& .SCComposer-block': {
+                                height: 0,
+                                overflow: 'hidden',
+                                margin: 0
+                            },
+                            '& .SCEditor-root': {
+                                marginTop: theme.spacing(6),
+                                '& .SCEditorToolbarPlugin-root': {
+                                    position: 'fixed',
+                                    top: theme.spacing(2),
+                                    left: theme.spacing(3),
+                                    right: theme.spacing(12),
+                                    zIndex: 1001
+                                },
+                                '& .SCEditor-placeholder': {
+                                    top: 0
+                                }
+                            }
+                        },
+                        '& .SCComposer-actions': {}
                     }
+                },
+                '&.SCComposer-ios .SCComposer-actions': {
+                    marginBottom: '15px'
                 }
-            }
-        })
+            };
+        }
     }
 };
 export default Component;
-//# sourceMappingURL=SCComposer.js.map

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

@@ -6,6 +6,9 @@ declare const Component: {
             };
             '& .SCComposerPoll-choices': {
                 marginBottom: number;
+                '& .MuiTextField-root .MuiInputAdornment-positionStart': {
+                    cursor: string;
+                };
             };
             '& .SCComposerPoll-choice-new': {
                 color: any;
@@ -21,4 +24,3 @@ declare const Component: {
     };
 };
 export default Component;
-//# sourceMappingURL=SCComposerPoll.d.ts.map

package/lib/esm/components/SCComposerPoll.js

@@ -5,7 +5,10 @@ const Component = {
                 marginBottom: theme.spacing(4)
             },
             '& .SCComposerPoll-choices': {
-                marginBottom: 0
+                marginBottom: 0,
+                '& .MuiTextField-root .MuiInputAdornment-positionStart': {
+                    cursor: 'grab'
+                }
             },
             '& .SCComposerPoll-choice-new': {
                 color: theme.palette.secondary.main,
@@ -21,4 +24,3 @@ const Component = {
     }
 };
 export default Component;
-//# sourceMappingURL=SCComposerPoll.js.map

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

@@ -0,0 +1,14 @@
+declare const Component: {
+    styleOverrides: {
+        root: () => {
+            '& .SCContributionActionsMenu-visibility-icons': {
+                color: string;
+                '& > span: nth-of-type(2)': {
+                    position: string;
+                    top: number;
+                };
+            };
+        };
+    };
+};
+export default Component;

package/lib/esm/components/SCContributionActionsMenu.js

@@ -0,0 +1,14 @@
+const Component = {
+    styleOverrides: {
+        root: () => ({
+            '& .SCContributionActionsMenu-visibility-icons': {
+                color: 'red',
+                '& > span: nth-of-type(2)': {
+                    position: 'relative',
+                    top: 1
+                }
+            }
+        })
+    }
+};
+export default Component;

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

@@ -1,6 +1,27 @@
 declare const Component: {
     styleOverrides: {
         root: ({ theme }: any) => {
+            '& .SCContributionNotification-username': {
+                fontWeight: any;
+                '&:hover': {
+                    textDecoration: string;
+                };
+            };
+            '& .SCContributionNotification-vote-button': {
+                color: string;
+                padding: any;
+                fontSize: string;
+                minWidth: number;
+                borderRadius: string;
+            };
+            '& .SCContributionNotification-contribution-text': {
+                color: any;
+                textOverflow: string;
+                overflow: string;
+                '&:hover': {
+                    textDecoration: string;
+                };
+            };
             '& .SCNotificationItem-root .SCNotificationItem-header .SCNotificationItem-secondary': {
                 marginTop: any;
                 '& .SCDateTimeAgo-root': {
@@ -11,4 +32,3 @@ declare const Component: {
     };
 };
 export default Component;
-//# sourceMappingURL=SCContributionNotification.d.ts.map

package/lib/esm/components/SCContributionNotification.js

@@ -1,6 +1,27 @@
 const Component = {
     styleOverrides: {
         root: ({ theme }) => ({
+            '& .SCContributionNotification-username': {
+                fontWeight: theme.typography.fontWeightBold,
+                '&:hover': {
+                    textDecoration: 'underline'
+                }
+            },
+            '& .SCContributionNotification-vote-button': {
+                color: 'inherit',
+                padding: theme.spacing(1),
+                fontSize: '1.143rem',
+                minWidth: 0,
+                borderRadius: '50%'
+            },
+            '& .SCContributionNotification-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': {
@@ -11,4 +32,3 @@ const Component = {
     }
 };
 export default Component;
-//# sourceMappingURL=SCContributionNotification.js.map

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

@@ -11,4 +11,3 @@ declare const Component: {
     };
 };
 export default Component;
-//# sourceMappingURL=SCContributorsFeedObject.d.ts.map

package/lib/esm/components/SCContributorsFeedObject.js

@@ -11,4 +11,3 @@ const Component = {
     }
 };
 export default Component;
-//# sourceMappingURL=SCContributorsFeedObject.js.map

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

@@ -1,15 +1,31 @@
 declare const Component: {
     styleOverrides: {
         root: ({ theme }: any) => {
+            [x: number]: {
+                minWidth: string;
+            };
+            width: number;
             '& .SCCustomSnackMessage-card': {
                 width: string;
                 '& .SCCustomSnackMessage-content': {
                     position: string;
                     padding: any;
+                    '& .SCCustomSnackMessage-close': {
+                        position: string;
+                        right: number;
+                        top: number;
+                        zIndex: number;
+                    };
+                    a: {
+                        color: any;
+                        textDecoration: string;
+                        '&:hover': {
+                            textDecoration: string;
+                        };
+                    };
                 };
             };
         };
     };
 };
 export default Component;
-//# sourceMappingURL=SCCustomSnackMessage.d.ts.map