From 486e9ef62e5c0015ee37c517e8a02021600b34e4 Mon Sep 17 00:00:00 2001 From: oSumAtrIX Date: Sun, 8 Sep 2024 22:31:57 +0200 Subject: [PATCH] feat: Add verified badge to team member card (#216) Co-authored-by: Kendell R Co-authored-by: Ushie --- package.json | 1 + pnpm-lock.yaml | 33 +++++++++++ src/lib/components/ToolTip.svelte | 29 ++++++++++ src/lib/styles/ToolTip.scss | 12 ++++ src/lib/types.ts | 6 ++ src/routes/donate/TeamMember.svelte | 90 ++++++++++++++++++++++++----- 6 files changed, 158 insertions(+), 13 deletions(-) create mode 100644 src/lib/components/ToolTip.svelte create mode 100644 src/lib/styles/ToolTip.scss diff --git a/package.json b/package.json index 73efcc8d..4b48e77c 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ "svelte": "4.2.18", "svelte-check": "3.8.4", "svelte-meta-tags": "3.1.2", + "svooltip": "^0.8.2", "tslib": "2.6.3", "typescript": "5.5.3", "vite": "5.3.3", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f066e747..67af3de4 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -81,6 +81,9 @@ importers: svelte-meta-tags: specifier: 3.1.2 version: 3.1.2(svelte@4.2.18)(typescript@5.5.3) + svooltip: + specifier: ^0.8.2 + version: 0.8.2(svelte@4.2.18) tslib: specifier: 2.6.3 version: 2.6.3 @@ -259,6 +262,15 @@ packages: resolution: {integrity: sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} + '@floating-ui/core@1.6.7': + resolution: {integrity: sha512-yDzVT/Lm101nQ5TCVeK65LtdN7Tj4Qpr9RTXJ2vPFLqtLxwOrpoxAHAJI8J3yYWUc40J0BDBheaitK5SJmno2g==} + + '@floating-ui/dom@1.6.10': + resolution: {integrity: sha512-fskgCFv8J8OamCmyun8MfjB1Olfn+uZKjOKZ0vhYF3gRmEUXcGOjxWL8bBr7i4kIuPZ2KD2S3EUIOxnjC8kl2A==} + + '@floating-ui/utils@0.2.7': + resolution: {integrity: sha512-X8R8Oj771YRl/w+c1HqAC1szL8zWQRwFvgDwT129k9ACdBoud/+/rX9V0qiMl6LWUdP9voC2nDVZYPMQQsb6eA==} + '@humanwhocodes/config-array@0.11.14': resolution: {integrity: sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==} engines: {node: '>=10.10.0'} @@ -1376,6 +1388,11 @@ packages: resolution: {integrity: sha512-d0FdzYIiAePqRJEb90WlJDkjUEx42xhivxN8muUBmfZnP+tzUgz12DJ2hRJi8sIHCME7jeK1PTMgKPSfTd8JrA==} engines: {node: '>=16'} + svooltip@0.8.2: + resolution: {integrity: sha512-tNuWxAf8A6li0aJNUAuyWrUtNpT7SAii4nuiB3t79K6bngRF3MNQ6jgJdeWN0Y1ZaplJA308MPlIbIF9SioiKw==} + peerDependencies: + svelte: ^4.0.0 + text-table@0.2.0: resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==} @@ -1586,6 +1603,17 @@ snapshots: '@eslint/js@8.57.0': {} + '@floating-ui/core@1.6.7': + dependencies: + '@floating-ui/utils': 0.2.7 + + '@floating-ui/dom@1.6.10': + dependencies: + '@floating-ui/core': 1.6.7 + '@floating-ui/utils': 0.2.7 + + '@floating-ui/utils@0.2.7': {} + '@humanwhocodes/config-array@0.11.14': dependencies: '@humanwhocodes/object-schema': 2.0.3 @@ -2695,6 +2723,11 @@ snapshots: magic-string: 0.30.11 periscopic: 3.1.0 + svooltip@0.8.2(svelte@4.2.18): + dependencies: + '@floating-ui/dom': 1.6.10 + svelte: 4.2.18 + text-table@0.2.0: {} tiny-glob@0.2.9: diff --git a/src/lib/components/ToolTip.svelte b/src/lib/components/ToolTip.svelte new file mode 100644 index 00000000..f7f2a167 --- /dev/null +++ b/src/lib/components/ToolTip.svelte @@ -0,0 +1,29 @@ + + +
+ +
+ + diff --git a/src/lib/styles/ToolTip.scss b/src/lib/styles/ToolTip.scss new file mode 100644 index 00000000..27def73d --- /dev/null +++ b/src/lib/styles/ToolTip.scss @@ -0,0 +1,12 @@ +@use 'svooltip/styles.scss' as SvoolTip; + +.svooltip a { + text-decoration: none; + color: var(--text-four); + pointer-events: all; + + &:hover { + text-decoration: underline var(--secondary); + color: var(--secondary); + } +} diff --git a/src/lib/types.ts b/src/lib/types.ts index b19dba24..bf3a9031 100644 --- a/src/lib/types.ts +++ b/src/lib/types.ts @@ -49,6 +49,12 @@ export interface TeamMember { avatar_url: string; url: string; bio?: string; + gpg_key: GpgKey; +} + +expose interface GpgKey { + id: string; + url: string; } export interface CryptoWallet { diff --git a/src/routes/donate/TeamMember.svelte b/src/routes/donate/TeamMember.svelte index 0a8974f1..96545d2a 100644 --- a/src/routes/donate/TeamMember.svelte +++ b/src/routes/donate/TeamMember.svelte @@ -3,35 +3,69 @@ import { quintOut } from 'svelte/easing'; import type { TeamMember } from '$lib/types'; + import ToolTip from '$lib/components/ToolTip.svelte'; + import Svg from '$lib/components/Svg.svelte'; export let member: TeamMember; export let i: number; - - - {member.name}'s profile picture. + const transitionOptions = { + y: 10, + easing: quintOut, + duration: 750, + delay: 50 * i + }; + + const verifiedIconPath = + 'm9.585.52.929.68c.153.112.331.186.518.215l1.138.175a2.678 2.678 0 0 1 2.24 2.24l.174 1.139c.029.187.103.365.215.518l.68.928a2.677 2.677 0 0 1 0 3.17l-.68.928a1.174 1.174 0 0 0-.215.518l-.175 1.138a2.678 2.678 0 0 1-2.241 2.241l-1.138.175a1.17 1.17 0 0 0-.518.215l-.928.68a2.677 2.677 0 0 1-3.17 0l-.928-.68a1.174 1.174 0 0 0-.518-.215L3.83 14.41a2.678 2.678 0 0 1-2.24-2.24l-.175-1.138a1.17 1.17 0 0 0-.215-.518l-.68-.928a2.677 2.677 0 0 1 0-3.17l.68-.928c.112-.153.186-.331.215-.518l.175-1.14a2.678 2.678 0 0 1 2.24-2.24l1.139-.175c.187-.029.365-.103.518-.215l.928-.68a2.677 2.677 0 0 1 3.17 0ZM7.303 1.728l-.927.68a2.67 2.67 0 0 1-1.18.489l-1.137.174a1.179 1.179 0 0 0-.987.987l-.174 1.136a2.677 2.677 0 0 1-.489 1.18l-.68.928a1.18 1.18 0 0 0 0 1.394l.68.927c.256.348.424.753.489 1.18l.174 1.137c.078.509.478.909.987.987l1.136.174a2.67 2.67 0 0 1 1.18.489l.928.68c.414.305.979.305 1.394 0l.927-.68a2.67 2.67 0 0 1 1.18-.489l1.137-.174a1.18 1.18 0 0 0 .987-.987l.174-1.136a2.67 2.67 0 0 1 .489-1.18l.68-.928a1.176 1.176 0 0 0 0-1.394l-.68-.927a2.686 2.686 0 0 1-.489-1.18l-.174-1.137a1.179 1.179 0 0 0-.987-.987l-1.136-.174a2.677 2.677 0 0 1-1.18-.489l-.928-.68a1.176 1.176 0 0 0-1.394 0ZM11.28 6.78l-3.75 3.75a.75.75 0 0 1-1.06 0L4.72 8.78a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L7 8.94l3.22-3.22a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z'; + +
+ + {member.name}'s profile picture. +
-

{member.name}

+
+ +

{member.name}

+ +
+ +
+ + + + + +
+
+ + + +
Verified
+
+ +
+
{#if member.bio}
{member.bio}
{/if}
- +