fix: Confirmation dialog call to action should be on the right

This commit is contained in:
Tom Moor
2023-12-19 11:21:30 -05:00
parent 1c0e396cd1
commit 56e6b5211a
11 changed files with 180 additions and 224 deletions

View File

@@ -82,65 +82,65 @@ function DocumentDelete({ document, onSubmit }: Props) {
);
return (
<Flex column>
<form onSubmit={handleSubmit}>
<Text type="secondary">
{document.isTemplate ? (
<Trans
defaults="Are you sure you want to delete the <em>{{ documentTitle }}</em> template?"
values={{
documentTitle: document.titleWithDefault,
}}
components={{
em: <strong />,
}}
/>
) : nestedDocumentsCount < 1 ? (
<Trans
defaults="Are you sure about that? Deleting the <em>{{ documentTitle }}</em> document will delete all of its history</em>."
values={{
documentTitle: document.titleWithDefault,
}}
components={{
em: <strong />,
}}
/>
) : (
<Trans
count={nestedDocumentsCount}
defaults="Are you sure about that? Deleting the <em>{{ documentTitle }}</em> document will delete all of its history and <em>{{ any }} nested document</em>."
values={{
documentTitle: document.titleWithDefault,
any: nestedDocumentsCount,
}}
components={{
em: <strong />,
}}
/>
)}
</Text>
{canArchive && (
<Text type="secondary">
<Trans>
If youd like the option of referencing or restoring the{" "}
{{
noun: document.noun,
}}{" "}
in the future, consider archiving it instead.
</Trans>
</Text>
<form onSubmit={handleSubmit}>
<Text type="secondary">
{document.isTemplate ? (
<Trans
defaults="Are you sure you want to delete the <em>{{ documentTitle }}</em> template?"
values={{
documentTitle: document.titleWithDefault,
}}
components={{
em: <strong />,
}}
/>
) : nestedDocumentsCount < 1 ? (
<Trans
defaults="Are you sure about that? Deleting the <em>{{ documentTitle }}</em> document will delete all of its history</em>."
values={{
documentTitle: document.titleWithDefault,
}}
components={{
em: <strong />,
}}
/>
) : (
<Trans
count={nestedDocumentsCount}
defaults="Are you sure about that? Deleting the <em>{{ documentTitle }}</em> document will delete all of its history and <em>{{ any }} nested document</em>."
values={{
documentTitle: document.titleWithDefault,
any: nestedDocumentsCount,
}}
components={{
em: <strong />,
}}
/>
)}
<Button type="submit" danger>
{isDeleting ? `${t("Deleting")}` : t("Im sure Delete")}
</Button>
&nbsp;&nbsp;
</Text>
{canArchive && (
<Text type="secondary">
<Trans>
If youd like the option of referencing or restoring the{" "}
{{
noun: document.noun,
}}{" "}
in the future, consider archiving it instead.
</Trans>
</Text>
)}
<Flex justify="flex-end" gap={8}>
{canArchive && (
<Button type="button" onClick={handleArchive} neutral>
{isArchiving ? `${t("Archiving")}` : t("Archive")}
</Button>
)}
</form>
</Flex>
<Button type="submit" danger>
{isDeleting ? `${t("Deleting")}` : t("Im sure Delete")}
</Button>
</Flex>
</form>
);
}