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

View file

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