diff --git a/src/components/ui/fluent/CategoryButton.tsx b/src/components/ui/fluent/CategoryButton.tsx index e9c9d16a..66f102d8 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` border-radius: 6px; margin-bottom: 10px; + color: var(--foreground); background: var(--secondary-header); gap: 12px; @@ -58,6 +60,15 @@ const CategoryBase = styled.div` 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 ( - + {icon}
{children} @@ -86,7 +101,11 @@ export default function CategoryButton({
{typeof action === "string" ? ( - + action === "chevron" ? ( + + ) : ( + + ) ) : ( action )} diff --git a/src/pages/settings/panes/Account.tsx b/src/pages/settings/panes/Account.tsx index acdaaf3a..b9a7d995 100644 --- a/src/pages/settings/panes/Account.tsx +++ b/src/pages/settings/panes/Account.tsx @@ -170,11 +170,8 @@ export const Account = observer(() => { . } - action={ - - }> + disabled + action="chevron"> Currently not available

@@ -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 + action={}> - } - description={"Delete your account, including all of your data."} - action={ - - - - }> - - + + } + description={ + "Delete your account, including all of your data." + } + onClick={() => {}} + action="external"> + + +