Change summary design from background colors to bars

Author: xMartin

src/components/__snapshots__/main.test.tsx.snap

@@ -168,18 +168,20 @@ exports[`renders summary and transaction list 1`] = `
         className="summary"
       >
         <tbody>
-          <tr
-            style={
-              Object {
-                "backgroundColor": "rgba(226,91,29,1)",
-                "color": "var(--dark-color)",
-              }
-            }
-          >
+          <tr>
             <th
               className="account"
             >
               Jan
+              <div
+                className="summary-bar"
+                style={
+                  Object {
+                    "backgroundColor": "red",
+                    "width": "calc(100% - 24px)",
+                  }
+                }
+              />
             </th>
             <td
               className="amount"
@@ -196,18 +198,20 @@ exports[`renders summary and transaction list 1`] = `
               </small>
             </td>
           </tr>
-          <tr
-            style={
-              Object {
-                "backgroundColor": "rgba(92,226,14,1)",
-                "color": "var(--dark-color)",
-              }
-            }
-          >
+          <tr>
             <th
               className="account"
             >
               Martin
+              <div
+                className="summary-bar"
+                style={
+                  Object {
+                    "backgroundColor": "black",
+                    "width": "calc(100% - 24px)",
+                  }
+                }
+              />
             </th>
             <td
               className="amount"

src/components/summary.tsx

@@ -20,21 +20,23 @@ function formatData(accounts: Account[]) {
     return round(result);
   };
 
-  const getRowStyle = (amount: number, maxAmount: number) => {
+  const getBarStyle = (amount: number, maxAmount: number) => {
     if (!maxAmount) {
-      return { backgroundColor: "transparent" };
+      return { width: 0 };
     }
-    const color = amount < 0 ? [226, 91, 29] : [92, 226, 14];
-    const opacity = Math.abs(amount) / maxAmount;
-    color.push(opacity);
-    const textColor = opacity > 0.6 ? "var(--dark-color)" : "";
-    return { backgroundColor: `rgba(${color.join(",")})`, color: textColor };
+    const color = amount < 0 ? "red" : "black";
+    const percent = (Math.abs(amount) / maxAmount) * 100;
+    const cellPadding = 12;
+    return {
+      backgroundColor: color,
+      width: `calc(${percent}% - ${cellPadding * 2}px)`,
+    };
   };
 
   const maxAmount = getMaxAmount(accounts);
   const data = accounts.map((account) => ({
     amount: round(account.amount),
-    style: getRowStyle(account.amount, maxAmount),
+    barStyle: getBarStyle(account.amount, maxAmount),
     participant: account.participant,
   }));
 
@@ -45,8 +47,11 @@ const Summary: FunctionComponent<Props> = ({ accounts }) => (
   <table className="summary">
     <tbody>
       {formatData(accounts).map((account) => (
-        <tr key={account.participant} style={account.style}>
-          <th className="account">{account.participant}</th>
+        <tr key={account.participant}>
+          <th className="account">
+            {account.participant}
+            <div className="summary-bar" style={account.barStyle} />
+          </th>
           <td className="amount">
             <Amount>{account.amount}</Amount>
           </td>

src/index.css

@@ -561,6 +561,14 @@ input[type="number"] {
 .summary tr {
   box-sizing: border-box;
   height: 56px;
+  position: relative;
+}
+
+.summary-bar {
+  position: absolute;
+  bottom: 6px;
+  height: 5px;
+  border-radius: 5px;
 }
 
 #transactions .dategroup:not(:last-child) {