Merge pull request #365 from dhis2/overview-card-styling

fix(summarycard): adjust icon-less design
dhis2 · Dec 21, 2023 · 0fecea2 · 0fecea2
2 parents ccd226c + 72289c7
commit 0fecea2
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 15 deletions.
diff --git 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
@@ -54,16 +54,18 @@ export const SummaryCard = ({
 }: SummaryCardProps) => {
     const title = section.title
     return (
-        <Card dataTest={`card-${title}`}>
-            <div className={styles.cardWrapper}>
-                <Link to={`/${getSectionPath(section)}`}>
-                    <div className={styles.cardIcon}>{icon}</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>
-                </Link>
-                <SummaryCardActions section={section} />
-            </div>
-        </Card>
+                </div>
+            </Link>
+            <SummaryCardActions section={section} />
+        </div>
     )
 }