🎨 style: adjust template card name and arrow also responsive of the list of template

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

@@ -8,7 +8,6 @@ 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'],
@@ -21,15 +20,13 @@ export const projectCardTheme = tv({
     description: ['text-xs', 'text-elements-low-em'],
     icons: ['flex', 'items-center', 'gap-1'],
     lowerContent: [
-      'transition-colors',
-      'duration-150',
+      'bg-surface-card-hovered',
       '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: [
@@ -49,12 +46,6 @@ 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,8 +1,4 @@
-import React, {
-  ComponentPropsWithoutRef,
-  MouseEvent,
-  useCallback,
-} from 'react';
+import React, { ComponentPropsWithoutRef, MouseEvent } from 'react';
 import { ProjectCardTheme, projectCardTheme } from './ProjectCard.theme';
 import { Project } from 'gql-client';
 import { Button } from 'components/shared/Button';
@@ -15,7 +11,7 @@ import {
   WarningDiamondIcon,
 } from 'components/shared/CustomIcon';
 import { relativeTimeMs } from 'utils/time';
-import { useNavigate } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import { Avatar } from 'components/shared/Avatar';
 import { getInitials } from 'utils/geInitials';
 import {
@@ -31,8 +27,6 @@ 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,
@@ -44,24 +38,14 @@ 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 })}
-      onClick={handleClick}
-    >
+    <div {...props} className={theme.wrapper({ className })}>
       {/* Upper content */}
       <div className={theme.upperContent()}>
         {/* Icon container */}
@@ -70,13 +54,14 @@ export const ProjectCard = ({
           imageSrc={project.icon}
           initials={getInitials(project.name)}
         />
+        {/* </div> */}
         {/* Title and website */}
-        <div className={theme.content()}>
+        <Link to={`projects/${project.id}`} className={theme.content()}>
           <p className={theme.title()}>{project.name}</p>
           <p className={theme.description()}>
             {project.deployments[0]?.domain?.name ?? 'No domain'}
           </p>
-        </div>
+        </Link>
         {/* Icons */}
         <div className={theme.icons()}>
           {hasError && <WarningDiamondIcon className="text-elements-danger" />}
@@ -102,7 +87,10 @@ export const ProjectCard = ({
         </div>
       </div>
       {/* Wave */}
-      <WavyBorder variant="stroke-and-fill" className={theme.wavyBorder()} />
+      <WavyBorder
+        variant="stroke-and-fill"
+        className="bg-surface-card-hovered"
+      />
       {/* 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';