Merge pull request #17 from Daddysboi/feature/dispute-transaction

Feature/dispute transaction
Daddysboi · Feb 13, 2024 · b33c3d8 · b33c3d8
2 parents f32a0b3 + a870ed6
commit b33c3d8
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 64 deletions.
diff --git a/src/Components/Dashboard/Home/Home.Dashboard.js b/src/Components/Dashboard/Home/Home.Dashboard.js
@@ -167,6 +167,11 @@ const StyledCardContainerBtm = styled.div`
     padding: 0.5rem 0.5rem 0.5rem 0.5rem;
     height: 8rem;
   }
+
+  @media only screen and (min-width: 769px) and (max-width: 1024px) {
+    padding: 0.5rem 0.5rem 0.5rem 0.5rem;
+    height: 11rem;
+  }
 `;
 
 const StyledTable = styled.table``;
@@ -183,6 +188,7 @@ const StyledTh = styled.th`
 
   // Small screens, laptops
   @media only screen and (min-width: 769px) and (max-width: 1024px) {
+    padding-right: 0.5rem;
   }
 `;
 const StyledTd = styled.td`

diff --git a/src/Components/Dashboard/Transactions.Dashboard.js b/src/Components/Dashboard/Transactions.Dashboard.js
@@ -16,6 +16,19 @@ const StyledContainer = styled.div`
   height: 30rem;
   width: 50rem;
   font-size: 0.7rem;
+  @media only screen and (min-width: 320px) and (max-width: 480px) {
+    display: block;
+    width: 15rem;
+  }
+
+  // iPads, Tablets
+  @media only screen and (min-width: 481px) and (max-width: 768px) {
+    width: 30rem;
+  }
+
+  @media only screen and (min-width: 769px) and (max-width: 1024px) {
+    width: 50vw;
+  }
 `;
 
 const StyledLeft = styled.div`
@@ -34,6 +47,17 @@ const StyledLeftTop = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+  @media only screen and (min-width: 320px) and (max-width: 480px) {
+  }
+
+  // iPads, Tablets
+  @media only screen and (min-width: 481px) and (max-width: 768px) {
+    width: 15rem;
+  }
+
+  @media only screen and (min-width: 769px) and (max-width: 1024px) {
+    width: 18rem;
+  }
 `;
 const StyledSpanCtn = styled.span`
   display: flex;
@@ -65,6 +89,17 @@ const StyledLeftBtm = styled.div`
   box-shadow: 0 0 2px 2px rgba(0.1, 0.1, 0.1, 0.05);
   padding: 1rem;
   flex: 1;
+  @media only screen and (min-width: 320px) and (max-width: 480px) {
+  }
+
+  // iPads, Tablets
+  @media only screen and (min-width: 481px) and (max-width: 768px) {
+    width: 15rem;
+  }
+
+  @media only screen and (min-width: 769px) and (max-width: 1024px) {
+    width: 18rem;
+  }
 `;
 
 const StyledRight = styled.div`
@@ -73,6 +108,18 @@ const StyledRight = styled.div`
   box-shadow: 0 0 2px 2px rgba(0.1, 0.1, 0.1, 0.05);
   padding: 1rem;
   background-color: #fff;
+  @media only screen and (min-width: 320px) and (max-width: 480px) {
+    margin-top: 2rem;
+  }
+
+  // iPads, Tablets
+  @media only screen and (min-width: 481px) and (max-width: 768px) {
+    width: 15rem;
+  }
+
+  @media only screen and (min-width: 769px) and (max-width: 1024px) {
+    width: 15rem;
+  }
 `;
 
 const ChatBox = styled.div`
@@ -120,9 +167,15 @@ const StyledBtnTop = styled.button`
     color: #f26600;
     background-color: #fff;
   }
+  @media only screen and (min-width: 320px) and (max-width: 480px) {
+    font-size: 0.8rem;
+    width: 11rem;
+
+    padding: 0.5rem 0.3rem;
+  }
 `;
 
-const StyledBtnBtn = styled.button`
+const StyledBtn = styled.button`
   border: 1px solid #f26600;
   background-color: #fff;
   color: #f26600;
