Telegram UI guidlines (#9)

* Telegram UI kit guidlines - border radius and secondary button * List header
kubk · Nov 15, 2023 · cfaf9e4 · cfaf9e4
1 parent d3f4eb7
commit cfaf9e4
Show file tree

Hide file tree

Showing 13 changed files with 101 additions and 78 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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 (
     <div className={css({ display: "flex", flexDirection: "column", gap: 12 })}>
-      <h2 className={css({ margin: 0, padding: 0, paddingTop: 4 })}>
-        My decks
-      </h2>
-
       <div>
+        <ListHeader text={"My decks"} />
         <div
           className={css({
             display: "flex",
@@ -96,47 +94,51 @@ export const MainScreen = observer(() => {
         </div>
       </div>
 
-      <h2 className={css({ margin: 0, padding: 0 })}>Public decks</h2>
-      <div
-        className={css({
-          display: "flex",
-          flexDirection: "column",
-          gap: 6,
-        })}
-      >
-        {deckListStore.myInfo?.state === "fulfilled" &&
-        !deckListStore.publicDecks.length ? (
-          <Hint>
-            Wow! 🌟 You've added them all! There are no more public decks left
-            to discover.
-          </Hint>
-        ) : null}
+      <div>
+        <ListHeader text={"Public decks"} />
+        <div
+          className={css({
+            display: "flex",
+            flexDirection: "column",
+            gap: 6,
+          })}
+        >
+          {deckListStore.myInfo?.state === "fulfilled" &&
+          !deckListStore.publicDecks.length ? (
+            <Hint>
+              Wow! 🌟 You've added them all! There are no more public decks left
+              to discover.
+            </Hint>
+          ) : null}
 
-        {deckListStore.myInfo?.state === "fulfilled" ? (
-          <>
-            {deckListStore.publicDecks.map((deck) => (
-              <PublicDeck key={deck.id} deck={deck} />
-            ))}
-          </>
-        ) : null}
+          {deckListStore.myInfo?.state === "fulfilled" ? (
+            <>
+              {deckListStore.publicDecks.map((deck) => (
+                <PublicDeck key={deck.id} deck={deck} />
+              ))}
+            </>
+          ) : null}
 
-        {deckListStore.myInfo?.state === "pending" &&
-          [1, 2, 3].map((i) => <DeckLoading key={i} />)}
+          {deckListStore.myInfo?.state === "pending" &&
+            [1, 2, 3].map((i) => <DeckLoading key={i} />)}
+        </div>
       </div>
 
-      <h2 className={css({ margin: 0, padding: 0 })}>News and updates</h2>
-      <div className={css({ paddingBottom: 16 })}>
-        <Button
-          icon={"mdi-call-made"}
-          onClick={() => {
-            const channelLink = import.meta.env.VITE_CHANNEL_LINK;
-            assert(channelLink, "Channel link env variable is empty");
+      <div>
+        <ListHeader text={"News and updates"} />
+        <div className={css({ paddingBottom: 16 })}>
+          <Button
+            icon={"mdi-call-made"}
+            onClick={() => {
+              const channelLink = import.meta.env.VITE_CHANNEL_LINK;
+              assert(channelLink, "Channel link env variable is empty");
 
-            WebApp.openTelegramLink(channelLink);
-          }}
-        >
-          Telegram channel
-        </Button>
+              WebApp.openTelegramLink(channelLink);
+            }}
+          >
+            Telegram channel
+          </Button>
+        </div>
       </div>
     </div>
   );

diff --git 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
@@ -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
@@ -35,15 +35,16 @@ export const DeckPreview = observer(() => {
         display: "flex",
         flexDirection: "column",
         gap: 16,
+        paddingTop: 12,
       })}
     >
       <div
         className={css({
           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 ? (
             <Button
               icon={"mdi-pencil"}
+              noPseudoClasses
               outline
-              mainColor={theme.textColor}
-              transparent
               onClick={() => {
                 screenStore.navigateToDeckForm(deck.id);
               }}

diff --git a/src/screens/deck-review/share-deck-button.tsx b/src/screens/deck-review/share-deck-button.tsx
@@ -3,7 +3,6 @@ import { assert } from "../../lib/typescript/assert.ts";
 import { trimEnd } from "../../lib/string/trim.ts";
 import WebApp from "@twa-dev/sdk";
 import { Button } from "../../ui/button.tsx";
-import { theme } from "../../ui/theme.tsx";
 
 type Props = {
   deckId: number;
@@ -22,13 +21,7 @@ export const ShareDeckButton = (props: Props) => {
   };
 
   return (
-    <Button
-      icon={"mdi-share"}
-      mainColor={theme.textColor}
-      onClick={onClick}
-      transparent
-      outline
-    >
+    <Button icon={"mdi-share"} noPseudoClasses outline onClick={onClick}>
       Share deck
     </Button>
   );

diff --git 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<HTMLButtonElement>;
 
@@ -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
@@ -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 (
+    <h5
+      className={css({
+        fontWeight: 400,
+        margin: 0,
+        padding: 0,
+        paddingLeft: 12,
+        paddingTop: 4,
+        paddingBottom: 0,
+        marginBottom: 4,
+        color: theme.hintColor,
+        textTransform: "uppercase",
+      })}
+    >
+      {props.text}
+    </h5>
+  );
+};
diff --git 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
@@ -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,
 };