From ae003af4494c0233bdb416c5f9b9d807b6d80cbb Mon Sep 17 00:00:00 2001 From: Gorbachev Egor <7gorbachevm@gmail.com> Date: Wed, 15 Nov 2023 17:41:17 +0700 Subject: [PATCH] Telegram UI kit guidlines - border radius and secondary button --- src/index.css | 3 ++- src/screens/deck-form/deck-form.tsx | 2 +- src/screens/deck-list/deck-loading.tsx | 2 +- src/screens/deck-list/my-deck.tsx | 2 +- src/screens/deck-list/public-deck.tsx | 2 +- src/screens/deck-review/deck-preview.tsx | 8 +++---- src/screens/deck-review/share-deck-button.tsx | 8 +------ src/ui/button.tsx | 23 +++++++++---------- src/ui/progress-bar.tsx | 2 +- src/ui/theme.tsx | 15 ++++++++---- 10 files changed, 33 insertions(+), 34 deletions(-) diff --git a/src/index.css b/src/index.css index f7832417..9d7ee5eb 100644 --- a/src/index.css +++ b/src/index.css @@ -1,5 +1,6 @@ :root { - font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; + font-family: -apple-system, Inter, system-ui, Avenir, Helvetica, Arial, + sans-serif; line-height: 1.5; font-weight: 400; font-synthesis: none; diff --git a/src/screens/deck-form/deck-form.tsx b/src/screens/deck-form/deck-form.tsx index 3558e247..401fea78 100644 --- a/src/screens/deck-form/deck-form.tsx +++ b/src/screens/deck-form/deck-form.tsx @@ -64,7 +64,7 @@ export const DeckForm = observer(() => { className={css({ cursor: "pointer", backgroundColor: theme.secondaryBgColor, - borderRadius: 8, + borderRadius: theme.borderRadius, padding: 12, })} > diff --git a/src/screens/deck-list/deck-loading.tsx b/src/screens/deck-list/deck-loading.tsx index cb3dca87..8f68607d 100644 --- a/src/screens/deck-list/deck-loading.tsx +++ b/src/screens/deck-list/deck-loading.tsx @@ -11,7 +11,7 @@ export const DeckLoading = () => { justifyContent: "space-between", cursor: "pointer", gap: 4, - borderRadius: 8, + borderRadius: theme.borderRadius, padding: "13px 12px", background: theme.secondaryBgColor, })} diff --git a/src/screens/deck-list/my-deck.tsx b/src/screens/deck-list/my-deck.tsx index 3f2fe790..d98f7fca 100644 --- a/src/screens/deck-list/my-deck.tsx +++ b/src/screens/deck-list/my-deck.tsx @@ -27,7 +27,7 @@ export const MyDeck = observer((props: Props) => { alignItems: "center", cursor: "pointer", gap: 4, - borderRadius: 8, + borderRadius: theme.borderRadius, padding: 12, background: theme.secondaryBgColor, })} diff --git a/src/screens/deck-list/public-deck.tsx b/src/screens/deck-list/public-deck.tsx index 5f444577..da71c76b 100644 --- a/src/screens/deck-list/public-deck.tsx +++ b/src/screens/deck-list/public-deck.tsx @@ -20,7 +20,7 @@ export const PublicDeck = observer((props: Props) => { display: "flex", flexDirection: "column", gap: 4, - borderRadius: 8, + borderRadius: theme.borderRadius, padding: 12, cursor: "pointer", background: theme.secondaryBgColor, diff --git a/src/screens/deck-review/deck-preview.tsx b/src/screens/deck-review/deck-preview.tsx index 56caeeda..a8169ff8 100644 --- a/src/screens/deck-review/deck-preview.tsx +++ b/src/screens/deck-review/deck-preview.tsx @@ -35,6 +35,7 @@ export const DeckPreview = observer(() => { display: "flex", flexDirection: "column", gap: 16, + paddingTop: 12, })} >
{ display: "flex", flexDirection: "column", gap: 16, - borderRadius: 8, - padding: "8px 12px", + borderRadius: theme.borderRadius, + padding: "8px 16px", paddingBottom: 12, background: theme.secondaryBgColor, })} @@ -74,9 +75,8 @@ export const DeckPreview = observer(() => { {deckListStore.myId && deck.author_id === deckListStore.myId ? ( ); diff --git a/src/ui/button.tsx b/src/ui/button.tsx index d0ba7aaf..a19ec9c6 100644 --- a/src/ui/button.tsx +++ b/src/ui/button.tsx @@ -7,7 +7,7 @@ import { theme } from "./theme.tsx"; type Props = { mainColor?: string; outline?: boolean; - transparent?: boolean; + noPseudoClasses?: boolean; icon?: string; } & React.ButtonHTMLAttributes; @@ -18,6 +18,7 @@ export const Button = (props: Props) => { outline, children, icon, + noPseudoClasses, ...restProps } = props; @@ -36,17 +37,17 @@ export const Button = (props: Props) => { alignItems: "center", backgroundColor: mainColor, cursor: "pointer", - ":hover": props.transparent + ":hover": noPseudoClasses ? undefined : { backgroundColor: parsedColor.darken(0.1).toHex(), }, - ":focus": props.transparent + ":focus": noPseudoClasses ? undefined : { boxShadow: `0 0 0 0.2rem ${parsedColor.alpha(0.4).toHex()}`, }, - ":active": props.transparent + ":active": noPseudoClasses ? undefined : { backgroundColor: parsedColor.darken(0.1).toHex(), @@ -69,17 +70,15 @@ export const Button = (props: Props) => { }), outline && css({ - backgroundColor: props.transparent - ? "rgba(0,0,0,0)" - : theme.bgColor, + backgroundColor: parsedColor.lighten(0.4).toHex(), color: mainColor, - transform: "scale(0.98)", - outline: `1px solid ${mainColor}`, - ":hover": props.transparent + ":hover": noPseudoClasses ? undefined : { - backgroundColor: parsedColor.darken(0.08).toHex(), - color: theme.bgColor, + backgroundColor: parsedColor + .lighten(0.4) + .darken(0.08) + .toHex(), }, }), className, diff --git a/src/ui/progress-bar.tsx b/src/ui/progress-bar.tsx index e9572e2c..b30d90a8 100644 --- a/src/ui/progress-bar.tsx +++ b/src/ui/progress-bar.tsx @@ -11,7 +11,7 @@ export const ProgressBar = ({ value, max }: Props) => { className={css({ width: "100%", backgroundColor: theme.secondaryBgColor, - borderRadius: 8, + borderRadius: theme.borderRadius, position: "relative", overflow: "hidden", })} diff --git a/src/ui/theme.tsx b/src/ui/theme.tsx index a55f3432..39f53833 100644 --- a/src/ui/theme.tsx +++ b/src/ui/theme.tsx @@ -15,12 +15,17 @@ const cssVarToValue = (cssProperty: string) => { const secondaryBgColor = "var(--tg-theme-secondary-bg-color)"; const buttonColor = "var(--tg-theme-button-color)"; const buttonTextColor = "var(--tg-theme-button-text-color)"; +const bgColor = "var(--tg-theme-bg-color)"; +const textColor = "var(--tg-theme-text-color)"; +const hintColor = "var(--tg-theme-hint-color)"; +const linkColor = "var(--tg-theme-link-color)"; export const theme = { - bgColor: "var(--tg-theme-bg-color)", - textColor: "var(--tg-theme-text-color)", - hintColor: "var(--tg-theme-hint-color)", - linkColor: "var(--tg-theme-link-color)", + bgColor, + textColor, + hintColor, + hintColorComputed: cssVarToValue(hintColor), + linkColor, buttonColor, buttonTextColor, secondaryBgColor, @@ -35,5 +40,5 @@ export const theme = { danger: "#fc2025", dangerLight: colord("#fc2025").alpha(0.4).toHex(), - borderRadius: 8, + borderRadius: 12, };