From 95a488025bba28068bf6c80d8993ba7a2cb21900 Mon Sep 17 00:00:00 2001
From: Jordy <31940280+ac-jorellanaf@users.noreply.github.com>
Date: Fri, 26 Jul 2024 19:18:03 +0200
Subject: [PATCH] Fixed horizontal alignment of home page badges (#233)

---
 .../home/homeMidSection/homeMidSection.tsx    | 55 ++++++-------------
 1 file changed, 18 insertions(+), 37 deletions(-)

diff --git a/src/components/home/homeMidSection/homeMidSection.tsx b/src/components/home/homeMidSection/homeMidSection.tsx
index b408d45..bc82e63 100644
--- a/src/components/home/homeMidSection/homeMidSection.tsx
+++ b/src/components/home/homeMidSection/homeMidSection.tsx
@@ -110,11 +110,11 @@ const HomeMidSection = () => {
       badgeTitle: BadgeTitleGen(faDna, "Platforms: " + protocolTypes.length),
       badgeBody: protocolTypes.map((x: any) => (
         <Row key={x.value} className="text-capitalize ms-0 ps-0 mb-2 w-100">
-          <Col className="ms-0 ps-0">{x.value}:</Col>
-          <Col className="col-auto text-end fw-bold pe-0">{x.count}</Col>
+          <Col>{x.value}:</Col>
+          <Col className="col-auto">{x.count}</Col>
         </Row>
       )),
-      bodyRowClasses: "pt-3 fs-7",
+      bodyColClasses: "pt-3 fs-7 align-items-center",
     });
 
     const individuals = summary?.resource_stats?.Individual;
@@ -122,47 +122,28 @@ const HomeMidSection = () => {
     const individualSexes = individuals?.stats?.sex || [];
     Badges.push({
       badgeTitle: BadgeTitleGen(faUser, "Individuals: " + numIndividuals, true),
-      badgeBody: (
-        <div>
-          <Row className="mt-3 w-100 px-0 mx-0">
-            {individualSexes.map((x, i) => {
-              const sex = /FEMALE/.test(x.value) ? "Female" : "Male";
-              return (
-                <Col key={i} className="text-center mb-4 ps-1 text-capitalize">
-                  {sex}
-                  :&nbsp;
-                  <strong>{x.count}</strong>
-                </Col>
-              );
-            })}
+      badgeBody: individualSexes.map((x, i) => {
+        const sex = /FEMALE/.test(x.value) ? "Female" : "Male";
+        return (
+          <Row key={x.value} className="text-capitalize ms-0 ps-0 mb-2 w-100">
+            <Col>{sex}:</Col>
+            <Col className="col-auto">{x.count}</Col>
           </Row>
-        </div>
-      ),
+        );
+      }),
       badgeDark: true,
+      bodyColClasses: "pt-3 fs-7 align-items-center",
     });
 
     const fileStats = aggregateFileStats(summary);
     Badges.push({
       badgeTitle: BadgeTitleGen(faChartColumn, "Files: " + fileStats.count),
-      badgeBody: (
-        <table>
-          <tbody>
-            {fileStats.stats.format.map((x) => {
-              return (
-                <tr key={x.value} className="text-uppercase ms-0 ps-0">
-                  <td
-                    className="ms-0 ps-3 pe-4"
-                    style={{ width: "1px", whiteSpace: "nowrap" }}
-                  >
-                    {x.value}:
-                  </td>
-                  <td className="fw-bold">{x.count}</td>
-                </tr>
-              );
-            })}
-          </tbody>
-        </table>
-      ),
+      badgeBody: fileStats.stats.format.map((x) => (
+        <Row key={x.value} className="text-capitalize ms-0 ps-0 mb-2 w-100">
+          <Col>{x.value}:</Col>
+          <Col className="col-auto">{x.count}</Col>
+        </Row>
+      )),
       bodyColClasses: "pt-3 fs-7 align-items-center",
     });
   }