From 0aa18d22e9f716539b8556b4145373f0efb158d4 Mon Sep 17 00:00:00 2001
From: Paul <paulmakles@gmail.com>
Date: Wed, 4 Aug 2021 16:43:08 +0100
Subject: [PATCH] Remove buttons on Account page.
---
src/components/ui/fluent/CategoryButton.tsx | 27 ++++++++++++---
src/pages/settings/panes/Account.tsx | 37 +++++++++------------
2 files changed, 38 insertions(+), 26 deletions(-)
diff --git a/src/components/ui/fluent/CategoryButton.tsx b/src/components/ui/fluent/CategoryButton.tsx
index e9c9d16..66f102d 100644
--- a/src/components/ui/fluent/CategoryButton.tsx
+++ b/src/components/ui/fluent/CategoryButton.tsx
@@ -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
)}
diff --git a/src/pages/settings/panes/Account.tsx b/src/pages/settings/panes/Account.tsx
index acdaaf3..b9a7d99 100644
--- a/src/pages/settings/panes/Account.tsx
+++ b/src/pages/settings/panes/Account.tsx
@@ -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" />
--
GitLab