[T-4921: feat] Update project card component (#136)

* 🎨 style: add hover interaction to the card

* ⚡️ feat: make the whole card clickable

* 🎨 style: adjust hovered background for wavy border

* ♻️ refactor: move wavy border class to project card theme

* 🎨 style: add transition when hover

* 📝 docs: add todo to experiment using `Link` componnt

packages/frontend/src/components/projects/ProjectCard/ProjectCard.theme.ts

@@ -8,6 +8,7 @@ export const projectCardTheme = tv({
       'rounded-2xl',
       'flex',
       'flex-col',
+      'group',
     ],
     upperContent: ['px-4', 'py-4', 'flex', 'items-start', 'gap-3', 'relative'],
     content: ['flex', 'flex-col', 'gap-1', 'flex-1'],
@@ -20,13 +21,15 @@ export const projectCardTheme = tv({
     description: ['text-xs', 'text-elements-low-em'],
     icons: ['flex', 'items-center', 'gap-1'],
     lowerContent: [
-      'bg-surface-card-hovered',
+      'transition-colors',
+      'duration-150',
       'px-4',
       'py-4',
       'flex',
       'flex-col',
       'gap-2',
       'rounded-b-2xl',
+      'group-hover:bg-surface-card-hovered',
     ],
     latestDeployment: ['flex', 'items-center', 'gap-2'],
     deploymentStatusContainer: [
@@ -46,6 +49,12 @@ export const projectCardTheme = tv({
       'items-center',
       'gap-2',
     ],
+    wavyBorder: [
+      'bg-surface-card',
+      'transition-colors',
+      'duration-150',
+      'group-hover:bg-surface-card-hovered',
+    ],
   },
   variants: {
     status: {

packages/frontend/src/components/projects/ProjectCard/ProjectCard.tsx

@@ -1,4 +1,8 @@
-import React, { ComponentPropsWithoutRef, MouseEvent } from 'react';
+import React, {
+  ComponentPropsWithoutRef,
+  MouseEvent,
+  useCallback,
+} from 'react';
 import { ProjectCardTheme, projectCardTheme } from './ProjectCard.theme';
 import { Project } from 'gql-client';
 import { Button } from 'components/shared/Button';
@@ -11,7 +15,7 @@ import {
   WarningDiamondIcon,
 } from 'components/shared/CustomIcon';
 import { relativeTimeMs } from 'utils/time';
-import { Link } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { Avatar } from 'components/shared/Avatar';
 import { getInitials } from 'utils/geInitials';
 import {
@@ -27,6 +31,8 @@ export interface ProjectCardProps
   project: Project;
 }
 
+// TODO: Update the whole component to use `Link` from `react-router-dom` and remove the `useNavigate` hook,
+// currently it's not possible to use `Link` because the dot menu is not a direct child of the `Link` component
 export const ProjectCard = ({
   className,
   project,
@@ -38,14 +44,24 @@ export const ProjectCard = ({
   // TODO: Update this to use the actual status from the API
   const hasError = status === 'failure';
 
+  const navigate = useNavigate();
+
   const handleOptionsClick = (
     e: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>,
   ) => {
     e.stopPropagation();
   };
 
+  const handleClick = useCallback(() => {
+    navigate(`projects/${project.id}`);
+  }, [project.id, navigate]);
+
   return (
-    <div {...props} className={theme.wrapper({ className })}>
+    <div
+      {...props}
+      className={theme.wrapper({ className })}
+      onClick={handleClick}
+    >
       {/* Upper content */}
       <div className={theme.upperContent()}>
         {/* Icon container */}
@@ -54,14 +70,13 @@ export const ProjectCard = ({
           imageSrc={project.icon}
           initials={getInitials(project.name)}
         />
-        {/* </div> */}
         {/* Title and website */}
-        <Link to={`projects/${project.id}`} className={theme.content()}>
+        <div className={theme.content()}>
           <p className={theme.title()}>{project.name}</p>
           <p className={theme.description()}>
             {project.deployments[0]?.domain?.name ?? 'No domain'}
           </p>
-        </Link>
+        </div>
         {/* Icons */}
         <div className={theme.icons()}>
           {hasError && <WarningDiamondIcon className="text-elements-danger" />}
@@ -87,10 +102,7 @@ export const ProjectCard = ({
         </div>
       </div>
       {/* Wave */}
-      <WavyBorder
-        variant="stroke-and-fill"
-        className="bg-surface-card-hovered"
-      />
+      <WavyBorder variant="stroke-and-fill" className={theme.wavyBorder()} />
       {/* Lower content */}
       <div className={theme.lowerContent()}>
         {/* Latest deployment */}

packages/frontend/src/pages/org-slug/projects/create/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import templates from 'assets/templates';
-import { RepositoryList } from 'components/projects/create/RepositoryList';
+import RepositoryList from 'components/projects/create/RepositoryList';
 import ConnectAccount from 'components/projects/create/ConnectAccount';
 import { useOctokit } from 'context/OctokitContext';
 import { Heading } from 'components/shared/Heading';