update

src/App.js

@@ -63,8 +63,11 @@ import PopupCard from "./components/PopupCard";
 import OutlineInput from "./components/OutlineInput";
 import CancleIcon from "./components/CancleIcon";
 import ButtonNewDesign from "./components/ButtonNewDesign";
-import TimeLine from "./components/TimeLine";
+// import TimeLine from "./components/TimeLine";
+import TimeLineComponent from "./components/TimeLineComponent";
+
 import TitleSubtitle from "./components/TitleSubtitle";
+import TimeLine from "./components/TimeLineComponent/Timeline";
 
 // import Digikala from "./components/Digikala/ImageSlider";
 
@@ -138,6 +141,8 @@ function App() {
         {/* <GridListTable /> */}
         <PopupCard />
         <TimeLine />
+        <TimeLineComponent />
+
         {/* <SidebarDesign2 className="w-1/5" /> */}
       </div>
     </Provider>

src/components/PopupCard/index.js

@@ -37,7 +37,7 @@ const PopupCard = ({ selectedChecklist }) => {
         className="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 w-full md:inset-0 h-modal md:h-full justify-center items-center"
       >
         <div className="relative p-4 w-full h-full md:h-auto">
-          <div className="w-8/12 mx-auto relative bg-white rounded-lg shadow dark:bg-gray-700">
+          <div className="w-7/12 mx-auto relative bg-white rounded-lg shadow dark:bg-gray-700">
             <div className="flex justify-between items-start p-5 rounded-t">
               {/* cancle icon */}
               <CancleIcon backgroundColor={"bg-[#F8F8F8]"} icon={cancleIcon} />
@@ -109,22 +109,14 @@ const PopupCard = ({ selectedChecklist }) => {
                     {selectedChecklist.slice(0, 3).map((item, index) => (
                       <div key={index} className="">
                         <input
-                          // checked={checklist ? true : false}
-                          // onClick={() => setChecklist(checklist + 25)}
-                          // onChange={(e) =>
-                          //   e.target.checked === true
-                          //     ? checklist - 25
-                          //     : checklist + 25
-                          // }
-                          // onClick={() =>
-                          //   setChecklist(
-                          //     checked === true ? checklist - 25 : checklist + 25
-                          //   )
-                          // }
                           disabled={checklist >= 100}
                           type="checkbox"
                           className="form-checkbox text-blue-500"
-                          onClick={() => setChecklist(checklist + 10)}
+                          onClick={(e) =>
+                            e.target.checked
+                              ? setChecklist(checklist + 10)
+                              : setChecklist(checklist - 10)
+                          }
                         />
                         <span className="text-sm mr-2">{item.title}</span>
                       </div>

src/components/TimeLineComponent/TimeLineItem.js

@@ -2,17 +2,17 @@ import "./index.scss";
 
 const TimeLineItem = ({ data }) => (
   <div
-    className="timeline-item flex flex-row mt-5 w-1/2 justify-end"
+    className="timeline-item flex flex-row mt-5 w-1/2 self-end justify-start"
-    style={{ paddingLeft: "30px" }}
+    style={{ paddingRight: "30px" }}
   >
     <div
-      className="timeline-item-content relative bg-white rounded shadow-md flex flex-col items-end border border-[#D6D6D6] "
+      className="timeline-item-content relative bg-white rounded-md shadow-sm flex flex-col items-end border border-[#D6D6D6] "
       style={{ maxWidth: "70%", width: "400px" }}
     >
-      <div className="flex flex-row-reverse gap-x-2 p-3">
+      <div className="flex flex-row-reverse p-3 self-end">
         <time className="text-xs text-[#0A7C9F]">{data.date}</time>
-        <span className="text-xs text-[#0A7C9F]"> - </span>
+        <span className="text-xs text-[#0A7C9F]">-</span>
-        <time className="text-xs text-[#0A7C9F]">{data.time}</time>{" "}
+        <time className="text-xs text-[#0A7C9F] ml-1">{data.time}</time>
       </div>
       {/* <div className="flex flex-row-reverse items-center justify-between w-full">
         <div className="bg-[#D4E6FF] w-10 h-10 rounded-full">
@@ -20,11 +20,12 @@ const TimeLineItem = ({ data }) => (
         </div>
       </div> */}
       <div className="bg-[#F3F3F3] w-full px-4 py-2 flex flex-row items-center">
+        <div className="bg-[#65A9FF] w-1 h-full rounded ml-2"></div>
         <p className="text-right text-sm font-bold text-[#00253A]">
           {data.text}
         </p>
       </div>
-      <p className="text-xs text-justify px-4 text-[#00253A99] text-light leading-6">
+      <p className="mt-2 text-xs text-justify px-4 text-[#00253A99] text-light leading-6">
         {data.content}
       </p>
       <span className="circle"></span>

src/components/TimeLineComponent/Timeline.js

@@ -5,7 +5,7 @@ import TimeLineItem from "./TimeLineItem.js";
 
 const TimeLine = () =>
   timeLineData.length > 0 && (
-    <div className="timeline-container flex flex-col relative bg-white">
+    <div className="timeline-container flex flex-col relative  my-10">
       {timeLineData.slice(0, 3).map((data, idx) => (
         <TimeLineItem data={data} key={idx} />
       ))}

src/components/TimeLineComponent/data.js

@@ -14,16 +14,14 @@ const data = [
     text: "انجام عملیات بازگردانی و ذخیره سازی",
     content: `
     جنگ اول خلیج فارس، جنگی به رهبری آمریکا و با همکاری ائتلافی از ۳۵ کشور مختلف بود که علیه عراق بعثی در واکنش به اشغال کویت توسط عراق انجام گرفت
-پایان جنگ ایران و عراق هم ‌زمان با بروز تشنّج عراق و کویت بود. ارتش عراق در زمان حکومت صدام حسین و حزب بعث عراق در تاریخ ۱۱ مرداد ۱۳۶۹ (۱۹۹۰ م) به کویت حمله و این کشور را اشغال کرد. عراق با این حمله باعث بروز بحرانی بین‌المللی گردید 
+پایان جنگ ای پایان جنگ ایران و عراق پایان جنگ ایران و عراق پایان جنگ ایران و عراق ران و عراق هم ‌`,
-    `,
   },
   {
     date: "1400/12/28",
     time: " 14:30",
     text: "انجام عملیات بازگردانی و ذخیره سازی",
     content: `
-    جنگ اول خلیج فارس، جنگی به رهبری آمریکا و با همکاری ائتلافی از ۳۵ کشور مختلف بود که علیه عراق بعثی در واکنش به اشغال کویت توسط عراق انجام گرفت
+    جنگ اول خلیج فارس، جنگی به رهبری آمریکا و با همکاری ائتلافی از ۳۵ کشور مختلف بود که علیه عراق بعثپایان جنگ ایران و عراق پایان جنگ ایران و عراق پایان جنگ ایران و عراق ی در واکنش به اشغال کویت توسط عراق انجام گرفت
-پایان جنگ ایران و عراق هم ‌زمان با بروز تشنّج عراق و کویت بود. ارتش عراق در زمان حکومت صدام حسین و حزب بعث عراق در تاریخ ۱۱ مرداد ۱۳۶۹ (۱۹۹۰ م) به کویت حمله و این کشور را اشغال کرد. عراق با این حمله باعث بروز بحرانی بین‌المللی گردید 
     `,
   },
 ];

src/components/TimeLineComponent/index.js

@@ -6,16 +6,18 @@ import Timeline from "./Timeline.js";
 
 import search from "./gray-search-icon.svg";
 
-const TimeLine = ({ data }) => {
+const TimeLineComponent = ({ data }) => {
   return (
-    <div className="px-10 py-4 mx-auto ">
+    <div className="px-10 py-4 mx-auto bg-white">
-      <div className="flex flex-row items-center justify-between">
+      <div className="flex flex-row items-start justify-between">
         <TitleSubtitle />
+        <div className="flex-1">
+          <Timeline />
+        </div>
         <SearchBox inputWidth={"100%"} searchIcon={search} borderClr="#ddd" />
       </div>
-      <Timeline />
     </div>
   );
 };
 
-export default TimeLine;
+export default TimeLineComponent;

src/components/TimeLineComponent/index.scss

@@ -9,25 +9,26 @@
   right: calc(50% - 2px);
   width: 4px;
   height: 100%;
+  border-radius: 10px;
 }
 
 .timeline-item:nth-child(odd) {
-  align-self: flex-end;
+  align-self: flex-start;
-  justify-content: flex-start;
+  justify-content: flex-end;
-  padding-right: 30px;
+  padding-right: 0px;
-  padding-left: 0px;
+  padding-left: 30px;
 }
 
 .timeline-item-content::after {
   content: "";
   background-color: #fff;
-  box-shadow: -1px 1px 1px rgba(0, 0, 0.2);
+  box-shadow: 1px -1px 1px #d6d6d6;
   width: 15px;
   height: 15px;
   position: absolute;
   transform: rotate(45deg);
-  left: -7.5px;
+  right: -7.5px;
-  top: calc(50% - 7.5px);
+  top: calc(50% - 5px);
 }
 
 .timeline-item:nth-child(odd) .timeline-item-content {
@@ -36,9 +37,9 @@
 }
 
 .timeline-item:nth-child(odd) .timeline-item-content::after {
-  box-shadow: 1px -1px 1px rgba(0, 0, 0.2);
+  box-shadow: -1px 1px 1px #d6d6d6;
-  left: auto;
+  right: auto;
-  right: -7.5px;
+  left: -7.5px;
 }
 
 .timeline-item-content .circle {
@@ -49,13 +50,13 @@
   height: 20px;
   position: absolute;
   top: calc(50% - 10px);
-  left: -40px;
+  right: -41px;
   z-index: 100;
 }
 
 .timeline-item:nth-child(odd) .timeline-item-content .circle {
-  left: auto;
+  right: auto;
-  right: -40px;
+  left: -41px;
 }
 
 @media only screen and (max-width: 767px) {