Reskin Project Overview - Activity section (#134)

* feat: reskin w/ new design system

* feat: add sepeator calc in comment

* chore: limit commit message to 4 line

* comment fixes

* chore: use Heading component

packages/frontend/src/components/projects/project/ActivityCard.tsx

@@ -1,45 +1,85 @@
 import React from 'react';
-
+import { Link } from 'react-router-dom';
-import { Typography, IconButton, Avatar } from '@material-tailwind/react';
-
-import { relativeTimeISO } from '../../../utils/time';
 import { GitCommitWithBranch } from '../../../types';
+import { Avatar } from 'components/shared/Avatar';
+import { Button } from 'components/shared/Button';
+import {
+  ArrowRightCircleFilledIcon,
+  BranchIcon,
+} from 'components/shared/CustomIcon';
+import { formatDistance } from 'date-fns';
+import { getInitials } from 'utils/geInitials';
 
 interface ActivityCardProps {
   activity: GitCommitWithBranch;
 }
 
 const ActivityCard = ({ activity }: ActivityCardProps) => {
+  const formattedDate = formatDistance(
+    new Date(activity.commit.author!.date!),
+    new Date(),
+    {
+      addSuffix: true,
+    },
+  );
+
   return (
-    <div className="group flex gap-2 hover:bg-gray-200 rounded mt-1">
+    <>
-      <div className="w-8">
+      <Link
-        <Avatar
+        to={activity.html_url}
-          src={activity.author?.avatar_url}
+        target="_blank"
-          variant="rounded"
+        className="p-3 gap-2 focus-within:ring-2 focus-within:ring-controls-primary/40 focus:outline-none rounded-xl transition-colors hover:bg-base-bg-alternate flex group"
-          size="sm"
+      >
-          placeholder={''}
+        <div>
+          <Avatar
+            type="orange"
+            size={36}
+            initials={getInitials(activity.commit.author?.name ?? '')}
+            imageSrc={activity.author?.avatar_url}
+          />
+        </div>
+        <div className="flex-1">
+          <span className="text-elements-high-em text-sm font-medium tracking-tight">
+            {activity.commit.author?.name}
+          </span>
+          <span className="text-elements-low-em text-xs flex items-center gap-2">
+            <span title={formattedDate} className="whitespace-nowrap">
+              {formattedDate}
+            </span>
+            {/* Dot */}
+            <span className="w-0.5 h-0.5 rounded-full bg-border-interactive-hovered"></span>
+            <span className="flex justify-center items-center gap-1.5">
+              <div>
+                <BranchIcon />
+              </div>
+              <span
+                title={activity.branch.name}
+                // pseudo to increase hover area
+                className="before:absolute relative before:h-5 before:-top-4 before:inset-x-0"
+              >
+                <span className="line-clamp-1">{activity.branch.name}</span>
+              </span>
+            </span>
+          </span>
+          <p
+            title={activity.commit.message}
+            className="text-sm line-clamp-4 tracking-tight text-elements-mid-em mt-2"
+          >
+            {activity.commit.message}
+          </p>
+        </div>
+        <Button
+          aria-label="Go to commit"
+          variant="unstyled"
+          tabIndex={-1}
+          className="p-0 text-elements-low-em group-focus-within:opacity-100 group-hover:opacity-100 opacity-0 transition-all"
+          leftIcon={<ArrowRightCircleFilledIcon className="w-5 h-5" />}
         />
-      </div>
+      </Link>
-      <div className="grow">
+      {/* Separator calc => 100% - 36px (avatar) - 12px (padding-left) - 8px (gap)
-        <Typography placeholder={''}>{activity.commit.author?.name}</Typography>
+       */}
-        <Typography variant="small" color="gray" placeholder={''}>
+      <div className="pt-2 mb-2 ml-auto h-1 w-[calc(100%-36px-12px-8px)] border-b border-border-separator last:border-b-transparent"></div>
-          {relativeTimeISO(activity.commit.author!.date!)} ^{' '}
+    </>
-          {activity.branch.name}
-        </Typography>
-        <Typography variant="small" color="gray" placeholder={''}>
-          {activity.commit.message}
-        </Typography>
-      </div>
-      <div className="mr-2 self-center hidden group-hover:block">
-        <IconButton
-          size="sm"
-          className="rounded-full bg-gray-600"
-          placeholder={''}
-        >
-          {'>'}
-        </IconButton>
-      </div>
-    </div>
   );
 };
 

packages/frontend/src/components/shared/CustomIcon/ArrowRightCircleFilledIcon.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { CustomIcon, CustomIconProps } from './CustomIcon';
+
+export const ArrowRightCircleFilledIcon = (props: CustomIconProps) => {
+  return (
+    <CustomIcon
+      {...props}
+      fill="none"
+      height="32"
+      viewBox="0 0 32 32"
+      width="32"
+    >
+      <path
+        clipRule="evenodd"
+        d="M29.3334 16C29.3334 8.63619 23.3638 2.66666 16 2.66666C8.63622 2.66666 2.66669 8.63619 2.66669 16C2.66669 23.3638 8.63622 29.3333 16 29.3333C23.3638 29.3333 29.3334 23.3638 29.3334 16ZM18.1144 17.3333L16.3905 19.0572C15.8698 19.5779 15.8698 20.4221 16.3905 20.9428C16.9112 21.4635 17.7555 21.4635 18.2762 20.9428L21.3334 17.8856C22.3748 16.8442 22.3748 15.1558 21.3334 14.1144L18.2762 11.0572C17.7555 10.5365 16.9112 10.5365 16.3905 11.0572C15.8698 11.5779 15.8698 12.4221 16.3905 12.9428L18.1144 14.6667H10.6667C9.93031 14.6667 9.33335 15.2636 9.33335 16C9.33335 16.7364 9.93031 17.3333 10.6667 17.3333H18.1144Z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    </CustomIcon>
+  );
+};

packages/frontend/src/components/shared/CustomIcon/index.ts

@@ -32,3 +32,4 @@ export * from './GitHubLogo';
 export * from './ClockIcon';
 export * from './HorizontalDotIcon';
 export * from './WarningDiamondIcon';
+export * from './ArrowRightCircleFilledIcon';

packages/frontend/src/pages/org-slug/projects/id/Overview.tsx

@@ -1,15 +1,9 @@
 import React, { useEffect, useState } from 'react';
 import { Domain, DomainStatus } from 'gql-client';
-import { Link, useNavigate, useOutletContext } from 'react-router-dom';
+import { useNavigate, useOutletContext } from 'react-router-dom';
 import { RequestError } from 'octokit';
 
-import {
+import { Typography, Chip, Avatar, Tooltip } from '@material-tailwind/react';
-  Typography,
-  Button,
-  Chip,
-  Avatar,
-  Tooltip,
-} from '@material-tailwind/react';
 
 import ActivityCard from '../../../../components/projects/project/ActivityCard';
 import { relativeTimeMs } from '../../../../utils/time';
@@ -17,6 +11,8 @@ import { useOctokit } from '../../../../context/OctokitContext';
 import { GitCommitWithBranch, OutletContextType } from '../../../../types';
 import { useGQLClient } from '../../../../context/GQLClientContext';
 import { formatAddress } from '../../../../utils/format';
+import { Button } from 'components/shared/Button';
+import { Heading } from 'components/shared/Heading';
 
 const COMMITS_PER_PAGE = 4;
 
@@ -107,9 +103,9 @@ const OverviewTabPanel = () => {
   }, [project]);
 
   return (
-    <div className="grid grid-cols-5">
+    <div className="grid grid-cols-5 gap-[72px] mt-7">
-      <div className="col-span-3 p-2">
+      <div className="col-span-3">
-        <div className="flex items-center gap-2 p-2 ">
+        <div className="flex items-center gap-2">
           <Avatar
             src={project.icon || '/gray.png'}
             variant="rounded"
@@ -143,12 +139,11 @@ const OverviewTabPanel = () => {
               />
               <Button
                 className="normal-case rounded-full"
-                color="blue"
+                variant="primary"
                 size="sm"
                 onClick={() => {
                   navigate('settings/domains');
                 }}
-                placeholder={''}
               >
                 Setup
               </Button>
@@ -179,21 +174,17 @@ const OverviewTabPanel = () => {
           <div>No current deployment found</div>
         )}
       </div>
-      <div className="col-span-2 p-2">
+      <div className="col-span-2 mr-1">
-        <div className="flex justify-between">
+        <div className="flex items-center justify-between">
-          <Typography variant="h6" placeholder={''}>
+          <Heading className="text-lg leading-6 font-medium">Activity</Heading>
-            Activity
+          <Button variant="tertiary" size="sm">
-          </Typography>
-          <button className="text-xs bg-gray-300 rounded-full p-2">
             See all
-          </button>
+          </Button>
         </div>
-        <div className="p-2">
+        <div className="mt-5">
           {activities.map((activity, index) => {
             return (
-              <Link to={activity.html_url} target="_blank" key={index}>
+              <ActivityCard activity={activity} key={`activity-${index}`} />
-                <ActivityCard activity={activity} />
-              </Link>
             );
           })}
         </div>