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
>
<>
<Text type="secondary">
<Text as="p" type="secondary">
<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."
values={{
@@ -53,7 +53,7 @@ function CollectionDeleteDialog({ collection, onSubmit }: Props) {
/>
</Text>
{team.defaultCollectionId === collection.id ? (
<Text type="secondary">
<Text as="p" type="secondary">
<Trans
defaults="Also, <em>{{collectionName}}</em> is being used as the start view – deleting it will reset the start view to the Home page."
values={{

2
app/components/CommandBarItem.tsx
View File

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

2
app/components/CommentDeleteDialog.tsx
View File

@@ -33,7 +33,7 @@ function CommentDeleteDialog({ comment, onSubmit }: Props) {
savingText={`${t("Deleting")}…`}
danger
>
<Text type="secondary">
<Text as="p" type="secondary">
{hasChildComments ? (
<Trans>
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>
) : (
<FlexContainer>
<Text type="secondary">{t("No results found")}.</Text>
<Text as="p" type="secondary">
{t("No results found")}.
</Text>
</FlexContainer>
)}
</ListContainer>

21
app/components/DuplicateDialog.tsx
View File

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

4
app/components/ErrorBoundary.tsx
View File

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

6
app/components/ExportDialog.tsx
View File

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

8
app/components/Input.tsx
View File

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

3
app/components/InputSelect.tsx
View File

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

8
app/components/Modal.tsx
View File

@@ -89,11 +89,7 @@ const Modal: React.FC<Props> = ({
<ErrorBoundary component="div">{children}</ErrorBoundary>
</SmallContent>
<Header>
{title && (
<Text as="span" size="large">
{title}
</Text>
)}
{title && <Text size="large">{title}</Text>}
<NudeButton onClick={onRequestClose}>
<CloseIcon />
</NudeButton>
@@ -127,7 +123,7 @@ const Modal: React.FC<Props> = ({
</Close>
<Back onClick={onRequestClose}>
<BackIcon size={32} />
<Text as="span">{t("Back")} </Text>
<Text>{t("Back")} </Text>
</Back>
</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} />
<Flex column>
<Text as="div" size="small">
<Text as="span" weight="bold">
<Text weight="bold">
{notification.actor?.name ?? t("Unknown")}
</Text>{" "}
{notification.eventText(t)}{" "}
<Text as="span" weight="bold">
{notification.subject}
</Text>
<Text weight="bold">{notification.subject}</Text>
</Text>
<Text as="span" type="tertiary" size="xsmall">
<Text type="tertiary" size="xsmall">
<Time
dateTime={notification.createdAt}
tooltipDelay={1000}

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

@@ -478,7 +478,7 @@ const AccessTooltip = ({
return (
<Flex align="center" gap={2}>
<Text type="secondary" size="small" as="span">
<Text type="secondary" size="small">
{children}
</Text>
<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">
{image}
{title && <Title as="span">{title}</Title>}
{title && <Title>{title}</Title>}
</Content>
{showMoreMenu && <StyledMoreIcon />}
</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
* 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;
text-align: ${(props) => (props.dir ? props.dir : "inherit")};
color: ${(props) =>

2
app/scenes/APITokenNew.tsx
View File

@@ -43,7 +43,7 @@ function APITokenNew({ onSubmit }: Props) {
return (
<form onSubmit={handleSubmit}>
<Text type="secondary">
<Text as="p" type="secondary">
{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".`
)}

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

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

2
app/scenes/CollectionEdit.tsx
View File

@@ -78,7 +78,7 @@ const CollectionEdit = ({ collectionId, onSubmit }: Props) => {
return (
<Flex column>
<form onSubmit={handleSubmit}>
<Text type="secondary">
<Text as="p" type="secondary">
<Trans>
You can edit the name and other details at any time, however doing
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;
return (
<form onSubmit={this.handleSubmit}>
<Text type="secondary">
<Text as="p" type="secondary">
<Trans>
Collections are for grouping your documents. They work best when
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 (
<Flex column>
{can.createGroup ? (
<Text type="secondary">
<Text as="p" type="secondary">
{t("Can’t find the group you’re looking for?")}{" "}
<ButtonLink onClick={handleNewGroupModalOpen}>
{t("Create a group")}

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

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

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

@@ -55,7 +55,7 @@ function Insights() {
<div>
<Content column>
<Heading>{t("Stats")}</Heading>
<Text type="secondary" size="small">
<Text as="p" type="secondary" size="small">
<List>
{stats.total.words > 0 && (
<li>
@@ -98,7 +98,7 @@ function Insights() {
<>
<Content column>
<Heading>{t("Contributors")}</Heading>
<Text type="secondary" size="small">
<Text as="p" type="secondary" size="small">
{t(`Created`)}{" "}
<Time dateTime={document.createdAt} addSuffix />.
<br />
@@ -130,7 +130,7 @@ function Insights() {
</Content>
<Content column>
<Heading>{t("Views")}</Heading>
<Text type="secondary" size="small">
<Text as="p" type="secondary" size="small">
{documentViews.length <= 1
? t("No one else has viewed yet")
: t(
@@ -157,10 +157,10 @@ function Insights() {
{can.updateInsights && (
<Manage>
<Flex column>
<Text size="small" weight="bold">
<Text as="p" size="small" weight="bold">
{t("Viewer insights")}
</Text>
<Text type="secondary" size="small">
<Text as="p" type="secondary" size="small">
{t(
"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 (
<form onSubmit={handleSubmit}>
<Text type="secondary">
<Text as="p" type="secondary">
{document.isTemplate ? (
<Trans
defaults="Are you sure you want to delete the <em>{{ documentTitle }}</em> template?"
@@ -119,7 +119,7 @@ function DocumentDelete({ document, onSubmit }: Props) {
)}
</Text>
{canArchive && (
<Text type="secondary">
<Text as="p" type="secondary">
<Trans>
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 (
<Flex column>
<form onSubmit={handleSubmit}>
<Text type="secondary">
<Text as="p" type="secondary">
<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 }}."
values={{

2
app/scenes/GroupEdit.tsx
View File

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

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

@@ -75,7 +75,7 @@ function AddPeopleToGroup(props: Props) {
return (
<Flex column>
<Text type="secondary">
<Text as="p" type="secondary">
{t(
"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>
{can.update ? (
<>
<Text type="secondary">
<Text as="p" type="secondary">
<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."
values={{
@@ -74,7 +74,7 @@ function GroupMembers({ group }: Props) {
</span>
</>
) : (
<Text type="secondary">
<Text as="p" type="secondary">
<Trans
defaults="Listing members of the <em>{{groupName}}</em> group."
values={{

4
app/scenes/GroupNew.tsx
View File

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

4
app/scenes/Invite.tsx
View File

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

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

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

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

@@ -43,7 +43,7 @@ function ApiKeys() {
}
>
<Heading>{t("API Tokens")}</Heading>
<Text type="secondary">
<Text as="p" type="secondary">
<Trans
defaults="You can create an unlimited amount of personal tokens to authenticate
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}>
<Scene title={t("Details")} icon={<TeamIcon />}>
<Heading>{t("Details")}</Heading>
<Text type="secondary">
<Text as="p" type="secondary">
<Trans>
These settings affect the way that your workspace appears to
everyone on the team.

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

@@ -34,7 +34,7 @@ function Export() {
return (
<Scene title={t("Export")} icon={<DownloadIcon />}>
<Heading>{t("Export")}</Heading>
<Text type="secondary">
<Text as="p" type="secondary">
<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."
values={{

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

@@ -29,7 +29,7 @@ function Features() {
return (
<Scene title={t("Features")} icon={<BeakerIcon />}>
<Heading>{t("Features")}</Heading>
<Text type="secondary">
<Text as="p" type="secondary">
<Trans>
Manage optional and beta features. Changing these settings will affect
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 />}>
<Heading>{t("Google Analytics")}</Heading>
<Text type="secondary">
<Text as="p" type="secondary">
<Trans>
Add a Google Analytics 4 measurement ID to send document views and
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>
<Text type="secondary">
<Text as="p" type="secondary">
<Trans>
Groups can be used to organize and manage the people on your team.
</Trans>

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

@@ -28,7 +28,7 @@ function Import() {
return (
<Scene title={t("Import")} icon={<NewDocumentIcon />}>
<Heading>{t("Import")}</Heading>
<Text type="secondary">
<Text as="p" type="secondary">
<Trans>
Quickly transfer your existing documents, pages, and files from other
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
>
<Heading>{t("Members")}</Heading>
<Text type="secondary">
<Text as="p" type="secondary">
<Trans>
Everyone that has signed into {{ appName }} is listed here. It’s
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>
</Notice>
)}
<Text type="secondary">
<Text as="p" type="secondary">
<Trans>Manage when and where you receive email notifications.</Trans>
</Text>

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

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

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

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

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

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

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

@@ -86,7 +86,7 @@ function Shares() {
</>
)}
<Text type="secondary">
<Text as="p" type="secondary">
<Trans>
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

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

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

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

@@ -28,7 +28,7 @@ function Zapier() {
key="zapier-styles"
/>
</Helmet>
<Text type="secondary">
<Text as="p" type="secondary">
<Trans>
Zapier is a platform that allows {{ appName }} to easily integrate
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>
<HelpContent {...disclosure}>
<Text type="secondary">
<Text as="p" type="secondary">
<br />
{children}
</Text>

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

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

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

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

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

@@ -13,7 +13,7 @@ function ImportNotionDialog() {
return (
<Flex column>
<Text type="secondary">
<Text as="p" type="secondary">
<DropToImport
onSubmit={dialogs.closeAllModals}
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 htmlFor={name}>{label}</label>
</Label>
{description && <Text type="secondary">{description}</Text>}
{description && (
<Text as="p" type="secondary">
{description}
</Text>
)}
</Column>
<Column>{children}</Column>
</Row>

4
app/scenes/TeamDelete.tsx
View File

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

2
app/scenes/TeamNew.tsx
View File

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

4
app/scenes/UserDelete.tsx
View File

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