design updates to tx list

src/components/AccountForm/FormThirdStep/styles.module.css

@@ -18,8 +18,8 @@ p {
 .form_third_step_label {
   font-family: "Poppins", sans-serif;
   font-weight: 400;
-  font-size: 16px;
-  margin: 0;
+  font-size: 14px;
+  margin-bottom: 10px;
   text-align: center;
 }
 

src/components/AccountForm/TransactionList/TransactionListItemComponent.jsx

@@ -26,80 +26,56 @@ const TransactionListItemComponent = ({
     }
   }, [isActiveItem]);
 
-  if(incomeState){
-    // render the item if it is flagged as income
 
-    return (
-      <div key={id} 
-        data-incomestate={incomeState} 
-        className={itemStyles} 
-        onClick={onClick}
-        >
-        <div className={styles.avatar_container}>
-          <img src={img_url} className={styles.avatar_img} />
-          <div className={styles.inner_container}>
-            <p className={styles.avatar_userName}>{tokenLabel}</p>
-
-            <p className={styles.income_received}>    
-              <span>
-                {" "}
-                <img
-                  style={{ width: "10px" }}
-                  src="./img/inBadge.png"
-                  alt="income"
-                />
-              </span>{" "}
-              Income
-            </p>
-
-          </div>
-        </div>
-        <div>
-          <p className={styles.crypto}>{crypto}</p>
-          <p className={styles.currency}>{currency}</p>
+  function RenderIncomeSwitcher({isIncome=true}) {
+    if (isIncome) {
+      return (
+        <div className={styles.income_switcher}>
+          <img style={{ width: "20px" }} src="./img/money-bag.png" alt="income" />
+          <br/>income
         </div>
+      );
+    }
+
+    return (
+      <div className={styles.income_switcher}>
+        <img style={{ width: "20px" }} src="./img/x.png" alt="not income" />
+        <br/>not income
       </div>
     );
-  } else if(tokenLabel) { 
-    // if it has a token label then it is an active asset.
-    // console.log("tokenLabel", tokenLabel);
+  }
 
     return (
       <div key={id} 
         data-incomestate={incomeState} 
         className={itemStyles} 
         onClick={onClick}
         >
+        <RenderIncomeSwitcher isIncome={incomeState} />
         <div className={styles.avatar_container}>
           <img src={img_url} className={styles.avatar_img} />
           <div className={styles.inner_container}>
-            <p className={styles.avatar_userName}>{tokenLabel}</p>
-
             <p className={styles.income_received}>    
               <span>
                 {" "}
                 <img
                   style={{ width: "10px" }}
-                  src="./img/close2.svg"
-                  alt="not income"
+                  src="./img/inBadge.png"
+                  alt="income"
                 />
               </span>{" "}
-              Not Income
+              Received
             </p>
+            <p className={styles.avatar_userName}>{tokenLabel}</p>
 
           </div>
         </div>
-        <div>
+        <div className={styles.currency_values}>
           <p className={styles.crypto}>{crypto}</p>
           <p className={styles.currency}>{currency}</p>
         </div>
       </div>
     );
-
-  } else {
-    // skip them all
-    return (<></>);
-  }
 };
 
 

src/components/AccountForm/TransactionList/styles.module.css

@@ -2,7 +2,7 @@ p {
   margin: 0px;
 }
 .transaction_list_container {
-  height: 35vh;
+  height: 45vh;
   overflow-x: hidden;
   overflow-y: scroll;
   padding-right: 10px;
@@ -18,15 +18,14 @@ p {
   background: linear-gradient(90deg, #c02cae 0%, #f62e54 113.54%);
 }
 .list_item_container {
-  border-bottom: solid 1px white;
-  margin: 20px 0;
+  margin-bottom: 25px;
 }
 .date {
   font-family: "Inter";
   font-style: normal;
   font-weight: 600;
   font-size: 16px;
-  margin-bottom: 16px;
+  margin-bottom: 0px;
   /* color */
   background: linear-gradient(90deg, #c02cae 0%, #f62e54 113.54%);
   -webkit-background-clip: text;
@@ -36,47 +35,59 @@ p {
 }
 .inner_container {
   margin-left: 10px;
+  font-size: 0.8em;
 }
 .item_container {
   display: flex;
-  justify-content: space-between;
+  justify-content: start;
   align-items: center;
   margin-bottom: 16px;
   cursor: pointer;
-  padding-top: 10px;
+  padding-top: 0px;
   padding-bottom: 10px;
   border-radius: 10px;
 }
 .item_container:hover {
   background: rgba(255, 221, 230, 0.2);
 }
 
+.income_switcher {
+  font-size: 0.8em;
+  text-align:center;
+  line-height: 0.8em;
+  flex: 0 0 auto;
+  width: 50px;
+}
+
 .active_item_container {
   display: flex;
   justify-content: space-between;
+  justify-items: stretch;
   align-items: center;
-  margin-bottom: 16px;
+  margin-bottom: 0px;
   cursor: pointer;
   padding-top: 10px;
-  padding-bottom: 10px;
+  padding-bottom: 0px;
   border-radius: 10px;
   background: rgba(255, 221, 230, 0.2);
 }
 .avatar_container {
   display: flex;
-  align-items: center;
+  flex: 1;
+  text-align: left;
+  margin-left: 10px
 }
 
 .avatar_img {
-  width: 40px;
-  height: 40px;
+  width: 32px;
+  height: 32px;
   border-radius: 100%;
 }
 
 .income_received {
   font-family: "Roboto";
   font-style: normal;
-  font-weight: 600;
+  font-weight: normal;
   font-size: 12px;
   text-decoration-line: underline;
   background: linear-gradient(90deg, #c02cae 0%, #f62e54 113.54%);
@@ -89,21 +100,27 @@ p {
 .avatar_userName {
   font-family: "Roboto", sans-serif;
   font-style: normal;
-  font-weight: 400;
-  font-size: 16px;
+  font-weight: normal;
+}
+
+.currency_values {
+  text-align: right;
+  font-size: 0.8em;
+  margin-left: auto; /* Pushes the box to the far right */
+  flex: 0 0 auto; /* Fixed size, does not grow or shrink */
 }
 
 .crypto {
   font-family: "Roboto", sans-serif;
   font-style: normal;
   font-weight: 400;
-  font-size: 16px;
+  font-size: 0.9em;
 }
 
 .currency {
   font-family: "Roboto" sans-serif;
   font-weight: 500;
-  font-size: 10px;
+  font-size: 0.8em;
   text-align: right;
 
   /* color */

src/components/AccountForm/styles.module.css

@@ -7,18 +7,14 @@
   color: #222222;
 }
 .form_inner_container {
-  width: 80%;
+  width: 90%;
   margin: auto;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   height: 100%;
 }
 
-[data-incomestate="false"] {
-  border-bottom:3px solid red;
-}
-
 .form_container form {
   width: 100%;
   height: auto;

src/functions/displayConvertAmount.tsx

@@ -282,7 +282,7 @@ async function assetDataLoop(asset:any, fiat:any, timestamp:any, value:any){
 
 
   let output = "$"+fiat+" "+(currentPrice*parseFloat(value)).toFixed(2) + " @ " +currentPrice.toFixed(4);
-
+  output = "$"+(currentPrice*parseFloat(value)).toFixed(2)+" "+fiat;
   // return the price in FIAT terms, based on timestamp
   return output;
 }