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
2024-02-28 13:31:41 +05:45 · 2024-02-28 13:31:41 +05:45 · a238610522
commit a238610522
parent 62734308fc
4 changed files with 109 additions and 56 deletions
--- a/packages/frontend/src/components/projects/project/ActivityCard.tsx
+++ b/packages/frontend/src/components/projects/project/ActivityCard.tsx
@ -1,45 +1,85 @@
 import React from 'react';
-
-import { Typography, IconButton, Avatar } from '@material-tailwind/react';
-
-import { relativeTimeISO } from '../../../utils/time';
+import { Link } from 'react-router-dom';
 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
+        to={activity.html_url}
+        target="_blank"
+        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"
+      >
+        <div>
          <Avatar
-          src={activity.author?.avatar_url}
-          variant="rounded"
-          size="sm"
-          placeholder={''}
+            type="orange"
+            size={36}
+            initials={getInitials(activity.commit.author?.name ?? '')}
+            imageSrc={activity.author?.avatar_url}
          />
        </div>
-      <div className="grow">
-        <Typography placeholder={''}>{activity.commit.author?.name}</Typography>
-        <Typography variant="small" color="gray" placeholder={''}>
-          {relativeTimeISO(activity.commit.author!.date!)} ^{' '}
-          {activity.branch.name}
-        </Typography>
-        <Typography variant="small" color="gray" placeholder={''}>
-          {activity.commit.message}
-        </Typography>
+        <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>
-      <div className="mr-2 self-center hidden group-hover:block">
-        <IconButton
-          size="sm"
-          className="rounded-full bg-gray-600"
-          placeholder={''}
+              <span
+                title={activity.branch.name}
+                // pseudo to increase hover area
+                className="before:absolute relative before:h-5 before:-top-4 before:inset-x-0"
              >
-          {'>'}
-        </IconButton>
-      </div>
+                <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" />}
+        />
+      </Link>
+      {/* Separator calc => 100% - 36px (avatar) - 12px (padding-left) - 8px (gap)
+       */}
+      <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>
+    </>
  );
 };

--- a/packages/frontend/src/components/shared/CustomIcon/ArrowRightCircleFilledIcon.tsx
+++ b/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>
+  );
+};
--- a/packages/frontend/src/components/shared/CustomIcon/index.ts
+++ b/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';
--- a/packages/frontend/src/pages/org-slug/projects/id/Overview.tsx
+++ b/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 {
-  Typography,
-  Button,
-  Chip,
-  Avatar,
-  Tooltip,
-} from '@material-tailwind/react';
+import { Typography, 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="col-span-3 p-2">
-        <div className="flex items-center gap-2 p-2 ">
+    <div className="grid grid-cols-5 gap-[72px] mt-7">
+      <div className="col-span-3">
+        <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="flex justify-between">
-          <Typography variant="h6" placeholder={''}>
-            Activity
-          </Typography>
-          <button className="text-xs bg-gray-300 rounded-full p-2">
+      <div className="col-span-2 mr-1">
+        <div className="flex items-center justify-between">
+          <Heading className="text-lg leading-6 font-medium">Activity</Heading>
+          <Button variant="tertiary" size="sm">
            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} />
-              </Link>
+              <ActivityCard activity={activity} key={`activity-${index}`} />
            );
          })}
        </div>