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

2024-01-30 22:49:31 -05:00
parent a960d8cee5
commit 5ce8827a8c
56 changed files with 93 additions and 97 deletions
--- a/app/scenes/APITokenNew.tsx
+++ b/app/scenes/APITokenNew.tsx
@@ -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".`
        )}
--- a/app/scenes/Collection/Empty.tsx
+++ b/app/scenes/Collection/Empty.tsx
@@ -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."
--- a/app/scenes/CollectionEdit.tsx
+++ b/app/scenes/CollectionEdit.tsx
@@ -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.
--- a/app/scenes/CollectionNew.tsx
+++ b/app/scenes/CollectionNew.tsx
@@ -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
--- a/app/scenes/CollectionPermissions/AddGroupsToCollection.tsx
+++ b/app/scenes/CollectionPermissions/AddGroupsToCollection.tsx
@@ -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")}
--- a/app/scenes/CollectionPermissions/AddPeopleToCollection.tsx
+++ b/app/scenes/CollectionPermissions/AddPeopleToCollection.tsx
@@ -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}>
--- a/app/scenes/Document/components/Insights.tsx
+++ b/app/scenes/Document/components/Insights.tsx
@@ -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"
                  )}
--- a/app/scenes/DocumentDelete.tsx
+++ b/app/scenes/DocumentDelete.tsx
@@ -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{" "}
            {{
--- a/app/scenes/DocumentReparent.tsx
+++ b/app/scenes/DocumentReparent.tsx
@@ -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={{
--- a/app/scenes/GroupEdit.tsx
+++ b/app/scenes/GroupEdit.tsx
@@ -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.
--- a/app/scenes/GroupMembers/AddPeopleToGroup.tsx
+++ b/app/scenes/GroupMembers/AddPeopleToGroup.tsx
@@ -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?"
        )}{" "}
--- a/app/scenes/GroupMembers/GroupMembers.tsx
+++ b/app/scenes/GroupMembers/GroupMembers.tsx
@@ -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={{
--- a/app/scenes/GroupNew.tsx
+++ b/app/scenes/GroupNew.tsx
@@ -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>

--- a/app/scenes/Invite.tsx
+++ b/app/scenes/Invite.tsx
@@ -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={{
--- a/app/scenes/Search/Search.tsx
+++ b/app/scenes/Search/Search.tsx
@@ -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>
--- a/app/scenes/Settings/ApiKeys.tsx
+++ b/app/scenes/Settings/ApiKeys.tsx
@@ -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.
--- a/app/scenes/Settings/Details.tsx
+++ b/app/scenes/Settings/Details.tsx
@@ -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.
--- a/app/scenes/Settings/Export.tsx
+++ b/app/scenes/Settings/Export.tsx
@@ -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={{
--- a/app/scenes/Settings/Features.tsx
+++ b/app/scenes/Settings/Features.tsx
@@ -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.
--- a/app/scenes/Settings/GoogleAnalytics.tsx
+++ b/app/scenes/Settings/GoogleAnalytics.tsx
@@ -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.
--- a/app/scenes/Settings/Groups.tsx
+++ b/app/scenes/Settings/Groups.tsx
@@ -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>
--- a/app/scenes/Settings/Import.tsx
+++ b/app/scenes/Settings/Import.tsx
@@ -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
--- a/app/scenes/Settings/Members.tsx
+++ b/app/scenes/Settings/Members.tsx
@@ -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{" "}
--- a/app/scenes/Settings/Notifications.tsx
+++ b/app/scenes/Settings/Notifications.tsx
@@ -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>

--- a/app/scenes/Settings/Preferences.tsx
+++ b/app/scenes/Settings/Preferences.tsx
@@ -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>

--- a/app/scenes/Settings/Profile.tsx
+++ b/app/scenes/Settings/Profile.tsx
@@ -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>

--- a/app/scenes/Settings/Security.tsx
+++ b/app/scenes/Settings/Security.tsx
@@ -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>
--- a/app/scenes/Settings/Shares.tsx
+++ b/app/scenes/Settings/Shares.tsx
@@ -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
--- a/app/scenes/Settings/Templates.tsx
+++ b/app/scenes/Settings/Templates.tsx
@@ -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.
--- a/app/scenes/Settings/Zapier.tsx
+++ b/app/scenes/Settings/Zapier.tsx
@@ -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
--- a/app/scenes/Settings/components/HelpDisclosure.tsx
+++ b/app/scenes/Settings/components/HelpDisclosure.tsx
@@ -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>
--- a/app/scenes/Settings/components/ImportJSONDialog.tsx
+++ b/app/scenes/Settings/components/ImportJSONDialog.tsx
@@ -14,7 +14,7 @@ function ImportJSONDialog() {

  return (
    <Flex column>
-      <Text type="secondary">
+      <Text as="p" type="secondary">
        <DropToImport
          onSubmit={dialogs.closeAllModals}
          format={FileOperationFormat.JSON}
--- a/app/scenes/Settings/components/ImportMarkdownDialog.tsx
+++ b/app/scenes/Settings/components/ImportMarkdownDialog.tsx
@@ -14,7 +14,7 @@ function ImportMarkdownDialog() {

  return (
    <Flex column>
-      <Text type="secondary">
+      <Text as="p" type="secondary">
        <DropToImport
          onSubmit={dialogs.closeAllModals}
          format={FileOperationFormat.MarkdownZip}
--- a/app/scenes/Settings/components/ImportNotionDialog.tsx
+++ b/app/scenes/Settings/components/ImportNotionDialog.tsx
@@ -13,7 +13,7 @@ function ImportNotionDialog() {

  return (
    <Flex column>
-      <Text type="secondary">
+      <Text as="p" type="secondary">
        <DropToImport
          onSubmit={dialogs.closeAllModals}
          format={FileOperationFormat.Notion}
--- a/app/scenes/Settings/components/SettingRow.tsx
+++ b/app/scenes/Settings/components/SettingRow.tsx
@@ -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>
--- a/app/scenes/TeamDelete.tsx
+++ b/app/scenes/TeamDelete.tsx
@@ -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.
--- a/app/scenes/TeamNew.tsx
+++ b/app/scenes/TeamNew.tsx
@@ -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={{
--- a/app/scenes/UserDelete.tsx
+++ b/app/scenes/UserDelete.tsx
@@ -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