Refactor: unified Card layout component, remove content-card, simplify per-card CSS

Author: MMesch

src/components/about/SmallPortraitCard.tsx

@@ -1,6 +1,7 @@
 import styles from "./styles.module.css";
 import { useHistory } from "@docusaurus/router";
 import Avatar from "./Avatar";
+import Card from "../layout/Card";
 
 export function SmallPortraitCard({ person }) {
   const history = useHistory();
@@ -9,34 +10,22 @@ export function SmallPortraitCard({ person }) {
     const completeName = person.completeName.replace(/\s+/g, '');
     const completeNameWithoutAccents = completeName
       .normalize("NFD")
-      .replace(/[\u0300-\u036f]/g, '');
+      .replace(/[̀-ͯ]/g, '');
     history.push({
       pathname: `/about/${completeNameWithoutAccents}`,
-      state: { fromAbout: true, scrollY: window.scrollY, },
+      state: { fromAbout: true, scrollY: window.scrollY },
     });
   }
 
   return (
-    <div onClick={openDialog}>
-      <div className={"card" + " " + styles.small_portrait_card}>
-        <div className="card__header">
-          <Avatar person={person} />
-          <div
-            className={
-              "flex-full-centered" + " " + styles.small_card_complete_name
-            }
-          >
-            {person.completeName}
-          </div>
-        </div>
-        <div className="card__body">
-          <div
-            className={"flex-full-centered" + " " + styles.small_card_position}
-          >
-            {person.position}
-          </div>
-        </div>
+    <Card hover onClick={openDialog} className={styles.small_portrait_card}>
+      <Avatar person={person} />
+      <div className={"flex-full-centered " + styles.small_card_complete_name}>
+        {person.completeName}
       </div>
-    </div>
+      <div className={"flex-full-centered " + styles.small_card_position}>
+        {person.position}
+      </div>
+    </Card>
   );
 }

src/components/about/ValueCard.tsx

@@ -1,16 +1,17 @@
 import styles from "./styles.module.css";
+import Card from "../layout/Card";
 
 export function ValueCard({ value }) {
   return (
-    <div className={"content-card " + styles.value_card}>
+    <Card bg="yellow" className={styles.value_card}>
       <div className={styles.value_icon}>
         <value.pictureComponent alt={value.alt} />
       </div>
       <div className={styles.value_header}>{value.name}</div>
       <div className={styles.value_text}>
         <value.DescriptionMD />
       </div>
-    </div>
+    </Card>
   );
 }
 export default ValueCard;

src/components/about/styles.module.css

