From 015ad4a88c5adbdaf3f9337dcfe0c1da9c4cf77d Mon Sep 17 00:00:00 2001
From: June1372 <justine.sauquet@polymtl.ca>
Date: Sun, 5 Feb 2023 08:07:07 -0500
Subject: [PATCH] icone et trucs regle
---
.../controllers/TransactionComponant.tsx | 28 ++++++++++++++-----
assets/react/controllers/TransactionList.tsx | 4 +--
assets/styles/transaction.css | 9 ++++++
3 files changed, 32 insertions(+), 9 deletions(-)
diff --git a/assets/react/controllers/TransactionComponant.tsx b/assets/react/controllers/TransactionComponant.tsx
index 2c44b0d..601cb6b 100644
--- a/assets/react/controllers/TransactionComponant.tsx
+++ b/assets/react/controllers/TransactionComponant.tsx
@@ -82,8 +82,20 @@ export default function TransactionComponant(props: {
<div>
<strong>Categorie : </strong>
<label htmlFor="category"></label>
+ <datalist id="category">
+ <option>Restaurant" </option>
+ <option>Bar</option>
+ <option>Store</option>
+ <option>Grocerie</option>
+ <option>Sport</option>
+ <option>Transport</option>
+ <option>Subscription</option>
+ <option>Auto-detect</option>
+ <option>Other</option>
+ </datalist>
<input
- type="text"
+ type="select"
+ list="category"
value={category}
onChange={(e) => setCategory(e.target.value)}
placeholder="category"
@@ -99,7 +111,8 @@ export default function TransactionComponant(props: {
onChange={(e) => setAmount(Number(e.target.value))}
placeholder="amount"
required
- /> <strong> $</strong>
+ />{" "}
+ <strong> $</strong>
</div>
<div>
<strong>Date : </strong>
@@ -120,8 +133,9 @@ export default function TransactionComponant(props: {
onChange={(e) => setExpense(!e.target.value)}
/>
</div>
- <div><strong>Valider : </strong>
- <img
+ <div>
+ <strong>Valider : </strong>
+ <img id="icone"
src="img/vert.png"
alt="valider"
onClick={() => persist()}
@@ -129,7 +143,7 @@ export default function TransactionComponant(props: {
</div>
<div>
<strong>Supprimer : </strong>
- <img
+ <img id="icone"
src="img/download.png"
alt="supprimer"
onClick={() => props.deleteTransaction(props.index)}
@@ -169,7 +183,7 @@ export default function TransactionComponant(props: {
</div>
<div>
<strong>Modifier : </strong>
- <img
+ <img id="icone"
src="img/263087.png"
alt="peinceau"
onClick={() => edit()}
@@ -177,7 +191,7 @@ export default function TransactionComponant(props: {
</div>
<div>
<strong>Supprimer : </strong>
- <img
+ <img id="icone"
src="img/download.png"
alt="peinceau"
onClick={() => props.deleteTransaction(props.index)}
diff --git a/assets/react/controllers/TransactionList.tsx b/assets/react/controllers/TransactionList.tsx
index 3ed39fd..3ab3b0f 100644
--- a/assets/react/controllers/TransactionList.tsx
+++ b/assets/react/controllers/TransactionList.tsx
@@ -51,9 +51,9 @@ export default function TransactionList() {
<div>
<h1>
Mes transactions
- <img
+ <strong id="btn-ajouter"> Ajouter : </strong><img id="icone"
src="img/plus.png"
- alt="ajouter"
+ alt="ajouter"
onClick={() => {
setTransactions([{expense: true, category: 'auto-detect', version: 0}, ...transactions]);
}}
diff --git a/assets/styles/transaction.css b/assets/styles/transaction.css
index 21d1920..ed0bbc0 100644
--- a/assets/styles/transaction.css
+++ b/assets/styles/transaction.css
@@ -33,6 +33,12 @@
font-size: 30px;
}
+ #btn-ajouter {
+ font-size: 20px;
+ text-align: right;
+ justify-content: space-between;
+ }
+
.location {
color: blue;
}
@@ -56,6 +62,9 @@
img {
width: 25px;
height: 25px;
+ }
+
+ #icone {
cursor: pointer;
border: 1px black solid;
}
--
GitLab