Convert Card components to tailwind

frontend/package.json

@@ -41,7 +41,7 @@
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.37.1",
     "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-tailwindcss": "^3.17.4",
+    "eslint-plugin-tailwindcss": "^3.18.0",
     "globals": "^15.9.0",
     "jest": "^28.1.3",
     "jest-environment-jsdom": "^28.1.3",
@@ -58,7 +58,7 @@
     "sass": "^1.59.3",
     "sass-loader": "^13.2.1",
     "style-loader": "^3.3.2",
-    "tailwindcss": "^3.3.3",
+    "tailwindcss": "^3.4.17",
     "ts-jest": "^28.0.8",
     "ts-loader": "^9.4.2",
     "typescript": "^4.9.5",

frontend/src/components/components.tsx

@@ -1,7 +1,5 @@
 import { Button } from "./Buttons/Button";
 import { IconButton } from "./Buttons/IconButton";
-import { Card } from "./Cards/StandardCard";
-import { CircleCard } from "./Cards/CircleCard";
 import { ScrollCarousel } from "./Carousel/ScrollCarousel";
 import { Dialog } from "./Dialog/Dialog";
 import { Calendar } from "./Inputs/Calendar";
@@ -19,9 +17,6 @@ export {
   // Buttons
   Button,
   IconButton,
-  // Cards
-  Card,
-  CircleCard,
   // Carousel
   ScrollCarousel,
   ChevronScroll,

frontend/src/index.scss

@@ -6,7 +6,6 @@
 
 // Import component styles
 @use "@/components/Buttons" as *;
-@use "@/components/Cards" as *;
 @use "@/components/Carousel/ScrollCarousel";
 @use "@/components/Dialog/Dialog";
 @use "@/components/Inputs" as *;
@@ -16,7 +15,6 @@
 @use "@/components/Scroll/ChevronScroll";
 
 // Import page styles
-// @use "pages/CreditsPage/CreditsPage";
 @use "@/pages/Demo/Demo";
 @use "@/pages/NotFoundPage/NotFoundPage";
 @use "@/pages/LandingPage" as *;

frontend/src/pages/CreditsPage/Card.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+
+interface CardProps {
+  key: number;
+  name: string;
+  usedIn: string;
+  provider: string;
+  imgSrc: string;
+  imgContainerStyleClasses: string;
+  imgStyleClasses: string;
+  learnMoreLink: string;
+}
+
+const Card: React.FC<CardProps> = ({
+  name,
+  usedIn,
+  provider,
+  imgSrc,
+  imgContainerStyleClasses,
+  imgStyleClasses,
+  learnMoreLink,
+}) => {
+  return (
+    <div className="flex auto-cols-max flex-row items-center justify-center gap-4 rounded-xl p-3 shadow-md sm:flex-col md:justify-evenly md:p-6">
+      <div className={imgContainerStyleClasses}>
+        <img className={imgStyleClasses} src={imgSrc} alt={name} />
+      </div>
+
+      <div>
+        <table className="table-fixed text-left text-xs sm:text-sm lg:text-base xl:text-lg">
+          <tbody>
+            <tr className="pb-1">
+              <th className="pr-2">Name:</th>
+              <td>{name}</td>
+            </tr>
+            <tr className="pb-1">
+              <th className="pr-2">Used In:</th>
+              <td>{usedIn}</td>
+            </tr>
+            <tr className="pb-1">
+              <th className="pr-2">Provider:</th>
+              <td>{provider}</td>
+            </tr>
+          </tbody>
+        </table>
+
+        <div className="mt-3 md:mt-6">
+          <a
+            href={learnMoreLink}
+            className="font-semibold lx:text-xl text-sm text-blue-link underline sm:text-base md:text-lg"
+          >
+            Learn more
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Card;

frontend/src/pages/CreditsPage/CreditsPage.tsx

@@ -4,27 +4,23 @@ import React, { useState, FC } from "react";
 import { logoHfLA, creditsPageHighFive } from "assets/images/images";
 import { iconData } from "api_data/creditsIconData";
 import { illustrationData } from "api_data/creditsIllustrationData";
-import Card from "tw-components/StandardCard";
 
+import Card from "./Card";
 import TopSvg from "./TopSvg";
 import BottomSvg from "./BottomSvg";
 
 const CreditsPage: FC = () => {
   const [activeData, setActiveData] = useState(illustrationData);
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [imgSize, setImgSize] = useState("32");
   const [activeButton, setActiveButton] = useState("illustrations");
 
   const handleClickIllustrationButton = () => {
     setActiveButton("illustrations");
     setActiveData(illustrationData);
-    setImgSize("32");
   };
 
   const handleClickIconButton = () => {
     setActiveData(iconData);
     setActiveButton("icons");
-    setImgSize("2");
   };
 
   const styleClasses = {

frontend/src/pages/LandingPage/LandingPageCop.tsx

@@ -2,13 +2,15 @@
 import React, { useState, useEffect } from "react";
 
 // Internal Imports
-import { Button, CircleCard, Dialog } from "components/components";
+import { Button, Dialog } from "components/components";
 import { CopCard, InnerCopCard, InnerCopNavCard } from "./LandingPageCopCards";
 import {
   copDatum,
   fetchAllCopData,
   fetchCopDataById,
 } from "../../api_data/copData";
+import { CircleCard } from "tw-components/CircleCard";
+import Typography from "tw-components/Typography";
 
 function LandingPageCop() {
   const [isDialogOpen, setIsDialogOpen] = useState(false);
@@ -31,19 +33,19 @@ function LandingPageCop() {
       <h2 className="col-12 my-8 text-center text-4xl font-bold leading-normal">
         Communities of Practice (COP)
       </h2>
-      <div className="row paragraph-1 landing-cop-description mb-5 text-center">
+      <div className="row paragraph-1 mb-5 max-w-[800px] text-center">
         A Community of Practice (CoP) is a group of volunteers who share a
         common interest in a topic and meet regularly to fulfill both individual
         and group goals. We use CoPs to share effective practices and relevant
         domain knowledge to help our members grow.
       </div>
-      <div className="row landing-cop-circle-container m-10">
+      <div className="m-10 box-border flex flex-wrap justify-evenly">
         {copData.map((cop) => {
           return (
             <CircleCard
               key={cop.id}
               size="lg"
-              addClass="m-8"
+              className="m-8"
               onClick={() => {
                 handleCopData(cop.id);
                 setIsDialogOpen(true);
@@ -54,8 +56,8 @@ function LandingPageCop() {
                 <div className="row justify-center pb-6">
                   <cop.icon strokeWidth="0.2" height="65" aria-hidden="true" />
                 </div>
-                <div className="title-4 landing-cop-circle-title text-center">
-                  {cop.title}
+                <div className="text-center text-blue-dark">
+                  <Typography.Title4>{cop.title}</Typography.Title4>
                 </div>
               </div>
             </CircleCard>
@@ -84,7 +86,7 @@ function LandingPageCop() {
                     key={cop.id}
                     isActive={isActive}
                     onClick={() => handleCopData(cop.id)}
-                    addClass="flex-container justify-center align-center p-2"
+                    className="flex-container align-center justify-center p-2"
                   >
                     <div className="pr-2">
                       <cop.icon
@@ -96,15 +98,13 @@ function LandingPageCop() {
                         aria-hidden="true"
                       />
                     </div>
-                    <span className="title-6 landing-cop-nav-title">
-                      {cop.title}
-                    </span>
+                    <span className="title-6">{cop.title}</span>
                   </InnerCopNavCard>
                 );
               })}
             </nav>
             <div className="col-9 ml-4">
-              <InnerCopCard addClass="landing-inner-cop-card-content">
+              <InnerCopCard>
                 <div>
                   <div className="title-3 flex-container pb-4 align-bottom">
                     <div className="pr-4">

frontend/src/pages/LandingPage/LandingPageCopCards.tsx

@@ -1,10 +1,10 @@
 // External Imports
 import React from "react";
+import clsx from "clsx";
 
 // Internal Imports
-import { combineClasses } from "components/Utility/utils";
 import { IconButton } from "components/Buttons/IconButton";
-import { Card } from "components/Cards/StandardCard";
+import { Card } from "tw-components/StandardCard";
 import { iconX } from "assets/images/images";
 
 interface CopCardProps extends React.PropsWithChildren {
@@ -17,8 +17,8 @@ interface CopCardProps extends React.PropsWithChildren {
 function CopCard({ isHidden = true, size = "sm", ...props }: CopCardProps) {
   return (
     <Card
-      addClass={combineClasses(
-        `cop-card-${size}`,
+      className={clsx(
+        "m-2 min-h-[624px] max-w-[1088px] bg-grey-light",
         props.addClass,
         isHidden ? "hidden" : undefined,
       )}
@@ -40,14 +40,21 @@ interface InnerCopCardProps extends React.PropsWithChildren {
 
 function InnerCopCard(props: InnerCopCardProps) {
   return (
-    <Card addClass={combineClasses("inner-cop-card", props.addClass)}>
-      <div className="inner-cop-card-content">{props.children}</div>
+    <Card
+      className={clsx(
+        "h-full min-h-[448px] max-w-[625px] bg-white",
+        props.addClass,
+      )}
+    >
+      <div className="box-border flex h-full flex-col justify-between px-[0.6vw] py-2">
+        {props.children}
+      </div>
     </Card>
   );
 }
 
 interface InnerCopNavCardSharedProps extends React.PropsWithChildren {
-  addClass?: string;
+  className?: string;
   isActive?: boolean;
 }
 
@@ -66,19 +73,17 @@ type InnerCopNavCardProps =
   | InnerCopNavCardButtonProps;
 
 function InnerCopNavCard({ isActive = false, ...props }: InnerCopNavCardProps) {
-  const Tag = "href" in props ? "a" : "button"; // conditionally rendered tagss
-
   return (
-    <Tag
-      className={combineClasses(
-        "inner-cop-nav-card",
-        isActive ? "active" : undefined,
-        props.addClass,
+    <button
+      className={clsx(
+        "min-h-16 max-w-[188px] rounded-2xl border-0 hover:underline",
+        isActive ? "bg-blue-dark text-white" : "bg-white",
+        props.className,
       )}
       onClick={props.onClick}
     >
       {props.children}
-    </Tag>
+    </button>
   );
 }