deep-stack/snowballtools-base
3
0
Fork 0
forked from cerc-io/snowballtools-base
Code Pull Requests Actions Activity

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

Browse Source
This commit is contained in:
Wahyu Kurniawan 2024-03-14 21:52:55 +07:00
parent c2417a9daa
commit f3ce0d0621
No known key found for this signature in database
GPG Key ID: 040A1549143A8E33
1 changed files with 55 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
packages/frontend/src/components/projects/project/deployments/DeploymentDialogBodyCard.tsx
View File

@ -1,17 +1,23 @@
import React from 'react'; import React from 'react';
import { Deployment } from 'gql-client'; 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 { 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 { interface DeploymentDialogBodyCardProps {
deployment: Deployment; deployment: Deployment;
chip?: { chip?: {
value: string; value: string;
color?: color; type?: TagProps['type'];
}; };
} }
@ -19,31 +25,54 @@ const DeploymentDialogBodyCard = ({
chip, chip,
deployment, deployment,
}: DeploymentDialogBodyCardProps) => { }: DeploymentDialogBodyCardProps) => {
const commit =
deployment.commitHash.substring(0, SHORT_COMMIT_HASH_LENGTH) +
' ' +
deployment.commitMessage;
return ( 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 && (
<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} {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>
); );
}; };