From 0a23633aa49ece18897a6ceaa56fdd3cd837b8e8 Mon Sep 17 00:00:00 2001
From: ilyayudovin <ilyayudovin123@gmail.com>
Date: Tue, 15 Sep 2020 00:15:30 +0300
Subject: feat: add description to poll

---
 package-lock.json                            |  6 +++---
 package.json                                 |  2 +-
 src/components/PollCard/PollCard.tsx         |  4 ++++
 src/containers/Page/Page.tsx                 |  3 ++-
 src/containers/PollCreation/PollCreation.tsx | 13 ++++++++-----
 5 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e25fb85..5a9140e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14429,9 +14429,9 @@
       "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho="
     },
     "which-types": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/which-types/-/which-types-1.6.1.tgz",
-      "integrity": "sha512-uTCrp6+rbU48kyT9Z6upVo9CgGmiR50zFSwzDik8slE8oZ+0FC9SBEfJlfgADX/rFJVbIe8Vxsw4BsSxlL5Lsw=="
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/which-types/-/which-types-1.6.2.tgz",
+      "integrity": "sha512-+OAaJtZsqJab9YohByErzVqxWTsl/JvZ6AVpz7a0WrPEQHapv0aoA0RZIu1zrfSBFhAQLSJmw4fyvfqUvViO5g=="
     },
     "word-wrap": {
       "version": "1.2.3",
diff --git a/package.json b/package.json
index 2bb2500..1d4abfe 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
     "react-virtualized": "^9.21.2",
     "swr": "^0.3.0",
     "typeface-roboto": "0.0.75",
-    "which-types": "^1.6.1",
+    "which-types": "^1.6.2",
     "yup": "^0.29.3"
   },
   "scripts": {
diff --git a/src/components/PollCard/PollCard.tsx b/src/components/PollCard/PollCard.tsx
index 540679f..e2d06ee 100644
--- a/src/components/PollCard/PollCard.tsx
+++ b/src/components/PollCard/PollCard.tsx
@@ -42,6 +42,9 @@ const useStyles = makeStyles(theme => ({
     height: theme.spacing(2),
     backgroundColor: theme.palette.primary.light,
     transitionDuration: '0.5s'
+  },
+  description: {
+    padding: '0px 16px 10px'
   }
 }));
 
@@ -93,6 +96,7 @@ const PollCard: React.FC<PropTypes> = React.memo(({ poll, setPoll }) => {
   return (
     <Card elevation={3}>
       <UserStrip user={author} info={date} />
+      <div className={classes.description}>{poll.description}</div>
       <div className={classes.media}>
         <CardActionArea onDoubleClick={handleVote('left')} className={classes.media}>
           <BackgroundImage src={left.url} />
diff --git a/src/containers/Page/Page.tsx b/src/containers/Page/Page.tsx
index e60f7da..9a904a4 100644
--- a/src/containers/Page/Page.tsx
+++ b/src/containers/Page/Page.tsx
@@ -17,7 +17,8 @@ const useStyles = makeStyles(theme => ({
     },
     [theme.breakpoints.up('md')]: {
       padding: theme.spacing(15, 5, 8, 5)
-    }
+    },
+    backgroundColor: 'whitesmoke'
   }
 }));
 
diff --git a/src/containers/PollCreation/PollCreation.tsx b/src/containers/PollCreation/PollCreation.tsx
index 68f41d2..7f29119 100644
--- a/src/containers/PollCreation/PollCreation.tsx
+++ b/src/containers/PollCreation/PollCreation.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
+import React, {useRef} from 'react';
 import Bluebird from 'bluebird';
 import { makeStyles } from '@material-ui/core/styles';
-import { Card, Container, LinearProgress } from '@material-ui/core';
+import { Card, Container, LinearProgress, Divider } from '@material-ui/core';
 import SendIcon from '@material-ui/icons/Send';
 import { useSnackbar } from 'notistack';
 
