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 de6c613b..e9c9d16a 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 a75c25cf..acdaaf3a 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({