From 388266609dec95eba71656779869c52d906e037c Mon Sep 17 00:00:00 2001
From: Keith Solomon <keith@solowebdesigns.net>
Date: Fri, 23 Dec 2022 17:30:53 +0000
Subject: [PATCH] - Adjust styles - Adjust alignment

---
 functions.php | 29 +++++++++++++++++++----------
 index.php     |  7 ++++---
 style.css     | 23 +++++++++++++++++++----
 3 files changed, 42 insertions(+), 17 deletions(-)

diff --git a/functions.php b/functions.php
index 4fe3e28..d05152e 100644
--- a/functions.php
+++ b/functions.php
@@ -118,10 +118,10 @@ function vaultTxns($csv) {
 
   $output .= '<table>';
   $output .= '  <thead>';
-  $output .= '    <td>User</td>';
-  $output .= '    <td>Timestamp</td>';
-  $output .= '    <td>Operation</td>';
-  $output .= '    <td>Amount</td>';
+  $output .= '    <td><h4>User</h4></td>';
+  $output .= '    <td><h4>Timestamp</h4></td>';
+  $output .= '    <td><h4>Operation</h4></td>';
+  $output .= '    <td><h4>Amount</h4></td>';
   $output .= '  </thead>';
 
   $output .= '  <tbody>';
@@ -184,15 +184,24 @@ function userBalance($array, $field) {
 }
 
 function vaultBalances($csv) {
-  $usr1 = 'Zarathos';
-  $usr1Vault = splitVault($csv, '0', $usr1);
+  $usr1        = 'Zarathos';
+  $usr1Vault   = splitVault($csv, '0', $usr1);
   $usr1Balance = userBalance($usr1Vault,3);
+  $usr1Share   = formatMoney(500000000-$usr1Balance);
 
-  $usr2 = 'Symos';
-  $usr2Vault = splitVault($csv, '0', $usr2);
+  $usr2        = 'Symos';
+  $usr2Vault   = splitVault($csv, '0', $usr2);
   $usr2Balance = userBalance($usr2Vault,3);
+  $usr2Share   = formatMoney(500000000-$usr1Balance);
 
-  echo '<h3>'.$usr1.' balance: '.formatMoney($usr1Balance).'</h3>';
-  echo '<h3>'.$usr2.' balance: '.formatMoney($usr2Balance).'</h3>';
+  echo '<section class="user1">';
+  echo '  <h3>'.$usr1.' balance: '.formatMoney($usr1Balance).'</h3>';
+  echo '  <h4>'.$usr1.' share left: '.$usr1Share.'<h4>';
+  echo '</section>';
+
+  echo '<section class="user2">';
+  echo '  <h3>'.$usr2.' balance: '.formatMoney($usr2Balance).'</h3>';
+  echo '  <h4>'.$usr2.' share left: '.$usr2Share.'<h4>';
+  echo '</section>';
 }
 ?>
\ No newline at end of file
diff --git a/index.php b/index.php
index 3e95057..4226c34 100644
--- a/index.php
+++ b/index.php
@@ -17,15 +17,16 @@
 
 	<div class="grid">
 		<div class="gridLeft">
-			<h2>Transactions</h2>
+			<h1>Transactions</h1>
 
 			<?php vaultTxns($csv); ?>
 		</div>
 
 		<div class="gridRght">
-			<h2>Balances</h2>
+			<h1>Balances</h1>
+
+			<h2>Vault Balance: </h2>
 
-			<h3>Vault Balance: </h3>
 			<div class="grid">
 				<?php vaultBalances($csv); ?>
 			</div>
diff --git a/style.css b/style.css
index d592a3f..947ac79 100644
--- a/style.css
+++ b/style.css
@@ -1,11 +1,20 @@
+:root {
+  --red: #f77e82;
+  --green: #08817d;
+}
+
+body { padding: 0 1em; }
+
 .grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: 1fr;
-  grid-column-gap: 0px;
+  grid-column-gap: 4em;
   grid-row-gap: 0px;
 }
 
+table {width: 100%; }
+
 table, tr, td {
   border: 1px solid #333;
   border-collapse: collapse;
@@ -18,8 +27,14 @@ thead td {
   text-transform: uppercase;
 }
 
-tr.debit { background-color: #f77e82; }
+tr.debit { background-color: var(--red); }
 
-tr.credit { background-color: #08817d; color: #fff; }
+tr.credit { background-color: var(--green); color: #fff; }
 
-td { padding: .15em 1em; }
\ No newline at end of file
+td { padding: .15em 1em; }
+
+h1 {  }
+
+h3, h4 { margin: 0; }
+
+h4 { font-style: italic; }
\ No newline at end of file