more code

src/view/Home.jsx

@@ -32,11 +32,17 @@ const Home = (props) => {
         {
           list && list.map((item, index) => {
             return (
-              <li className="my-6" key={index}><Link to={`/poll/${item.id}`}>
-                &#9734; {item.title} 
-              <span className="text-gray-500"> ({item.users})</span>
-              {item.anonymous ? <span>anonymous</span> : <span>{item.user}</span>}
-              </Link></li>
+              <li className="my-6" key={index}>
+                <Link to={`/poll/${item.id}`}>
+                  <div className="bg-white text-black p-4 flex flex-row justify-between">
+                    <div>&#9734; {item.title}</div>
+                    <div>
+                      <span className="text-gray-500"> ({item.users})</span>
+                      {item.anonymous ? <span>anonymous</span> : <span>{item.user}</span>}
+                    </div>
+                  </div>
+                </Link>              
+              </li>
             )
           })
         }

src/view/Poll.jsx

@@ -8,8 +8,12 @@ import {
   ViberIcon,
   LinkedinShareButton,
   LinkedinIcon,
+  TwitterShareButton,
+  TwitterIcon,
+  WhatsappShareButton,
+  WhatsappIcon,
   TelegramShareButton,
-  TwitterShareButton } from "react-share";
+  TelegramIcon } from "react-share";
 
 import { Title } from "../ui/title";
 import Answers from './Answers'
@@ -82,7 +86,7 @@ function Poll(props) {
 
         <p className="text-sm mb-3">Share the poll URL to the voters</p>
         <div className="flex p-4 bg-black bg-opacity-20 rounded-xl justify-between">
-          <div className="text-sm">
+          <div className="text-xs">
             {FRONT_URL}/poll/{id}
           </div>
           <div className="">
@@ -94,30 +98,45 @@ function Poll(props) {
         <div className={`transition-opacity duration-600 flex justify-end text-sm mr-2 ${copied ? 'opacity-100' : 'opacity-0'}`}>
           Copied
         </div>
-        <div className="flex flex-row">
+
+        <div className="flex flex-row justify-center">
+
           <div className="mr-4">
-        <FacebookShareButton
-            url={shareUrl}
-            quote={'title'}
-            className="Demo__some-network__share-button"
-          >
-            <FacebookIcon size={32} round />
-          </FacebookShareButton>
+            <ViberShareButton url={shareUrl}>
+              <ViberIcon size={32} round />
+            </ViberShareButton>
           </div>
+
           <div className="mr-4">
-          <ViberShareButton
-            url={shareUrl}
-            title={'title'}
-            className="Demo__some-network__share-button"
-          >
-            <ViberIcon size={32} round />
-          </ViberShareButton>
+            <FacebookShareButton url={shareUrl}>
+              <FacebookIcon size={32} round />
+            </FacebookShareButton>
           </div>
+
           <div className="mr-4">
-          <LinkedinShareButton url={shareUrl} className="Demo__some-network__share-button">
-            <LinkedinIcon size={32} round />
-          </LinkedinShareButton>
+            <LinkedinShareButton url={shareUrl}>
+              <LinkedinIcon size={32} round />
+            </LinkedinShareButton>
           </div>
+
+          <div className="mr-4">
+            <TwitterShareButton url={shareUrl}>
+              <TwitterIcon size={32} round />
+            </TwitterShareButton>
+          </div>
+
+          <div className="mr-4">
+            <TelegramShareButton url={shareUrl}>
+              <TelegramIcon size={32} round />
+            </TelegramShareButton>
+          </div>
+
+          <div className="mr-4">
+            <WhatsappShareButton url={shareUrl}>
+              <WhatsappIcon size={32} round />
+            </WhatsappShareButton>
+          </div>
+
         </div>
       </div>
     </div>