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

HelpText -> Text

Browse Source
This commit is contained in:
Tom Moor
2022-02-17 20:59:40 -08:00
parent 4efdbf7253
commit d5763233ca
50 changed files with 198 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/CommandBarItem.tsx
View File

@@ -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

10
app/components/ErrorBoundary.tsx
View File

@@ -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>{" "}

4
app/components/FilterOptions.tsx
View File

@@ -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;

10
app/components/HelpText.ts
View File

@@ -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;

4
app/components/IconPicker.tsx
View File

@@ -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;
`;

6
app/components/InputRich.tsx
View File

@@ -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} />

8
app/components/InputSelect.tsx
View File

@@ -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 />}
</>
);

2
app/components/Modal.tsx
View File

@@ -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" />

9
app/components/Switch.tsx
View File

@@ -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;` : "")}
`;

30
app/components/Text.ts Normal file
View File

@@ -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;

6
app/scenes/APITokenNew.tsx
View File

@@ -2,8 +2,8 @@ import * as React from "react";
import { useTranslation, Trans } from "react-i18next";
import Button from "~/components/Button";
import Flex from "~/components/Flex";
import HelpText from "~/components/HelpText";
import Input from "~/components/Input";
import Text from "~/components/Text";
import useStores from "~/hooks/useStores";
import useToasts from "~/hooks/useToasts";
@@ -50,13 +50,13 @@ function APITokenNew({ onSubmit }: Props) {
return (
<form onSubmit={handleSubmit}>
<HelpText>
<Text type="secondary">
<Trans>
Name your token something that will help you to remember it's use in
the future, for example "local development", "production", or
"continuous integration".
</Trans>
</HelpText>
</Text>
<Flex>
<Input
type="text"

4
app/scenes/Collection/DropToImport.tsx
View File

@@ -3,8 +3,8 @@ import * as React from "react";
import Dropzone from "react-dropzone";
import { useTranslation } from "react-i18next";
import styled, { css } from "styled-components";
import HelpText from "~/components/HelpText";
import LoadingIndicator from "~/components/LoadingIndicator";
import Text from "~/components/Text";
import useImportDocument from "~/hooks/useImportDocument";
import useToasts from "~/hooks/useToasts";
@@ -55,7 +55,7 @@ function DropToImport({ children, disabled, accept, collectionId }: Props) {
);
}
const DropMessage = styled(HelpText)`
const DropMessage = styled(Text)`
opacity: 0;
pointer-events: none;
`;

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

