Remove buttons on Account page.

This commit is contained in:
Paul 2021-08-04 16:43:08 +01:00
parent b648a7b9ac
commit 0aa18d22e9
2 changed files with 38 additions and 26 deletions

View file

@ -1,9 +1,10 @@
import { ChevronRight } from "@styled-icons/boxicons-regular";
import { ChevronRight, LinkExternal } from "@styled-icons/boxicons-regular";
import styled, { css } from "styled-components";
import { Children } from "../../../types/Preact";
interface BaseProps {
readonly disabled?: boolean;
readonly largeDescription?: boolean;
}
@ -13,6 +14,7 @@ const CategoryBase = styled.div<BaseProps>`
border-radius: 6px;
margin-bottom: 10px;
color: var(--foreground);
background: var(--secondary-header);
gap: 12px;
@ -58,6 +60,15 @@ const CategoryBase = styled.div<BaseProps>`
cursor: pointer;
}
`}
${(props) =>
props.disabled &&
css`
.content,
.action {
color: var(--tertiary-foreground);
}
`}
`;
interface Props extends BaseProps {
@ -66,7 +77,7 @@ interface Props extends BaseProps {
description?: Children;
onClick?: () => void;
action?: "chevron" | Children;
action?: "chevron" | "external" | Children;
}
export default function CategoryButton({
@ -74,11 +85,15 @@ export default function CategoryButton({
children,
description,
largeDescription,
disabled,
onClick,
action,
}: Props) {
return (
<CategoryBase onClick={onClick} largeDescription={largeDescription}>
<CategoryBase
onClick={onClick}
disabled={disabled}
largeDescription={largeDescription}>
{icon}
<div class="content">
{children}
@ -86,7 +101,11 @@ export default function CategoryButton({
</div>
<div class="action">
{typeof action === "string" ? (
<ChevronRight size={24} />
action === "chevron" ? (
<ChevronRight size={24} />
) : (
<LinkExternal size={24} />
)
) : (
action
)}

View file

@ -170,11 +170,8 @@ export const Account = observer(() => {
.
</>
}
action={
<Button accent compact disabled>
<Text id="app.settings.pages.account.2fa.add_auth" />
</Button>
}>
disabled
action="chevron">
Currently not available
</CategoryButton>
<h3>
@ -188,25 +185,21 @@ export const Account = observer(() => {
description={
"Disable your account. You won't be able to access it unless you log back in."
}
action={
<Button accent compact disabled>
<Text id="general.unavailable" />
</Button>
}>
disabled
action={<Text id="general.unavailable" />}>
<Text id="app.settings.pages.account.manage.disable" />
</CategoryButton>
<CategoryButton
icon={<Trash size={24} color="var(--error)" />}
description={"Delete your account, including all of your data."}
action={
<a href="mailto:contact@revolt.chat?subject=Delete%20my%20account">
<Button error compact>
<Text id="app.settings.pages.account.manage.delete" />
</Button>
</a>
}>
<Text id="app.settings.pages.account.manage.delete" />
</CategoryButton>
<a href="mailto:contact@revolt.chat?subject=Delete%20my%20account">
<CategoryButton
icon={<Trash size={24} color="var(--error)" />}
description={
"Delete your account, including all of your data."
}
onClick={() => {}}
action="external">
<Text id="app.settings.pages.account.manage.delete" />
</CategoryButton>
</a>
<Tip>
<span>
<Text id="app.settings.tips.account.a" />