From b648a7b9acd654f961767ab1c157447773736678 Mon Sep 17 00:00:00 2001
From: Paul <paulmakles@gmail.com>
Date: Wed, 4 Aug 2021 16:17:56 +0100
Subject: [PATCH] Large desc option.
---
src/components/ui/fluent/CategoryButton.tsx | 21 +++++++++++++++++----
src/pages/settings/panes/Account.tsx | 1 +
2 files changed, 18 insertions(+), 4 deletions(-)
diff --git a/src/components/ui/fluent/CategoryButton.tsx b/src/components/ui/fluent/CategoryButton.tsx
index de6c613..e9c9d16 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 a75c25c..acdaaf3 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({
--
GitLab