From cfaf9e4080b53708db80a108d1a419108ed26153 Mon Sep 17 00:00:00 2001 From: Egor Gorbachev <7gorbachevm@gmail.com> Date: Wed, 15 Nov 2023 17:55:49 +0700 Subject: [PATCH] Telegram UI guidlines (#9) * Telegram UI kit guidlines - border radius and secondary button * List header --- package.json | 6 +- src/index.css | 3 +- src/screens/deck-form/deck-form.tsx | 2 +- src/screens/deck-list/deck-loading.tsx | 2 +- src/screens/deck-list/main-screen.tsx | 82 ++++++++++--------- 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 | 9 +- src/ui/button.tsx | 23 +++--- src/ui/list-header.tsx | 23 ++++++ src/ui/progress-bar.tsx | 2 +- src/ui/theme.tsx | 15 ++-- 13 files changed, 101 insertions(+), 78 deletions(-) create mode 100644 src/ui/list-header.tsx diff --git a/package.json b/package.json index 694bd42b..198ff02b 100644 --- a/package.json +++ b/package.json @@ -4,12 +4,12 @@ "version": "0.0.0", "type": "module", "scripts": { - "build": "vite build", - "typecheck": "npx tsc", - "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", "dev:frontend:start": "vite", "dev:api:start": "npx wrangler pages dev /functions --compatibility-date=2023-09-22", "dev:tunnel": "../ngrok http --domain=causal-magpie-closing.ngrok-free.app 5173", + "build": "vite build", + "typecheck": "npx tsc", + "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", "test:api": "npx vitest --dir functions/", "test:api:coverage:": "npx vitest run --dir functions/ --coverage", "test:frontend": "npx vitest --dir src/", 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/main-screen.tsx b/src/screens/deck-list/main-screen.tsx index f466d8b6..b7663157 100644 --- a/src/screens/deck-list/main-screen.tsx +++ b/src/screens/deck-list/main-screen.tsx @@ -12,6 +12,7 @@ import { Button } from "../../ui/button.tsx"; import { DeckLoading } from "./deck-loading.tsx"; import WebApp from "@twa-dev/sdk"; import { assert } from "../../lib/typescript/assert.ts"; +import { ListHeader } from "../../ui/list-header.tsx"; export const MainScreen = observer(() => { useMount(() => { @@ -37,11 +38,8 @@ export const MainScreen = observer(() => { return (
-

- My decks -

-
+
{
-

Public decks

-
- {deckListStore.myInfo?.state === "fulfilled" && - !deckListStore.publicDecks.length ? ( - - Wow! 🌟 You've added them all! There are no more public decks left - to discover. - - ) : null} +
+ +
+ {deckListStore.myInfo?.state === "fulfilled" && + !deckListStore.publicDecks.length ? ( + + Wow! 🌟 You've added them all! There are no more public decks left + to discover. + + ) : null} - {deckListStore.myInfo?.state === "fulfilled" ? ( - <> - {deckListStore.publicDecks.map((deck) => ( - - ))} - - ) : null} + {deckListStore.myInfo?.state === "fulfilled" ? ( + <> + {deckListStore.publicDecks.map((deck) => ( + + ))} + + ) : null} - {deckListStore.myInfo?.state === "pending" && - [1, 2, 3].map((i) => )} + {deckListStore.myInfo?.state === "pending" && + [1, 2, 3].map((i) => )} +
-

News and updates

-
- + WebApp.openTelegramLink(channelLink); + }} + > + Telegram channel + +
); 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/list-header.tsx b/src/ui/list-header.tsx new file mode 100644 index 00000000..c6c99091 --- /dev/null +++ b/src/ui/list-header.tsx @@ -0,0 +1,23 @@ +import { css } from "@emotion/css"; +import { theme } from "./theme.tsx"; +import React from "react"; + +export const ListHeader = (props: { text: string }) => { + return ( +
+ {props.text} +
+ ); +}; 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, };