From a283d4310c11f03fe9ff889c6274798b70cf6a19 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Wed, 7 Oct 2020 23:51:45 +0300
Subject: feat: create ModalScreen component

---
 src/components/ModalScreen/ModalScreen.tsx | 39 ++++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 src/components/ModalScreen/ModalScreen.tsx

(limited to 'src/components/ModalScreen')

diff --git a/src/components/ModalScreen/ModalScreen.tsx b/src/components/ModalScreen/ModalScreen.tsx
new file mode 100644
index 0000000..6b7c52c
--- /dev/null
+++ b/src/components/ModalScreen/ModalScreen.tsx
@@ -0,0 +1,39 @@
+import React, { useCallback } from 'react';
+import { useHistory } from 'react-router-dom';
+import {
+  Dialog,
+  Toolbar,
+  Typography,
+  IconButton,
+  useMediaQuery,
+  useTheme
+} from '@material-ui/core';
+import CloseIcon from '@material-ui/icons/Close';
+
+interface PropTypes {
+  title: string;
+}
+
+const ModalScreen: React.FC<PropTypes> = ({ title, children }) => {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+  const history = useHistory();
+
+  const handleClose = useCallback(() => history.goBack(), [history]);
+
+  return (
+    <Dialog fullScreen={isMobile} fullWidth open>
+      <Toolbar color="primary">
+        <IconButton edge="start" onClick={handleClose}>
+          <CloseIcon />
+        </IconButton>
+        <Typography variant="h6">
+          { title }
+        </Typography>
+      </Toolbar>
+      { children }
+    </Dialog>
+  );
+};
+
+export default ModalScreen;
-- 
cgit v1.2.3


From 0397903b9046e062fc6adb367183e2169bd4b4b6 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Thu, 8 Oct 2020 12:58:45 +0300
Subject: feat: return UserStrip to PollCreation

---
 src/components/ModalScreen/ModalScreen.tsx | 46 +++++++++++++++++++++++-------
 1 file changed, 36 insertions(+), 10 deletions(-)

(limited to 'src/components/ModalScreen')

diff --git a/src/components/ModalScreen/ModalScreen.tsx b/src/components/ModalScreen/ModalScreen.tsx
index 6b7c52c..6ffc978 100644
--- a/src/components/ModalScreen/ModalScreen.tsx
+++ b/src/components/ModalScreen/ModalScreen.tsx
@@ -1,20 +1,36 @@
 import React, { useCallback } from 'react';
 import { useHistory } from 'react-router-dom';
 import {
+  AppBar,
   Dialog,
   Toolbar,
   Typography,
   IconButton,
+  Divider,
   useMediaQuery,
   useTheme
 } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 import CloseIcon from '@material-ui/icons/Close';
 
 interface PropTypes {
   title: string;
 }
 
