From 2cf3f29940bab7dcb7fa9c905d435891b37d7ebd Mon Sep 17 00:00:00 2001
From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com>
Date: Thu, 5 Sep 2024 17:21:47 +0530
Subject: [PATCH] =?UTF-8?q?card=F0=9F=92=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Components/HeaderMain.jsx   |  2 +-
 src/Components/MiniHeader.jsx   |  3 ++-
 src/Pages/Expenses/Expenses.jsx | 26 ++++++++++++++------------
 3 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/Components/HeaderMain.jsx b/src/Components/HeaderMain.jsx
index c8e77e7..18143b4 100644
--- a/src/Components/HeaderMain.jsx
+++ b/src/Components/HeaderMain.jsx
@@ -49,7 +49,7 @@ const HeaderMain = ({
   return (
     <Box
       w={"100%"}
-      h={{base:"8%", lg:"6%"}}
+      h={{base:"8%", lg:"8%"}}
       position={"relative"}
       className={` pt-2 pb-2  fw-400 border-bottom d-flex ${
         slideDirecttion ? " ps-2" : ""
diff --git a/src/Components/MiniHeader.jsx b/src/Components/MiniHeader.jsx
index 3f97e27..af755b2 100644
--- a/src/Components/MiniHeader.jsx
+++ b/src/Components/MiniHeader.jsx
@@ -7,10 +7,11 @@ const MiniHeader = ({ title, subTitle, backButton }) => {
   const navigate = useNavigate();
   const [firstPart, secondPart] = title.split(/ (.+)/);
 
-  return (
+  return ( 
     <HStack gap={3} mb={4}>
       {backButton && (
         <Icon
+         boxShadow='md'
           cursor={"pointer"}
           onClick={() => navigate(-1)}
           as={ArrowBackIcon}
diff --git a/src/Pages/Expenses/Expenses.jsx b/src/Pages/Expenses/Expenses.jsx
index fff7957..0ca5306 100644
--- a/src/Pages/Expenses/Expenses.jsx
+++ b/src/Pages/Expenses/Expenses.jsx
@@ -1,9 +1,10 @@
 import { Box, Button, HStack, Image, Text, VStack } from "@chakra-ui/react";
 import React from "react";
-import MiniHeader from "../Components/MiniHeader";
-import logo_card from "../assets/logo_card.svg";
-import TRANSCORP_LOGO from "../assets/TRANSCORP_LOGO.svg";
-import RuPay from '../assets/rupayImg.png'
+// import MiniHeader from "../Components/MiniHeader";
+import logo_card from "../../assets/logo_card.svg";
+import TRANSCORP_LOGO from "../../assets/TRANSCORP_LOGO.svg";
+import RuPay from '../../assets/rupayImg.png'
+import MiniHeader from "../../Components/MiniHeader";
 
 const Expenses = () => {
   return (
@@ -13,22 +14,22 @@ const Expenses = () => {
         subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
       />
 
-      <HStack justifyContent={"start"} w={"100%"} h={"500px"} gap={4}>
+      <HStack justifyContent={"start"} w={"100%"} h={"65%"} gap={4}>
         <VStack
           // bg="linear-gradient(230deg, #6311CB, #481566, #851d70, #a71c71, #df2274)"
           bg="linear-gradient(230deg, purple, #390A74, #390A74, #390A74, #390A74)"
           alignItems={"start"}
           justifyContent={"space-between"}
           height={"100%"}
-          w={320}
+          w={240}
           rounded={"xl"}
           p={4}
           boxShadow={"md"}
           position={"relative"}
         >
           <Box width={"100%"} display={"flex"} justifyContent={"space-between"}>
-            <Image w={28} src={logo_card} />
-            <Image w={28} src={TRANSCORP_LOGO} me={0.5} />
+            <Image w={20} src={logo_card} />
+            <Image w={24} src={TRANSCORP_LOGO} me={0.5} />
           </Box>
 
           <VStack
@@ -37,7 +38,7 @@ const Expenses = () => {
             alignItems={"start"}
             justifyContent={"space-between"}
           >
-            <Text color={"#fff"}>1234 5678 1234 5678</Text>
+            <Text color={"#fff"} fontSize={"sm"}>1234 5678 1234 5678</Text>
             <Button
               size={"sm"}
               rounded={"full"}
@@ -48,6 +49,7 @@ const Expenses = () => {
               _hover={{ opacity: 0.8 }}
               _active={{ opacity: 1 }}
               color={"#fff"}
+              fontWeight={500}
             >
               Tap to view details
             </Button>
@@ -55,15 +57,15 @@ const Expenses = () => {
 
           <Box width={"100%"} display={"flex"} justifyContent={"end"}>
             {/* <Image w={32} src={logo_card} /> */}
-            <Image w={28} src={RuPay} me={0.5} />
+            <Image w={24} src={RuPay} me={0.5} />
           </Box>
 
           <Text 
           position={"absolute"} 
-          top={28} 
+          top={24} 
           right={-6}
           transform="rotate(270deg)"
-          fontSize={'sm'}
+          fontSize={'xs'}
           color={"#9E9E9E"}
 
           >