@@ -8,8 +8,8 @@ import Collection from "~/models/Collection";
import CollectionPermissions from "~/scenes/CollectionPermissions";
import Button from "~/components/Button";
import Flex from "~/components/Flex";
import HelpText from "~/components/HelpText";
import Modal from "~/components/Modal";
import Text from "~/components/Text";
import useBoolean from "~/hooks/useBoolean";
import useCurrentTeam from "~/hooks/useCurrentTeam";
import useStores from "~/hooks/useStores";
@@ -34,7 +34,7 @@ function EmptyCollection({ collection }: Props) {
return (
<Centered column>
<HelpText>
<Text type="secondary">
<Trans
defaults="<em>{{ collectionName }}</em> doesn’t contain any
documents yet."
@@ -49,7 +49,7 @@ function EmptyCollection({ collection }: Props) {
{can.createDocument && (
<Trans>Get started by creating a new one!</Trans>
)}
</HelpText>
</Text>
<Empty>
{can.createDocument && (
<Link to={newDocumentPath(collection.id)}>

10
app/scenes/CollectionDelete.tsx
View File

@@ -5,7 +5,7 @@ import { useHistory } from "react-router-dom";
import Collection from "~/models/Collection";
import Button from "~/components/Button";
import Flex from "~/components/Flex";
import HelpText from "~/components/HelpText";
import Text from "~/components/Text";
import useCurrentTeam from "~/hooks/useCurrentTeam";
import useToasts from "~/hooks/useToasts";
import { homePath } from "~/utils/routeHelpers";
@@ -44,7 +44,7 @@ function CollectionDelete({ collection, onSubmit }: Props) {
return (
<Flex column>
<form onSubmit={handleSubmit}>
<HelpText>
<Text type="secondary">
<Trans
defaults="Are you sure about that? Deleting the <em>{{collectionName}}</em> collection is permanent and cannot be restored, however documents within will be moved to the trash."
values={{
@@ -54,9 +54,9 @@ function CollectionDelete({ collection, onSubmit }: Props) {
em: <strong />,
}}
/>
</HelpText>
</Text>
{team.defaultCollectionId === collection.id ? (
<HelpText>
<Text 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={{
@@ -66,7 +66,7 @@ function CollectionDelete({ collection, onSubmit }: Props) {
em: <strong />,
}}
/>
</HelpText>
</Text>
) : null}
<Button type="submit" disabled={isDeleting} autoFocus danger>
{isDeleting ? `${t("Deleting")}…` : t("I’m sure – Delete")}

6
app/scenes/CollectionEdit.tsx
View File

@@ -6,10 +6,10 @@ import { Trans, useTranslation } from "react-i18next";
import { useHistory } from "react-router-dom";
import Button from "~/components/Button";
import Flex from "~/components/Flex";
import HelpText from "~/components/HelpText";
import IconPicker from "~/components/IconPicker";
import Input from "~/components/Input";
import InputSelect from "~/components/InputSelect";
import Text from "~/components/Text";
import useStores from "~/hooks/useStores";
import useToasts from "~/hooks/useToasts";
@@ -85,12 +85,12 @@ const CollectionEdit = ({ collectionId, onSubmit }: Props) => {
return (
<Flex column>
<form onSubmit={handleSubmit}>
<HelpText>
<Text type="secondary">
<Trans>
You can edit the name and other details at any time, however doing
so often might confuse your team mates.
</Trans>
</HelpText>
</Text>
<Flex gap={8}>
<Input
type="text"

6
app/scenes/CollectionExport.tsx
View File

@@ -4,7 +4,7 @@ import { useTranslation, Trans } from "react-i18next";
import Collection from "~/models/Collection";
import Button from "~/components/Button";
import Flex from "~/components/Flex";
import HelpText from "~/components/HelpText";
import Text from "~/components/Text";
import useToasts from "~/hooks/useToasts";
type Props = {
@@ -35,7 +35,7 @@ function CollectionExport({ collection, onSubmit }: Props) {
return (
<Flex column>
<form onSubmit={handleSubmit}>
<HelpText>
<Text type="secondary">
<Trans
defaults="Exporting the collection <em>{{collectionName}}</em> may take a few seconds. Your documents will be a zip of folders with files in Markdown format. Please visit the Export section on settings to get the zip."
values={{
@@ -45,7 +45,7 @@ function CollectionExport({ collection, onSubmit }: Props) {
em: <strong />,
}}
/>
</HelpText>
</Text>
<Button type="submit" disabled={isLoading} primary>
{isLoading ? `${t("Exporting")}…` : t("Export Collection")}
</Button>

6
app/scenes/CollectionNew.tsx
View File

@@ -7,11 +7,11 @@ import RootStore from "~/stores/RootStore";
import Collection from "~/models/Collection";
import Button from "~/components/Button";
import Flex from "~/components/Flex";
import HelpText from "~/components/HelpText";
import IconPicker, { icons } from "~/components/IconPicker";
import Input from "~/components/Input";
import InputSelectPermission from "~/components/InputSelectPermission";
import Switch from "~/components/Switch";
import Text from "~/components/Text";
import withStores from "~/components/withStores";
import history from "~/utils/history";
@@ -115,13 +115,13 @@ class CollectionNew extends React.Component<Props> {
const teamSharingEnabled = !!auth.team && auth.team.sharing;
return (
<form onSubmit={this.handleSubmit}>
<HelpText>
<Text type="secondary">
<Trans>
Collections are for grouping your documents. They work best when
organized around a topic or internal team — Product or Engineering
for example.
</Trans>
</HelpText>
</Text>
<Flex gap={8}>
<Input
type="text"

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

@@ -13,10 +13,10 @@ import ButtonLink from "~/components/ButtonLink";
import Empty from "~/components/Empty";
import Flex from "~/components/Flex";
import GroupListItem from "~/components/GroupListItem";
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";
type Props = WithTranslation &
@@ -89,13 +89,13 @@ class AddGroupsToCollection extends React.Component<Props> {
return (
<Flex column>
{can.createGroup && (
<HelpText>
<Text type="secondary">
{t("Can’t find the group you’re looking for?")}{" "}
<ButtonLink onClick={this.handleNewGroupModalOpen}>
{t("Create a group")}
</ButtonLink>
.
</HelpText>
</Text>
)}
<Input

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

@@ -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 MemberListItem from "./components/MemberListItem";
@@ -83,7 +83,7 @@ class AddPeopleToCollection extends React.Component<Props> {
return (
<Flex column>
<HelpText>
<Text type="secondary">
{t("Need to add someone who’s not yet on the team yet?")}{" "}
<ButtonLink onClick={this.handleInviteModalOpen}>
{t("Invite people to {{ teamName }}", {
@@ -91,7 +91,7 @@ class AddPeopleToCollection extends React.Component<Props> {
})}
</ButtonLink>
.
</HelpText>
</Text>
<Input
type="search"

8
app/scenes/CollectionPermissions/index.tsx
View File

@@ -7,12 +7,12 @@ import Collection from "~/models/Collection";
import Button from "~/components/Button";
import Divider from "~/components/Divider";
import Flex from "~/components/Flex";
import HelpText from "~/components/HelpText";
import InputSelectPermission from "~/components/InputSelectPermission";
import Labeled from "~/components/Labeled";
import Modal from "~/components/Modal";
import PaginatedList from "~/components/PaginatedList";
import Switch from "~/components/Switch";
import Text from "~/components/Text";
import useBoolean from "~/hooks/useBoolean";
import useCurrentUser from "~/hooks/useCurrentUser";
import useStores from "~/hooks/useStores";
@@ -205,7 +205,7 @@ function CollectionPermissions({ collection }: Props) {
value={collection.permission || ""}
nude
/>
<PermissionExplainer small>
<PermissionExplainer size="small">
{!collection.permission && (
<Trans
defaults="The <em>{{ collectionName }}</em> collection is private. Team members have no access to it by default."
@@ -349,11 +349,11 @@ function CollectionPermissions({ collection }: Props) {
);
}
const Empty = styled(HelpText)`
const Empty = styled(Text)`
margin-top: 8px;
`;
const PermissionExplainer = styled(HelpText)`
const PermissionExplainer = styled(Text)`
margin-top: -8px;
margin-bottom: 24px;
`;

4
app/scenes/Document/components/Contents.tsx
View File

@@ -1,7 +1,7 @@
import * as React from "react";
import styled from "styled-components";
import breakpoint from "styled-components-breakpoint";
import HelpText from "~/components/HelpText";
import Text from "~/components/Text";
import useWindowScrollPosition from "~/hooks/useWindowScrollPosition";
const HEADING_OFFSET = 20;
@@ -111,7 +111,7 @@ const Heading = styled.h3`
letter-spacing: 0.04em;
`;
const Empty = styled(HelpText)`
const Empty = styled(Text)`
margin: 1em 0 4em;
padding-right: 2em;
font-size: 14px;

8
app/scenes/Document/components/SharePopover.tsx
View File

@@ -10,10 +10,10 @@ import Share from "~/models/Share";
import Button from "~/components/Button";
import CopyToClipboard from "~/components/CopyToClipboard";
import Flex from "~/components/Flex";
import HelpText from "~/components/HelpText";
import Input from "~/components/Input";
import Notice from "~/components/Notice";
import Switch from "~/components/Switch";
import Text from "~/components/Text";
import useKeyDown from "~/hooks/useKeyDown";
import useStores from "~/hooks/useStores";
import useToasts from "~/hooks/useToasts";
@@ -164,7 +164,9 @@ function SharePopover({
</SwitchLabel>
</SwitchWrapper>
) : (
<HelpText>{t("Only team members with permission can view")}</HelpText>
<Text type="secondary">
{t("Only team members with permission can view")}
</Text>
)}
{canPublish && share?.published && !document.isDraft && (
@@ -231,7 +233,7 @@ const SwitchLabel = styled(Flex)`
}
`;
const SwitchText = styled(HelpText)`
const SwitchText = styled(Text)`
margin: 0;
font-size: 15px;
`;

10
app/scenes/DocumentDelete.tsx
View File

@@ -5,7 +5,7 @@ import { useHistory } from "react-router-dom";
import Document from "~/models/Document";
import Button from "~/components/Button";
import Flex from "~/components/Flex";
import HelpText from "~/components/HelpText";
import Text from "~/components/Text";
import useStores from "~/hooks/useStores";
import useToasts from "~/hooks/useToasts";
import { collectionUrl, documentUrl } from "~/utils/routeHelpers";
@@ -83,7 +83,7 @@ function DocumentDelete({ document, onSubmit }: Props) {
return (
<Flex column>
<form onSubmit={handleSubmit}>
<HelpText>
<Text type="secondary">
{document.isTemplate ? (
<Trans
defaults="Are you sure you want to delete the <em>{{ documentTitle }}</em> template?"
@@ -105,9 +105,9 @@ function DocumentDelete({ document, onSubmit }: Props) {
}}
/>
)}
</HelpText>
</Text>
{canArchive && (
<HelpText>
<Text type="secondary">
<Trans>
If you’d like the option of referencing or restoring the{" "}
{{
@@ -115,7 +115,7 @@ function DocumentDelete({ document, onSubmit }: Props) {
}}{" "}
in the future, consider archiving it instead.
</Trans>
</HelpText>
</Text>
)}
<Button type="submit" danger>
{isDeleting ? `${t("Deleting")}…` : t("I’m sure – Delete")}

6
app/scenes/DocumentPermanentDelete.tsx
View File

@@ -5,7 +5,7 @@ import { useHistory } from "react-router-dom";
import Document from "~/models/Document";
import Button from "~/components/Button";
import Flex from "~/components/Flex";
import HelpText from "~/components/HelpText";
import Text from "~/components/Text";
import useStores from "~/hooks/useStores";
import useToasts from "~/hooks/useToasts";
@@ -49,7 +49,7 @@ function DocumentPermanentDelete({ document, onSubmit }: Props) {
return (
<Flex column>
<form onSubmit={handleSubmit}>
<HelpText>
<Text type="secondary">
<Trans
defaults="Are you sure you want to permanently delete the <em>{{ documentTitle }}</em> document? This action is immediate and cannot be undone."
values={{
@@ -59,7 +59,7 @@ function DocumentPermanentDelete({ document, onSubmit }: Props) {
em: <strong />,
}}
/>
</HelpText>
</Text>
<Button type="submit" danger>
{isDeleting ? `${t("Deleting")}…` : t("I’m sure – Delete")}
</Button>

6
app/scenes/DocumentReparent.tsx
View File

@@ -5,7 +5,7 @@ import { Trans, useTranslation } from "react-i18next";
import Collection from "~/models/Collection";
import Button from "~/components/Button";
import Flex from "~/components/Flex";
import HelpText from "~/components/HelpText";
import Text from "~/components/Text";
import useStores from "~/hooks/useStores";
import useToasts from "~/hooks/useToasts";
import { NavigationNode } from "~/types";
@@ -68,7 +68,7 @@ function DocumentReparent({ collection, item, onSubmit, onCancel }: Props) {
return (
<Flex column>
<form onSubmit={handleSubmit}>
<HelpText>
<Text type="secondary">
<Trans
defaults="Heads up – moving the document <em>{{ title }}</em> to the <em>{{ newCollectionName }}</em> collection will grant all team members <em>{{ newPermission }}</em>, they currently have {{ prevPermission }}."
values={{
@@ -83,7 +83,7 @@ function DocumentReparent({ collection, item, onSubmit, onCancel }: Props) {
em: <strong />,
}}
/>
</HelpText>
</Text>
<Button type="submit">
{isSaving ? `${t("Moving")}…` : t("Move document")}
</Button>{" "}

6
app/scenes/DocumentTemplatize.tsx
View File

@@ -6,7 +6,7 @@ import { useTranslation, Trans } from "react-i18next";
import { useHistory } from "react-router-dom";
import Button from "~/components/Button";
import Flex from "~/components/Flex";
import HelpText from "~/components/HelpText";
import Text from "~/components/Text";
import useStores from "~/hooks/useStores";
import useToasts from "~/hooks/useToasts";
import { documentUrl } from "~/utils/routeHelpers";
@@ -56,7 +56,7 @@ function DocumentTemplatize({ documentId, onSubmit }: Props) {
return (
<Flex column>
<form onSubmit={handleSubmit}>
<HelpText>
<Text type="secondary">
<Trans
defaults="Creating a template from <em>{{titleWithDefault}}</em> is a non-destructive action – we'll make a copy of the document and turn it into a template that can be used as a starting point for new documents."
values={{
@@ -66,7 +66,7 @@ function DocumentTemplatize({ documentId, onSubmit }: Props) {
em: <strong />,
}}
/>
</HelpText>
</Text>
<Button type="submit">
{isSaving ? `${t("Creating")}…` : t("Create template")}
</Button>

6
app/scenes/GroupDelete.tsx
View File

@@ -5,7 +5,7 @@ import { useHistory } from "react-router-dom";
import Group from "~/models/Group";
import Button from "~/components/Button";
import Flex from "~/components/Flex";
import HelpText from "~/components/HelpText";
import Text from "~/components/Text";
import useToasts from "~/hooks/useToasts";
import { groupSettingsPath } from "~/utils/routeHelpers";
@@ -40,7 +40,7 @@ function GroupDelete({ group, onSubmit }: Props) {
return (
<Flex column>
<form onSubmit={handleSubmit}>
<HelpText>
<Text type="secondary">
<Trans
defaults="Are you sure about that? Deleting the <em>{{groupName}}</em> group will cause its members to lose access to collections and documents that it is associated with."
values={{
@@ -50,7 +50,7 @@ function GroupDelete({ group, onSubmit }: Props) {
em: <strong />,
}}
/>
</HelpText>
</Text>
<Button type="submit" danger>
{isDeleting ? `${t("Deleting")}…` : t("I’m sure – Delete")}
</Button>

6
app/scenes/GroupEdit.tsx
View File

@@ -4,8 +4,8 @@ import { useTranslation, Trans } from "react-i18next";
import Group from "~/models/Group";
import Button from "~/components/Button";
import Flex from "~/components/Flex";
import HelpText from "~/components/HelpText";
import Input from "~/components/Input";
import Text from "~/components/Text";
import useToasts from "~/hooks/useToasts";
type Props = {
@@ -48,12 +48,12 @@ function GroupEdit({ group, onSubmit }: Props) {
return (
<form onSubmit={handleSubmit}>
<HelpText>
<Text type="secondary">
<Trans>
You can edit the name of this group at any time, however doing so too
often might confuse your team mates.
</Trans>
</HelpText>
</Text>
<Flex>
<Input
type="text"

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

@@ -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")}…`}

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

@@ -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>

10
app/scenes/GroupNew.tsx
View File

@@ -5,9 +5,9 @@ import Group from "~/models/Group";
import GroupMembers from "~/scenes/GroupMembers";
import Button from "~/components/Button";
import Flex from "~/components/Flex";
import HelpText from "~/components/HelpText";
import Input from "~/components/Input";
import Modal from "~/components/Modal";
import Text from "~/components/Text";
import useStores from "~/hooks/useStores";
import useToasts from "~/hooks/useToasts";
@@ -52,13 +52,13 @@ function GroupNew({ onSubmit }: Props) {
return (
<>
<form onSubmit={handleSubmit}>
<HelpText>
<Text type="secondary">
<Trans>
Groups are for organizing your team. They work best when centered
around a function or a responsibility — Support or Engineering for
example.
</Trans>
</HelpText>
</Text>
<Flex>
<Input
type="text"
@@ -70,9 +70,9 @@ function GroupNew({ onSubmit }: Props) {
flex
/>
</Flex>
<HelpText>
<Text type="secondary">
<Trans>You’ll be able to add people to the group next.</Trans>
</HelpText>
</Text>
<Button type="submit" disabled={isSaving || !name}>
{isSaving ? `${t("Creating")}…` : t("Continue")}

10
app/scenes/Invite.tsx
View File

@@ -8,10 +8,10 @@ import { Role } from "@shared/types";
import Button from "~/components/Button";
import CopyToClipboard from "~/components/CopyToClipboard";
import Flex from "~/components/Flex";
import HelpText from "~/components/HelpText";
import Input from "~/components/Input";
import InputSelectRole from "~/components/InputSelectRole";
import NudeButton from "~/components/NudeButton";
import Text from "~/components/Text";
import Tooltip from "~/components/Tooltip";
import useCurrentTeam from "~/hooks/useCurrentTeam";
import useCurrentUser from "~/hooks/useCurrentUser";
@@ -141,16 +141,16 @@ function Invite({ onSubmit }: Props) {
return (
<form onSubmit={handleSubmit}>
{team.guestSignin ? (
<HelpText>
<Text type="secondary">
<Trans
defaults="Invite team members or guests to join your knowledge base. Team members can sign in with {{signinMethods}} or use their email address."
values={{
signinMethods: team.signinMethods,
}}
/>
</HelpText>
</Text>
) : (
<HelpText>
<Text type="secondary">
<Trans
defaults="Invite team members to join your knowledge base. They will need to sign in with {{signinMethods}}."
values={{
@@ -163,7 +163,7 @@ function Invite({ onSubmit }: Props) {
<Link to="/settings/security">enable email sign-in</Link>.
</Trans>
)}
</HelpText>
</Text>
)}
{team.subdomain && (
<CopyBlock>

6
app/scenes/Login/index.tsx
View File

@@ -11,10 +11,10 @@ import ButtonLarge from "~/components/ButtonLarge";
import Fade from "~/components/Fade";
import Flex from "~/components/Flex";
import Heading from "~/components/Heading";
import HelpText from "~/components/HelpText";
import OutlineLogo from "~/components/OutlineLogo";
import PageTitle from "~/components/PageTitle";
import TeamLogo from "~/components/TeamLogo";
import Text from "~/components/Text";
import env from "~/env";
import useQuery from "~/hooks/useQuery";
import useStores from "~/hooks/useStores";
@@ -221,12 +221,12 @@ const Logo = styled.div`
height: 38px;
`;
const GetStarted = styled(HelpText)`
const GetStarted = styled(Text)`
text-align: center;
margin-top: -12px;
`;
const Note = styled(HelpText)`
const Note = styled(Text)`
text-align: center;
font-size: 14px;

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

@@ -18,10 +18,10 @@ import DocumentListItem from "~/components/DocumentListItem";
import Empty from "~/components/Empty";
import Fade from "~/components/Fade";
import Flex from "~/components/Flex";
import HelpText from "~/components/HelpText";
import LoadingIndicator from "~/components/LoadingIndicator";
import RegisterKeyDown from "~/components/RegisterKeyDown";
import Scene from "~/components/Scene";
import Text from "~/components/Text";
import withStores from "~/components/withStores";
import { searchUrl } from "~/utils/routeHelpers";
import { decodeURIComponentSafe } from "~/utils/urls";
@@ -321,9 +321,9 @@ class Search extends React.Component<Props> {
{showEmpty && (
<Fade>
<Centered column>
<HelpText>
<Text type="secondary">
<Trans>No documents found for your search filters.</Trans>
</HelpText>
</Text>
</Centered>
</Fade>
)}

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

@@ -6,9 +6,9 @@ import { useTranslation, Trans } from "react-i18next";
import Button from "~/components/Button";
import DefaultCollectionInputSelect from "~/components/DefaultCollectionInputSelect";
import Heading from "~/components/Heading";
import HelpText from "~/components/HelpText";
import Input from "~/components/Input";
import Scene from "~/components/Scene";
import Text from "~/components/Text";
import env from "~/env";
import useCurrentTeam from "~/hooks/useCurrentTeam";
import useStores from "~/hooks/useStores";
@@ -94,12 +94,12 @@ function Details() {
return (
<Scene title={t("Details")} icon={<TeamIcon color="currentColor" />}>
<Heading>{t("Details")}</Heading>
<HelpText>
<Text type="secondary">
<Trans>
These details affect the way that your Outline appears to everyone on
the team.
</Trans>
</HelpText>
</Text>
<ImageInput
label={t("Logo")}
@@ -132,10 +132,10 @@ function Details() {
short
/>
{subdomain && (
<HelpText small>
<Text type="secondary" size="small">
<Trans>Your knowledge base will be accessible at</Trans>{" "}
<strong>{subdomain}.getoutline.com</strong>
</HelpText>
</Text>
)}
</>
)}

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

@@ -5,10 +5,10 @@ import { useTranslation, Trans } from "react-i18next";
import FileOperation from "~/models/FileOperation";
import Button from "~/components/Button";
import Heading from "~/components/Heading";
import HelpText from "~/components/HelpText";
import PaginatedList from "~/components/PaginatedList";
import Scene from "~/components/Scene";
import Subheading from "~/components/Subheading";
import Text from "~/components/Text";
import useCurrentUser from "~/hooks/useCurrentUser";
import useStores from "~/hooks/useStores";
import useToasts from "~/hooks/useToasts";
@@ -55,7 +55,7 @@ function Export() {
return (
<Scene title={t("Export")} icon={<DownloadIcon color="currentColor" />}>
<Heading>{t("Export")}</Heading>
<HelpText>
<Text 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 – we will email a link to <em>{{ userEmail }}</em> when it’s complete."
values={{
@@ -65,7 +65,7 @@ function Export() {
em: <strong />,
}}
/>
</HelpText>
</Text>
<Button
type="submit"
onClick={handleExport}

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

@@ -4,9 +4,9 @@ import { useState } from "react";
import * as React from "react";
import { useTranslation, Trans } from "react-i18next";
import Heading from "~/components/Heading";
import HelpText from "~/components/HelpText";
import Scene from "~/components/Scene";
import Switch from "~/components/Switch";
import Text from "~/components/Text";
import useCurrentTeam from "~/hooks/useCurrentTeam";
import useStores from "~/hooks/useStores";
import useToasts from "~/hooks/useToasts";
@@ -38,12 +38,12 @@ function Features() {
<Heading>
<Trans>Features</Trans>
</Heading>
<HelpText>
<Text type="secondary">
<Trans>
Manage optional and beta features. Changing these settings will affect
the experience for all team members.
</Trans>
</HelpText>
</Text>
<Switch
label={t("Collaborative editing")}
name="collaborativeEditing"

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

@@ -8,11 +8,11 @@ import Button from "~/components/Button";
import Empty from "~/components/Empty";
import GroupListItem from "~/components/GroupListItem";
import Heading from "~/components/Heading";
import HelpText from "~/components/HelpText";
import Modal from "~/components/Modal";
import PaginatedList from "~/components/PaginatedList";
import Scene from "~/components/Scene";
import Subheading from "~/components/Subheading";
import Text from "~/components/Text";
import useBoolean from "~/hooks/useBoolean";
import useCurrentTeam from "~/hooks/useCurrentTeam";
import useStores from "~/hooks/useStores";
@@ -50,11 +50,11 @@ function Groups() {
}
>
<Heading>{t("Groups")}</Heading>
<HelpText>
<Text type="secondary">
<Trans>
Groups can be used to organize and manage the people on your team.
</Trans>
</HelpText>
</Text>
<Subheading>{t("All groups")}</Subheading>
<PaginatedList
items={groups.orderedData}

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

@@ -8,12 +8,12 @@ import getDataTransferFiles from "@shared/utils/getDataTransferFiles";
import { cdnPath } from "@shared/utils/urls";
import Button from "~/components/Button";
import Heading from "~/components/Heading";
import HelpText from "~/components/HelpText";
import Item from "~/components/List/Item";
import OutlineLogo from "~/components/OutlineLogo";
import PaginatedList from "~/components/PaginatedList";
import Scene from "~/components/Scene";
import Subheading from "~/components/Subheading";
import Text from "~/components/Text";
import useStores from "~/hooks/useStores";
import useToasts from "~/hooks/useToasts";
import { uploadFile } from "~/utils/uploadFile";
@@ -73,13 +73,13 @@ function Import() {
return (
<Scene title={t("Import")} icon={<NewDocumentIcon color="currentColor" />}>
<Heading>{t("Import")}</Heading>
<HelpText>
<Text type="secondary">
<Trans>
Quickly transfer your existing documents, pages, and files from other
tools and services into Outline. You can also drag and drop any HTML,
Markdown, and text documents directly into Collections in the app.
</Trans>
</HelpText>
</Text>
<VisuallyHidden>
<input
type="file"

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

@@ -5,11 +5,11 @@ import * as React from "react";
import { useTranslation, Trans } from "react-i18next";
import styled from "styled-components";
import Heading from "~/components/Heading";
import HelpText from "~/components/HelpText";
import Input from "~/components/Input";
import Notice from "~/components/Notice";
import Scene from "~/components/Scene";
import Subheading from "~/components/Subheading";
import Text from "~/components/Text";
import env from "~/env";
import useCurrentUser from "~/hooks/useCurrentUser";
import useStores from "~/hooks/useStores";
@@ -100,12 +100,12 @@ function Notifications() {
</Trans>
</Notice>
)}
<HelpText>
<Text type="secondary">
<Trans>
Manage when and where you receive email notifications from Outline.
Your email address can be updated in your SSO provider.
</Trans>
</HelpText>
</Text>
{env.EMAIL_ENABLED ? (
<>

6
app/scenes/Settings/People.tsx
View File

@@ -12,10 +12,10 @@ import { Action } from "~/components/Actions";
import Button from "~/components/Button";
import Flex from "~/components/Flex";
import Heading from "~/components/Heading";
import HelpText from "~/components/HelpText";
import InputSearch from "~/components/InputSearch";
import Modal from "~/components/Modal";
import Scene from "~/components/Scene";
import Text from "~/components/Text";
import useBoolean from "~/hooks/useBoolean";
import useCurrentTeam from "~/hooks/useCurrentTeam";
import useQuery from "~/hooks/useQuery";
@@ -209,13 +209,13 @@ function People() {
}
>
<Heading>{t("Members")}</Heading>
<HelpText>
<Text type="secondary">
<Trans>
Everyone that has signed into Outline appears here. It’s possible that
there are other users who have access through {team.signinMethods} but
haven’t signed in yet.
</Trans>
</HelpText>
</Text>
<Flex gap={8}>
<InputSearch
short

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

@@ -7,10 +7,10 @@ import { languageOptions } from "@shared/i18n";
import UserDelete from "~/scenes/UserDelete";
import Button from "~/components/Button";
import Heading from "~/components/Heading";
import HelpText from "~/components/HelpText";
import Input from "~/components/Input";
import InputSelect from "~/components/InputSelect";
import Scene from "~/components/Scene";
import Text from "~/components/Text";
import useCurrentUser from "~/hooks/useCurrentUser";
import useStores from "~/hooks/useStores";
import useToasts from "~/hooks/useToasts";
@@ -126,12 +126,12 @@ const Profile = () => {
<DangerZone>
<h2>{t("Delete Account")}</h2>
<HelpText small>
<Text type="secondary" size="small">
<Trans>
You may delete your account at any time, note that this is
unrecoverable
</Trans>
</HelpText>
</Text>
<Button onClick={toggleDeleteAccount} neutral>
{t("Delete account")}…
</Button>

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

@@ -5,10 +5,10 @@ import { useState } from "react";
import * as React from "react";
import { useTranslation, Trans } from "react-i18next";
import Heading from "~/components/Heading";
import HelpText from "~/components/HelpText";
import InputSelect from "~/components/InputSelect";
import Scene from "~/components/Scene";
import Switch from "~/components/Switch";
import Text from "~/components/Text";
import env from "~/env";
import useCurrentTeam from "~/hooks/useCurrentTeam";
import useStores from "~/hooks/useStores";
@@ -62,12 +62,12 @@ function Security() {
<Heading>
<Trans>Security</Trans>
</Heading>
<HelpText>
<Text type="secondary">
<Trans>
Settings that impact the access, security, and content of your
knowledge base.
</Trans>
</HelpText>
</Text>
<Switch
label={t("Allow email authentication")}

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

@@ -5,10 +5,10 @@ import { useTranslation, Trans } from "react-i18next";
import { Link } from "react-router-dom";
import Empty from "~/components/Empty";
import Heading from "~/components/Heading";
import HelpText from "~/components/HelpText";
import PaginatedList from "~/components/PaginatedList";
import Scene from "~/components/Scene";
import Subheading from "~/components/Subheading";
import Text from "~/components/Text";
import useCurrentTeam from "~/hooks/useCurrentTeam";
import useStores from "~/hooks/useStores";
import ShareListItem from "./components/ShareListItem";
@@ -23,15 +23,15 @@ function Shares() {
return (
<Scene title={t("Share Links")} icon={<LinkIcon color="currentColor" />}>
<Heading>{t("Share Links")}</Heading>
<HelpText>
<Text 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
link has been revoked.
</Trans>
</HelpText>
</Text>
{can.manage && (
<HelpText>
<Text type="secondary">
{!canShareDocuments && (
<strong>{t("Sharing is currently disabled.")}</strong>
)}{" "}
@@ -41,7 +41,7 @@ function Shares() {
em: <Link to="/settings/security" />,
}}
/>
</HelpText>
</Text>
)}
<Subheading>{t("Shared documents")}</Subheading>
<PaginatedList

10
app/scenes/Settings/Slack.tsx
View File

@@ -8,12 +8,12 @@ import Integration from "~/models/Integration";
import Button from "~/components/Button";
import CollectionIcon from "~/components/CollectionIcon";
import Heading from "~/components/Heading";
import HelpText from "~/components/HelpText";
import List from "~/components/List";
import ListItem from "~/components/List/Item";
import Notice from "~/components/Notice";
import Scene from "~/components/Scene";
import SlackIcon from "~/components/SlackIcon";
import Text from "~/components/Text";
import env from "~/env";
import useCurrentTeam from "~/hooks/useCurrentTeam";
import useQuery from "~/hooks/useQuery";
@@ -72,7 +72,7 @@ function Slack() {
</Trans>
</Notice>
)}
<HelpText>
<Text type="secondary">
<Trans
defaults="Get rich previews of Outline links shared in Slack and use the <em>{{ command }}</em> slash command to search for documents without leaving your chat."
values={{
@@ -82,7 +82,7 @@ function Slack() {
em: <Code />,
}}
/>
</HelpText>
</Text>
{env.SLACK_KEY ? (
<>
<p>
@@ -102,13 +102,13 @@ function Slack() {
<p>&nbsp;</p>
<h2>{t("Collections")}</h2>
<HelpText>
<Text type="secondary">
<Trans>
Connect Outline collections to Slack channels and messages will be
automatically posted to Slack when documents are published or
updated.
</Trans>
</HelpText>
</Text>
<List>
{groupedCollections.map(([collection, integration]) => {

6
app/scenes/Settings/Tokens.tsx
View File

@@ -6,11 +6,11 @@ import APITokenNew from "~/scenes/APITokenNew";
import { Action } from "~/components/Actions";
import Button from "~/components/Button";
import Heading from "~/components/Heading";
import HelpText from "~/components/HelpText";
import Modal from "~/components/Modal";
import PaginatedList from "~/components/PaginatedList";
import Scene from "~/components/Scene";
import Subheading from "~/components/Subheading";
import Text from "~/components/Text";
import useBoolean from "~/hooks/useBoolean";
import useCurrentTeam from "~/hooks/useCurrentTeam";
import useStores from "~/hooks/useStores";
@@ -42,7 +42,7 @@ function Tokens() {
}
>
<Heading>{t("API Tokens")}</Heading>
<HelpText>
<Text 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.
@@ -53,7 +53,7 @@ function Tokens() {
),
}}
/>
</HelpText>
</Text>
<PaginatedList
fetch={apiKeys.fetchPage}
items={apiKeys.orderedData}

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

@@ -2,8 +2,8 @@ import * as React from "react";
import { useTranslation, Trans } from "react-i18next";
import Button from "~/components/Button";
import Heading from "~/components/Heading";
import HelpText from "~/components/HelpText";
import Scene from "~/components/Scene";
import Text from "~/components/Text";
import ZapierIcon from "~/components/ZapierIcon";
function Zapier() {
@@ -11,13 +11,13 @@ function Zapier() {
return (
<Scene title={t("Zapier")} icon={<ZapierIcon color="currentColor" />}>
<Heading>{t("Zapier")}</Heading>
<HelpText>
<Text type="secondary">
<Trans>
Zapier is a platform that allows Outline to easily integrate with
thousands of other business tools. Head over to Zapier to setup a
"Zap" and start programmatically interacting with Outline.'
</Trans>
</HelpText>
</Text>
<p>
<Button
onClick={() =>

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

@@ -10,10 +10,10 @@ import Button from "~/components/Button";
import ButtonLink from "~/components/ButtonLink";
import CollectionIcon from "~/components/CollectionIcon";
import Flex from "~/components/Flex";
import HelpText from "~/components/HelpText";
import ListItem from "~/components/List/Item";
import Popover from "~/components/Popover";
import Switch from "~/components/Switch";
import Text from "~/components/Text";
import useToasts from "~/hooks/useToasts";
type Props = {
@@ -81,7 +81,9 @@ function SlackListItem({ integration, collection }: Props) {
<Popover {...popover} aria-label={t("Settings")}>
<Events>
<h3>{t("Notifications")}</h3>
<HelpText>{t("These events should be posted to Slack")}</HelpText>
<Text type="secondary">
{t("These events should be posted to Slack")}
</Text>
<Switch
label={t("Document published")}
name="documents.publish"

10
app/scenes/UserDelete.tsx
View File

@@ -3,8 +3,8 @@ import * as React from "react";
import { useTranslation, Trans } from "react-i18next";
import Button from "~/components/Button";
import Flex from "~/components/Flex";
import HelpText from "~/components/HelpText";
import Modal from "~/components/Modal";
import Text from "~/components/Text";
import useStores from "~/hooks/useStores";
import useToasts from "~/hooks/useToasts";
@@ -41,22 +41,22 @@ function UserDelete({ onRequestClose }: Props) {
<Modal isOpen title={t("Delete Account")} onRequestClose={onRequestClose}>
<Flex column>
<form onSubmit={handleSubmit}>
<HelpText>
<Text type="secondary">
<Trans>
Are you sure? Deleting your account will destroy identifying data
associated with your user and cannot be undone. You will be
immediately logged out of Outline and all your API tokens will be
revoked.
</Trans>
</HelpText>
<HelpText>
</Text>
<Text type="secondary">
<Trans
defaults="<em>Note:</em> Signing back in will cause a new account to be automatically reprovisioned."
components={{
em: <strong />,
}}
/>
</HelpText>
</Text>
<Button type="submit" danger>
{isDeleting ? `${t("Deleting")}…` : t("Delete My Account")}
</Button>

8
app/scenes/UserProfile.tsx
View File

@@ -10,10 +10,10 @@ import Avatar from "~/components/Avatar";
import Badge from "~/components/Badge";
import Button from "~/components/Button";
import Flex from "~/components/Flex";
import HelpText from "~/components/HelpText";
import Modal from "~/components/Modal";
import PaginatedDocumentList from "~/components/PaginatedDocumentList";
import Subheading from "~/components/Subheading";
import Text from "~/components/Text";
import useCurrentUser from "~/hooks/useCurrentUser";
import useStores from "~/hooks/useStores";
import { settingsPath } from "~/utils/routeHelpers";
@@ -79,11 +79,11 @@ function UserProfile(props: Props) {
}}
heading={<Subheading>{t("Recently updated")}</Subheading>}
empty={
<HelpText>
<Text type="secondary">
{t("{{ userName }} hasn’t updated any documents yet.", {
userName: user.name,
})}
</HelpText>
</Text>
}
showCollection
/>
@@ -103,7 +103,7 @@ const StyledBadge = styled(Badge)`
top: -2px;
`;
const Meta = styled(HelpText)`
const Meta = styled(Text)`
margin-top: -12px;
`;