+const useStyles = makeStyles(theme => ({
+  root: {
+    backgroundColor: theme.palette.background.default
+  },
+  content: {
+    padding: theme.spacing(3, 0, 0, 0)
+  },
+  toolbar: {
+    display: 'flex',
+  }
+}));
+
 const ModalScreen: React.FC<PropTypes> = ({ title, children }) => {
+  const classes = useStyles();
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
   const history = useHistory();
@@ -22,16 +38,26 @@ const ModalScreen: React.FC<PropTypes> = ({ title, children }) => {
   const handleClose = useCallback(() => history.goBack(), [history]);
 
   return (
-    <Dialog fullScreen={isMobile} fullWidth open>
-      <Toolbar color="primary">
-        <IconButton edge="start" onClick={handleClose}>
-          <CloseIcon />
-        </IconButton>
-        <Typography variant="h6">
-          { title }
-        </Typography>
-      </Toolbar>
-      { children }
+    <Dialog
+      open
+      PaperProps={{ className: classes.root }}
+      fullScreen={isMobile}
+      fullWidth
+    >
+      <AppBar position="static">
+        <Toolbar className={classes.toolbar}>
+          <IconButton edge="start" onClick={handleClose}>
+            <CloseIcon />
+          </IconButton>
+          <Typography variant="h6">
+            { title }
+          </Typography>
+        </Toolbar>
+      </AppBar>
+      <Divider />
+      <div className={classes.content}>
+        { children }
+      </div>
     </Dialog>
   );
 };
-- 
cgit v1.2.3


From 3ec8fb942f09e29020f6e466932ed0cca7db3d69 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Thu, 8 Oct 2020 13:03:49 +0300
Subject: feat: add slide transition to modal

---
 src/components/ModalScreen/ModalScreen.tsx | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

(limited to 'src/components/ModalScreen')

diff --git a/src/components/ModalScreen/ModalScreen.tsx b/src/components/ModalScreen/ModalScreen.tsx
index 6ffc978..c6044af 100644
--- a/src/components/ModalScreen/ModalScreen.tsx
+++ b/src/components/ModalScreen/ModalScreen.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useState, useCallback } from 'react';
 import { useHistory } from 'react-router-dom';
 import {
   AppBar,
@@ -7,11 +7,13 @@ import {
   Typography,
   IconButton,
   Divider,
+  Slide,
   useMediaQuery,
   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';
 
 interface PropTypes {
   title: string;
@@ -29,17 +31,28 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
+const Transition = React.forwardRef(function Transition(
+  props: TransitionProps & { children?: React.ReactElement<any, any> },
+  ref: React.Ref<unknown>,
+) {
+  return <Slide direction="up" ref={ref} {...props} />;
+});
+
 const ModalScreen: React.FC<PropTypes> = ({ title, children }) => {
+  const [isOpen, setIsOpen] = useState<boolean>(true);
   const classes = useStyles();
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
   const history = useHistory();
 
-  const handleClose = useCallback(() => history.goBack(), [history]);
+  const handleClose = useCallback(() => setIsOpen(false), [setIsOpen]);
+  const onExited = useCallback(() => history.goBack(), [history])
 
   return (
     <Dialog
-      open
+      open={isOpen}
+      onExited={onExited}
+      TransitionComponent={Transition}
       PaperProps={{ className: classes.root }}
       fullScreen={isMobile}
       fullWidth
-- 
cgit v1.2.3


From cc9c17a86cefd0460ccba7aeda7c0b57efe0ccb1 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Thu, 8 Oct 2020 13:28:24 +0300
Subject: feat: stick all headers to same logic

---
 src/components/ModalScreen/ModalScreen.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

(limited to 'src/components/ModalScreen')

diff --git a/src/components/ModalScreen/ModalScreen.tsx b/src/components/ModalScreen/ModalScreen.tsx
index c6044af..4a4b1be 100644
--- a/src/components/ModalScreen/ModalScreen.tsx
+++ b/src/components/ModalScreen/ModalScreen.tsx
@@ -28,6 +28,7 @@ const useStyles = makeStyles(theme => ({
   },
   toolbar: {
     display: 'flex',
+    justifyContent: 'space-between'
   }
 }));
 
@@ -35,7 +36,7 @@ const Transition = React.forwardRef(function Transition(
   props: TransitionProps & { children?: React.ReactElement<any, any> },
   ref: React.Ref<unknown>,
 ) {
-  return <Slide direction="up" ref={ref} {...props} />;
+  return <Slide direction="left" ref={ref} {...props} />;
 });
 
 const ModalScreen: React.FC<PropTypes> = ({ title, children }) => {
@@ -59,12 +60,15 @@ const ModalScreen: React.FC<PropTypes> = ({ title, children }) => {
     >
       <AppBar position="static">
         <Toolbar className={classes.toolbar}>
-          <IconButton edge="start" onClick={handleClose}>
+          <IconButton onClick={handleClose}>
             <CloseIcon />
           </IconButton>
           <Typography variant="h6">
             { title }
           </Typography>
+          <IconButton style={{ opacity: 0, pointerEvents: 'none' }}>
+            <CloseIcon />
+          </IconButton>
         </Toolbar>
       </AppBar>
       <Divider />
-- 
cgit v1.2.3


From 80a09a9ec176c7585dca9d81f6b3d690660ce633 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Thu, 8 Oct 2020 13:56:28 +0300
Subject: style: fix eslint errors

---
 src/components/ModalScreen/ModalScreen.tsx | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

(limited to 'src/components/ModalScreen')

diff --git a/src/components/ModalScreen/ModalScreen.tsx b/src/components/ModalScreen/ModalScreen.tsx
index 4a4b1be..81e5c5a 100644
--- a/src/components/ModalScreen/ModalScreen.tsx
+++ b/src/components/ModalScreen/ModalScreen.tsx
@@ -32,12 +32,10 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-const Transition = React.forwardRef(function Transition(
-  props: TransitionProps & { children?: React.ReactElement<any, any> },
-  ref: React.Ref<unknown>,
-) {
-  return <Slide direction="left" ref={ref} {...props} />;
-});
+const Transition = React.forwardRef((
+  props: TransitionProps & { children?: React.ReactElement },
+  ref: React.Ref<unknown>
+) => <Slide direction="left" ref={ref} {...props} />);
 
 const ModalScreen: React.FC<PropTypes> = ({ title, children }) => {
   const [isOpen, setIsOpen] = useState<boolean>(true);
@@ -47,7 +45,7 @@ const ModalScreen: React.FC<PropTypes> = ({ title, children }) => {
   const history = useHistory();
 
   const handleClose = useCallback(() => setIsOpen(false), [setIsOpen]);
-  const onExited = useCallback(() => history.goBack(), [history])
+  const onExited = useCallback(() => history.goBack(), [history]);
 
   return (
     <Dialog
-- 
cgit v1.2.3