From 6298b9dc601462280bc80477b12e65f8094d9451 Mon Sep 17 00:00:00 2001
From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com>
Date: Tue, 22 Oct 2024 11:22:30 +0530
Subject: [PATCH 1/2] working charts

---
 dev-dist/sw.js                        |  2 +-
 src/components/ChartsTabs.jsx         | 32 ++++++++++++---------------
 src/components/Doughnut/LineChart.jsx | 12 +++++++++-
 3 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/dev-dist/sw.js b/dev-dist/sw.js
index 15aeba9..092a0e4 100644
--- a/dev-dist/sw.js
+++ b/dev-dist/sw.js
@@ -82,7 +82,7 @@ define(['./workbox-b5f7729d'], (function (workbox) { 'use strict';
     "revision": "3ca0b8505b4bec776b69afdba2768812"
   }, {
     "url": "index.html",
-    "revision": "0.0iof9eg3rjg"
+    "revision": "0.ts550h453d"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {
diff --git a/src/components/ChartsTabs.jsx b/src/components/ChartsTabs.jsx
index e2c3c8f..28c5a2d 100644
--- a/src/components/ChartsTabs.jsx
+++ b/src/components/ChartsTabs.jsx
@@ -61,34 +61,30 @@ function ChartsTabs({ selectedValue, setSelectedValue, days }) {
   const group = getRootProps();
 
   return (
-    <HStack alignItems={"center"}   gap={1}>
-      
-
-
-      <HStack
-        bg={colorMode === 'light'?'#fff':"#F8F8FF26"}
-        p={1.5}
-        rounded={"12px"}
-        justifyContent={{ base: "flex-end" }}
-        gap={{ base: 0, md: 1 }}
-        {...group}
-        ps={3}
-      >
-        <Text
+    <HStack alignItems={"center"} gap={1}>
+      <Text
         fontWeight={600}
         display={"flex"}
         alignItems={"center"}
         fontSize={{ base: "xs", md: "xs" }}
-        color={colorMode === 'light'?'gray.400':"#fff"}
-        
+        color={colorMode === 'light'?'gray.400':"#fff"}       
       >
         Last 
-                {/* <Icon
+        <Icon
           as={FiChevronsRight}
           ms={1}
           color={colorMode === "light" ? "gray.400" : "#fff"}
-        /> */}
+        />
       </Text>
+      <HStack
+        bg={colorMode === 'light'?'#fff':"#F8F8FF26"}
+        p={1.5}
+        rounded={"8px"}
+        justifyContent={{ base: "flex-end" }}
+        gap={{ base: 0, md: 1 }}
+        {...group}
+        ps={2}
+      >
         {options.map((value) => {
           const radio = getRadioProps({ value });
           return (
diff --git a/src/components/Doughnut/LineChart.jsx b/src/components/Doughnut/LineChart.jsx
index c57a9fe..e521adc 100644
--- a/src/components/Doughnut/LineChart.jsx
+++ b/src/components/Doughnut/LineChart.jsx
@@ -142,6 +142,16 @@ const LineChart = () => {
             return value / 1000 + "k";
           },
         },
+        grid: {
+          drawBorder: false,
+          borderColor: 'transparent' // Remove the border on the Y-axis
+        },
+      },
+      x: {
+        grid: {
+          drawBorder: false,
+          borderColor: 'transparent' // Optionally remove the border on the X-axis
+        },
       },
     },
   };
@@ -164,7 +174,7 @@ const LineChart = () => {
         >
           Transaction History
         </Heading>
-        <ChartsTabs
+        <ChartsTabs 
           setSelectedValue={setSelectedValue}
           selectedValue={selectedValue}
           days={dayjs().daysInMonth()}

From 73232d0558bdfdc11f64561fcc0ef7501a69eb0a Mon Sep 17 00:00:00 2001
From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com>
Date: Tue, 22 Oct 2024 13:33:25 +0530
Subject: [PATCH 2/2] =?UTF-8?q?update=E2=9C=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Theme/Theme.js                            | 14 ++++++-
 src/components/ChartsTabs.jsx                 |  8 ++--
 src/components/Doughnut/LineChart.jsx         | 13 ++++++-
 .../LatestTransactions/LatestTransactions.jsx | 39 +++++++++++--------
 src/pages/MainNet.jsx                         |  3 +-
 src/pages/Transaction/TransactionDetails.jsx  |  2 +-
 6 files changed, 53 insertions(+), 26 deletions(-)

diff --git a/src/Theme/Theme.js b/src/Theme/Theme.js
index 153f3d8..0267111 100644
--- a/src/Theme/Theme.js
+++ b/src/Theme/Theme.js
@@ -53,7 +53,19 @@ const customTheme = extendTheme({
       700: "#666666", // Dark gray
       800: "#4d4d4d", // Very dark gray
       900: "#333333", // Almost black
-    }
+    },
+    whiteScheme: {
+      50: "#ffffff",
+      100: "#ffffff",
+      200: "#ffffff",
+      300: "#ffffff",
+      400: "#ffffff",
+      500: "#ffffff",
+      600: "#ffffff",
+      700: "#ffffff",
+      800: "#ffffff",
+      900: "#ffffff",
+    },
     
   },
   components: {
diff --git a/src/components/ChartsTabs.jsx b/src/components/ChartsTabs.jsx
index 28c5a2d..4fe6edf 100644
--- a/src/components/ChartsTabs.jsx
+++ b/src/components/ChartsTabs.jsx
@@ -40,8 +40,8 @@ function ChartsTabs({ selectedValue, setSelectedValue, days }) {
             boxShadow: "outline",
           }}
           fontWeight={500}
-          py={1}
-          px={2}
+          py={{base:"3px",md: 1 }}
+          px={{base:"6px",md: 2 }}
         >
           {props.children}
         </Box>
@@ -61,7 +61,7 @@ function ChartsTabs({ selectedValue, setSelectedValue, days }) {
   const group = getRootProps();
 
   return (
-    <HStack alignItems={"center"} gap={1}>
+    <HStack alignItems={"center"} gap={1} ml={{base:2,md:0}}>
       <Text
         fontWeight={600}
         display={"flex"}
@@ -78,7 +78,7 @@ function ChartsTabs({ selectedValue, setSelectedValue, days }) {
       </Text>
       <HStack
         bg={colorMode === 'light'?'#fff':"#F8F8FF26"}
-        p={1.5}
+        p={{base : 1,md : 1.5}}
         rounded={"8px"}
         justifyContent={{ base: "flex-end" }}
         gap={{ base: 0, md: 1 }}
diff --git a/src/components/Doughnut/LineChart.jsx b/src/components/Doughnut/LineChart.jsx
index 62be87b..8bc68ee 100644
--- a/src/components/Doughnut/LineChart.jsx
+++ b/src/components/Doughnut/LineChart.jsx
@@ -155,6 +155,15 @@ const LineChart = () => {
         titleColor: "#4B4B4B",
         bodyColor: "#4B4B4B",
         displayColors: false,
+        padding: 12,
+        bodyFont: {
+          size: 14, // Increase the font size here
+          lineHeight: 1.3,
+          boxShadow:"3px 3px 3px #000"
+        },
+        boxShadow: "0px 4px 12px rgba(0, 0, 0, 0.1)", // Box shadow CSS
+        borderColor: "#ccc", // Optional: adding border to complement the shadow
+        borderWidth: 1,
       },
     },
     scales: {
@@ -166,13 +175,13 @@ const LineChart = () => {
           },
         },
         grid: {
-          drawBorder: false,
+          border:false,
           borderColor: 'transparent' // Remove the border on the Y-axis
         },
       },
       x: {
         grid: {
-          drawBorder: false,
+          border:false,
           borderColor: 'transparent' // Optionally remove the border on the X-axis
         },
       },
diff --git a/src/components/LatestTransactions/LatestTransactions.jsx b/src/components/LatestTransactions/LatestTransactions.jsx
index 552feb0..4fcabca 100644
--- a/src/components/LatestTransactions/LatestTransactions.jsx
+++ b/src/components/LatestTransactions/LatestTransactions.jsx
@@ -50,8 +50,7 @@ const LatestTransactions = () => {
   const [pageSize, setPageSize] = useState(10); // Number of items per page
   const [totalItems, setTotalItems] = useState(null); // Total items in the dataset
   const [lastRefreshedTime, setLastRefreshedTime] = useState(new Date()); // Store the last refresh time
-  const [relativeRefreshTime, setRelativeRefreshTime] = useState("Just now"); 
-
+  const [relativeRefreshTime, setRelativeRefreshTime] = useState("Just now");
 
   const {
     data: transCount,
@@ -157,18 +156,23 @@ const LatestTransactions = () => {
           position={"absolute"}
           right={0}
           m={1.5}
-          display={'flex'}
-          alignItems={'center'}
+          display={"flex"}
+          alignItems={"center"}
           gap={2}
           onClick={handleRefreshClick} // Trigger the rotation when clicked
         >
-          <Text as={'span'} fontSize={'xs'} color={colorMode==="light"?'#fff':"#ccc"}>Last refresh {relativeRefreshTime} </Text>
+          <Text
+            as={"span"}
+            fontSize={"xs"}
+            color={colorMode === "light" ? "#fff" : "#ccc"}
+          >
+            Last refresh {relativeRefreshTime}{" "}
+          </Text>
           <Icon
-
-bg={colorMode==="light"?'#fff':"#434147"}
-p={1.5}
-boxSize={7}
-rounded={"full"}
+            bg={colorMode === "light" ? "#fff" : "#434147"}
+            p={1.5}
+            boxSize={7}
+            rounded={"full"}
             as={HiOutlineRefresh}
             animation={
               isRotating || isTransAllLoading
@@ -181,7 +185,11 @@ rounded={"full"}
       <Box
         roundedBottom={"lg"}
         overflow={"hidden"}
-        boxShadow={colorMode === "light" ? "rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;" :"none"}
+        boxShadow={
+          colorMode === "light"
+            ? "rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;"
+            : "none"
+        }
       >
         {transAll?.data?.items?.map(
           (
@@ -336,7 +344,7 @@ rounded={"full"}
                 <HStack
                   flexDirection={{ base: "column", md: "row" }}
                   justifyContent={{ base: "", md: "flex-start" }}
-                  gap={44}
+                  gap={{base:4,md:44}}
                   alignItems={{ base: "flex-start", md: "" }}
                   // flexWrap={'wrap'}
 
@@ -423,14 +431,11 @@ rounded={"full"}
                       </Text>
                     </HStack>
 
-                    
-
-                    <HStack w={"100%"} justifyContent={'flex-start'}>
+                    <HStack w={"100%"} justifyContent={"flex-start"}>
                       <Text
                         color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
                       >
-                        {subNetworkId === "MainNet" ? "Main net" : "Subnet ID"}
-                        :
+                        {subNetworkId === "MainNet" ? "Main net" : "Subnet ID"}:
                       </Text>
                       <Text
                         color={colorMode === "light" ? "#230A79" : "#B09AFF"}
diff --git a/src/pages/MainNet.jsx b/src/pages/MainNet.jsx
index e5b50db..70eaea2 100644
--- a/src/pages/MainNet.jsx
+++ b/src/pages/MainNet.jsx
@@ -317,6 +317,7 @@ rounded={"full"}
                         color={colorMode === "light" ? "#230A79" : "#B09AFF"}
                         textDecoration={"underline"}
                         fontSize={{ base: "xs", md: "sm" }}
+                        isTruncated
                       >
                         <Text
                           cursor={"pointer"}
@@ -346,7 +347,7 @@ rounded={"full"}
                     <HStack
                       flexDirection={{ base: "column", md: "row" }}
                       justifyContent={{ base: "", md: "flex-start" }}
-                      gap={44}
+                      gap={{base:4,md:44}}
                       alignItems={{ base: "flex-start", md: "" }}
                       // flexWrap={'wrap'}
 
diff --git a/src/pages/Transaction/TransactionDetails.jsx b/src/pages/Transaction/TransactionDetails.jsx
index 5d7e24e..1d1f98f 100644
--- a/src/pages/Transaction/TransactionDetails.jsx
+++ b/src/pages/Transaction/TransactionDetails.jsx
@@ -331,7 +331,7 @@ const TransactionDetails = () => {
             mb={0}
             rounded={6}
           >
-            <HStack fontSize={"sm"} gap={"8rem"} mb={2}>
+            <HStack fontSize={"sm"} gap={{base:"4rem",md:"8rem"}} mb={2}>
               {data?.data?.amount && <Box>
                 <Text>Amount</Text>
                 <Text