From c73a0d7643ac335dbcdc64b90467ba7d3a45c4f4 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Thu, 8 Oct 2020 15:10:15 +0300 Subject: feat: add dashed borders to ImageInput --- src/components/AttachLink/AttachLink.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/components') diff --git a/src/components/AttachLink/AttachLink.tsx b/src/components/AttachLink/AttachLink.tsx index 742ba65..7c32635 100644 --- a/src/components/AttachLink/AttachLink.tsx +++ b/src/components/AttachLink/AttachLink.tsx @@ -21,7 +21,7 @@ const AttachLink: React.FC = ({ callback, children }) => { color="primary" startIcon={} > - Attach a link + Link ); -- cgit v1.2.3 From 3cbf292b6d4976589428d0841cd1201057d104d4 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Thu, 8 Oct 2020 15:51:19 +0300 Subject: feat: use icon in header instead of submit button --- src/components/ModalScreen/ModalScreen.tsx | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) (limited to 'src/components') diff --git a/src/components/ModalScreen/ModalScreen.tsx b/src/components/ModalScreen/ModalScreen.tsx index 81e5c5a..110bd8b 100644 --- a/src/components/ModalScreen/ModalScreen.tsx +++ b/src/components/ModalScreen/ModalScreen.tsx @@ -12,11 +12,12 @@ import { useTheme } from '@material-ui/core'; import { makeStyles } from '@material-ui/core/styles'; -import CloseIcon from '@material-ui/icons/Close'; import { TransitionProps } from '@material-ui/core/transitions'; +import CloseIcon from '@material-ui/icons/Close'; interface PropTypes { title: string; + rightIcon?: JSX.Element; } const useStyles = makeStyles(theme => ({ @@ -37,7 +38,7 @@ const Transition = React.forwardRef(( ref: React.Ref ) => ); -const ModalScreen: React.FC = ({ title, children }) => { +const ModalScreen: React.FC = ({ title, rightIcon, children }) => { const [isOpen, setIsOpen] = useState(true); const classes = useStyles(); const theme = useTheme(); @@ -64,9 +65,11 @@ const ModalScreen: React.FC = ({ title, children }) => { { title } - - - + { rightIcon || ( + + + + )} -- cgit v1.2.3 From 3ea7d6bd0bfd6aefd939bf84f5dc1696cf68231e Mon Sep 17 00:00:00 2001 From: eug-vs Date: Thu, 8 Oct 2020 19:31:20 +0300 Subject: feat: tweak modal paddings on desktop --- src/components/ModalScreen/ModalScreen.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'src/components') diff --git a/src/components/ModalScreen/ModalScreen.tsx b/src/components/ModalScreen/ModalScreen.tsx index 110bd8b..7090980 100644 --- a/src/components/ModalScreen/ModalScreen.tsx +++ b/src/components/ModalScreen/ModalScreen.tsx @@ -25,7 +25,7 @@ const useStyles = makeStyles(theme => ({ backgroundColor: theme.palette.background.default }, content: { - padding: theme.spacing(3, 0, 0, 0) + padding: theme.spacing(6, 0) }, toolbar: { display: 'flex', @@ -55,6 +55,7 @@ const ModalScreen: React.FC = ({ title, rightIcon, children }) => { TransitionComponent={Transition} PaperProps={{ className: classes.root }} fullScreen={isMobile} + maxWidth="md" fullWidth > -- cgit v1.2.3 From 40cc9f63feb15e1bb14c5360b4437d3379df96e2 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Thu, 8 Oct 2020 20:21:10 +0300 Subject: feat: add noMargin prop to Message --- src/components/Message/Message.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) (limited to 'src/components') diff --git a/src/components/Message/Message.tsx b/src/components/Message/Message.tsx index f568552..e5191ed 100644 --- a/src/components/Message/Message.tsx +++ b/src/components/Message/Message.tsx @@ -6,6 +6,7 @@ import { makeStyles } from '@material-ui/core/styles'; interface PropTypes { tagline?: string; message?: string; + noMargin?: boolean; } const useStyles = makeStyles(theme => ({ @@ -13,7 +14,9 @@ const useStyles = makeStyles(theme => ({ display: 'flex', flexDirection: 'column', justifyContent: 'center', - alignItems: 'center', + alignItems: 'center' + }, + margin: { marginTop: theme.spacing(6) }, content: { @@ -21,11 +24,11 @@ const useStyles = makeStyles(theme => ({ } })); -const Message: React.FC = React.memo(({ tagline, message, children }) => { +const Message: React.FC = React.memo(({ tagline, message, noMargin, children }) => { const classes = useStyles(); return ( -
+
{children}
-- cgit v1.2.3 From fd7e4817cd0e0160e85ad98ad81f406c66a94800 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Thu, 8 Oct 2020 20:21:35 +0300 Subject: feat: correctly wire modal logic --- src/components/ModalScreen/ModalScreen.tsx | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) (limited to 'src/components') diff --git a/src/components/ModalScreen/ModalScreen.tsx b/src/components/ModalScreen/ModalScreen.tsx index 7090980..6c514cd 100644 --- a/src/components/ModalScreen/ModalScreen.tsx +++ b/src/components/ModalScreen/ModalScreen.tsx @@ -17,7 +17,9 @@ import CloseIcon from '@material-ui/icons/Close'; interface PropTypes { title: string; - rightIcon?: JSX.Element; + actionIcon?: JSX.Element; + handleAction?: () => void; + isActionDisabled?: boolean; } const useStyles = makeStyles(theme => ({ @@ -38,7 +40,7 @@ const Transition = React.forwardRef(( ref: React.Ref ) => ); -const ModalScreen: React.FC = ({ title, rightIcon, children }) => { +const ModalScreen: React.FC = ({ title, actionIcon, handleAction, isActionDisabled, children }) => { const [isOpen, setIsOpen] = useState(true); const classes = useStyles(); const theme = useTheme(); @@ -48,6 +50,11 @@ const ModalScreen: React.FC = ({ title, rightIcon, children }) => { const handleClose = useCallback(() => setIsOpen(false), [setIsOpen]); const onExited = useCallback(() => history.goBack(), [history]); + const handleClickAction = useCallback(async () => { + if (handleAction) await handleAction(); + return handleClose(); + }, [handleAction, handleClose]); + return ( = ({ title, rightIcon, children }) => { { title } - { rightIcon || ( - - - - )} + + { actionIcon } + -- cgit v1.2.3 From 2c093ce738cb1281db04a8a3f2b6a35b3aa9b354 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Thu, 8 Oct 2020 20:24:46 +0300 Subject: fix: close modal on clickaway --- src/components/ModalScreen/ModalScreen.tsx | 1 + 1 file changed, 1 insertion(+) (limited to 'src/components') diff --git a/src/components/ModalScreen/ModalScreen.tsx b/src/components/ModalScreen/ModalScreen.tsx index 6c514cd..c6f0565 100644 --- a/src/components/ModalScreen/ModalScreen.tsx +++ b/src/components/ModalScreen/ModalScreen.tsx @@ -58,6 +58,7 @@ const ModalScreen: React.FC = ({ title, actionIcon, handleAction, isA return (