sync

frontend/src/components/Beneficiary.jsx

@@ -1,6 +1,5 @@
 import { useState, useEffect } from 'react'
 import "../css/Banner.css";
-import "../css/Beneficiary.css";
 import CardBeneficiary from "./CardBeneficiary.jsx";
 import eth from "../eth/eth.js"
 import {ethers} from "ethers";
@@ -91,12 +90,10 @@ function Beneficiary() {
   }
 
   return (
-    <div className="Beneficiary">
+    <div className="CardContainer">
-      <div className="BeneficiaryContainer">
+     {(will_beneficiary).map((item, index) =>
-       {(will_beneficiary).map((item, index) =>
+      <CardBeneficiary id={item.id} testator={item.testator} beneficiary={item.beneficiary} withdrawDate={item.withdrawDate} amount={item.amount} key={index}/>
-        <CardBeneficiary id={item.id} testator={item.testator} beneficiary={item.beneficiary} withdrawDate={item.withdrawDate} amount={item.amount} key={index}/>
+      )}
-        )}
-      </div>
     </div>
   )
 }

frontend/src/components/CardBeneficiary.jsx

@@ -13,11 +13,13 @@ async function withdraw(){
 }
 
   return (
-    <div className="CardBeneficiary">
+    <div className="Card">
       <div>
         <h1>ID: {props.id}</h1>
         <hr/>
       </div>
+
+      <div className="cardContent">
         <table>
           <thead></thead>
           <tbody>
@@ -39,18 +41,20 @@ async function withdraw(){
             </tr>
           </tbody>
         </table>
-        <br/>
+
         <div className="btnArea">
-          { props.amount > 0  ? 
+          { props.amount > 0  ?
             <div>
             <button className="withdrawBtn" onClick={withdraw} >Withdraw</button>
             </div>
-            : 
+            :
             <button className="withdrawBtn" onClick={withdraw} disabled>Withdraw</button>
           }
-
         </div>
-    </div>
+
+      </div>
+
+  </div>
   )
 }
 

frontend/src/components/CardTestator.jsx

@@ -8,11 +8,13 @@ function CardTestator(props) {
 
 
   return (
-    <div className="CardTestator">
+    <div className="Card">
       <div>
         <h1>ID: {props.id}</h1>
         <hr/>
       </div>
+
+      <div className="cardContent">
         <table>
           <thead></thead>
           <tbody>
@@ -34,12 +36,13 @@ function CardTestator(props) {
             </tr>
           </tbody>
         </table>
-        <br/>
 
         <div className="btnArea">
-        <button className="withdrawBtn">Withdraw</button>
+          <button className="withdrawBtn">Withdraw</button>
-        <button className="extendBtn">Extend...</button>
+          <button className="extendBtn">Extend...</button>
         </div>
+      </div>
+
     </div>
   )
 }

frontend/src/components/Testator.jsx

@@ -1,6 +1,5 @@
 import { useState, useEffect } from 'react'
 import "../css/Banner.css"
-import "../css/Testator.css";
 import CardTestator from "./CardTestator.jsx";
 import eth from "../eth/eth.js"
 import {ethers} from "ethers";
@@ -43,7 +42,7 @@ function Testator() {
           beneficiary: will_testator.beneficiary,
           withdrawDate: withdrawdateNew
         }
-      } 
+      }
       catch(e) {
         console.log("Invalid withdrawDate");
         var myWill = {
@@ -84,12 +83,10 @@ function Testator() {
   }
 
   return (
-    <div className="Testator">
+    <div className="CardContainer">
-      <div className="TestatorContainer">
+     {(will_beneficiary).map((item, index) =>
-       {(will_beneficiary).map((item, index) =>
+      <CardTestator id={item.id} testator={item.testator} beneficiary={item.beneficiary} withdrawDate={item.withdrawDate} amount={item.amount} key={index}/>
-        <CardTestator id={item.id} testator={item.testator} beneficiary={item.beneficiary} withdrawDate={item.withdrawDate} amount={item.amount} key={index}/>
+     )}
-       )}
-      </div>
     </div>
   )
 }

frontend/src/css/Beneficiary.css

@@ -1,10 +0,0 @@
-.Beneficiary {
-  margin-left: 20vh;
-  margin-right: 20vh;
-  margin-top: 5vh;
-}
-
-.BeneficiaryContainer {
-  display: flex;
-  flex-wrap: wrap;
-}

frontend/src/css/Buttons.css

@@ -5,7 +5,7 @@
   font-weight: bold;
   border: none;
   border-radius: 20px;
-  margin-right: 10px;
+  width: 100px;
 }
 
 .withdrawBtn:hover {
@@ -20,11 +20,13 @@
 
 .extendBtn {
   padding: 10px;
+  width: 100px;
   background: #be60e0;
   color: white;
   font-weight: bold;
   border: none;
   border-radius: 20px;
+  margin-top: 10px;
 }
 
 .extendBtn:hover {

frontend/src/css/Card.css

@@ -1,11 +1,21 @@
-.CardBeneficiary {
+.CardContainer {
+  margin-left: 20vh;
+  margin-right: 20vh;
+  margin-top: 5vh;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+
+.Card {
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
   background: #fffdf9;
   color: #595959;
-  width: 250px;
+  width: 900px;
-  height: 300px;
+  height: 210px;
   border-radius: 12px;
   padding-left: 20px;
   padding-right: 20px;
@@ -16,31 +26,22 @@
 -moz-box-shadow: 0px 0px 35px -2px rgba(110,110,110,0.49);
 }
 
+.cardContent {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+  align-items: center;
+  padding-top: 20px;
+}
+
 table td {
   padding-right: 15px;
   padding-bottom: 5px;
 }
 
 .btnArea {
-  //border: 1px solid black;
-  margin-bottom: 25px;
-}
-
-
-.CardTestator {
   display: flex;
   flex-direction: column;
+  //border: 1px solid black;
   justify-content: space-between;
-  background: #fffdf9;
-  color: #595959;
-  width: 250px;
-  height: 300px;
-  border-radius: 12px;
-  padding-left: 20px;
-  padding-right: 20px;
-  padding-top: 20px;
-  margin: 20px;
-  box-shadow: 0px 0px 35px -2px rgba(110,110,110,0.49);
--webkit-box-shadow: 0px 0px 35px -2px rgba(110,110,110,0.49);
--moz-box-shadow: 0px 0px 35px -2px rgba(110,110,110,0.49);
 }

frontend/src/css/Testator.css

@@ -1,10 +0,0 @@
-.Testator {
-  margin-left: 20vh;
-  margin-right: 20vh;
-  margin-top: 5vh;
-}
-
-.TestatorContainer {
-  display: flex;
-  flex-wrap: wrap;
-}

roadmap.md

@@ -1,2 +1,3 @@
 # Roadmap
-- [ ] Die Card soll über die ganze Zeile gehen.
+- [x] Die Card soll über die ganze Zeile gehen.
+- [ ] Button Funktionalität unter Testator implementieren.