From b077d29557bc64468c58ed5000ee291794d69dcb Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Tue, 12 Dec 2023 11:18:18 +0100
Subject: [PATCH] change(ui): uxt ui changes

---
 .../UsabilityTesting/TestOverview.tsx         | 24 ++++++++++++++-----
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/frontend/app/components/UsabilityTesting/TestOverview.tsx b/frontend/app/components/UsabilityTesting/TestOverview.tsx
index 83b939772..8bf010ecb 100644
--- a/frontend/app/components/UsabilityTesting/TestOverview.tsx
+++ b/frontend/app/components/UsabilityTesting/TestOverview.tsx
@@ -31,21 +31,33 @@ import ResponsesOverview from './ResponsesOverview';
 import ParticipantOverviewItem from 'Components/UsabilityTesting/ParticipantOverview';
 import { toast } from 'react-toastify';
 
+
+const StatusItem = ({ iconName, color, text, size = "16" }: {
+  iconName: string;
+  color: string;
+  size: string;
+  text: string;
+}) => (
+  <div className='flex items-center'>
+    <Icon name={iconName} color={color} size={size} />
+    <Typography.Text className='ml-2'>
+      {text}
+    </Typography.Text>
+  </div>
+);
+
 const statusItems = [
   {
     value: 'in-progress',
-    label: <div className='flex items-center'><Icon name='record-circle-fill' color='green' size='16' /> <span
-      className='ml-2'>On Going</span></div>
+    label: <StatusItem iconName='record-circle-fill' color='green' text='On Going' />
   },
   {
     value: 'paused',
-    label: <div className='flex items-center'><Icon name='pause-circle-fill' color='orange-dark' size='16' /> <span
-      className='ml-2'>Hold</span></div>
+    label: <StatusItem iconName='pause-circle-fill' color='orange-dark' text='Hold' />
   },
   {
     value: 'closed',
-    label: <div className='flex items-center'><Icon name='check-circle-fill' color='gray-medium' size='16' /> <span
-      className='ml-2'>Close</span></div>
+    label: <StatusItem iconName='check-circle-fill' color='gray-medium' text='Close' />
   }
 ];