yuuza/outline
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore: Convert <Text /> component to span by default

Browse Source
This commit is contained in:
Tom Moor
2024-01-30 22:49:31 -05:00
parent a960d8cee5
commit 5ce8827a8c
56 changed files with 93 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/components/CollectionDeleteDialog.tsx
View File

@@ -41,7 +41,7 @@ function CollectionDeleteDialog({ collection, onSubmit }: Props) {
danger danger
> >
<> <>
<Text type="secondary"> <Text as="p" type="secondary">
<Trans <Trans
defaults="Are you sure about that? Deleting the <em>{{collectionName}}</em> collection is permanent and cannot be restored, however all published documents within will be moved to the trash." defaults="Are you sure about that? Deleting the <em>{{collectionName}}</em> collection is permanent and cannot be restored, however all published documents within will be moved to the trash."
values={{ values={{
@@ -53,7 +53,7 @@ function CollectionDeleteDialog({ collection, onSubmit }: Props) {
/> />
</Text> </Text>
{team.defaultCollectionId === collection.id ? ( {team.defaultCollectionId === collection.id ? (
<Text type="secondary"> <Text as="p" type="secondary">
<Trans <Trans
defaults="Also, <em>{{collectionName}}</em> is being used as the start view – deleting it will reset the start view to the Home page." defaults="Also, <em>{{collectionName}}</em> is being used as the start view – deleting it will reset the start view to the Home page."
values={{ values={{

2
app/components/CommandBarItem.tsx
View File

@@ -62,7 +62,7 @@ function CommandBarItem(
{index > 0 ? ( {index > 0 ? (
<> <>
{" "} {" "}
<Text size="xsmall" as="span" type="secondary"> <Text size="xsmall" type="secondary">
then then
</Text>{" "} </Text>{" "}
</> </>

2
app/components/CommentDeleteDialog.tsx
View File

@@ -33,7 +33,7 @@ function CommentDeleteDialog({ comment, onSubmit }: Props) {
savingText={`${t("Deleting")}…`} savingText={`${t("Deleting")}…`}
danger danger
> >
<Text type="secondary"> <Text as="p" type="secondary">
{hasChildComments ? ( {hasChildComments ? (
<Trans> <Trans>
Are you sure you want to permanently delete this entire comment Are you sure you want to permanently delete this entire comment

4
app/components/DocumentExplorer.tsx
View File

@@ -389,7 +389,9 @@ function DocumentExplorer({ onSubmit, onSelect, items }: Props) {
</AutoSizer> </AutoSizer>
) : ( ) : (
<FlexContainer> <FlexContainer>
<Text type="secondary">{t("No results found")}.</Text> <Text as="p" type="secondary">
{t("No results found")}.
</Text>
</FlexContainer> </FlexContainer>
)} )}
</ListContainer> </ListContainer>

21
app/components/DuplicateDialog.tsx
View File

@@ -5,6 +5,7 @@ import { DocumentValidation } from "@shared/validations";
import Document from "~/models/Document"; import Document from "~/models/Document";
import ConfirmationDialog from "~/components/ConfirmationDialog"; import ConfirmationDialog from "~/components/ConfirmationDialog";
import Input from "./Input"; import Input from "./Input";
import Switch from "./Switch";
import Text from "./Text"; import Text from "./Text";
type Props = { type Props = {
@@ -55,17 +56,15 @@ function DuplicateDialog({ document, onSubmit }: Props) {
defaultValue={defaultTitle} defaultValue={defaultTitle}
/> />
{document.publishedAt && !document.isTemplate && ( {document.publishedAt && !document.isTemplate && (
<label> <Text size="small">
<Text size="small"> <Switch
<input name="recursive"
type="checkbox" label={t("Include nested documents")}
name="recursive" labelPosition="right"
checked={recursive} checked={recursive}
onChange={handleRecursiveChange} onChange={handleRecursiveChange}
/>{" "} />
{t("Include nested documents")} </Text>
</Text>
</label>
)} )}
</ConfirmationDialog> </ConfirmationDialog>
); );

4
app/components/ErrorBoundary.tsx
View File

@@ -82,7 +82,7 @@ class ErrorBoundary extends React.Component<Props> {
</h1> </h1>
</> </>
)} )}
<Text type="secondary"> <Text as="p" type="secondary">
<Trans> <Trans>
Sorry, part of the application failed to load. This may be Sorry, part of the application failed to load. This may be
because it was updated since you opened the tab or because of a because it was updated since you opened the tab or because of a
@@ -106,7 +106,7 @@ class ErrorBoundary extends React.Component<Props> {
</h1> </h1>
</> </>
)} )}
<Text type="secondary"> <Text as="p" type="secondary">
<Trans <Trans
defaults="Sorry, an unrecoverable error occurred{{notified}}. Please try reloading the page, it may have been a temporary glitch." defaults="Sorry, an unrecoverable error occurred{{notified}}. Please try reloading the page, it may have been a temporary glitch."
values={{ values={{

6
app/components/ExportDialog.tsx
View File

@@ -95,7 +95,7 @@ function ExportDialog({ collection, onSubmit }: Props) {
return ( return (
<ConfirmationDialog onSubmit={handleSubmit} submitText={t("Export")}> <ConfirmationDialog onSubmit={handleSubmit} submitText={t("Export")}>
{collection && ( {collection && (
<Text> <Text as="p">
<Trans <Trans
defaults="Exporting the collection <em>{{collectionName}}</em> may take some time." defaults="Exporting the collection <em>{{collectionName}}</em> may take some time."
values={{ values={{
@@ -120,7 +120,7 @@ function ExportDialog({ collection, onSubmit }: Props) {
onChange={handleFormatChange} onChange={handleFormatChange}
/> />
<div> <div>
<Text size="small" weight="bold"> <Text as="p" size="small" weight="bold">
{item.title} {item.title}
</Text> </Text>
<Text size="small">{item.description}</Text> <Text size="small">{item.description}</Text>
@@ -137,7 +137,7 @@ function ExportDialog({ collection, onSubmit }: Props) {
onChange={handleIncludeAttachmentsChange} onChange={handleIncludeAttachmentsChange}
/> />
<div> <div>
<Text size="small" weight="bold"> <Text as="p" size="small" weight="bold">
{t("Include attachments")} {t("Include attachments")}
</Text> </Text>
<Text size="small"> <Text size="small">

8
app/components/Input.tsx
View File

@@ -245,9 +245,9 @@ function Input(
</label> </label>
{error && ( {error && (
<TextWrapper> <TextWrapper>
<StyledText type="danger" size="xsmall"> <Text type="danger" size="xsmall">
{error} {error}
</StyledText> </Text>
</TextWrapper> </TextWrapper>
)} )}
</Wrapper> </Wrapper>
@@ -260,8 +260,4 @@ export const TextWrapper = styled.span`
margin-top: -16px; margin-top: -16px;
`; `;
export const StyledText = styled(Text)`
margin-bottom: 0;
`;
export default React.forwardRef(Input); export default React.forwardRef(Input);

3
app/components/InputSelect.tsx
View File

@@ -42,6 +42,7 @@ export type Props = {
labelHidden?: boolean; labelHidden?: boolean;
icon?: React.ReactNode; icon?: React.ReactNode;
options: Option[]; options: Option[];
/** @deprecated Removing soon, do not use. */
note?: React.ReactNode; note?: React.ReactNode;
onChange?: (value: string | null) => void; onChange?: (value: string | null) => void;
}; };
@@ -206,7 +207,7 @@ const InputSelect = (props: Props) => {
</SelectPopover> </SelectPopover>
</Wrapper> </Wrapper>
{note && ( {note && (
<Text type="secondary" size="small"> <Text as="p" type="secondary" size="small">
{note} {note}
</Text> </Text>
)} )}

8
app/components/Modal.tsx
View File

@@ -89,11 +89,7 @@ const Modal: React.FC<Props> = ({
<ErrorBoundary component="div">{children}</ErrorBoundary> <ErrorBoundary component="div">{children}</ErrorBoundary>
</SmallContent> </SmallContent>
<Header> <Header>
{title && ( {title && <Text size="large">{title}</Text>}
<Text as="span" size="large">
{title}
</Text>
)}
<NudeButton onClick={onRequestClose}> <NudeButton onClick={onRequestClose}>
<CloseIcon /> <CloseIcon />
</NudeButton> </NudeButton>
@@ -127,7 +123,7 @@ const Modal: React.FC<Props> = ({
</Close> </Close>
<Back onClick={onRequestClose}> <Back onClick={onRequestClose}>
<BackIcon size={32} /> <BackIcon size={32} />
<Text as="span">{t("Back")} </Text> <Text>{t("Back")} </Text>
</Back> </Back>
</Fullscreen> </Fullscreen>
) )

8
app/components/Notifications/NotificationListItem.tsx
View File

@@ -45,15 +45,13 @@ function NotificationListItem({ notification, onNavigate }: Props) {
<StyledAvatar model={notification.actor} size={AvatarSize.Large} /> <StyledAvatar model={notification.actor} size={AvatarSize.Large} />
<Flex column> <Flex column>
<Text as="div" size="small"> <Text as="div" size="small">
<Text as="span" weight="bold"> <Text weight="bold">
{notification.actor?.name ?? t("Unknown")} {notification.actor?.name ?? t("Unknown")}
</Text>{" "} </Text>{" "}
{notification.eventText(t)}{" "} {notification.eventText(t)}{" "}
<Text as="span" weight="bold"> <Text weight="bold">{notification.subject}</Text>
{notification.subject}
</Text>
</Text> </Text>
<Text as="span" type="tertiary" size="xsmall"> <Text type="tertiary" size="xsmall">
<Time <Time
dateTime={notification.createdAt} dateTime={notification.createdAt}
tooltipDelay={1000} tooltipDelay={1000}

2
app/components/Sharing/SharePopover.tsx
View File

@@ -478,7 +478,7 @@ const AccessTooltip = ({
return ( return (
<Flex align="center" gap={2}> <Flex align="center" gap={2}>
<Text type="secondary" size="small" as="span"> <Text type="secondary" size="small">
{children} {children}
</Text> </Text>
<Tooltip tooltip={tooltip ?? t("Access inherited from collection")}> <Tooltip tooltip={tooltip ?? t("Access inherited from collection")}>

2
app/components/Sidebar/components/SidebarButton.tsx
View File

@@ -44,7 +44,7 @@ const SidebarButton = React.forwardRef<HTMLButtonElement, SidebarButtonProps>(
> >
<Content gap={8} align="center"> <Content gap={8} align="center">
{image} {image}
{title && <Title as="span">{title}</Title>} {title && <Title>{title}</Title>}
</Content> </Content>
{showMoreMenu && <StyledMoreIcon />} {showMoreMenu && <StyledMoreIcon />}
</Button> </Button>

2
app/components/Text.ts
View File

@@ -12,7 +12,7 @@ type Props = {
* Use this component for all interface text that should not be selectable * Use this component for all interface text that should not be selectable
* by the user, this is the majority of UI text explainers, notes, headings. * by the user, this is the majority of UI text explainers, notes, headings.
*/ */
const Text = styled.p<Props>` const Text = styled.span<Props>`
margin-top: 0; margin-top: 0;
text-align: ${(props) => (props.dir ? props.dir : "inherit")}; text-align: ${(props) => (props.dir ? props.dir : "inherit")};
color: ${(props) => color: ${(props) =>

2
app/scenes/APITokenNew.tsx
View File

@@ -43,7 +43,7 @@ function APITokenNew({ onSubmit }: Props) {
return ( return (
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<Text type="secondary"> <Text as="p" type="secondary">
{t( {t(
`Name your token something that will help you to remember it's use in the future, for example "local development", "production", or "continuous integration".` `Name your token something that will help you to remember it's use in the future, for example "local development", "production", or "continuous integration".`
)} )}

2
app/scenes/Collection/Empty.tsx
View File

@@ -25,7 +25,7 @@ function EmptyCollection({ collection }: Props) {
return ( return (
<Centered column> <Centered column>
<Text type="secondary"> <Text as="p" type="secondary">
<Trans <Trans
defaults="<em>{{ collectionName }}</em> doesn’t contain any defaults="<em>{{ collectionName }}</em> doesn’t contain any
documents yet." documents yet."

2
app/scenes/CollectionEdit.tsx
View File

@@ -78,7 +78,7 @@ const CollectionEdit = ({ collectionId, onSubmit }: Props) => {
return ( return (
<Flex column> <Flex column>
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<Text type="secondary"> <Text as="p" type="secondary">
<Trans> <Trans>
You can edit the name and other details at any time, however doing You can edit the name and other details at any time, however doing
so often might confuse your team mates. so often might confuse your team mates.

2
app/scenes/CollectionNew.tsx
View File

@@ -119,7 +119,7 @@ class CollectionNew extends React.Component<Props> {
const teamSharingEnabled = !!auth.team && auth.team.sharing; const teamSharingEnabled = !!auth.team && auth.team.sharing;
return ( return (
<form onSubmit={this.handleSubmit}> <form onSubmit={this.handleSubmit}>
<Text type="secondary"> <Text as="p" type="secondary">
<Trans> <Trans>
Collections are for grouping your documents. They work best when Collections are for grouping your documents. They work best when
organized around a topic or internal team — Product or Engineering organized around a topic or internal team — Product or Engineering

2
app/scenes/CollectionPermissions/AddGroupsToCollection.tsx
View File

@@ -69,7 +69,7 @@ function AddGroupsToCollection(props: Props) {
return ( return (
<Flex column> <Flex column>
{can.createGroup ? ( {can.createGroup ? (
<Text type="secondary"> <Text as="p" type="secondary">
{t("Can’t find the group you’re looking for?")}{" "} {t("Can’t find the group you’re looking for?")}{" "}
<ButtonLink onClick={handleNewGroupModalOpen}> <ButtonLink onClick={handleNewGroupModalOpen}>
{t("Create a group")} {t("Create a group")}

2
app/scenes/CollectionPermissions/AddPeopleToCollection.tsx
View File

@@ -69,7 +69,7 @@ function AddPeopleToCollection({ collection }: Props) {
return ( return (
<Flex column> <Flex column>
<Text type="secondary"> <Text as="p" type="secondary">
{t("Need to add someone who’s not on the team yet?")}{" "} {t("Need to add someone who’s not on the team yet?")}{" "}
{can.inviteUser ? ( {can.inviteUser ? (
<ButtonLink onClick={setInviteModalOpen}> <ButtonLink onClick={setInviteModalOpen}>

10
app/scenes/Document/components/Insights.tsx
View File

@@ -55,7 +55,7 @@ function Insights() {
<div> <div>
<Content column> <Content column>
<Heading>{t("Stats")}</Heading> <Heading>{t("Stats")}</Heading>
<Text type="secondary" size="small"> <Text as="p" type="secondary" size="small">
<List> <List>
{stats.total.words > 0 && ( {stats.total.words > 0 && (
<li> <li>
@@ -98,7 +98,7 @@ function Insights() {
<> <>
<Content column> <Content column>
<Heading>{t("Contributors")}</Heading> <Heading>{t("Contributors")}</Heading>
<Text type="secondary" size="small"> <Text as="p" type="secondary" size="small">
{t(`Created`)}{" "} {t(`Created`)}{" "}
<Time dateTime={document.createdAt} addSuffix />. <Time dateTime={document.createdAt} addSuffix />.
<br /> <br />
@@ -130,7 +130,7 @@ function Insights() {
</Content> </Content>
<Content column> <Content column>
<Heading>{t("Views")}</Heading> <Heading>{t("Views")}</Heading>
<Text type="secondary" size="small"> <Text as="p" type="secondary" size="small">
{documentViews.length <= 1 {documentViews.length <= 1
? t("No one else has viewed yet") ? t("No one else has viewed yet")
: t( : t(
@@ -157,10 +157,10 @@ function Insights() {
{can.updateInsights && ( {can.updateInsights && (
<Manage> <Manage>
<Flex column> <Flex column>
<Text size="small" weight="bold"> <Text as="p" size="small" weight="bold">
{t("Viewer insights")} {t("Viewer insights")}
</Text> </Text>
<Text type="secondary" size="small"> <Text as="p" type="secondary" size="small">
{t( {t(
"As an admin you can manage if team members can see who has viewed this document" "As an admin you can manage if team members can see who has viewed this document"
)} )}

4
app/scenes/DocumentDelete.tsx
View File

@@ -83,7 +83,7 @@ function DocumentDelete({ document, onSubmit }: Props) {
return ( return (
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<Text type="secondary"> <Text as="p" type="secondary">
{document.isTemplate ? ( {document.isTemplate ? (
<Trans <Trans
defaults="Are you sure you want to delete the <em>{{ documentTitle }}</em> template?" defaults="Are you sure you want to delete the <em>{{ documentTitle }}</em> template?"
@@ -119,7 +119,7 @@ function DocumentDelete({ document, onSubmit }: Props) {
)} )}
</Text> </Text>
{canArchive && ( {canArchive && (
<Text type="secondary"> <Text as="p" type="secondary">
<Trans> <Trans>
If you’d like the option of referencing or restoring the{" "} If you’d like the option of referencing or restoring the{" "}
{{ {{

2
app/scenes/DocumentReparent.tsx
View File

@@ -63,7 +63,7 @@ function DocumentReparent({ collection, item, onSubmit, onCancel }: Props) {
return ( return (
<Flex column> <Flex column>
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<Text type="secondary"> <Text as="p" type="secondary">
<Trans <Trans
defaults="Heads up – moving the document <em>{{ title }}</em> to the <em>{{ newCollectionName }}</em> collection will grant all members of the workspace <em>{{ newPermission }}</em>, they currently have {{ prevPermission }}." defaults="Heads up – moving the document <em>{{ title }}</em> to the <em>{{ newCollectionName }}</em> collection will grant all members of the workspace <em>{{ newPermission }}</em>, they currently have {{ prevPermission }}."
values={{ values={{

2
app/scenes/GroupEdit.tsx
View File

@@ -45,7 +45,7 @@ function GroupEdit({ group, onSubmit }: Props) {
return ( return (
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<Text type="secondary"> <Text as="p" type="secondary">
<Trans> <Trans>
You can edit the name of this group at any time, however doing so too You can edit the name of this group at any time, however doing so too
often might confuse your team mates. often might confuse your team mates.

2
app/scenes/GroupMembers/AddPeopleToGroup.tsx
View File

@@ -75,7 +75,7 @@ function AddPeopleToGroup(props: Props) {
return ( return (
<Flex column> <Flex column>
<Text type="secondary"> <Text as="p" type="secondary">
{t( {t(
"Add members below to give them access to the group. Need to add someone who’s not yet a member?" "Add members below to give them access to the group. Need to add someone who’s not yet a member?"
)}{" "} )}{" "}

4
app/scenes/GroupMembers/GroupMembers.tsx
View File

@@ -51,7 +51,7 @@ function GroupMembers({ group }: Props) {
<Flex column> <Flex column>
{can.update ? ( {can.update ? (
<> <>
<Text type="secondary"> <Text as="p" type="secondary">
<Trans <Trans
defaults="Add and remove members to the <em>{{groupName}}</em> group. Members of the group will have access to any collections this group has been added to." defaults="Add and remove members to the <em>{{groupName}}</em> group. Members of the group will have access to any collections this group has been added to."
values={{ values={{
@@ -74,7 +74,7 @@ function GroupMembers({ group }: Props) {
</span> </span>
</> </>
) : ( ) : (
<Text type="secondary"> <Text as="p" type="secondary">
<Trans <Trans
defaults="Listing members of the <em>{{groupName}}</em> group." defaults="Listing members of the <em>{{groupName}}</em> group."
values={{ values={{

4
app/scenes/GroupNew.tsx
View File

@@ -50,7 +50,7 @@ function GroupNew({ onSubmit }: Props) {
return ( return (
<> <>
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<Text type="secondary"> <Text as="p" type="secondary">
<Trans> <Trans>
Groups are for organizing your team. They work best when centered Groups are for organizing your team. They work best when centered
around a function or a responsibility — Support or Engineering for around a function or a responsibility — Support or Engineering for
@@ -68,7 +68,7 @@ function GroupNew({ onSubmit }: Props) {
flex flex
/> />
</Flex> </Flex>
<Text type="secondary"> <Text as="p" type="secondary">
<Trans>You’ll be able to add people to the group next.</Trans> <Trans>You’ll be able to add people to the group next.</Trans>
</Text> </Text>

4
app/scenes/Invite.tsx
View File

@@ -160,7 +160,7 @@ function Invite({ onSubmit }: Props) {
return ( return (
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
{team.guestSignin ? ( {team.guestSignin ? (
<Text type="secondary"> <Text as="p" type="secondary">
<Trans <Trans
defaults="Invite members or guests to join your workspace. They can sign in with {{signinMethods}} or use their email address." defaults="Invite members or guests to join your workspace. They can sign in with {{signinMethods}} or use their email address."
values={{ values={{
@@ -170,7 +170,7 @@ function Invite({ onSubmit }: Props) {
{collectionAccessNote} {collectionAccessNote}
</Text> </Text>
) : ( ) : (
<Text type="secondary"> <Text as="p" type="secondary">
<Trans <Trans
defaults="Invite members to join your workspace. They will need to sign in with {{signinMethods}}." defaults="Invite members to join your workspace. They will need to sign in with {{signinMethods}}."
values={{ values={{

2
app/scenes/Search/Search.tsx
View File

@@ -247,7 +247,7 @@ function Search(props: Props) {
{showEmpty && ( {showEmpty && (
<Fade> <Fade>
<Centered column> <Centered column>
<Text type="secondary"> <Text as="p" type="secondary">
{t("No documents found for your search filters.")} {t("No documents found for your search filters.")}
</Text> </Text>
</Centered> </Centered>

2
app/scenes/Settings/ApiKeys.tsx
View File

@@ -43,7 +43,7 @@ function ApiKeys() {
} }
> >
<Heading>{t("API Tokens")}</Heading> <Heading>{t("API Tokens")}</Heading>
<Text type="secondary"> <Text as="p" type="secondary">
<Trans <Trans
defaults="You can create an unlimited amount of personal tokens to authenticate defaults="You can create an unlimited amount of personal tokens to authenticate
with the API. Tokens have the same permissions as your user account. with the API. Tokens have the same permissions as your user account.

2
app/scenes/Settings/Details.tsx
View File

@@ -136,7 +136,7 @@ function Details() {
<ThemeProvider theme={newTheme}> <ThemeProvider theme={newTheme}>
<Scene title={t("Details")} icon={<TeamIcon />}> <Scene title={t("Details")} icon={<TeamIcon />}>
<Heading>{t("Details")}</Heading> <Heading>{t("Details")}</Heading>
<Text type="secondary"> <Text as="p" type="secondary">
<Trans> <Trans>
These settings affect the way that your workspace appears to These settings affect the way that your workspace appears to
everyone on the team. everyone on the team.

2
app/scenes/Settings/Export.tsx
View File

@@ -34,7 +34,7 @@ function Export() {
return ( return (
<Scene title={t("Export")} icon={<DownloadIcon />}> <Scene title={t("Export")} icon={<DownloadIcon />}>
<Heading>{t("Export")}</Heading> <Heading>{t("Export")}</Heading>
<Text type="secondary"> <Text as="p" type="secondary">
<Trans <Trans
defaults="A full export might take some time, consider exporting a single document or collection. The exported data is a zip of your documents in Markdown format. You may leave this page once the export has started – if you have notifications enabled, we will email a link to <em>{{ userEmail }}</em> when it’s complete." defaults="A full export might take some time, consider exporting a single document or collection. The exported data is a zip of your documents in Markdown format. You may leave this page once the export has started – if you have notifications enabled, we will email a link to <em>{{ userEmail }}</em> when it’s complete."
values={{ values={{

2
app/scenes/Settings/Features.tsx
View File

@@ -29,7 +29,7 @@ function Features() {
return ( return (
<Scene title={t("Features")} icon={<BeakerIcon />}> <Scene title={t("Features")} icon={<BeakerIcon />}>
<Heading>{t("Features")}</Heading> <Heading>{t("Features")}</Heading>
<Text type="secondary"> <Text as="p" type="secondary">
<Trans> <Trans>
Manage optional and beta features. Changing these settings will affect Manage optional and beta features. Changing these settings will affect
the experience for all members of the workspace. the experience for all members of the workspace.

2
app/scenes/Settings/GoogleAnalytics.tsx
View File

@@ -78,7 +78,7 @@ function GoogleAnalytics() {
<Scene title={t("Google Analytics")} icon={<GoogleIcon />}> <Scene title={t("Google Analytics")} icon={<GoogleIcon />}>
<Heading>{t("Google Analytics")}</Heading> <Heading>{t("Google Analytics")}</Heading>
<Text type="secondary"> <Text as="p" type="secondary">
<Trans> <Trans>
Add a Google Analytics 4 measurement ID to send document views and Add a Google Analytics 4 measurement ID to send document views and
analytics from the workspace to your own Google Analytics account. analytics from the workspace to your own Google Analytics account.

2
app/scenes/Settings/Groups.tsx
View File

@@ -48,7 +48,7 @@ function Groups() {
} }
> >
<Heading>{t("Groups")}</Heading> <Heading>{t("Groups")}</Heading>
<Text type="secondary"> <Text as="p" type="secondary">
<Trans> <Trans>
Groups can be used to organize and manage the people on your team. Groups can be used to organize and manage the people on your team.
</Trans> </Trans>

2
app/scenes/Settings/Import.tsx
View File

@@ -28,7 +28,7 @@ function Import() {
return ( return (
<Scene title={t("Import")} icon={<NewDocumentIcon />}> <Scene title={t("Import")} icon={<NewDocumentIcon />}>
<Heading>{t("Import")}</Heading> <Heading>{t("Import")}</Heading>
<Text type="secondary"> <Text as="p" type="secondary">
<Trans> <Trans>
Quickly transfer your existing documents, pages, and files from other Quickly transfer your existing documents, pages, and files from other
tools and services into {{ appName }}. You can also drag and drop any tools and services into {{ appName }}. You can also drag and drop any

2
app/scenes/Settings/Members.tsx
View File

@@ -167,7 +167,7 @@ function Members() {
wide wide
> >
<Heading>{t("Members")}</Heading> <Heading>{t("Members")}</Heading>
<Text type="secondary"> <Text as="p" type="secondary">
<Trans> <Trans>
Everyone that has signed into {{ appName }} is listed here. It’s Everyone that has signed into {{ appName }} is listed here. It’s
possible that there are other users who have access through{" "} possible that there are other users who have access through{" "}

2
app/scenes/Settings/Notifications.tsx
View File

@@ -131,7 +131,7 @@ function Notifications() {
</Trans> </Trans>
</Notice> </Notice>
)} )}
<Text type="secondary"> <Text as="p" type="secondary">
<Trans>Manage when and where you receive email notifications.</Trans> <Trans>Manage when and where you receive email notifications.</Trans>
</Text> </Text>

2
app/scenes/Settings/Preferences.tsx
View File

@@ -50,7 +50,7 @@ function Preferences() {
return ( return (
<Scene title={t("Preferences")} icon={<SettingsIcon />}> <Scene title={t("Preferences")} icon={<SettingsIcon />}>
<Heading>{t("Preferences")}</Heading> <Heading>{t("Preferences")}</Heading>
<Text type="secondary"> <Text as="p" type="secondary">
<Trans>Manage settings that affect your personal experience.</Trans> <Trans>Manage settings that affect your personal experience.</Trans>
</Text> </Text>

2
app/scenes/Settings/Profile.tsx
View File

@@ -48,7 +48,7 @@ const Profile = () => {
return ( return (
<Scene title={t("Profile")} icon={<ProfileIcon />}> <Scene title={t("Profile")} icon={<ProfileIcon />}>
<Heading>{t("Profile")}</Heading> <Heading>{t("Profile")}</Heading>
<Text type="secondary"> <Text as="p" type="secondary">
<Trans>Manage how you appear to other members of the workspace.</Trans> <Trans>Manage how you appear to other members of the workspace.</Trans>
</Text> </Text>

4
app/scenes/Settings/Security.tsx
View File

@@ -135,7 +135,7 @@ function Security() {
return ( return (
<Scene title={t("Security")} icon={<PadlockIcon />}> <Scene title={t("Security")} icon={<PadlockIcon />}>
<Heading>{t("Security")}</Heading> <Heading>{t("Security")}</Heading>
<Text type="secondary"> <Text as="p" type="secondary">
<Trans> <Trans>
Settings that impact the access, security, and content of your Settings that impact the access, security, and content of your
workspace. workspace.
@@ -164,7 +164,7 @@ function Security() {
color={provider.isActive ? theme.accent : undefined} color={provider.isActive ? theme.accent : undefined}
checked={provider.isActive} checked={provider.isActive}
/>{" "} />{" "}
<Text type="secondary"> <Text as="p" type="secondary">
{provider.isActive ? t("Connected") : t("Disabled")} {provider.isActive ? t("Connected") : t("Disabled")}
</Text> </Text>
</Flex> </Flex>

2
app/scenes/Settings/Shares.tsx
View File

@@ -86,7 +86,7 @@ function Shares() {
</> </>
)} )}
<Text type="secondary"> <Text as="p" type="secondary">
<Trans> <Trans>
Documents that have been shared are listed below. Anyone that has the Documents that have been shared are listed below. Anyone that has the
public link can access a read-only version of the document until the public link can access a read-only version of the document until the

2
app/scenes/Settings/Templates.tsx
View File

@@ -34,7 +34,7 @@ function Templates() {
} }
> >
<Heading>{t("Templates")}</Heading> <Heading>{t("Templates")}</Heading>
<Text type="secondary"> <Text as="p" type="secondary">
<Trans> <Trans>
You can create templates to help your team create consistent and You can create templates to help your team create consistent and
accurate documentation. accurate documentation.

2
app/scenes/Settings/Zapier.tsx
View File

@@ -28,7 +28,7 @@ function Zapier() {
key="zapier-styles" key="zapier-styles"
/> />
</Helmet> </Helmet>
<Text type="secondary"> <Text as="p" type="secondary">
<Trans> <Trans>
Zapier is a platform that allows {{ appName }} to easily integrate Zapier is a platform that allows {{ appName }} to easily integrate
with thousands of other business tools. Automate your workflows, sync with thousands of other business tools. Automate your workflows, sync

2
app/scenes/Settings/components/HelpDisclosure.tsx
View File

@@ -33,7 +33,7 @@ const HelpDisclosure: React.FC<Props> = ({ title, children }: Props) => {
)} )}
</Disclosure> </Disclosure>
<HelpContent {...disclosure}> <HelpContent {...disclosure}>
<Text type="secondary"> <Text as="p" type="secondary">
<br /> <br />
{children} {children}
</Text> </Text>

2
app/scenes/Settings/components/ImportJSONDialog.tsx
View File

@@ -14,7 +14,7 @@ function ImportJSONDialog() {
return ( return (
<Flex column> <Flex column>
<Text type="secondary"> <Text as="p" type="secondary">
<DropToImport <DropToImport
onSubmit={dialogs.closeAllModals} onSubmit={dialogs.closeAllModals}
format={FileOperationFormat.JSON} format={FileOperationFormat.JSON}

2
app/scenes/Settings/components/ImportMarkdownDialog.tsx
View File

@@ -14,7 +14,7 @@ function ImportMarkdownDialog() {
return ( return (
<Flex column> <Flex column>
<Text type="secondary"> <Text as="p" type="secondary">
<DropToImport <DropToImport
onSubmit={dialogs.closeAllModals} onSubmit={dialogs.closeAllModals}
format={FileOperationFormat.MarkdownZip} format={FileOperationFormat.MarkdownZip}

2
app/scenes/Settings/components/ImportNotionDialog.tsx
View File

@@ -13,7 +13,7 @@ function ImportNotionDialog() {
return ( return (
<Flex column> <Flex column>
<Text type="secondary"> <Text as="p" type="secondary">
<DropToImport <DropToImport
onSubmit={dialogs.closeAllModals} onSubmit={dialogs.closeAllModals}
format={FileOperationFormat.Notion} format={FileOperationFormat.Notion}

6
app/scenes/Settings/components/SettingRow.tsx
View File

@@ -74,7 +74,11 @@ const SettingRow: React.FC<Props> = ({
<Label as="h3"> <Label as="h3">
<label htmlFor={name}>{label}</label> <label htmlFor={name}>{label}</label>
</Label> </Label>
{description && <Text type="secondary">{description}</Text>} {description && (
<Text as="p" type="secondary">
{description}
</Text>
)}
</Column> </Column>
<Column>{children}</Column> <Column>{children}</Column>
</Row> </Row>

4
app/scenes/TeamDelete.tsx
View File

@@ -67,7 +67,7 @@ function TeamDelete({ onSubmit }: Props) {
<form onSubmit={formHandleSubmit(handleSubmit)}> <form onSubmit={formHandleSubmit(handleSubmit)}>
{isWaitingCode ? ( {isWaitingCode ? (
<> <>
<Text type="secondary"> <Text as="p" type="secondary">
<Trans> <Trans>
A confirmation code has been sent to your email address, please A confirmation code has been sent to your email address, please
enter the code below to permanently destroy this workspace. enter the code below to permanently destroy this workspace.
@@ -84,7 +84,7 @@ function TeamDelete({ onSubmit }: Props) {
</> </>
) : ( ) : (
<> <>
<Text type="secondary"> <Text as="p" type="secondary">
<Trans> <Trans>
Deleting the <strong>{{ workspaceName }}</strong> workspace will Deleting the <strong>{{ workspaceName }}</strong> workspace will
destroy all collections, documents, users, and associated data. destroy all collections, documents, users, and associated data.

2
app/scenes/TeamNew.tsx
View File

@@ -65,7 +65,7 @@ function TeamNew({ user }: Props) {
/> />
</Flex> </Flex>
<Text type="secondary"> <Text as="p" type="secondary">
<Trans <Trans
defaults="You are creating a new workspace using your current account — <em>{{email}}</em>" defaults="You are creating a new workspace using your current account — <em>{{email}}</em>"
values={{ values={{

4
app/scenes/UserDelete.tsx
View File

@@ -65,7 +65,7 @@ function UserDelete({ onSubmit }: Props) {
<form onSubmit={formHandleSubmit(handleSubmit)}> <form onSubmit={formHandleSubmit(handleSubmit)}>
{isWaitingCode ? ( {isWaitingCode ? (
<> <>
<Text type="secondary"> <Text as="p" type="secondary">
<Trans> <Trans>
A confirmation code has been sent to your email address, please A confirmation code has been sent to your email address, please
enter the code below to permanently destroy your account. enter the code below to permanently destroy your account.
@@ -82,7 +82,7 @@ function UserDelete({ onSubmit }: Props) {
</> </>
) : ( ) : (
<> <>
<Text type="secondary"> <Text as="p" type="secondary">
<Trans> <Trans>
Are you sure? Deleting your account will destroy identifying data Are you sure? Deleting your account will destroy identifying data
associated with your user and cannot be undone. You will be associated with your user and cannot be undone. You will be

4
plugins/slack/client/Settings.tsx
View File

@@ -75,7 +75,7 @@ function Slack() {
</Trans> </Trans>
</Notice> </Notice>
)} )}
<Text type="secondary"> <Text as="p" type="secondary">
<Trans <Trans
defaults="Get rich previews of {{ appName }} links shared in Slack and use the <em>{{ command }}</em> slash command to search for documents without leaving your chat." defaults="Get rich previews of {{ appName }} links shared in Slack and use the <em>{{ command }}</em> slash command to search for documents without leaving your chat."
values={{ values={{
@@ -113,7 +113,7 @@ function Slack() {
<p>&nbsp;</p> <p>&nbsp;</p>
<h2>{t("Collections")}</h2> <h2>{t("Collections")}</h2>
<Text type="secondary"> <Text as="p" type="secondary">
<Trans> <Trans>
Connect {{ appName }} collections to Slack channels. Messages will Connect {{ appName }} collections to Slack channels. Messages will
be automatically posted to Slack when documents are published or be automatically posted to Slack when documents are published or

2
plugins/slack/client/components/SlackListItem.tsx
View File

@@ -80,7 +80,7 @@ function SlackListItem({ integration, collection }: Props) {
<Popover {...popover} aria-label={t("Settings")}> <Popover {...popover} aria-label={t("Settings")}>
<Events> <Events>
<h3>{t("Notifications")}</h3> <h3>{t("Notifications")}</h3>
<Text type="secondary"> <Text as="p" type="secondary">
{t("These events should be posted to Slack")} {t("These events should be posted to Slack")}
</Text> </Text>
<Switch <Switch

2
plugins/webhooks/client/Settings.tsx
View File

@@ -45,7 +45,7 @@ function Webhooks() {
} }
> >
<Heading>{t("Webhooks")}</Heading> <Heading>{t("Webhooks")}</Heading>
<Text type="secondary"> <Text as="p" type="secondary">
<Trans> <Trans>
Webhooks can be used to notify your application when events happen in{" "} Webhooks can be used to notify your application when events happen in{" "}
{{ appName }}. Events are sent as a https request with a JSON payload {{ appName }}. Events are sent as a https request with a JSON payload

4
plugins/webhooks/client/components/WebhookSubscriptionForm.tsx
View File

@@ -231,7 +231,7 @@ function WebhookSubscriptionForm({ handleSubmit, webhookSubscription }: Props) {
return ( return (
<form onSubmit={formHandleSubmit(handleSubmit)}> <form onSubmit={formHandleSubmit(handleSubmit)}>
<Text type="secondary"> <Text as="p" type="secondary">
<Trans> <Trans>
Provide a descriptive name for this webhook and the URL we should send Provide a descriptive name for this webhook and the URL we should send
a POST request to when matching events are created. a POST request to when matching events are created.
@@ -266,7 +266,7 @@ function WebhookSubscriptionForm({ handleSubmit, webhookSubscription }: Props) {
})} })}
/> />
</TextFields> </TextFields>
<Text type="secondary"> <Text as="p" type="secondary">
<Trans> <Trans>
Subscribe to all events, groups, or individual events. We recommend Subscribe to all events, groups, or individual events. We recommend
only subscribing to the minimum amount of events that your application only subscribing to the minimum amount of events that your application