CFE-26 styling tabs and active

src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/callTabsList/CallTabDetails.jsx

@@ -11,19 +11,19 @@ const CallTabDetails = ({tab}) => {
     }
     return (
         <Stack direction="row" justifyContent="center" alignItems="center" spacing={3}>
-            <VisibilityIcon color="red"/>
-            <Stack>
-                <Typography variant="h6">{tab.phone_number}</Typography>
+            <VisibilityIcon />
+            <Stack alignItems={"start"}>
+                <Typography>{tab.phone_number}</Typography>
                 {
                     error ? (
-                        <Typography>errror</Typography>
+                        <Typography variant="body1" color="error">errror</Typography>
                         ):
                         (
                             isLoading ? (
                                     <Skeleton variant="text" animation="wave"/>
                                 )
                                 :(
-                                    <Typography color="gray">5 روز پیش</Typography>
+                                    <Typography variant="caption" color="gray">5 روز پیش</Typography> //dateChange(data.date)
                                 )
                         )
                 }

src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/callTabsList/CallTabLabel.jsx

@@ -4,18 +4,23 @@ import useAnswers from "@/lib/callWidget/hooks/useAnswers";
 import CallTabDetails
     from "@/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/callTabsList/CallTabDetails";
 
-const CallTabLabel = ({tab}) => {
-    const {closeAnswerTab} = useAnswers()
+const CallTabLabel = ({tab, index}) => {
+    const {closeAnswerTab, activeTab} = useAnswers()
     const handleCloseClick = (id) => {
         closeAnswerTab(id)
     };
 
     return (
-        <Stack sx={{width: '100%'}} direction={'row'} alignItems={'center'} justifyContent={'space-between'}>
-            <CallTabDetails tab={tab} />
+        <Stack sx={{
+            width: '100%',
+            px: 1,
+            borderRight: activeTab === index ? 0 : activeTab - 1 === index ? 0 : 1,
+            borderRightColor: 'divider'
+        }} direction={'row'} alignItems={'center'} justifyContent={'space-between'}>
+            <CallTabDetails tab={tab}/>
             <Zoom in={tab.active}>
-                <IconButton onClick={() => handleCloseClick(tab.id)}>
-                    <CloseIcon/>
+                <IconButton size="small" onClick={() => handleCloseClick(tab.id)}>
+                    <CloseIcon fontSize="small"/>
                 </IconButton>
             </Zoom>
         </Stack>

src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/callTabsList/__test__/CallTabDetails.test.js

@@ -15,7 +15,7 @@ describe("Call Tab Details from Call Tan List", ()=>{
                     <CallTabDetails tab={tab}/>
                 </MockAppWithProviders>
             )
-            const phoneNumberElement = screen.getByRole("heading", {level : 6})
+            const phoneNumberElement = screen.getByText("09134849737")
             await  waitFor(()=>{
                 expect(phoneNumberElement).toHaveTextContent("09134849737")
             })

src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/callTabsList/index.jsx

@@ -14,10 +14,15 @@ const CallTabsList = () => {
             <Tabs
                 value={activeTab}
                 onChange={handleChange}
-                variant={'fullWidth'}
+                variant="scrollable"
+                scrollButtons="auto"
+                sx={{background: "#e0e0e0"}}
             >
-                {answersList.map((answer) => (
-                    <Tab component={'div'} sx={{py: 0.5, pr: 0, border : 1}} label={<CallTabLabel tab={answer}/>} key={answer.id}/>
+                {answersList.map((answer, index) => (
+                    <Tab component={'div'} sx={{
+                        width: 350, p: 0, py: 0.5, background: answer.active ? "#fff" : null,
+                        borderTopRightRadius: answer.active ? "16px" : 0, borderTopLeftRadius: answer.active ? "16px" : 0
+                    }} label={<CallTabLabel index={index} tab={answer}/>} key={answer.id}/>
                 ))}
             </Tabs>
         </Box>

src/lib/callWidget/contexts/answers.jsx

@@ -20,14 +20,30 @@ export const AnswersProvider = ({children}) => {
     const [state, dispatch] = useReducer(reducer, [{
         id:45,
         phone_number:'09120630676',
-        active:true
+        active:false
     }, {
         id:50,
         phone_number:'09120630675',
-        active:true
+        active:false
     }, {
         id:55,
         phone_number:'09120630672',
+        active:false
+    }, {
+        id:60,
+        phone_number:'09120630672',
+        active:false
+    }, {
+        id:65,
+        phone_number:'09120630672',
+        active:false
+    }, {
+        id:70,
+        phone_number:'09120630672',
+        active:false
+    }, {
+        id:75,
+        phone_number:'09120630672',
         active:true
     }]);