Invite settings screen looks strange with long link (#1936)

bug/Invite settings screen looks strange with long link
TryQuiet · Oct 11, 2023 · d6302b6 · d6302b6
1 parent f478af3
commit d6302b6
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+[unreleased]
+
+* Shorter dots-placeholder for invite link
+
 
 [Unreleased]
 

diff --git a/packages/desktop/src/renderer/components/Settings/Tabs/Invite/Invite.component.test.tsx b/packages/desktop/src/renderer/components/Settings/Tabs/Invite/Invite.component.test.tsx
@@ -76,7 +76,7 @@ describe('CopyLink', () => {
                     class="MuiTypography-root MuiTypography-body2 InviteToCommunitylink css-16d47hw-MuiTypography-root"
                     data-testid="invitation-link"
                   >
-                    •••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
+                    ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
                   </p>
                   <button
                     class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall InviteToCommunityeyeIcon css-1pe4mpk-MuiButtonBase-root-MuiIconButton-root"

diff --git a/packages/desktop/src/renderer/components/Settings/Tabs/Invite/Invite.component.tsx b/packages/desktop/src/renderer/components/Settings/Tabs/Invite/Invite.component.tsx
@@ -82,6 +82,7 @@ export const InviteComponent: FC<InviteComponentProps> = ({
   revealInputValue,
   handleClickInputReveal,
 }) => {
+  const hiddenInvitationLink = invitationLink.slice(0, 90).replace(/./g, '•')
   return (
     <StyledGrid container direction='column'>
       <Grid container item justifyContent='space-between' alignItems='center' className={classes.titleDiv}>
@@ -102,7 +103,7 @@ export const InviteComponent: FC<InviteComponentProps> = ({
           </Typography>
           <Grid item className={classes.linkContainer}>
             <Typography variant='body2' className={classes.link} data-testid='invitation-link'>
-              {revealInputValue ? invitationLink : invitationLink?.replace(/./g, '•')}
+              {revealInputValue ? invitationLink : hiddenInvitationLink}
             </Typography>
             <IconButton
               data-testid='show-invitation-link'