update charts😉

src/components/ChartsTabs.jsx

@@ -8,15 +8,16 @@ function ChartsTabs({selectedValue, setSelectedValue}) {
     const checkbox = getRadioProps();
 
     return (
-      <Box as='label'>
+      <Box as='label' px={{base:"8px",md:"0px"}}>
         <input {...input} />
         <Box 
+        
           {...checkbox}
           cursor='pointer'
           borderWidth='1px'
           borderRadius='md'
-          boxShadow='md'
-          fontSize={"sm"}
+          boxShadow='md' 
+          fontSize={{base:"sm",md : "xs"}}
           _checked={{
             bg: '#4023A6',
             color: 'white',
@@ -25,8 +26,9 @@ function ChartsTabs({selectedValue, setSelectedValue}) {
           _focus={{
             boxShadow: 'outline',
           }}
-          px={4}
-          py={1}
+          px={{base:4,md : 2}}
+          // px={4}
+          py={{base: 1,md : 0}}
         >
           {props.children}
         </Box>

src/components/Doughnut/LineChart.jsx

@@ -97,14 +97,14 @@ const LineChart = () => {
   return (
     <>
       <Box
-        display={"flex"}
+        display={{base :"block",md : "flex"}}
         justifyContent={"space-between"}
         alignItems={"center"}
         mb={4}
         // px={{base : "20px"md, : ""}}
       >
-        <Heading fontSize={"md"} fontWeight={500}>Transaction History</Heading>
-        <ChartsTabs setSelectedValue={setSelectedValue} selectedValue={selectedValue} />
+        <Heading fontSize={"md"} fontWeight={500} mb={{base:"8px",md:"0px"}} px={{base:"8px",md:"0px"}}>Transaction History</Heading>
+        <ChartsTabs  setSelectedValue={setSelectedValue} selectedValue={selectedValue} />
       </Box>
       <Line data={data} options={options} />
     </>

src/pages/Home.jsx

@@ -20,6 +20,7 @@ import LatestTransactions from "../components/LatestTransactions/LatestTransacti
 import { Link, useNavigate } from "react-router-dom";
 import Pagination from "../components/Pagination";
 import bannerImage from "../assets/images/bannerImg.png";
+import bannerImageMobile from "../assets/images/bannerImgmobile.png";
 import { BiSearchAlt } from "react-icons/bi";
 
 const Home = () => {
@@ -31,7 +32,7 @@ const Home = () => {
   return (
     <Box 
       bg={colorMode === "light" ? "#fff" : "none"}
-      backgroundImage={colorMode !== "light" ? `url(${bannerImage})` : "none"}
+      backgroundImage={{base:colorMode !== "light" ? `url(${bannerImageMobile})` : "none",md:colorMode !== "light" ? `url(${bannerImage})` : "none"}}
       backgroundSize="contain"
       backgroundRepeat="no-repeat">
       <Box>