LFFE-22 time line color

src/components/first/LoanDescription/TimeLineDetails.jsx

@@ -12,8 +12,9 @@ import FastfoodIcon from '@mui/icons-material/Fastfood';
 import LaptopMacIcon from '@mui/icons-material/LaptopMac';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import CallMadeIcon from '@mui/icons-material/CallMade';
-import {Typography} from "@mui/material";
+import {CircularProgress, Typography} from "@mui/material";
 import HowToRegIcon from '@mui/icons-material/HowToReg';
+import DoneIcon from '@mui/icons-material/Done';
 import HotelIcon from '@mui/icons-material/Hotel';
 
 const TimeLineDetails = () => {
@@ -30,10 +31,10 @@ const TimeLineDetails = () => {
                     10 دی
                 </TimelineOppositeContent>
                 <TimelineSeparator>
-                    <TimelineDot>
-                        <HowToRegIcon />
+                    <TimelineDot color={'success'}>
+                        <DoneIcon/>
                     </TimelineDot>
-                    <TimelineConnector />
+                    <TimelineConnector sx={{ backgroundColor: 'green' }} />
                 </TimelineSeparator>
                 <TimelineContent sx={{ py: '12px', px: 2 }}>
                     <Typography variant="h6" component="span">
@@ -51,11 +52,11 @@ const TimeLineDetails = () => {
                     10 بهمن
                 </TimelineOppositeContent>
                 <TimelineSeparator>
-                    <TimelineConnector />
+                    <TimelineConnector sx={{ backgroundColor: 'green' }} />
                     <TimelineDot color="primary">
-                        <CheckCircleIcon />
+                        <CircularProgress color={'inherit'} size={40} />
                     </TimelineDot>
-                    <TimelineConnector sx={{ backgroundColor: 'secondary.main' }} />
+                    <TimelineConnector />
                 </TimelineSeparator>
                 <TimelineContent sx={{ py: '12px', px: 2 }}>
                     <Typography variant="h6">
@@ -73,8 +74,8 @@ const TimeLineDetails = () => {
                 10 اسفند
             </TimelineOppositeContent>
                 <TimelineSeparator>
-                    <TimelineConnector sx={{ backgroundColor: 'secondary.main' }} />
-                    <TimelineDot color="secondary">
+                    <TimelineConnector />
+                    <TimelineDot>
                         <CallMadeIcon />
                     </TimelineDot>
                 </TimelineSeparator>