From 95a149407b505045350479657a7900c0ab7ce28e Mon Sep 17 00:00:00 2001
From: nizune <9-nizune@users.noreply.gitlab.insrt.uk>
Date: Wed, 4 Aug 2021 18:33:01 +0200
Subject: [PATCH] Continue work on category buttons
---
external/lang | 2 +-
src/components/ui/fluent/CategoryButton.tsx | 67 ++++++++++++++++++---
src/pages/settings/panes/Account.tsx | 6 +-
src/pages/settings/panes/Panes.module.scss | 1 +
4 files changed, 62 insertions(+), 14 deletions(-)
diff --git a/external/lang b/external/lang
index ede8226..d2e491a 160000
--- a/external/lang
+++ b/external/lang
@@ -1 +1 @@
-Subproject commit ede822613d642a345595f690ab99e35c78aa09c4
+Subproject commit d2e491a8ef38a4b67fe1be7b5eabcfea8064942e
diff --git a/src/components/ui/fluent/CategoryButton.tsx b/src/components/ui/fluent/CategoryButton.tsx
index 66f102d..c01d911 100644
--- a/src/components/ui/fluent/CategoryButton.tsx
+++ b/src/components/ui/fluent/CategoryButton.tsx
@@ -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>
);
-}
+}
\ No newline at end of file
diff --git a/src/pages/settings/panes/Account.tsx b/src/pages/settings/panes/Account.tsx
index b9a7d99..30a62b7 100644
--- a/src/pages/settings/panes/Account.tsx
+++ b/src/pages/settings/panes/Account.tsx
@@ -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>
diff --git a/src/pages/settings/panes/Panes.module.scss b/src/pages/settings/panes/Panes.module.scss
index 22a254c..e75eb4f 100644
--- a/src/pages/settings/panes/Panes.module.scss
+++ b/src/pages/settings/panes/Panes.module.scss
@@ -2,6 +2,7 @@
.banner {
position: relative;
margin-top: 5px;
+ margin-bottom: 10px;
gap: 24px;
width: 100%;
padding: 12px 10px;
--
GitLab