HelpText -> Text

app/components/CommandBarItem.tsx

@@ -32,7 +32,7 @@ function CommandBarItem(
 
   return (
     <Item active={active} ref={ref}>
-      <Text align="center" gap={8}>
+      <Text type="secondary" align="center" gap={8}>
         <Icon>
           {action.icon ? (
             // @ts-expect-error no icon on ActionImpl

app/components/ErrorBoundary.tsx

@@ -7,8 +7,8 @@ import styled from "styled-components";
 import { githubIssuesUrl } from "@shared/utils/urlHelpers";
 import Button from "~/components/Button";
 import CenteredContent from "~/components/CenteredContent";
-import HelpText from "~/components/HelpText";
 import PageTitle from "~/components/PageTitle";
+import Text from "~/components/Text";
 import env from "~/env";
 
 type Props = WithTranslation & {
@@ -72,13 +72,13 @@ class ErrorBoundary extends React.Component<Props> {
             <h1>
               <Trans>Loading Failed</Trans>
             </h1>
-            <HelpText>
+            <Text 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
                 failed network request. Please try reloading.
               </Trans>
-            </HelpText>
+            </Text>
             <p>
               <Button onClick={this.handleReload}>{t("Reload")}</Button>
             </p>
@@ -92,7 +92,7 @@ class ErrorBoundary extends React.Component<Props> {
           <h1>
             <Trans>Something Unexpected Happened</Trans>
           </h1>
-          <HelpText>
+          <Text type="secondary">
             <Trans
               defaults="Sorry, an unrecoverable error occurred{{notified}}. Please try reloading the page, it may have been a temporary glitch."
               values={{
@@ -101,7 +101,7 @@ class ErrorBoundary extends React.Component<Props> {
                   : undefined,
               }}
             />
-          </HelpText>
+          </Text>
           {this.showDetails && <Pre>{error.toString()}</Pre>}
           <p>
             <Button onClick={this.handleReload}>{t("Reload")}</Button>{" "}

app/components/FilterOptions.tsx

@@ -4,7 +4,7 @@ import styled from "styled-components";
 import Button, { Inner } from "~/components/Button";
 import ContextMenu from "~/components/ContextMenu";
 import MenuItem from "~/components/ContextMenu/MenuItem";
-import HelpText from "~/components/HelpText";
+import Text from "~/components/Text";
 
 type TFilterOption = {
   key: string;
@@ -72,7 +72,7 @@ const FilterOptions = ({
   );
 };
 
-const Note = styled(HelpText)`
+const Note = styled(Text)`
   margin-top: 2px;
   margin-bottom: 0;
   line-height: 1.2em;

app/components/HelpText.ts

@@ -1,10 +0,0 @@
-import styled from "styled-components";
-
-const HelpText = styled.p<{ small?: boolean }>`
-  margin-top: 0;
-  color: ${(props) => props.theme.textSecondary};
-  font-size: ${(props) => (props.small ? "14px" : "inherit")};
-  white-space: normal;
-`;
-
-export default HelpText;

app/components/IconPicker.tsx

@@ -42,9 +42,9 @@ import styled, { useTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import ContextMenu from "~/components/ContextMenu";
 import Flex from "~/components/Flex";
-import HelpText from "~/components/HelpText";
 import { LabelText } from "~/components/Input";
 import NudeButton from "~/components/NudeButton";
+import Text from "~/components/Text";
 
 const style = {
   width: 30,
@@ -324,7 +324,7 @@ const IconButton = styled(NudeButton)`
   height: 30px;
 `;
 
-const Loading = styled(HelpText)`
+const Loading = styled(Text)`
   padding: 16px;
 `;
 

app/components/InputRich.tsx

@@ -3,8 +3,8 @@ import * as React from "react";
 import { Trans } from "react-i18next";
 import styled from "styled-components";
 import Editor from "~/components/Editor";
-import HelpText from "~/components/HelpText";
 import { LabelText, Outline } from "~/components/Input";
+import Text from "~/components/Text";
 
 type Props = {
   label: string;
@@ -32,9 +32,9 @@ function InputRich({ label, minHeight, maxHeight, ...rest }: Props) {
       >
         <React.Suspense
           fallback={
-            <HelpText>
+            <Text type="secondary">
               <Trans>Loading editor</Trans>…
-            </HelpText>
+            </Text>
           }
         >
           <Editor onBlur={handleBlur} onFocus={handleFocus} grow {...rest} />

app/components/InputSelect.tsx

@@ -11,7 +11,7 @@ import { VisuallyHidden } from "reakit/VisuallyHidden";
 import scrollIntoView from "smooth-scroll-into-view-if-needed";
 import styled, { css } from "styled-components";
 import Button, { Inner } from "~/components/Button";
-import HelpText from "~/components/HelpText";
+import Text from "~/components/Text";
 import useMenuHeight from "~/hooks/useMenuHeight";
 import { Position, Background, Backdrop, Placement } from "./ContextMenu";
 import { MenuAnchorCSS } from "./ContextMenu/MenuItem";
@@ -203,7 +203,11 @@ const InputSelect = (props: Props) => {
           }}
         </SelectPopover>
       </Wrapper>
-      {note && <HelpText small>{note}</HelpText>}
+      {note && (
+        <Text type="secondary" size="small">
+          {note}
+        </Text>
+      )}
       {select.visible && <Backdrop />}
     </>
   );

app/components/Modal.tsx

@@ -83,7 +83,7 @@ const Modal = ({
                 </Content>
                 <Back onClick={onRequestClose}>
                   <BackIcon size={32} color="currentColor" />
-                  <Text>{t("Back")}</Text>
+                  <Text type="secondary">{t("Back")}</Text>
                 </Back>
                 <Close onClick={onRequestClose}>
                   <CloseIcon size={32} color="currentColor" />

app/components/Switch.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import styled from "styled-components";
-import HelpText from "~/components/HelpText";
 import { LabelText } from "~/components/Input";
+import Text from "~/components/Text";
 
 type Props = React.HTMLAttributes<HTMLInputElement> & {
   width?: number;
@@ -48,7 +48,11 @@ function Switch({
           {component}
           <InlineLabelText>{label}</InlineLabelText>
         </Label>
-        {note && <HelpText small>{note}</HelpText>}
+        {note && (
+          <Text type="secondary" size="small">
+            {note}
+          </Text>
+        )}
       </Wrapper>
     );
   }
@@ -67,6 +71,7 @@ const InlineLabelText = styled(LabelText)`
 const Label = styled.label<{ disabled?: boolean }>`
   display: flex;
   align-items: center;
+  user-select: none;
   ${(props) => (props.disabled ? `opacity: 0.75;` : "")}
 `;
 

app/components/Text.ts

@@ -0,0 +1,30 @@
+import styled from "styled-components";
+
+type Props = {
+  type?: "secondary" | "tertiary";
+  size?: "small" | "xsmall";
+};
+
+/**
+ * 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>`
+  margin-top: 0;
+  color: ${(props) =>
+    props.type === "secondary"
+      ? props.theme.textSecondary
+      : props.type === "tertiary"
+      ? props.theme.textTertiary
+      : props.theme.text};
+  font-size: ${(props) =>
+    props.size === "small"
+      ? "14px"
+      : props.size === "xsmall"
+      ? "13px"
+      : "inherit"};
+  white-space: normal;
+  user-select: none;
+`;
+
+export default Text;