added popups and comment text responsiveness and share svg

src/components/Comments/index.css

@@ -11,11 +11,13 @@
   min-width: 400px;
 }
 
-.comment-container > div:nth-child(3) {
-  display: flex;
-  flex-flow: row;
+.comment-container > img {
+  flex-shrink: 0;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  object-fit: cover;
 }
-
 .username-comment {
   align-items: flex-start;
   color: black;

src/components/Post/post.js

@@ -235,7 +235,6 @@ function Post() {
                                     {postData['title']}
                                 </h3>
                             </div>
-
                             <div className="w-full border-t-2 border-gray-300">
                                 <img
                                     alt={''}
@@ -244,7 +243,6 @@ function Post() {
                                 />
                             </div>
                             <div className="flex justify-between items-center p-4 bg-gray-50">
-                                {/* Zap Button */}
                                 <button
                                     onClick={handleZapButton}
                                     className="flex items-center">
@@ -288,7 +286,7 @@ function Post() {
                                 <button
                                     onClick={openShareModal}
                                     className="flex items-center">
-                                    <ShareButtonSvg className="h-4 w-4 text-black" />
+                                    <ShareButtonSvg className="h-6 w-6 text-black" />
                                 </button>
                             </div>
                         </div>
@@ -329,7 +327,7 @@ function Post() {
                             </div>
                         ) : (
                             <div className="flex justify-center lg:mr-60">
-                                <div className=" pb-16 md:bg-white rounded-b-sm shadow overflow-hidden w-full max-w-md mx-auto">
+                                <div className="pb-16 md:bg-white rounded-b-sm shadow overflow-hidden w-full max-w-md mx-auto">
                                     {replies.map((object, index) => (
                                         <Comments key={index} reply={object} />
                                     ))}

src/components/Posts/index.js

@@ -11,6 +11,7 @@ import { ReactComponent as CommentSvg } from '../../Icons/CommentSvg.svg';
 import { getCommentCount } from '../HashtagTool';
 import { useAuth } from '../../AuthContext';
 import { VideoPlayer } from '../../helpers/videoPlayer';
+import { ReactComponent as CloseIcon } from '../../Icons/CloseIcon.svg';
 const MAX_POSTS = 200;
 
 export const manageLikedPosts = (postId, userPublicKey, isLiked) => {
@@ -172,7 +173,7 @@ export const saveComment = (postId, comment) => {
     const pool = new SimplePool();
     const storedData = localStorage.getItem('memestr');
     if (!storedData) {
-        alert('Login required to upvote.');
+        alert('Login required to comment.');
         return;
     }
     let uesrPublicKey = JSON.parse(storedData).pubKey;
@@ -249,6 +250,9 @@ function Posts(props) {
     const { isLoggedIn } = useAuth();
     const [userPublicKey, setUserPublicKey] = useState(null);
 
+    const [showNotification, setShowNotification] = useState(false);
+    const [notificationMessage, setNotificationMessage] = useState('');
+
     useEffect(() => {
         const storedData = localStorage.getItem('memestr');
         const userData = storedData ? JSON.parse(storedData) : null;
@@ -335,7 +339,9 @@ function Posts(props) {
     function handleZapButton() {
         const storedData = localStorage.getItem('memestr');
         if (!storedData) {
-            alert('Login to send zaps.');
+            setNotificationMessage('Login to send Zaps');
+            setShowNotification(true);
+            setTimeout(() => setShowNotification(false), 3000);
             return false;
         }
         openModal();
@@ -408,7 +414,9 @@ function Posts(props) {
 
     function handleLikeButtonClick() {
         if (!isLoggedIn) {
-            alert('Login required to upvote.');
+            setNotificationMessage('Login required to upvote');
+            setShowNotification(true);
+            setTimeout(() => setShowNotification(false), 3000);
             return;
         }
         upvotePost(props.note.id, userPublicKey).then(wasLiked => {
@@ -489,7 +497,7 @@ function Posts(props) {
                             </button>
 
                             <button onClick={openShareModal} className="p-1">
-                                <ShareButtonSvg className="h-4 w-4 text-gray-600" />
+                                <ShareButtonSvg className="h-6 w-6 text-gray-600" />
                             </button>
                         </div>
                     </div>
@@ -503,6 +511,33 @@ function Posts(props) {
                 onClose={closeShareModal}
                 postUrl={postUrl}
             />
+            {/* {showLoginNotification && (
+                <div className="fixed top-0 inset-x-0 flex justify-center items-start z-50">
+                    <div className="mt-12 p-4 bg-black text-white rounded-lg shadow-lg transition-transform transform-gpu animate-slideInSlideOut flex items-center">
+                        <p className="text-bold text-white px-2">
+                            Login required to upvote
+                        </p>
+                        <CloseIcon
+                            className="h-6 w-6 mr-2 text-white"
+                            onClick={handleCloseNotification}
+                        />
+                    </div>
+                </div>
+            )} */}
+
+            {showNotification && (
+                <div className="fixed top-0 inset-x-0 flex justify-center items-start z-50">
+                    <div className="mt-12 p-4 bg-black text-white rounded-lg shadow-lg transition-transform transform-gpu animate-slideInSlideOut flex items-center">
+                        <p className="text-bold text-white px-2">
+                            {notificationMessage}
+                        </p>
+                        <CloseIcon
+                            className="h-6 w-6 mr-2 text-white"
+                            onClick={() => setShowNotification(false)}
+                        />
+                    </div>
+                </div>
+            )}
         </>
     );
 }

src/helpers/Notification.js

@@ -0,0 +1,31 @@
+import React, { useState, useEffect } from 'react';
+import { ReactComponent as CloseIcon } from '../Icons/CloseIcon.svg';
+
+export function Notification({ message, show, duration = 3000, onClose }) {
+    const [visible, setVisible] = useState(show);
+    useEffect(() => {
+        if (show) {
+            const timer = setTimeout(() => {
+                setVisible(false);
+                if (onClose) {
+                    onClose();
+                }
+            }, duration);
+            return () => clearTimeout(timer);
+        }
+    }, [show, duration, onClose]);
+    if (!visible) {
+        return null;
+    }
+    return (
+        <div className="fixed top-0 inset-x-0 flex justify-center items-start z-50">
+            <div className="mt-12 p-4 bg-black text-white rounded-lg shadow-lg transition-transform transform-gpu animate-slideInSlideOut flex items-center">
+                <p className="text-bold text-white px-2">{message}</p>
+                <CloseIcon
+                    className="h-6 w-6 mr-2 text-white cursor-pointer"
+                    onClick={() => setVisible(false)}
+                />
+            </div>
+        </div>
+    );
+}