From b93839422c7bf982dabe0827ea4de216a58bfd4d Mon Sep 17 00:00:00 2001
From: Joseph John Aas Cooper <joe@dhis2.org>
Date: Wed, 29 Nov 2023 13:26:18 +0100
Subject: [PATCH 1/2] fix(summarycard): adjust icon-less design

---
 .../overview/card/SummaryCard.module.css      | 27 ++++++++++++++-----
 src/pages/overview/card/SummaryCard.tsx       | 16 ++++++-----
 2 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/src/pages/overview/card/SummaryCard.module.css b/src/pages/overview/card/SummaryCard.module.css
index 64bdd7a8..615c9f66 100644
--- a/src/pages/overview/card/SummaryCard.module.css
+++ b/src/pages/overview/card/SummaryCard.module.css
@@ -1,31 +1,43 @@
 .cardGroup {
     display: grid;
     grid-template-columns: repeat(auto-fill, 320px);
-    grid-gap: var(--spacers-dp16);
+    grid-gap: var(--spacers-dp12);
 }
 
 .cardGroupHeader {
-    font-size: 22px;
-    padding: 12px 0;
+    font-size: 20px;
+    padding: var(--spacers-dp24) 0 var(--spacers-dp12) 0;
     color: var(--colors-grey900);
-    line-height: 40px;
+    line-height: 28px;
 }
 
 .cardWrapper {
     display: flex;
     flex-direction: column;
-    padding: 16px;
+    align-content: space-between;
     width: 320px;
     height: 100%;
+    background: var(--colors-white);
+    border-radius: 3px;
+    border: 1px solid var(--colors-grey400);
+}
+
+.cardTopLink {
+    padding: 12px;
+}
+
+.cardTopLink:hover .cardHeader {
+    text-decoration: underline;
 }
 
 .cardIcon svg {
     width: 32px;
     height: 32px;
+    display: none;
 }
 
 .cardHeader {
-    padding: 12px 0px;
+    padding: 0 0 6px 0;
     color: var(--colors-grey900);
     font-size: 16px;
     font-weight: 500;
@@ -43,9 +55,10 @@
 .cardActions {
     /* margin-auto pushes this to the bottom (extends margin to occupy extra space) */
     margin-top: auto;
-    padding-top: 12px;
+    padding: 8px 12px;
     display: flex;
     gap: var(--spacers-dp8);
+    border-top: 1px solid var(--colors-grey300);
 }
 
 .cardActions a {
diff --git a/src/pages/overview/card/SummaryCard.tsx b/src/pages/overview/card/SummaryCard.tsx
index 06ef5cc7..9aeb3ad6 100644
--- a/src/pages/overview/card/SummaryCard.tsx
+++ b/src/pages/overview/card/SummaryCard.tsx
@@ -54,16 +54,20 @@ export const SummaryCard = ({
 }: SummaryCardProps) => {
     const title = section.title
     return (
-        <Card dataTest={`card-${title}`}>
+        <div data-test={`card-${title}`}>
             <div className={styles.cardWrapper}>
-                <Link to={`/${getSectionPath(section)}`}>
-                    <div className={styles.cardIcon}>{icon}</div>
-                    <SummaryCardHeader>{title}</SummaryCardHeader>
-                    <SummaryCardContent>{children}</SummaryCardContent>
+                <Link
+                    className={styles.cardTopLink}
+                    to={`/${getSectionPath(section)}`}
+                >
+                    <div className={styles.cardTop}>
+                        <SummaryCardHeader>{title}</SummaryCardHeader>
+                        <SummaryCardContent>{children}</SummaryCardContent>
+                    </div>
                 </Link>
                 <SummaryCardActions section={section} />
             </div>
-        </Card>
+        </div>
     )
 }
 

From 72289c75d6540b030cac9c9200bb56f3d7d2f585 Mon Sep 17 00:00:00 2001
From: Joseph John Aas Cooper <joe@dhis2.org>
Date: Wed, 29 Nov 2023 14:28:53 +0100
Subject: [PATCH 2/2] fix(summarycard): remove unneeded wrapper

---
 src/pages/overview/card/SummaryCard.tsx | 24 +++++++++++-------------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/pages/overview/card/SummaryCard.tsx b/src/pages/overview/card/SummaryCard.tsx
index 9aeb3ad6..550083e1 100644
--- a/src/pages/overview/card/SummaryCard.tsx
+++ b/src/pages/overview/card/SummaryCard.tsx
@@ -54,19 +54,17 @@ export const SummaryCard = ({
 }: SummaryCardProps) => {
     const title = section.title
     return (
-        <div data-test={`card-${title}`}>
-            <div className={styles.cardWrapper}>
-                <Link
-                    className={styles.cardTopLink}
-                    to={`/${getSectionPath(section)}`}
-                >
-                    <div className={styles.cardTop}>
-                        <SummaryCardHeader>{title}</SummaryCardHeader>
-                        <SummaryCardContent>{children}</SummaryCardContent>
-                    </div>
-                </Link>
-                <SummaryCardActions section={section} />
-            </div>
+        <div data-test={`card-${title}`} className={styles.cardWrapper}>
+            <Link
+                className={styles.cardTopLink}
+                to={`/${getSectionPath(section)}`}
+            >
+                <div className={styles.cardTop}>
+                    <SummaryCardHeader>{title}</SummaryCardHeader>
+                    <SummaryCardContent>{children}</SummaryCardContent>
+                </div>
+            </Link>
+            <SummaryCardActions section={section} />
         </div>
     )
 }