From c46a8e231a515a34fbabb879ebeeaa82d2ba4db3 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Tue, 12 Apr 2022 09:55:21 +0430
Subject: [PATCH] update App.js, src/components/PopupCard/index.js and
 src/components/ProfilePicNextToEachOther/index.js

---
 src/App.js                                        |  2 +-
 src/components/ProfilePicNextToEachOther/index.js | 10 ++++++----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/App.js b/src/App.js
index 721c4c3..ed75cb2 100644
--- a/src/App.js
+++ b/src/App.js
@@ -148,7 +148,7 @@ function App() {
         {/* <SemiDonut /> */}
         {/* <FolderTree /> */}
         {/* <GridListTable /> */}
-        {/* <PopupCard /> */}
+        <PopupCard />
         {/* <TimeLine /> */}
         {/* <TimeLineComponent /> */}
         {/* <SelectYear /> */}
diff --git a/src/components/ProfilePicNextToEachOther/index.js b/src/components/ProfilePicNextToEachOther/index.js
index 7f65b01..1a7753a 100644
--- a/src/components/ProfilePicNextToEachOther/index.js
+++ b/src/components/ProfilePicNextToEachOther/index.js
@@ -6,15 +6,16 @@ import profilePic3 from "./images/profilePic3.svg";
 import profilePic4 from "./images/profilePic4.svg";
 import profilePic5 from "./images/profilePic5.svg";
 
-const ProfilePicNextToEachOther = ({ users,num }) => {
+const ProfilePicNextToEachOther = ({ users,num,marginLeft }) => {
   return (
-    <div className="flex flex-row">
+    <div className="flex">
       {users.slice(0, num).map((user, i) => (
         <img
           key={i}
           src={user.picture}
-          className="w-10"
-          style={{ marginLeft: "-5px" }}
+          className="w-10 h-10 border-2 border-white rounded-full dark:border-gray-800"
+          alt="profile-pic"
+          style={{ marginLeft: `${marginLeft}` }}
         />
       ))}
     </div>
@@ -25,6 +26,7 @@ export default ProfilePicNextToEachOther;
 
 ProfilePicNextToEachOther.defaultProps = {
   num: 8,
+  marginLeft: "-10px",
   users: [
     {
       picture: profilePic1,