diff --git a/frontend/src/component/admin/users/InviteLink/InviteLink.tsx b/frontend/src/component/admin/users/InviteLink/InviteLink.tsx index cf68057e28..6f2b54e609 100644 --- a/frontend/src/component/admin/users/InviteLink/InviteLink.tsx +++ b/frontend/src/component/admin/users/InviteLink/InviteLink.tsx @@ -1,4 +1,4 @@ -import { type FormEventHandler, useState, type VFC } from 'react'; +import { type FormEventHandler, useState, type FC } from 'react'; import { useNavigate } from 'react-router-dom'; import { useSWRConfig } from 'swr'; import { Box, Button, Typography } from '@mui/material'; @@ -19,7 +19,7 @@ import { LinkField } from '../LinkField/LinkField'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { usePlausibleTracker } from 'hooks/usePlausibleTracker'; -type ICreateInviteLinkProps = {}; +type IInviteLinkProps = {}; const expiryOptions = [ { @@ -56,7 +56,7 @@ const useFormatApiCode = (isUpdating: boolean, expiry: string) => { )}'`; }; -export const InviteLink: VFC = () => { +export const InviteLink: FC = () => { const navigate = useNavigate(); const { data, loading } = useInviteTokens(); const [inviteLink, setInviteLink] = useState(''); diff --git a/frontend/src/component/admin/users/InviteLinkBar/InviteLinkBarContent.tsx b/frontend/src/component/admin/users/InviteLinkBar/InviteLinkBarContent.tsx index f3011b7bdd..3766d7d629 100644 --- a/frontend/src/component/admin/users/InviteLinkBar/InviteLinkBarContent.tsx +++ b/frontend/src/component/admin/users/InviteLinkBar/InviteLinkBarContent.tsx @@ -95,7 +95,11 @@ export const InviteLinkBarContent = ({ } /> - + } elseShow={ diff --git a/frontend/src/component/admin/users/LinkField/LinkField.tsx b/frontend/src/component/admin/users/LinkField/LinkField.tsx index 101266f691..68e4200f6a 100644 --- a/frontend/src/component/admin/users/LinkField/LinkField.tsx +++ b/frontend/src/component/admin/users/LinkField/LinkField.tsx @@ -1,4 +1,5 @@ -import { Box, IconButton, Tooltip } from '@mui/material'; +import type { FC } from 'react'; +import { Box, IconButton, styled, Tooltip } from '@mui/material'; import CopyIcon from '@mui/icons-material/FileCopy'; import useToast from 'hooks/useToast'; @@ -8,15 +9,43 @@ interface ILinkFieldProps { successTitle?: string; errorTitle?: string; onCopy?: () => void; + isExpired?: boolean; } -export const LinkField = ({ +const StyledBox = styled(Box)<{ isExpired?: boolean; small?: boolean }>( + ({ theme, small, isExpired }) => ({ + backgroundColor: theme.palette.background.elevation2, + padding: theme.spacing(4), + borderRadius: `${theme.shape.borderRadius}px`, + marginTop: theme.spacing(2), + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', + wordBreak: 'break-all', + ...(small + ? { + marginTop: 0, + padding: theme.spacing(0.5, 0.5, 0.5, 1.5), + fontSize: theme.typography.body2.fontSize, + } + : {}), + ...(isExpired + ? { + textDecoration: 'line-through', + color: theme.palette.text.disabled, + } + : {}), + }), +); + +export const LinkField: FC = ({ inviteLink, small, successTitle = 'Successfully copied invite link.', errorTitle = 'Could not copy invite link.', onCopy, -}: ILinkFieldProps) => { + isExpired, +}) => { const { setToastData } = useToast(); const setError = () => @@ -45,38 +74,18 @@ export const LinkField = ({ }; return ( - theme.palette.background.elevation2, - py: 4, - px: 4, - borderRadius: (theme) => `${theme.shape.borderRadius}px`, - mt: 2, - display: 'flex', - justifyContent: 'space-between', - alignItems: 'center', - wordBreak: 'break-all', - ...(small - ? { - my: 0, - py: 0.5, - pl: 1.5, - pr: 0.5, - fontSize: (theme) => theme.typography.body2.fontSize, - } - : {}), - }} - > + {inviteLink} - + - + ); };