update App.js, src/components/PopupCard/index.js and src/components/ProfilePicNextToEachOther/index.js

src/App.js

@@ -148,7 +148,7 @@ function App() {
         {/* <SemiDonut /> */}
         {/* <FolderTree /> */}
         {/* <GridListTable /> */}
-        {/* <PopupCard /> */}
+        <PopupCard />
         {/* <TimeLine /> */}
         {/* <TimeLineComponent /> */}
         {/* <SelectYear /> */}

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,