Large desc option.

This commit is contained in:
Paul 2021-08-04 16:17:56 +01:00
parent fe75f5a6ca
commit b648a7b9ac
2 changed files with 18 additions and 4 deletions

View file

@ -3,7 +3,11 @@ import styled, { css } from "styled-components";
import { Children } from "../../../types/Preact"; import { Children } from "../../../types/Preact";
const CategoryBase = styled.div` interface BaseProps {
readonly largeDescription?: boolean;
}
const CategoryBase = styled.div<BaseProps>`
height: 54px; height: 54px;
padding: 8px 12px; padding: 8px 12px;
border-radius: 6px; border-radius: 6px;
@ -24,7 +28,15 @@ const CategoryBase = styled.div`
font-size: 14px; font-size: 14px;
.description { .description {
${(props) =>
props.largeDescription
? css`
font-size: 14px;
`
: css`
font-size: 11px; font-size: 11px;
`}
font-weight: 400; font-weight: 400;
a:hover { a:hover {
@ -48,7 +60,7 @@ const CategoryBase = styled.div`
`} `}
`; `;
interface Props { interface Props extends BaseProps {
icon?: Children; icon?: Children;
children?: Children; children?: Children;
description?: Children; description?: Children;
@ -61,11 +73,12 @@ export default function CategoryButton({
icon, icon,
children, children,
description, description,
largeDescription,
onClick, onClick,
action, action,
}: Props) { }: Props) {
return ( return (
<CategoryBase onClick={onClick}> <CategoryBase onClick={onClick} largeDescription={largeDescription}>
{icon} {icon}
<div class="content"> <div class="content">
{children} {children}

View file

@ -136,6 +136,7 @@ export const Account = observer(() => {
value value
) )
} }
largeDescription
action="chevron" action="chevron"
onClick={() => onClick={() =>
openScreen({ openScreen({