diff --git a/src/cloud/components/organisms/settings/MembersTab.tsx b/src/cloud/components/organisms/settings/MembersTab.tsx index ae1b92d6fb..eac38b2073 100644 --- a/src/cloud/components/organisms/settings/MembersTab.tsx +++ b/src/cloud/components/organisms/settings/MembersTab.tsx @@ -47,6 +47,7 @@ import { SerializedGuest } from '../../../interfaces/db/guest' import EmojiIcon from '../../atoms/EmojiIcon' import { getDocTitle } from '../../../lib/utils/patterns' import SettingsTeamForm from '../../molecules/SettingsTeamForm' +import { guestsPerMember } from '../../../lib/subscription' const MembersTab = () => { const { t } = useTranslation() @@ -625,6 +626,18 @@ const MembersTab = () => { )} + + Guests are people external to your team who you want to work + with on specific documents. They can be invited to + individual documents but not an entire workspace. + +

+ {permissions.length > 0 + ? `${ + permissions.length * guestsPerMember - guestsMap.size + } remaining ${plur('seat', permissions.length)}. ` + : 'No Remaining seats. '} +

User @@ -708,6 +721,7 @@ const TopMargin = styled.div` const StyledMembersTable = styled.table` width: 100%; + margin-top: ${({ theme }) => theme.space.default}px; .table-header { text-align: left; @@ -765,7 +779,6 @@ const StyledMembersTable = styled.table` const StyledGuestInactiveText = styled.p` margin-top: ${({ theme }) => theme.space.medium}px; margin-bottom: ${({ theme }) => theme.space.default}px; - line-height: 1.6; ` export default MembersTab diff --git a/src/cloud/components/organisms/settings/styled.ts b/src/cloud/components/organisms/settings/styled.ts index c8cea2098a..e99dd590d8 100644 --- a/src/cloud/components/organisms/settings/styled.ts +++ b/src/cloud/components/organisms/settings/styled.ts @@ -370,6 +370,7 @@ export const SectionDescription = styled.small` color: ${({ theme }) => theme.subtleTextColor}; display: block; margin-bottom: ${({ theme }) => theme.space.xsmall}px; + line-height: 1.6; ` export const SectionFlexLeft = styled.div`