update 6 files

src/App.js

@@ -221,9 +221,9 @@ function App() {
         {/* <SelectYear /> */}
         {/* ----------------------------$$$ end---------------------------- */}
 
-        <TimeLineComponent />
+        {/* <TimeLineComponent /> */}
 
-        <CardTrelloDesign />
+        {/* <CardTrelloDesign /> */}
 
         {/* <ReligiousTimes /> */}
 

src/components/CardDesign1/index.js

@@ -5,11 +5,11 @@ import TitleSubtitle from "../TitleSubtitle";
 
 const CardDesign1 = () => {
   return (
-    <div className="flex flex-col bg-white shadow-sm rounded max-w-[375px] mr-20 my-20 p-4">
+    <div className="w-fit flex flex-col p-4 bg-white shadow-sm rounded">
       <TitleSubtitle
         subTitle={false}
         title={"طبقه سوم"}
-        titleClassName={"font-sansbold  text-[#0F0543]"}
+        titleClassName={"font-sansbold text-[#0F0543]"}
         titleBorderClassName={"w-1 h-5 bg-[#F8EA1F] ml-1"}
       />
       <IconText />

src/components/CustomToast/index.js

@@ -2,19 +2,11 @@ import React from "react";
 
 import penIcon from "./pen-icon.svg";
 
-const CustomToast = ({
-  backgroundColor,
-  borderColor,
-  textColor,
-  padding,
-  icon,
-}) => {
+const CustomToast = ({ className, icon }) => {
   return (
-    <div
-      className={`flex flex-row items-center border-2 rounded mt-4 font-sansbold text-sm ${backgroundColor} ${borderColor} ${textColor} ${padding} `}
-    >
+    <div className={`flex flex-row items-center text-sm rounded ${className} `}>
       <p className="flex-1">ترسیم نقشه سالن</p>
-      <img src={icon} alt="pen" />
+      {icon && <img src={icon} alt="pen" />}
     </div>
   );
 };
@@ -22,9 +14,7 @@ const CustomToast = ({
 export default CustomToast;
 
 CustomToast.defaultProps = {
-  backgroundColor: "bg-[#489BEC33]",
-  borderColor: "border-[#489BEC]",
-  textColor: "text-[#0555A4]",
-  padding: "p-4",
+  className:
+    "p-4 bg-[#489BEC33] border-[#489BEC] text-[#0555A4] mt-4 border-2 font-sansbold",
   icon: penIcon,
 };

src/components/IconText/index.js

@@ -2,11 +2,11 @@ import React from "react";
 
 import infoIcon from "./info-icon.svg";
 
-const IconText = ({ textColor, textSize }) => {
+const IconText = ({ contentClassname }) => {
   return (
-    <div className="flex flex-row items-start mt-4">
+    <div className="flex flex-row items-start mt-2">
       <img src={infoIcon} alt="info" />
-      <p className={`${textColor} ${textSize} text-justify mr-3 leading-5`}>
+      <p className={`${contentClassname} text-xs text-justify mr-3 leading-5`}>
         ابتدا باید دیوار ها به صورت حدودی ترسیم شوند و تمامی نقاط به یگ دیگر وصل
         شوند تا طرح برای جایگذاری وسایل آماده شود
       </p>
@@ -18,6 +18,5 @@ export default IconText;
 
 IconText.defaultProps = {
   icon: infoIcon,
-  textColor: "text-[#2E2E2E]",
-  textSize: "text-xs",
+  contentClassname: "text-[#2E2E2E]",
 };

src/components/TimeLineComponent/TimeLineItem.js

@@ -1,5 +1,5 @@
 import CircleInCircle from "../CircleInCircle";
-import "./index.scss";
+import ProfilePicNextToEachOther from "../ProfilePicNextToEachOther";
 
 const TimeLineItem = ({ data }) => (
   <div
@@ -64,14 +64,12 @@ const TimeLineItem = ({ data }) => (
         </div>
         {/* profilePic */}
         <div className="flex flex-row items-center">
-          {data.users.slice(0, 3).map((user, i) => (
-            <img
-              key={i}
-              src={user.profilePic}
-              className="w-10"
-              style={{ marginLeft: "-10px" }}
-            />
-          ))}
+          <ProfilePicNextToEachOther
+            holderClass={"-m-1"}
+            circleClass={"w-8"}
+            showRest={false}
+            num={3}
+          />
         </div>
       </div>
       <span className="circle"></span>