Merge branch 'main' of http://git.wdipl.com/Siddhesh.More/rubix-explore

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,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} ml={{base:2,md:0}}>
+      <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={{base : 1,md : 1.5}}
+        rounded={"8px"}
+        justifyContent={{ base: "flex-end" }}
+        gap={{ base: 0, md: 1 }}
+        {...group}
+        ps={2}
+      >
         {options.map((value) => {
           const radio = getRadioProps({ value });
           return (

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: {
@@ -165,6 +174,16 @@ const LineChart = () => {
             return value / 1000 + "k";
           },
         },
+        grid: {
+          border:false,
+          borderColor: 'transparent' // Remove the border on the Y-axis
+        },
+      },
+      x: {
+        grid: {
+          border:false,
+          borderColor: 'transparent' // Optionally remove the border on the X-axis
+        },
       },
     },
   };
@@ -188,7 +207,7 @@ const LineChart = () => {
         >
           Transaction History
         </Heading>
-        <ChartsTabs
+        <ChartsTabs 
           setSelectedValue={setSelectedValue}
           selectedValue={selectedValue}
           days={dayjs().daysInMonth()}

src/components/LatestTransactions/LatestTransactions.jsx

@@ -344,7 +344,7 @@ const LatestTransactions = () => {
                 <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'}
 

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'}
 

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