ben.carrasco/prowler
1
0
Fork 0
mirror of https://github.com/prowler-cloud/prowler.git synced 2026-01-25 02:08:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

styles(invitations): tweak styles for invitation details box (#6476)

Browse Source 
Co-authored-by: Pablo Lara <larabjj@gmail.com>
This commit is contained in:
Prowler Bot
2025-01-13 18:35:43 +01:00
committed by GitHub
parent 07ce859b65
commit e5b72a65f3
1 changed files with 34 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
ui/components/invitations/invitation-details.tsx
View File

@@ -25,6 +25,21 @@ interface InvitationDetailsProps {
selfLink: string;
}
const InfoField = ({
label,
children,
}: {
label: string;
children: React.ReactNode;
}) => (
<div className="flex flex-col gap-1">
<span className="text-xs font-bold text-gray-500">{label}</span>
<div className="flex items-center rounded-lg bg-gray-50 p-3">
<span className="text-small text-gray-900">{children}</span>
</div>
</div>
);
export const InvitationDetails = ({ attributes }: InvitationDetailsProps) => {
// window.location.origin to get the current base URL
const baseUrl =
@@ -42,45 +57,37 @@ export const InvitationDetails = ({ attributes }: InvitationDetailsProps) => {
shadow="sm"
>
<CardBody>
<h2 className="text-2xl font-bold text-foreground/90">
Invitation Details
<h2 className="text-md font-bold text-foreground/90">
Invitation details
</h2>
<Divider className="my-4" />
<div className="space-y-3">
<div className="flex items-center justify-between">
<strong className="text-default-500">Email:</strong>
<span>{attributes.email}</span>
</div>
<InfoField label="Email">{attributes.email}</InfoField>
<div className="flex items-center justify-between">
<strong className="text-default-500">State:</strong>
<span className="capitalize">{attributes.state}</span>
</div>
<InfoField label="Token">{attributes.token}</InfoField>
<div className="flex items-center justify-between">
<strong className="text-default-500">Token:</strong>
<span>{attributes.token}</span>
</div>
<div className="grid grid-cols-1 gap-3 md:grid-cols-2">
<InfoField label="State">
<span className="capitalize">{attributes.state}</span>
</InfoField>
<div className="flex items-center justify-between">
<strong className="text-default-500">Expires At:</strong>
<DateWithTime dateTime={attributes.expires_at} />
</div>
<InfoField label="Expires At">
<DateWithTime dateTime={attributes.expires_at} inline />
</InfoField>
<div className="flex items-center justify-between">
<strong className="text-default-500">Inserted At:</strong>
<DateWithTime dateTime={attributes.inserted_at} />
</div>
<InfoField label="Created At">
<DateWithTime dateTime={attributes.inserted_at} inline />
</InfoField>
<div className="flex items-center justify-between">
<strong className="text-default-500">Updated At:</strong>
<DateWithTime dateTime={attributes.updated_at} />
<InfoField label="Updated At">
<DateWithTime dateTime={attributes.updated_at} inline />
</InfoField>
</div>
</div>
<Divider className="my-4" />
<h3 className="pb-2 text-xl font-bold text-foreground/90">
<h3 className="pb-2 text-small font-bold text-foreground/90">
Share this link with the user:
</h3>
@@ -93,7 +100,7 @@ export const InvitationDetails = ({ attributes }: InvitationDetailsProps) => {
variant="bordered"
className="overflow-hidden text-ellipsis whitespace-nowrap"
>
<p className="no-scrollbar w-96 overflow-hidden overflow-x-scroll text-ellipsis whitespace-nowrap text-sm">
<p className="no-scrollbar w-fit overflow-hidden overflow-x-scroll text-ellipsis whitespace-nowrap text-small">
{invitationLink}
</p>
</Snippet>