Remove buttons on Account page.

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" ? (
+                    action === "chevron" ? (
                         <ChevronRight size={24} />
+                    ) : (
+                        <LinkExternal size={24} />
+                    )
                 ) : (
                     action
                 )}

src/pages/settings/panes/Account.tsx

@@ -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
             </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={
+                disabled
-                    <Button accent compact disabled>
+                action={<Text id="general.unavailable" />}>
-                        <Text id="general.unavailable" />
-                    </Button>
-                }>
                 <Text id="app.settings.pages.account.manage.disable" />
             </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."}
+                    description={
-                action={
+                        "Delete your account, including all of your data."
-                    <a href="mailto:contact@revolt.chat?subject=Delete%20my%20account">
+                    }
-                        <Button error compact>
+                    onClick={() => {}}
-                            <Text id="app.settings.pages.account.manage.delete" />
+                    action="external">
-                        </Button>
-                    </a>
-                }>
                     <Text id="app.settings.pages.account.manage.delete" />
                 </CategoryButton>
+            </a>
             <Tip>
                 <span>
                     <Text id="app.settings.tips.account.a" />