@@ -25,8 +25,9 @@ const useStyles = makeStyles(theme => ({
 
 const PollCreation: React.FC = () => {
   const classes = useStyles();
-  const { user } = useAuth();
+  const ref = useRef<HTMLTextAreaElement>(null);
   const { enqueueSnackbar } = useSnackbar();
+  const { user } = useAuth();
   const { mutate: updateFeed } = useFeed();
   const { mutate: updateProfile } = useProfile(user?.username || '');
   const {
@@ -50,8 +51,8 @@ const PollCreation: React.FC = () => {
         left: { url: leftUrl },
         right: { url: rightUrl }
       };
-
-      post('/polls/', { contents }).then(() => {
+      const description = ref?.current?.value;
+      post('/polls/', { contents, description }).then(() => {
         updateFeed();
         updateProfile();
         enqueueSnackbar('Your poll has been successfully created!', { variant: 'success' });
@@ -71,6 +72,8 @@ const PollCreation: React.FC = () => {
       <Container maxWidth="sm" disableGutters>
         <Card elevation={3}>
           {user && <UserStrip user={user} info="" />}
+          <Divider />
+          <textarea ref={ref} />
           <div className={classes.images}>
             <ImageInput callback={setLeft} progress={leftProgress} />
             <ImageInput callback={setRight} progress={rightProgress} />
-- 
cgit v1.2.3


From 14c42281faafb4866190a025f17abbe471f99fe9 Mon Sep 17 00:00:00 2001
From: ilyayudovin <ilyayudovin123@gmail.com>
Date: Fri, 18 Sep 2020 16:58:06 +0300
Subject: add textField for description input

---
 src/containers/PollCreation/PollCreation.tsx | 30 ++++++++++++++++++++++------
 1 file changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/containers/PollCreation/PollCreation.tsx b/src/containers/PollCreation/PollCreation.tsx
index 7f29119..05a1966 100644
--- a/src/containers/PollCreation/PollCreation.tsx
+++ b/src/containers/PollCreation/PollCreation.tsx
@@ -1,7 +1,7 @@
-import React, {useRef} from 'react';
+import React, { useState } from 'react';
 import Bluebird from 'bluebird';
 import { makeStyles } from '@material-ui/core/styles';
-import { Card, Container, LinearProgress, Divider } from '@material-ui/core';
+import { Card, Container, LinearProgress, Divider, TextField } from '@material-ui/core';
 import SendIcon from '@material-ui/icons/Send';
 import { useSnackbar } from 'notistack';
 
@@ -19,13 +19,20 @@ const useStyles = makeStyles(theme => ({
   images: {
     height: theme.spacing(50),
     display: 'flex'
+  },
+  textarea: {
+    width: '100%',
+    height: 100
+  },
+  descriptionText: {
+    padding: 10
   }
 }));
 
 
 const PollCreation: React.FC = () => {
+  const [description, setDescription] = useState<string>('');
   const classes = useStyles();
-  const ref = useRef<HTMLTextAreaElement>(null);
   const { enqueueSnackbar } = useSnackbar();
   const { user } = useAuth();
   const { mutate: updateFeed } = useFeed();
@@ -43,15 +50,18 @@ const PollCreation: React.FC = () => {
     progress: rightProgress
   } = useS3Preupload();
 
+  const handleDescriptionChange = (e: any) => {
+    setDescription(e.target.value);
+  };
+
   const handleSubmit = async () => {
     try {
       const [leftUrl, rightUrl] = await Bluebird.all([resolveLeft(), resolveRight()]);
-
       const contents = {
         left: { url: leftUrl },
         right: { url: rightUrl }
       };
-      const description = ref?.current?.value;
+
       post('/polls/', { contents, description }).then(() => {
         updateFeed();
         updateProfile();
@@ -73,7 +83,15 @@ const PollCreation: React.FC = () => {
         <Card elevation={3}>
           {user && <UserStrip user={user} info="" />}
           <Divider />
-          <textarea ref={ref} />
+          <TextField
+            multiline
+            rows={2}
+            placeholder="Add a description"
+            fullWidth
+            InputProps={{
+              className: classes.descriptionText,
+            }}
+          />
           <div className={classes.images}>
             <ImageInput callback={setLeft} progress={leftProgress} />
             <ImageInput callback={setRight} progress={rightProgress} />
-- 
cgit v1.2.3


From 12b52a29d27736075d71f97937f678650bfc6339 Mon Sep 17 00:00:00 2001
From: ilyayudovin <ilyayudovin123@gmail.com>
Date: Fri, 18 Sep 2020 20:54:25 +0300
Subject: dont show description if it is empty

---
 src/components/PollCard/PollCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/PollCard/PollCard.tsx b/src/components/PollCard/PollCard.tsx
index e2d06ee..b6fdfaa 100644
--- a/src/components/PollCard/PollCard.tsx
+++ b/src/components/PollCard/PollCard.tsx
@@ -96,7 +96,7 @@ const PollCard: React.FC<PropTypes> = React.memo(({ poll, setPoll }) => {
   return (
     <Card elevation={3}>
       <UserStrip user={author} info={date} />
-      <div className={classes.description}>{poll.description}</div>
+      {poll.description && <div className={classes.description}>{poll.description}</div>}
       <div className={classes.media}>
         <CardActionArea onDoubleClick={handleVote('left')} className={classes.media}>
           <BackgroundImage src={left.url} />
-- 
cgit v1.2.3


From 13fc0cc8ffb61d8f184707feed1f9010798c45f1 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Fri, 18 Sep 2020 22:20:29 +0300
Subject: feat!: allow dynamic item height in PollsList

---
 src/components/PollsList/PollsList.tsx  | 14 +++++++++++---
 src/components/PollsList/RenderItem.tsx | 22 ++++++++++++++++------
 2 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/src/components/PollsList/PollsList.tsx b/src/components/PollsList/PollsList.tsx
index 039639d..bf2079a 100644
--- a/src/components/PollsList/PollsList.tsx
+++ b/src/components/PollsList/PollsList.tsx
@@ -3,7 +3,8 @@ import {
   WindowScroller,
   AutoSizer,
   List,
-  InfiniteLoader
+  InfiniteLoader,
+  CellMeasurerCache
 } from 'react-virtualized';
 import _ from 'lodash';
 import { Poll } from 'which-types';
@@ -15,17 +16,23 @@ interface PropTypes {
   mutate: (polls: Poll[], refetch: boolean) => void;
 }
 
+const cache = new CellMeasurerCache({
+  fixedWidth: true,
+});
+
 const PAGE_SIZE = 10;
 
 const PollsList: React.FC<PropTypes> = ({ polls, mutate }) => {
   const [displayCount, setDisplayCount] = useState<number>(PAGE_SIZE);
 
-  const rowRenderer = useCallback(({ index, style, key }) => (
+  const rowRenderer = useCallback(({ index, style, key, parent }) => (
     <RenderItem
       polls={polls}
       mutate={mutate}
       index={index}
       style={style}
+      cache={cache}
+      parent={parent}
       key={key}
       _key={key}
     />
@@ -68,7 +75,7 @@ const PollsList: React.FC<PropTypes> = ({ polls, mutate }) => {
                     isScrolling={isScrolling}
                     onScroll={onChildScroll}
                     rowCount={rowCount}
-                    rowHeight={550}
+                    rowHeight={cache.rowHeight}
                     rowRenderer={rowRenderer}
                     scrollTop={scrollTop}
                     width={width}
@@ -76,6 +83,7 @@ const PollsList: React.FC<PropTypes> = ({ polls, mutate }) => {
                     overscanRowCount={2}
                     onRowsRendered={onRowsRendered}
                     ref={ref}
+                    deferredMeasurementCache={cache}
                   />
                 )}
               </InfiniteLoader>
diff --git a/src/components/PollsList/RenderItem.tsx b/src/components/PollsList/RenderItem.tsx
index beed259..ce6f0c9 100644
--- a/src/components/PollsList/RenderItem.tsx
+++ b/src/components/PollsList/RenderItem.tsx
@@ -1,6 +1,7 @@
 import React, { useCallback } from 'react';
 import { Poll } from 'which-types';
 import PollCard from '../PollCard/PollCard';
+import { CellMeasurer, CellMeasurerCache, List } from 'react-virtualized';
 
 
 interface PropTypes {
@@ -8,6 +9,8 @@ interface PropTypes {
   mutate: (polls: Poll[], refetch: boolean) => void;
   index: number;
   style: React.CSSProperties;
+  cache: CellMeasurerCache;
+  parent: List;
   _key: string; // https://reactjs.org/warnings/special-props.html
 }
 
@@ -15,13 +18,13 @@ const compareProps = (oldProps: PropTypes, newProps: PropTypes) => {
   if (oldProps._key !== newProps._key) return false;
   if (oldProps.index !== newProps.index) return false;
   if (oldProps.polls !== newProps.polls) return false;
-  // TODO: uncomment line below to listen to style updates
-  // if (JSON.stringify(oldProps.style)!== JSON.stringify(newProps.style)) return false;
+  // Only listen for height changes in style
+  if (oldProps.style.height !== newProps.style.height) return false;
   return true;
 };
 
 const RenderItem: React.FC<PropTypes> = React.memo(({
-  polls, mutate, index, style, _key
+  polls, mutate, index, style, cache, parent, _key
 }) => {
   const poll = polls[index];
 
@@ -35,9 +38,16 @@ const RenderItem: React.FC<PropTypes> = React.memo(({
   }, [mutate, index, polls]);
 
   return (
-    <div key={`${_key}-${poll._id}`} style={style}>
-      <PollCard poll={poll} setPoll={setPoll} />
-    </div>
+    <CellMeasurer
+      cache={cache}
+      columnIndex={0}
+      rowIndex={index}
+      parent={parent}
+    >
+      <div key={`${_key}-${poll._id}`} style={{...style, paddingBottom: '40px' }}>
+        <PollCard poll={poll} setPoll={setPoll} />
+      </div>
+    </CellMeasurer>
   );
 }, compareProps);
 
-- 
cgit v1.2.3


From 3aa75f9454332342fdb76d3b8466ef52f058cf4d Mon Sep 17 00:00:00 2001
From: ilyayudovin <ilyayudovin123@gmail.com>
Date: Sat, 19 Sep 2020 01:12:34 +0300
Subject: clear cache on polls size change

---
 src/components/PollCard/PollCard.tsx    | 3 ++-
 src/components/PollsList/PollsList.tsx  | 6 +++++-
 src/components/PollsList/RenderItem.tsx | 3 +--
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/PollCard/PollCard.tsx b/src/components/PollCard/PollCard.tsx
index b6fdfaa..d909b79 100644
--- a/src/components/PollCard/PollCard.tsx
+++ b/src/components/PollCard/PollCard.tsx
@@ -44,7 +44,8 @@ const useStyles = makeStyles(theme => ({
     transitionDuration: '0.5s'
   },
   description: {
-    padding: '0px 16px 10px'
+    padding: '0px 16px 10px',
+    overflowWrap: 'break-word'
   }
 }));
 
diff --git a/src/components/PollsList/PollsList.tsx b/src/components/PollsList/PollsList.tsx
index bf2079a..3eeed2b 100644
--- a/src/components/PollsList/PollsList.tsx
+++ b/src/components/PollsList/PollsList.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useState, useMemo } from 'react';
+import React, {useCallback, useState, useMemo, useRef, useEffect} from 'react';
 import {
   WindowScroller,
   AutoSizer,
@@ -25,6 +25,10 @@ const PAGE_SIZE = 10;
 const PollsList: React.FC<PropTypes> = ({ polls, mutate }) => {
   const [displayCount, setDisplayCount] = useState<number>(PAGE_SIZE);
 
+  useEffect(()=> {
+    cache.clearAll();
+  },[polls]);
+
   const rowRenderer = useCallback(({ index, style, key, parent }) => (
     <RenderItem
       polls={polls}
diff --git a/src/components/PollsList/RenderItem.tsx b/src/components/PollsList/RenderItem.tsx
index ce6f0c9..fcac20c 100644
--- a/src/components/PollsList/RenderItem.tsx
+++ b/src/components/PollsList/RenderItem.tsx
@@ -27,7 +27,6 @@ const RenderItem: React.FC<PropTypes> = React.memo(({
   polls, mutate, index, style, cache, parent, _key
 }) => {
   const poll = polls[index];
-
   const setPoll = useCallback((newPoll: Poll) => {
     const newPolls = [...polls];
     newPolls[index] = newPoll;
@@ -44,7 +43,7 @@ const RenderItem: React.FC<PropTypes> = React.memo(({
       rowIndex={index}
       parent={parent}
     >
-      <div key={`${_key}-${poll._id}`} style={{...style, paddingBottom: '40px' }}>
+      <div key={`${_key}-${poll._id}`} style={{...style, paddingBottom: '20px' }}>
         <PollCard poll={poll} setPoll={setPoll} />
       </div>
     </CellMeasurer>
-- 
cgit v1.2.3


From 2a8d307b53b1b7fa5962e73b5e506c7466b79a7e Mon Sep 17 00:00:00 2001
From: ilyayudovin <ilyayudovin123@gmail.com>
Date: Sat, 19 Sep 2020 01:22:20 +0300
Subject: fix eslint errors

---
 src/components/PollsList/PollsList.tsx       | 8 ++++----
 src/components/PollsList/RenderItem.tsx      | 4 ++--
 src/containers/PollCreation/PollCreation.tsx | 7 ++++---
 3 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/components/PollsList/PollsList.tsx b/src/components/PollsList/PollsList.tsx
index 3eeed2b..1ad7763 100644
--- a/src/components/PollsList/PollsList.tsx
+++ b/src/components/PollsList/PollsList.tsx
@@ -1,4 +1,4 @@
-import React, {useCallback, useState, useMemo, useRef, useEffect} from 'react';
+import React, { useCallback, useState, useMemo, useEffect } from 'react';
 import {
   WindowScroller,
   AutoSizer,
@@ -17,7 +17,7 @@ interface PropTypes {
 }
 
 const cache = new CellMeasurerCache({
-  fixedWidth: true,
+  fixedWidth: true
 });
 
 const PAGE_SIZE = 10;
@@ -25,9 +25,9 @@ const PAGE_SIZE = 10;
 const PollsList: React.FC<PropTypes> = ({ polls, mutate }) => {
   const [displayCount, setDisplayCount] = useState<number>(PAGE_SIZE);
 
-  useEffect(()=> {
+  useEffect(() => {
     cache.clearAll();
-  },[polls]);
+  }, [polls]);
 
   const rowRenderer = useCallback(({ index, style, key, parent }) => (
     <RenderItem
diff --git a/src/components/PollsList/RenderItem.tsx b/src/components/PollsList/RenderItem.tsx
index fcac20c..6a99167 100644
--- a/src/components/PollsList/RenderItem.tsx
+++ b/src/components/PollsList/RenderItem.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import { Poll } from 'which-types';
-import PollCard from '../PollCard/PollCard';
 import { CellMeasurer, CellMeasurerCache, List } from 'react-virtualized';
+import PollCard from '../PollCard/PollCard';
 
 
 interface PropTypes {
@@ -43,7 +43,7 @@ const RenderItem: React.FC<PropTypes> = React.memo(({
       rowIndex={index}
       parent={parent}
     >
-      <div key={`${_key}-${poll._id}`} style={{...style, paddingBottom: '20px' }}>
+      <div key={`${_key}-${poll._id}`} style={{ ...style, paddingBottom: '20px' }}>
         <PollCard poll={poll} setPoll={setPoll} />
       </div>
     </CellMeasurer>
diff --git a/src/containers/PollCreation/PollCreation.tsx b/src/containers/PollCreation/PollCreation.tsx
index 05a1966..2fef64f 100644
--- a/src/containers/PollCreation/PollCreation.tsx
+++ b/src/containers/PollCreation/PollCreation.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+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';
@@ -50,7 +50,7 @@ const PollCreation: React.FC = () => {
     progress: rightProgress
   } = useS3Preupload();
 
-  const handleDescriptionChange = (e: any) => {
+  const handleDescriptionChange = (e: ChangeEvent<HTMLTextAreaElement|HTMLInputElement>) => {
     setDescription(e.target.value);
   };
 
@@ -86,8 +86,9 @@ const PollCreation: React.FC = () => {
           <TextField
             multiline
             rows={2}
-            placeholder="Add a description"
             fullWidth
+            placeholder="Add a description"
+            onChange={handleDescriptionChange}
             InputProps={{
               className: classes.descriptionText,
             }}
-- 
cgit v1.2.3


From 0930745ca23f881c97a3cf641c913466c692af64 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Thu, 8 Oct 2020 22:43:13 +0300
Subject: feat: increase spacing between polls

---
 src/components/PollsList/RenderItem.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/PollsList/RenderItem.tsx b/src/components/PollsList/RenderItem.tsx
index 6a99167..28411ec 100644
--- a/src/components/PollsList/RenderItem.tsx
+++ b/src/components/PollsList/RenderItem.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
 import { Poll } from 'which-types';
 import { CellMeasurer, CellMeasurerCache, List } from 'react-virtualized';
 import PollCard from '../PollCard/PollCard';
@@ -14,6 +15,12 @@ interface PropTypes {
   _key: string; // https://reactjs.org/warnings/special-props.html
 }
 
+const useStyles = makeStyles(theme => ({
+  root: {
+    paddingBottom: theme.spacing(8)
+  }
+}));
+
 const compareProps = (oldProps: PropTypes, newProps: PropTypes) => {
   if (oldProps._key !== newProps._key) return false;
   if (oldProps.index !== newProps.index) return false;
@@ -26,6 +33,7 @@ const compareProps = (oldProps: PropTypes, newProps: PropTypes) => {
 const RenderItem: React.FC<PropTypes> = React.memo(({
   polls, mutate, index, style, cache, parent, _key
 }) => {
+  const classes = useStyles();
   const poll = polls[index];
   const setPoll = useCallback((newPoll: Poll) => {
     const newPolls = [...polls];
@@ -43,7 +51,7 @@ const RenderItem: React.FC<PropTypes> = React.memo(({
       rowIndex={index}
       parent={parent}
     >
-      <div key={`${_key}-${poll._id}`} style={{ ...style, paddingBottom: '20px' }}>
+      <div key={`${_key}-${poll._id}`} className={classes.root} style={style}>
         <PollCard poll={poll} setPoll={setPoll} />
       </div>
     </CellMeasurer>
-- 
cgit v1.2.3


From 86a0796c859bbb0bd735fdc3bdc67d1687ddaf1c Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Thu, 8 Oct 2020 22:43:30 +0300
Subject: feat: tweak description paddings

---
 src/components/PollCard/PollCard.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/PollCard/PollCard.tsx b/src/components/PollCard/PollCard.tsx
index d909b79..eb025f2 100644
--- a/src/components/PollCard/PollCard.tsx
+++ b/src/components/PollCard/PollCard.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
-import { Card, CardActionArea } from '@material-ui/core/';
+import { Card, CardActionArea, Typography } from '@material-ui/core/';
 import { Which, Poll } from 'which-types';
 import { useSnackbar } from 'notistack';
 
@@ -44,8 +44,7 @@ const useStyles = makeStyles(theme => ({
     transitionDuration: '0.5s'
   },
   description: {
-    padding: '0px 16px 10px',
-    overflowWrap: 'break-word'
+    padding: theme.spacing(0.5, 2)
   }
 }));
 
@@ -97,7 +96,11 @@ const PollCard: React.FC<PropTypes> = React.memo(({ poll, setPoll }) => {
   return (
     <Card elevation={3}>
       <UserStrip user={author} info={date} />
-      {poll.description && <div className={classes.description}>{poll.description}</div>}
+      {poll.description && (
+        <Typography gutterBottom className={classes.description}>
+          {poll.description}
+        </Typography>
+      )}
       <div className={classes.media}>
         <CardActionArea onDoubleClick={handleVote('left')} className={classes.media}>
           <BackgroundImage src={left.url} />
-- 
cgit v1.2.3


From 8c8e38f93dba84f67624959540cd2b2042dd5089 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Thu, 8 Oct 2020 23:31:08 +0300
Subject: feat: make PollCreation input same as description

---
 src/components/PollCard/PollCard.tsx         |  4 ++--
 src/containers/PollCreation/PollCreation.tsx | 32 +++++++++++++---------------
 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
-- 
cgit v1.2.3


From 2f35115f03c8080424ef24302091c5125ff68ff0 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Thu, 8 Oct 2020 23:42:49 +0300
Subject: fix: preserve all whitespaces in description

---
 src/components/PollCard/PollCard.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/PollCard/PollCard.tsx b/src/components/PollCard/PollCard.tsx
index 6886534..a06bad8 100644
--- a/src/components/PollCard/PollCard.tsx
+++ b/src/components/PollCard/PollCard.tsx
@@ -44,7 +44,9 @@ const useStyles = makeStyles(theme => ({
     transitionDuration: '0.5s'
   },
   description: {
-    padding: theme.spacing(1, 2)
+    padding: theme.spacing(1, 2),
+    wordWrap: 'break-word',
+    whiteSpace: 'pre-wrap'
   }
 }));
 
-- 
cgit v1.2.3


From 388ccd1ae73e0dcc710e9b497e95c70a131c73cc Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Fri, 9 Oct 2020 00:21:58 +0300
Subject: feat: remove gap between header on mobile

---
 src/components/ModalScreen/ModalScreen.tsx   | 4 +++-
 src/containers/PollCreation/PollCreation.tsx | 9 ++++++---
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/ModalScreen/ModalScreen.tsx b/src/components/ModalScreen/ModalScreen.tsx
index c6f0565..cf76272 100644
--- a/src/components/ModalScreen/ModalScreen.tsx
+++ b/src/components/ModalScreen/ModalScreen.tsx
@@ -27,7 +27,9 @@ const useStyles = makeStyles(theme => ({
     backgroundColor: theme.palette.background.default
   },
   content: {
-    padding: theme.spacing(6, 0)
+    [theme.breakpoints.up('md')]: {
+      padding: theme.spacing(4)
+    }
   },
   toolbar: {
     display: 'flex',
diff --git a/src/containers/PollCreation/PollCreation.tsx b/src/containers/PollCreation/PollCreation.tsx
index 33d95bb..2e2bd06 100644
--- a/src/containers/PollCreation/PollCreation.tsx
+++ b/src/containers/PollCreation/PollCreation.tsx
@@ -1,4 +1,4 @@
-import React, { ChangeEvent, useState } from 'react';
+import React, { ChangeEvent, useState, useMemo } from 'react';
 import Bluebird from 'bluebird';
 import { makeStyles } from '@material-ui/core/styles';
 import { Card, Container, LinearProgress, InputBase, Typography } from '@material-ui/core';
@@ -72,12 +72,14 @@ const PollCreation: React.FC = () => {
     }
   };
 
+  const isSubmitting = useMemo(() => leftProgress + rightProgress > 0, [leftProgress, rightProgress]);
+
   return (
     <ModalScreen
       title="Create a poll"
       actionIcon={<SendIcon />}
       handleAction={handleSubmit}
-      isActionDisabled={!(left && right) || leftProgress + rightProgress > 0}
+      isActionDisabled={!(left && right) || isSubmitting}
     >
       <Container maxWidth="sm" disableGutters>
         <Card elevation={3}>
@@ -89,6 +91,7 @@ const PollCreation: React.FC = () => {
               placeholder="Add description"
               onChange={handleDescriptionChange}
               className={classes.description}
+              readOnly={isSubmitting}
             />
           </Typography>
           <div className={classes.images}>
@@ -96,7 +99,7 @@ const PollCreation: React.FC = () => {
             <ImageInput callback={setRight} progress={rightProgress} />
           </div>
         </Card>
-        {(leftProgress + rightProgress > 0) && (
+        {isSubmitting && (
           <>
             <LinearProgress color="primary" />
             <Message
-- 
cgit v1.2.3


From 8e9245d18ba591e93dd7dd1de9a271d0b51941a7 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Fri, 9 Oct 2020 00:28:21 +0300
Subject: chore: v1.2.6

---
 package-lock.json | 2 +-
 package.json      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 5a9140e..86992bb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "which",
-  "version": "1.2.5",
+  "version": "1.2.6",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index 1d4abfe..6f0bc12 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "which",
-  "version": "1.2.5",
+  "version": "1.2.6",
   "homepage": "https://which-ecosystem.github.io/",
   "dependencies": {
     "@material-ui/core": "^4.10.1",
-- 
cgit v1.2.3