Refactor project components and styles for improved theming and badge…

… display.
grc-iit · Nov 13, 2024 · 8499166 · 8499166
1 parent 20ad35e
commit 8499166
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 10 deletions.
diff --git a/src/components/home/HomepageProjects.tsx b/src/components/home/HomepageProjects.tsx
@@ -8,15 +8,22 @@ import styles from "./HomepageProjects.module.css";
 
 export default function HomepageProjects({
   className,
-}: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>): JSX.Element {
+}: React.DetailedHTMLProps<
+  React.HTMLAttributes<HTMLElement>,
+  HTMLElement
+>): JSX.Element {
   const featuredProjects = projects.filter((project) => project.isFeatured);
   return (
     <section className={clsx(styles.projects, className)}>
       <SectionHeader>Featured projects</SectionHeader>
       <div className="container">
         <div className="row">
           {featuredProjects.map((project) => (
-            <ProjectItem key={project.id} project={project} />
+            <ProjectItem
+              isThemeLight={true}
+              key={project.id}
+              project={project}
+            />
           ))}
         </div>
       </div>

diff --git a/src/components/projects/ProjectBadges.module.css b/src/components/projects/ProjectBadges.module.css
@@ -0,0 +1,4 @@
+.badgeDarker {
+  background-color: var(--ifm-color-secondary-darker);
+  border-color: var(--ifm-color-secondary-darker);
+}
diff --git a/src/components/projects/ProjectBadges.tsx b/src/components/projects/ProjectBadges.tsx
@@ -8,19 +8,44 @@ type ProjectBadgesProps = {
   projectId: ProjectId;
 };
 
-export default function ProjectBadges({ addMargin = true, projectId }: ProjectBadgesProps) {
-  const { isOpenSource = false, isOurs = false, type } = getProjectById(projectId);
+import styles from "./ProjectBadges.module.css";
+
+export default function ProjectBadges({
+  addMargin = true,
+  projectId,
+}: ProjectBadgesProps) {
+  const {
+    isOpenSource = false,
+    isOurs = false,
+    type,
+  } = getProjectById(projectId);
   const isFunded = type === "funded";
   // Check if all false
   if (!isFunded && !isOpenSource && !isOurs) {
     return null;
   }
   return (
-    <div className={clsx(addMargin && "margin-bottom--md")} style={{ lineHeight: 1 }}>
-      {isOurs && <span className="badge badge--primary margin-horiz--xs">GRC-LED</span>}
+    <div
+      className={clsx(addMargin && "margin-bottom--md")}
+      style={{ lineHeight: 1 }}
+    >
+      {isOurs && (
+        <span className="badge badge--primary margin-horiz--xs">GRC-LED</span>
+      )}
       {/* {isFeatured && <span className="badge badge--info margin-horiz--xs">FEATURED</span>} */}
-      {isFunded && <span className="badge badge--success margin-horiz--xs">FUNDED</span>}
-      {isOpenSource && <span className="badge badge--secondary margin-horiz--xs">OPEN SOURCE</span>}
+      {isFunded && (
+        <span className="badge badge--success margin-horiz--xs">FUNDED</span>
+      )}
+      {isOpenSource && (
+        <span
+          className={clsx(
+            "badge badge--secondary margin-horiz--xs",
+            styles.badgeDarker
+          )}
+        >
+          OPEN SOURCE
+        </span>
+      )}
     </div>
   );
 }
diff --git a/src/components/projects/ProjectItem.module.css b/src/components/projects/ProjectItem.module.css
@@ -0,0 +1,8 @@
+.card {
+  /* border-radius: var(--ifm-global-radius); */
+  box-shadow: none;
+}
+
+.cardDarker {
+  background-color: var(--ifm-color-emphasis-200);
+}
diff --git a/src/components/projects/ProjectItem.tsx b/src/components/projects/ProjectItem.tsx
@@ -1,18 +1,31 @@
 import Link from "@docusaurus/Link";
 import React from "react";
+import clsx from "clsx";
 import { Project } from "@site/src/types";
 
 import ProjectBadges from "./ProjectBadges";
 
 type ProjectItemProps = {
   project: Project;
+  isThemeLight?: boolean;
 };
 
-export default function ProjectItem({ project }: ProjectItemProps) {
+import styles from "./ProjectItem.module.css";
+
+export default function ProjectItem({
+  project,
+  isThemeLight = false,
+}: ProjectItemProps) {
   const { id, link, name, title, shortDescription } = project;
   return (
     <div className="col col--4 margin-bottom--lg">
-      <div className="card text--center">
+      <div
+        className={clsx(
+          "card text--center",
+          styles.card,
+          !isThemeLight && styles.cardDarker
+        )}
+      >
         <div className="card__header">
           <h3>{title}</h3>
           <ProjectBadges addMargin={false} projectId={id} />