feat: make PollCreation input same as description

2 files changed, 17 insertions, 19 deletions

diff --git a/src/components/PollCard/PollCard.tsx b/src/components/PollCard/PollCard.tsx
index eb025f2..6886534 100644
--- a/src/components/PollCard/PollCard.tsx
+++ b/src/components/PollCard/PollCard.tsx
@@ -44,7 +44,7 @@ const useStyles = makeStyles(theme => ({
     transitionDuration: '0.5s'
   },
   description: {
-    padding: theme.spacing(0.5, 2)
+    padding: theme.spacing(1, 2)
   }
 }));
 
@@ -97,7 +97,7 @@ const PollCard: React.FC<PropTypes> = React.memo(({ poll, setPoll }) => {
     <Card elevation={3}>
       <UserStrip user={author} info={date} />
       {poll.description && (
-        <Typography gutterBottom className={classes.description}>
+        <Typography className={classes.description}>
           {poll.description}
         </Typography>
       )}
diff --git a/src/containers/PollCreation/PollCreation.tsx b/src/containers/PollCreation/PollCreation.tsx
index 2fef64f..33d95bb 100644
--- a/src/containers/PollCreation/PollCreation.tsx
+++ b/src/containers/PollCreation/PollCreation.tsx
@@ -1,7 +1,7 @@
 import React, { ChangeEvent, useState } from 'react';
 import Bluebird from 'bluebird';
 import { makeStyles } from '@material-ui/core/styles';
-import { Card, Container, LinearProgress, Divider, TextField } from '@material-ui/core';
+import { Card, Container, LinearProgress, InputBase, Typography } from '@material-ui/core';
 import SendIcon from '@material-ui/icons/Send';
 import { useSnackbar } from 'notistack';
 
@@ -24,8 +24,8 @@ const useStyles = makeStyles(theme => ({
     width: '100%',
     height: 100
   },
-  descriptionText: {
-    padding: 10
+  description: {
+    padding: theme.spacing(1, 2)
   }
 }));
 
@@ -77,28 +77,26 @@ const PollCreation: React.FC = () => {
       title="Create a poll"
       actionIcon={<SendIcon />}
       handleAction={handleSubmit}
-      isActionDisabled={!(left && right) || leftProgress > 0 || rightProgress > 0}
+      isActionDisabled={!(left && right) || leftProgress + rightProgress > 0}
     >
       <Container maxWidth="sm" disableGutters>
         <Card elevation={3}>
-          {user && <UserStrip user={user} info="" />}
-          <Divider />
-          <TextField
-            multiline
-            rows={2}
-            fullWidth
-            placeholder="Add a description"
-            onChange={handleDescriptionChange}
-            InputProps={{
-              className: classes.descriptionText,
-            }}
-          />
+          {user && <UserStrip user={user} />}
+          <Typography>
+            <InputBase
+              multiline
+              fullWidth
+              placeholder="Add description"
+              onChange={handleDescriptionChange}
+              className={classes.description}
+            />
+          </Typography>
           <div className={classes.images}>
             <ImageInput callback={setLeft} progress={leftProgress} />
             <ImageInput callback={setRight} progress={rightProgress} />
           </div>
         </Card>
-        {(leftProgress > 0 || rightProgress > 0) && (
+        {(leftProgress + rightProgress > 0) && (
           <>
             <LinearProgress color="primary" />
             <Message