HelpText -> Text

app/scenes/GroupMembers/AddPeopleToGroup.tsx

@@ -10,10 +10,10 @@ import Invite from "~/scenes/Invite";
 import ButtonLink from "~/components/ButtonLink";
 import Empty from "~/components/Empty";
 import Flex from "~/components/Flex";
-import HelpText from "~/components/HelpText";
 import Input from "~/components/Input";
 import Modal from "~/components/Modal";
 import PaginatedList from "~/components/PaginatedList";
+import Text from "~/components/Text";
 import withStores from "~/components/withStores";
 import GroupMemberListItem from "./components/GroupMemberListItem";
 
@@ -82,7 +82,7 @@ class AddPeopleToGroup extends React.Component<Props> {
 
     return (
       <Flex column>
-        <HelpText>
+        <Text type="secondary">
           {t(
             "Add team members below to give them access to the group. Need to add someone who’s not yet on the team yet?"
           )}{" "}
@@ -92,7 +92,7 @@ class AddPeopleToGroup extends React.Component<Props> {
             })}
           </ButtonLink>
           .
-        </HelpText>
+        </Text>
         <Input
           type="search"
           placeholder={`${t("Search by name")}…`}

app/scenes/GroupMembers/GroupMembers.tsx

@@ -7,10 +7,10 @@ import User from "~/models/User";
 import Button from "~/components/Button";
 import Empty from "~/components/Empty";
 import Flex from "~/components/Flex";
-import HelpText from "~/components/HelpText";
 import Modal from "~/components/Modal";
 import PaginatedList from "~/components/PaginatedList";
 import Subheading from "~/components/Subheading";
+import Text from "~/components/Text";
 import useStores from "~/hooks/useStores";
 import useToasts from "~/hooks/useToasts";
 import AddPeopleToGroup from "./AddPeopleToGroup";
@@ -56,7 +56,7 @@ function GroupMembers({ group }: Props) {
     <Flex column>
       {can.update ? (
         <>
-          <HelpText>
+          <Text type="secondary">
             <Trans
               defaults="Add and remove team members in the <em>{{groupName}}</em> group. Adding people to the group will give them access to any collections this group has been added to."
               values={{
@@ -66,7 +66,7 @@ function GroupMembers({ group }: Props) {
                 em: <strong />,
               }}
             />
-          </HelpText>
+          </Text>
           <span>
             <Button
               type="button"
@@ -79,7 +79,7 @@ function GroupMembers({ group }: Props) {
           </span>
         </>
       ) : (
-        <HelpText>
+        <Text type="secondary">
           <Trans
             defaults="Listing team members in the <em>{{groupName}}</em> group."
             values={{
@@ -89,7 +89,7 @@ function GroupMembers({ group }: Props) {
               em: <strong />,
             }}
           />
-        </HelpText>
+        </Text>
       )}
 
       <Subheading>