diff --git a/src/components/ui/fluent/CategoryButton.tsx b/src/components/ui/fluent/CategoryButton.tsx index de6c613bf8eae9d274ffc2947da8281b0b250f87..e9c9d16a52ca7f10baadd45d6ff24714d0dc1481 100644 --- a/src/components/ui/fluent/CategoryButton.tsx +++ b/src/components/ui/fluent/CategoryButton.tsx @@ -3,7 +3,11 @@ import styled, { css } from "styled-components"; import { Children } from "../../../types/Preact"; -const CategoryBase = styled.div` +interface BaseProps { + readonly largeDescription?: boolean; +} + +const CategoryBase = styled.div<BaseProps>` height: 54px; padding: 8px 12px; border-radius: 6px; @@ -24,7 +28,15 @@ const CategoryBase = styled.div` font-size: 14px; .description { - font-size: 11px; + ${(props) => + props.largeDescription + ? css` + font-size: 14px; + ` + : css` + font-size: 11px; + `} + font-weight: 400; a:hover { @@ -48,7 +60,7 @@ const CategoryBase = styled.div` `} `; -interface Props { +interface Props extends BaseProps { icon?: Children; children?: Children; description?: Children; @@ -61,11 +73,12 @@ export default function CategoryButton({ icon, children, description, + largeDescription, onClick, action, }: Props) { return ( - <CategoryBase onClick={onClick}> + <CategoryBase onClick={onClick} largeDescription={largeDescription}> {icon} <div class="content"> {children} diff --git a/src/pages/settings/panes/Account.tsx b/src/pages/settings/panes/Account.tsx index a75c25cfe077ae43543f373195329468e5f2cae3..acdaaf3a727c283b4883f92cf8ca3fd23cf2bf0e 100644 --- a/src/pages/settings/panes/Account.tsx +++ b/src/pages/settings/panes/Account.tsx @@ -136,6 +136,7 @@ export const Account = observer(() => { value ) } + largeDescription action="chevron" onClick={() => openScreen({