🎨 style: adjust deployment body card design to match with the figma

packages/frontend/src/components/projects/project/deployments/DeploymentDialogBodyCard.tsx

@@ -1,17 +1,23 @@
 import React from 'react';
 import { Deployment } from 'gql-client';
 
-import { Typography, Chip, Card } from '@material-tailwind/react';
+import { relativeTimeMs } from 'utils/time';
-import { color } from '@material-tailwind/react/types/components/chip';
-import { relativeTimeMs } from '../../../../utils/time';
 import { SHORT_COMMIT_HASH_LENGTH } from '../../../../constants';
-import { formatAddress } from '../../../../utils/format';
+import {
+  BranchStrokeIcon,
+  ClockOutlineIcon,
+  CommitIcon,
+} from 'components/shared/CustomIcon';
+import { Avatar } from 'components/shared/Avatar';
+import { getInitials } from 'utils/geInitials';
+import { OverflownText } from 'components/shared/OverflownText';
+import { Tag, TagProps } from 'components/shared/Tag';
 
 interface DeploymentDialogBodyCardProps {
   deployment: Deployment;
   chip?: {
     value: string;
-    color?: color;
+    type?: TagProps['type'];
   };
 }
 
@@ -19,31 +25,54 @@ const DeploymentDialogBodyCard = ({
   chip,
   deployment,
 }: DeploymentDialogBodyCardProps) => {
+  const commit =
+    deployment.commitHash.substring(0, SHORT_COMMIT_HASH_LENGTH) +
+    ' ' +
+    deployment.commitMessage;
+
   return (
-    <Card className="p-2 shadow-none" placeholder={''}>
+    <div className="flex flex-col gap-4 px-4 py-4 rounded-xl bg-base-bg-emphasized text-elements-low-em">
       {chip && (
-        <Chip
+        <Tag className="w-fit" size="xs" type={chip.type}>
-          className={`w-fit normal-case font-normal`}
+          {chip.value}
-          size="sm"
+        </Tag>
-          value={chip.value}
-          color={chip.color}
-        />
       )}
-      {deployment.url && (
+      <div className="flex flex-col gap-3">
-        <Typography variant="small" className="text-black" placeholder={''}>
+        {/* Title */}
+        <p className="text-sm font-medium text-elements-high-em tracking-[0.006em]">
           {deployment.url}
-        </Typography>
+        </p>
-      )}
+        {/* Branch & commit */}
-      <Typography variant="small" placeholder={''}>
+        <div className="flex items-center gap-6 text-elements-low-em">
-        ^ {deployment.branch} ^{' '}
+          <div className="flex items-center gap-2">
-        {deployment.commitHash.substring(0, SHORT_COMMIT_HASH_LENGTH)}{' '}
+            <BranchStrokeIcon size={16} />
-        {deployment.commitMessage}
+            <p className="text-sm tracking-[0.006em]">{deployment.branch}</p>
-      </Typography>
+          </div>
-      <Typography variant="small" placeholder={''}>
+          <div className="flex items-center gap-2 w-full">
-        ^ {relativeTimeMs(deployment.createdAt)} ^{' '}
+            <CommitIcon size={16} />
-        {formatAddress(deployment.createdBy.name ?? '')}
+            <p className="text-sm tracking-[0.006em] max-w-[80%]">
-      </Typography>
+              <OverflownText content={commit}>{commit}</OverflownText>
-    </Card>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div className="flex items-center gap-2 text-elements-low-em">
+        <ClockOutlineIcon size={16} />
+        <p className="text-sm tracking-[0.006em]">
+          {relativeTimeMs(deployment.createdAt)}
+        </p>
+        <Avatar
+          size={20}
+          type="orange"
+          initials={getInitials(deployment.createdBy.name ?? '')}
+          // TODO: Add avatar image URL
+          // imageSrc={deployment.createdBy.imageUrl}
+        />
+        <p className="text-sm tracking-[0.006em]">
+          {deployment.createdBy.name ?? 'Unknown'}
+        </p>
+      </div>
+    </div>
   );
 };