Refactor 🎰

src/Pages/Report/Report.jsx

@@ -52,9 +52,12 @@ const Report = () => {
   // const extractedArray = reportsHistory.map((item)=>({ }))
 
   const extractedArray = reportsHistory.map((item, index) => ({
-    Name: <Radio colorScheme='purple' value='1'><Text as={'span'} display={'flex'} gap={2} alignItems={'center'}>
+    Name: <Radio colorScheme='purple' value='1'>
+      <Text as={'span'}  display={'flex'} gap={2} alignItems={'center'} fontSize={'xs'}>
       
-    <Icon as={PiReceipt} boxSize={8} p={1.5} bg={index % 2 === 0 ? "#6311cb14" : "#fff"} rounded={'full'} />{item?.name}</Text></Radio>,
+    <Icon as={PiReceipt} boxSize={8} p={1.5} bg={index % 2 === 0 ? "#6311cb14" : "#fff"} rounded={'full'} />{item?.name}</Text>
+    </Radio>
+    ,
     "Last Update": 
       item?.lastUpdated,
     "Report type": item?.reportType,

src/Pages/Requests/Requests.jsx

@@ -56,7 +56,7 @@ const Requests = () => {
   const extractedArray = requestsTable.map((item, index) => ({
     "Transaction Type": (
       <Checkbox colorScheme="purple">
-        <Text as={"span"} display={"flex"} gap={2} alignItems={"center"}>
+        <Text as={"span"} display={"flex"} fontSize={'sm'} gap={2} alignItems={"center"}>
           <Icon
             as={MdOutlineRamenDining}
             boxSize={8}
@@ -69,27 +69,15 @@ const Requests = () => {
       </Checkbox>
     ),
     "Date": (
-      <Text as={"span"} colorScheme={"#363636"} fontSize={"14px"}>
+      <Text fontSize={'xs'} as={"span"} colorScheme={"#363636"} >
         {item.date}
       </Text>
     ),
     "Wallet Type": (
-      <Button
-        bg="linear-gradient(90deg, #E8E6FF 0%, #F0E6FF 100%)"
-        size="sm"
-        // _hover={{ bg: "linear-gradient(90deg, #F0E6FF 0%, #E8E6FF 100%)" }}
-        _hover={{ bg: "linear-gradient(90deg, #E8E6FF 0%, #F0E6FF 100%)" }}
-      >
-        <Text
-          bg="linear-gradient(90deg, #3725EA 0%, #5E0FCD 100%)"
-          bgClip="text"
-          color="transparent"
-          fontWeight="bold"
-          mb={"0"}
-        >
-          {item.walletType}
-        </Text>
-      </Button>
+
+
+<Tag bg={index % 2 === 0 ? "#E8E6FF" : "#fff"} 
+        size="sm">{item.walletType}</Tag>
     ),
 
     Document: (
@@ -103,22 +91,18 @@ const Requests = () => {
         bg={"transparent"}
         border={"1px solid #CCCCCC"}
         borderRadius="full"
-        size="sm"
+        size="xs"
         gap={"6px"}
         alignItems={"center"}
         _hover={{ bg: "inherit" }}
+        fontSize={'xs'}
       >
         <FaRegFilePdf color="#B43331" />
         Receipt.pdf
       </Button>
     ),
-    "Amount Spent": (
-      <Tag
-        bg={"transparent"}
-      >
-        <TagLabel>{item.amountSpent}</TagLabel>
-      </Tag>
-    ),
+    "Amount Spent": item.amountSpent
+    ,
     Actions: (
       <Box
         display={"flex"}
@@ -133,6 +117,7 @@ const Requests = () => {
           bg={"none"}
           p={0}
           color="gray.600"
+          fontSize={'xs'}
         >
           <AiOutlineEdit fontSize={"19px"} />
         </Button>
@@ -143,6 +128,7 @@ const Requests = () => {
           bg={"none"}
           p={0}
           color="gray.600"
+          fontSize={'xs'}
         >
           <RiDeleteBin5Line fontSize={"18px"} />
         </Button>
@@ -162,7 +148,8 @@ const Requests = () => {
         <Tabs variant="unstyled">
           <TabList
             bg={'#FFFFFF'}
-            borderRadius={'6px'}
+            borderRadius={'md'}
+            boxShadow={'sm'}
           >
             <Tab
               _selected={{ color: "#fff", bg: "#3725EA" }}
@@ -170,8 +157,9 @@ const Requests = () => {
               color="black" bg="transparent"
               py={3}
               px={16}
-              borderLeftRadius={'6px'}
+              borderLeftRadius={'md'}
               fontWeight={'600'}
+              fontSize={'sm'}
             >
               Advance Expense
             </Tab>
@@ -181,6 +169,7 @@ const Requests = () => {
               py={3}
               px={16}
               fontWeight={'600'}
+              fontSize={'sm'}
             >
               Reimbursement
             </Tab>