@@ -23,18 +23,9 @@
 .small_portrait_card {
   width: 279px;
   height: 320px;
-  background-color: white;
-  color: var(--ifm-color-primary-p2);
-  border-radius: 8px;
-  box-shadow: var(--ifm-shadow-card);
   padding: var(--ifm-spacing-lg) var(--ifm-spacing-xs);
   margin-bottom: var(--ifm-spacing-xl);
-}
-
-.small_portrait_card:hover {
-  border: solid 1px gray;
-  cursor: pointer;
-  text-decoration: #0000ee underline;
+  align-items: center;
 }
 
 .value_icon {
@@ -159,9 +150,6 @@ div .join_the_team_text {
 }
 
 
-.small_portrait_card:hover {
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
-}
 
 @media only screen and (max-width: 996px) {
   /*Mobile*/

src/components/blog/BlogpostCard.tsx

@@ -1,63 +1,31 @@
-// src/components/Card.js
-
 import React from "react";
 import styles from "./styles.module.css";
 import Link from "@docusaurus/Link";
 import useBaseUrl from "@docusaurus/useBaseUrl";
+import Card from "../layout/Card";
 
 export default function BlogpostCard({ blogpost, timeIndex }) {
   return (
-    <div
-      className={"card" + " " + styles.blogpost_card}
-      style={{ marginBottom: "var(--ifm-spacing-lg)" }}
-    >
+    <Card hover className={styles.blogpost_card}>
       <Link href={blogpost.url}>
-        <div className="container">
-          <div
-            className={
-              "row" +
-              " " +
-              "flex-full-centered" +
-              " " +
-              "padding-none" +
-              " " +
-              "margin-none"
-            }
-          ></div>
-          <div className="card__header">
-            <div
-              className={styles.blogpost_image + " " + "flex-full-centered"}
-              style={{ height: "180px" }}
-            >
-              <img
-                src={useBaseUrl(blogpost.image)}
-                id={blogpost.imageID}
-                alt={"Illustration for the blog post."}
-              />
-            </div>
-
-            <div className={styles.blogpost_header}>{blogpost.title}</div>
-          </div>
-
-          <div className={"card__body"}>
-            <div className={styles.blogpost_summary}>
-              {blogpost.summary.length < 200
-                ? blogpost.summary
-                : blogpost.summary.substring(0, 200) + "..."}
-            </div>
-          </div>
-
-          <div
-            className={"row card__footer"}
-            style={{ marginBottom: "var(--ifm-spacing-md)" }}
-          >
-            <div className="col" style={{ padding: "0px" }}>
-              <div className={styles.blogpost_date}>{blogpost.date}</div>
-              <div className={styles.blogpost_authors}>{blogpost.authors}</div>
-            </div>
-          </div>
+        <div className={styles.blogpost_image + " flex-full-centered"}>
+          <img
+            src={useBaseUrl(blogpost.image)}
+            id={blogpost.imageID}
+            alt={"Illustration for the blog post."}
+          />
+        </div>
+        <div className={styles.blogpost_header}>{blogpost.title}</div>
+        <div className={styles.blogpost_summary}>
+          {blogpost.summary.length < 200
+            ? blogpost.summary
+            : blogpost.summary.substring(0, 200) + "..."}
+        </div>
+        <div className={styles.blogpost_footer}>
+          <div className={styles.blogpost_date}>{blogpost.date}</div>
+          <div className={styles.blogpost_authors}>{blogpost.authors}</div>
         </div>
       </Link>
-    </div>
+    </Card>
   );
 }

src/components/blog/styles.module.css

@@ -1,80 +1,55 @@
 .blogpost_image {
   filter: grayscale(1);
+  height: 180px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .blogpost_card {
   height: 556px;
-  width: 100%;
-  border-radius: 8px;
-  box-shadow: 4px 4px 18px -1px rgba(160, 140, 40, 0.15);
   padding: var(--ifm-spacing-xl);
-  background: var(--ifm-background-color-card);
-}
-
-.blogpost_card:hover {
-  border: 1px solid #cbc7b1;
-}
-
-div .blogpost_header {
-  color: var(--ifm-text-color);
-}
-div .blogpost_summary {
-  color: var(--ifm-text-color);
-}
-
-div .blogpost_authors {
-  color: var(--ifm-text-color);
-}
-
-div .blogpost_date {
-  color: var(--ifm-text-color);
 }
 
 .blogpost_summary {
-  font-family: var(--ifm-font-family-roboto);
   font-size: 14px;
-  font-style: normal;
   font-weight: 300;
-  line-height: 150%; /* 21px */
+  line-height: 150%;
   letter-spacing: -0.154px;
   text-align: justify;
   margin-bottom: var(--ifm-spacing-sm);
   height: 124px;
   color: var(--ifm-text-color);
+  flex: 1;
 }
 
 .blogpost_header {
-  color: var(--ifm-text-color);
-  font-family: var(--ifm-font-family-roboto);
   font-size: 16px;
-  font-style: normal;
   font-weight: 600;
-  line-height: 150%; /* 27px */
+  line-height: 150%;
   letter-spacing: -0.198px;
   height: 64px;
   margin: var(--ifm-spacing-xl) 0;
   color: var(--ifm-text-color);
 }
 
+.blogpost_footer {
+  margin-top: auto;
+  padding-top: var(--ifm-spacing-sm);
+}
+
 .blogpost_date {
-  color: var(--ifm-text-color);
-  font-family: var(--ifm-font-family-roboto);
   font-size: 12px;
-  font-style: normal;
   font-weight: 800;
   line-height: 16px;
   letter-spacing: -0.132px;
-  text-align: left;
   color: var(--ifm-text-color);
 }
 
 .blogpost_authors {
-  font-family: var(--ifm-font-family-roboto);
   font-size: 12px;
-  font-style: normal;
   font-weight: 400;
   line-height: 16px;
-  text-align: left;
   color: var(--ifm-text-color);
 }
 
@@ -86,7 +61,6 @@ div .blogpost_date {
   background-repeat: no-repeat;
   background-position: 8px;
   border-radius: 8px;
-  padding: var(--ifm-spacing-xs) var(--ifm-spacing-lg) var(--ifm-spacing-xs)
-    var(--ifm-spacing-lg);
+  padding: var(--ifm-spacing-xs) var(--ifm-spacing-lg) var(--ifm-spacing-xs) var(--ifm-spacing-lg);
   margin: var(--ifm-spacing-lg) 0;
 }

src/components/fundable/FundableProjectCard.tsx

@@ -1,6 +1,7 @@
 import styles from "./styles.module.css";
 import { useHistory } from "@docusaurus/router";
 import ProgressBar from "./ProgressBar";
+import Card from "../layout/Card";
 
 export default function FundableProjectCard({ project }) {
   const history = useHistory();
@@ -17,7 +18,7 @@ export default function FundableProjectCard({ project }) {
     : project.shortDescription;
 
   return (
-    <div className={styles.fund_card} onClick={open}>
+    <Card hover onClick={open} className={styles.fund_card}>
       <div className={styles.fund_card_category}>{project.category}</div>
       <div className={styles.fund_card_title}>{project.title}</div>
       <p className={styles.fund_card_desc}>{desc}</p>
@@ -29,6 +30,6 @@ export default function FundableProjectCard({ project }) {
           {project.currentNbOfFunders > 0 && ` · ${project.currentNbOfFunders} funder${project.currentNbOfFunders > 1 ? "s" : ""}`}
         </div>
       </div>
-    </div>
+    </Card>
   );
 }

src/components/fundable/styles.module.css

@@ -34,21 +34,7 @@
 
 
 .fund_card {
-  background: white;
-  border-radius: 10px;
-  padding: var(--ifm-spacing-lg);
-  box-shadow: var(--ifm-shadow-card);
-  cursor: pointer;
-  display: flex;
-  flex-direction: column;
   gap: var(--ifm-spacing-sm);
-  transition: box-shadow 0.2s;
-  border: 1px solid transparent;
-}
-
-.fund_card:hover {
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
-  border-color: var(--ifm-color-neutral-n3);
 }
 
 .fund_card_category {

src/components/home/WhatWeDo/TopicsCard.tsx

@@ -1,11 +1,12 @@
 import styles from "./styles.module.css";
+import Card from "../../layout/Card";
 
 export function TopicsCard({ topics, TopicsDescriptionMD }) {
   return (
-    <div className={"content-card " + styles.topics_card}>
+    <Card bg="yellow" className={styles.topics_card}>
       <div className={styles.topics_header}>{topics.name}</div>
       <div><TopicsDescriptionMD /></div>
-    </div>
+    </Card>
   );
 }
 

src/components/home/WhatWeDo/styles.module.css

@@ -54,6 +54,5 @@ div .topics_header {
 
   .topics_card {
     padding: var(--ifm-spacing-2xl) var(--ifm-spacing-lg);
-    height: 100%;
   }
 }

src/components/layout/Card.tsx

@@ -0,0 +1,27 @@
+import clsx from "clsx";
+import styles from "./styles.module.css";
+import React from "react";
+
+type Props = {
+  bg?: "white" | "yellow";
+  hover?: boolean;
+  className?: string;
+  onClick?: () => void;
+  children: React.ReactNode;
+};
+
+export default function Card({ bg = "white", hover = false, className, onClick, children }: Props) {
+  return (
+    <div
+      className={clsx(
+        styles.card,
+        bg === "yellow" && styles.card_yellow,
+        hover && styles.card_hover,
+        className
+      )}
+      onClick={onClick}
+    >
+      {children}
+    </div>
+  );
+}