@@ -135,6 +188,11 @@ const StyledBtnBtn = styled.button`
     border: 1px solid #f26600;
     color: #ffffff;
   }
+  @media only screen and (min-width: 320px) and (max-width: 480px) {
+    font-size: 0.8rem;
+    width: 5rem;
+    padding: 0.5rem 0.3rem;
+  }
 `;
 const Transactions = ({ navigateTo }) => {
   const [state, setState] = useState("");
@@ -249,12 +307,15 @@ const Transactions = ({ navigateTo }) => {
           </StyledTranStatusCtn>
           <StyledSpanCtn style={{ display: "block" }}>
             <div>
-              <StyledBtnBtn onClick={() => handleClick("resolution")}>
+              <StyledBtn
+                onClick={() => handleClick("resolution")}
+                style={{ marginRight: "1rem" }}
+              >
                 Dispute
-              </StyledBtnBtn>{" "}
-              <StyledBtnBtn onClick={() => handleClick("tracker")}>
+              </StyledBtn>{" "}
+              <StyledBtn onClick={() => handleClick("tracker")}>
                 Track Order
-              </StyledBtnBtn>
+              </StyledBtn>
             </div>
             <StyledBtnTop>Mark Transaction as Complete</StyledBtnTop>
           </StyledSpanCtn>

diff --git a/src/Components/ReUseableComponent/EventTimeLine.js b/src/Components/ReUseableComponent/EventTimeLine.js
@@ -3,57 +3,40 @@ import React from "react";
 const EventTimeline = ({ orderAccepted, orderDispatched, orderCompleted }) => {
   const circleRadius = 15;
   const textXOffset = 5; // Offset for text from circle
-  const dummyDateXOffset = 5; // Offset for dummy date from text
+  const dummyDateXOffset = 5; // Offset for date from text
 
   return (
-    <svg height="220" width="300">
+    <svg height="220" width="100%">
       <circle
-        cx="30"
+        cx="10%"
         cy="50"
         r={circleRadius}
         fill={orderAccepted ? "green" : "none"}
       />
       {orderAccepted && (
         <>
-          <text
-            x={40 + circleRadius + textXOffset}
-            y={50}
-            fontSize="15"
-            fill="black"
-          >
+          <text x="20%" y={50} fontSize="15" fill="black">
             Transaction Accepted
           </text>
-          <text
-            x={40 + circleRadius + dummyDateXOffset}
-            y={58}
-            fontSize="8"
-            fill="black"
-          >
+          <text x="25%" y={58} fontSize="8" fill="black">
             Jan 1, 2024
           </text>
-
-          <text
-            x={35 - circleRadius + 2}
-            y={53 + 4}
-            fontSize="20"
-            fontWeight="bold"
-            fill="white"
-          >
+          <text x="7%" y={54 + 4} fontSize="20" fontWeight="bold" fill="white">
             &#10003;
           </text>
         </>
       )}
 
       <line
-        x1="30"
+        x1="10%"
         y1="65"
-        x2="30"
+        x2="10%"
         y2="95"
         stroke={orderDispatched || orderCompleted ? "gray" : "black"}
         strokeWidth="1"
       />
       <circle
-        cx="30"
+        cx="10%"
         cy="110"
         r={circleRadius}
         fill="none"
@@ -62,34 +45,24 @@ const EventTimeline = ({ orderAccepted, orderDispatched, orderCompleted }) => {
       />
       {orderDispatched && (
         <>
-          <text
-            x={40 + circleRadius + textXOffset}
-            y={110}
-            fontSize="15"
-            fill="black"
-          >
+          <text x="20%" y={110} fontSize="15" fill="black">
             Sent for delivery
           </text>
-          <text
-            x={40 + circleRadius + dummyDateXOffset}
-            y={118}
-            fontSize="8"
-            fill="black"
-          >
+          <text x="25%" y={118} fontSize="8" fill="black">
             Jan 15, 2024
           </text>
         </>
       )}
       <line
-        x1="30"
+        x1="10%"
         y1="125"
-        x2="30"
+        x2="10%"
         y2="155"
         stroke={orderCompleted ? "gray" : "black"}
         strokeWidth="1"
       />
       <circle
-        cx="30"
+        cx="10%"
         cy="170"
         r={circleRadius}
         fill="none"
@@ -98,28 +71,13 @@ const EventTimeline = ({ orderAccepted, orderDispatched, orderCompleted }) => {
       />
       {orderCompleted && (
         <>
-          <text
-            x={40 + circleRadius + textXOffset}
-            y={170}
-            fontSize="15"
-            fill="black"
-          >
+          <text x="20%" y={170} fontSize="15" fill="black">
             Transaction Completed
           </text>
-          <text
-            x={40 + circleRadius + dummyDateXOffset}
-            y={178}
-            fontSize="8"
-            fill="black"
-          >
+          <text x="25%" y={178} fontSize="8" fill="black">
             Jan 20, 2024
           </text>
-          <text
-            x={30 - circleRadius + 2}
-            y={170 + 4}
-            fontSize="16"
-            fill="white"
-          >
+          <text x="10%" y={170 + 4} fontSize="16" fill="white">
             &#10003;
           </text>
         </>