Continue work on category buttons

This commit is contained in:
nizune 2021-08-04 18:33:01 +02:00
parent 0aa18d22e9
commit 95a149407b
4 changed files with 62 additions and 14 deletions

2
external/lang vendored

@ -1 +1 @@
Subproject commit ede822613d642a345595f690ab99e35c78aa09c4
Subproject commit d2e491a8ef38a4b67fe1be7b5eabcfea8064942e

View file

@ -4,23 +4,30 @@ import styled, { css } from "styled-components";
import { Children } from "../../../types/Preact";
interface BaseProps {
readonly account?: boolean;
readonly disabled?: boolean;
readonly largeDescription?: boolean;
}
const CategoryBase = styled.div<BaseProps>`
height: 54px;
padding: 8px 12px;
/*height: 54px;*/
padding: 10px 12px;
border-radius: 6px;
margin-bottom: 10px;
color: var(--foreground);
background: var(--secondary-header);
gap: 12px;
display: flex;
align-items: center;
flex-direction: row;
opacity: .7;
> svg {
flex-shrink: 0;
}
.content {
display: flex;
@ -29,6 +36,15 @@ const CategoryBase = styled.div<BaseProps>`
font-weight: 600;
font-size: 14px;
.title {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.description {
${(props) =>
props.largeDescription
@ -40,6 +56,10 @@ const CategoryBase = styled.div<BaseProps>`
`}
font-weight: 400;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
a:hover {
text-decoration: underline;
@ -50,10 +70,12 @@ const CategoryBase = styled.div<BaseProps>`
${(props) =>
typeof props.onClick !== "undefined" &&
css`
cursor: pointer;
opacity: 1;
transition: 0.1s ease background-color;
&:hover {
background: var(--tertiary-background);
background: var(--secondary-background);
}
a {
@ -68,6 +90,32 @@ const CategoryBase = styled.div<BaseProps>`
.action {
color: var(--tertiary-foreground);
}
.action {
font-size: 14px;
}
`}
${(props) =>
props.account &&
css`
height: 54px;
.content {
.title {
text-transform: uppercase;
font-size: 12px;
color: var(--secondary-foreground);
}
.description {
font-size: 15px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
}
`}
`;
@ -84,7 +132,7 @@ export default function CategoryButton({
icon,
children,
description,
largeDescription,
account,
disabled,
onClick,
action,
@ -93,10 +141,11 @@ export default function CategoryButton({
<CategoryBase
onClick={onClick}
disabled={disabled}
largeDescription={largeDescription}>
account={account}>
{icon}
<div class="content">
{children}
<div className="title">{children}</div>
<div className="description">{description}</div>
</div>
<div class="action">
@ -104,7 +153,7 @@ export default function CategoryButton({
action === "chevron" ? (
<ChevronRight size={24} />
) : (
<LinkExternal size={24} />
<LinkExternal size={20} />
)
) : (
action
@ -112,4 +161,4 @@ export default function CategoryButton({
</div>
</CategoryBase>
);
}
}

View file

@ -136,7 +136,7 @@ export const Account = observer(() => {
value
)
}
largeDescription
account
action="chevron"
onClick={() =>
openScreen({
@ -144,9 +144,7 @@ export const Account = observer(() => {
field,
})
}>
<Overline type="subtle" noMargin>
<Text id={`login.${field}`} />
</Overline>
<Text id={`login.${field}`} />
</CategoryButton>
))}
</div>

View file

@ -2,6 +2,7 @@
.banner {
position: relative;
margin-top: 5px;
margin-bottom: 10px;
gap: 24px;
width: 100%;
padding: 12px 10px;