Merge pull request #82 from which-ecosystem/better-ux

Material images (loading, transitions, error)

1 files changed, 9 insertions, 20 deletions

diff --git a/src/components/PollCard/PollCard.tsx b/src/components/PollCard/PollCard.tsx
index 689e872..a4c2144 100644
--- a/src/components/PollCard/PollCard.tsx
+++ b/src/components/PollCard/PollCard.tsx
@@ -1,15 +1,12 @@
 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
-import {
-  Card,
-  CardActionArea,
-  CardMedia
-} from '@material-ui/core/';
+import { Card, CardActionArea } from '@material-ui/core/';
 import { Which, Poll } from 'which-types';
 import { useSnackbar } from 'notistack';
 
 import PercentageBar from './PercentageBar';
 import UserStrip from '../UserStrip/UserStrip';
+import BackgroundImage from '../Image/BackgroundImage';
 import { post } from '../../requests';
 import { useAuth } from '../../hooks/useAuth';
 
@@ -27,12 +24,10 @@ const DATE_FORMAT = {
 };
 
 const useStyles = makeStyles(theme => ({
-  images: {
+  media: {
+    display: 'flex',
     height: theme.spacing(50)
   },
-  imagesBlock: {
-    display: 'flex'
-  },
   rateLine: {
     position: 'relative',
     width: '100%',
@@ -101,19 +96,13 @@ const PollCard: React.FC<PropTypes> = ({ poll, setPoll }) => {
   return (
     <Card>
       <UserStrip user={author} info={date} />
-      <div className={classes.imagesBlock}>
-        <CardActionArea onDoubleClick={handleLeft}>
-          <CardMedia
-            className={classes.images}
-            image={left.url}
-          />
+      <div className={classes.media}>
+        <CardActionArea onDoubleClick={handleLeft} className={classes.media}>
+          <BackgroundImage src={left.url} />
           <PercentageBar value={leftPercentage} which="left" like={vote?.which === 'left'} />
         </CardActionArea>
-        <CardActionArea onDoubleClick={handleRight}>
-          <CardMedia
-            className={classes.images}
-            image={right.url}
-          />
+        <CardActionArea onDoubleClick={handleRight} className={classes.media}>
+          <BackgroundImage src={right.url} />
           <PercentageBar value={rightPercentage} which="right" like={vote?.which === 'right'} />
         </CardActionArea>
       </div>