From b0eb079ff8058c0a8c9667541a529c8d63459adc Mon Sep 17 00:00:00 2001 From: Anastasiya Uraleva Date: Wed, 29 Oct 2025 17:24:48 -0700 Subject: [PATCH] [APP-1321]: Update brand embeds more clearly (#8955) * Nightly source-language update * run prettier * wip * feat: use local dev for bskyembed test.html * feat: commit generated files which i'm not sure about * Revert "feat: commit generated files which i'm not sure about" This reverts commit b891efdaa1fd7ddd4417bfd5267e861a25a93b0e. * chore: revert change to bskyembed/.eslintrc.cjs * chore: remove generated file from bskyweb/static * chore: revert messages.po changes * Update bskyembed/test.html * Nightly source-language update * Update: Bluesky embeds * update: embed colors for light and dark modes * remove unused changes * remove duplicate word * update border radius and add cursor pointer * add icons folder for dynamic icons --------- Co-authored-by: Anastasiya Uraleva Co-authored-by: Elijah Seed-Arita Co-authored-by: Samuel Newman Co-authored-by: Anastasiya Uraleva --- bskyembed/assets/logo_full_name.svg | 10 +++ bskyembed/src/components/container.tsx | 6 +- bskyembed/src/components/embed.tsx | 6 +- bskyembed/src/components/post.tsx | 114 ++++++++++++++----------- bskyembed/src/icons/Like.tsx | 28 ++++++ bskyembed/src/icons/Reply.tsx | 28 ++++++ bskyembed/src/icons/Repost.tsx | 26 ++++++ 7 files changed, 162 insertions(+), 56 deletions(-) create mode 100644 bskyembed/assets/logo_full_name.svg create mode 100644 bskyembed/src/icons/Like.tsx create mode 100644 bskyembed/src/icons/Reply.tsx create mode 100644 bskyembed/src/icons/Repost.tsx diff --git a/bskyembed/assets/logo_full_name.svg b/bskyembed/assets/logo_full_name.svg new file mode 100644 index 0000000000..7e46f1426e --- /dev/null +++ b/bskyembed/assets/logo_full_name.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/bskyembed/src/components/container.tsx b/bskyembed/src/components/container.tsx index bafc497aea..554d47142e 100644 --- a/bskyembed/src/components/container.tsx +++ b/bskyembed/src/components/container.tsx @@ -37,7 +37,7 @@ export function Container({ return (
{ if (ref.current && href) { // forwardRef requires preact/compat - let's keep it simple @@ -49,7 +49,9 @@ export function Container({ } }}> {href && } -
{children}
+
+ {children} +
) } diff --git a/bskyembed/src/components/embed.tsx b/bskyembed/src/components/embed.tsx index ddaa7bf03e..105c785820 100644 --- a/bskyembed/src/components/embed.tsx +++ b/bskyembed/src/components/embed.tsx @@ -83,9 +83,9 @@ export function Embed({ return ( + className="transition-colors hover:bg-blue-50 dark:hover:bg-slate-900 border dark:border-slate-600 rounded-xl p-2 gap-1.5 w-full flex flex-col">
-
+
+

{children}

diff --git a/bskyembed/src/components/post.tsx b/bskyembed/src/components/post.tsx index d216ce0e54..be3350485d 100644 --- a/bskyembed/src/components/post.tsx +++ b/bskyembed/src/components/post.tsx @@ -6,10 +6,10 @@ import { } from '@atproto/api' import {h} from 'preact' -import replyIcon from '../../assets/bubble_filled_stroke2_corner2_rounded.svg' -import likeIcon from '../../assets/heart2_filled_stroke2_corner0_rounded.svg' -import logo from '../../assets/logo.svg' -import repostIcon from '../../assets/repost_stroke2_corner2_rounded.svg' +import logo from '../../assets/logo_full_name.svg' +import {Like as LikeIcon} from '../icons/Like' +import {Reply as ReplyIcon} from '../icons/Reply' +import {Repost as RepostIcon} from '../icons/Repost' import {CONTENT_LABELS} from '../labels' import * as bsky from '../types/bsky' import {niceDate} from '../util/nice-date' @@ -45,10 +45,13 @@ export function Post({thread}: Props) { const verification = getVerificationState({profile: post.author}) const href = `/profile/${post.author.did}/post/${getRkey(post)}` + return ( -
-
+
+
@@ -80,57 +83,66 @@ export function Post({thread}: Props) { @{post.author.handle}
- - -
- - - -
- {!!post.likeCount && ( -
- -

- {prettyNumber(post.likeCount)} -

-
- )} - {!!post.repostCount && ( -
- -

- {prettyNumber(post.repostCount)} -

-
- )} -
- -

- Reply -

+ +
+
+ {!!post.likeCount && ( +
+ +

+ {prettyNumber(post.likeCount)} +

+
+ )} + {!!post.replyCount && ( +
+ +

+ {prettyNumber(post.replyCount)} +

+
+ )} + + {!!post.repostCount && ( +
+ +

+ {prettyNumber(post.repostCount)} +

+
+ )}
-
-

- {post.replyCount - ? `Read ${prettyNumber(post.replyCount)} ${ - post.replyCount > 1 ? 'replies' : 'reply' - } on Bluesky` - : `View on Bluesky`} -

-

- View on Bluesky -

+ + +
+
+ + + +
) } diff --git a/bskyembed/src/icons/Like.tsx b/bskyembed/src/icons/Like.tsx new file mode 100644 index 0000000000..adcd9154e9 --- /dev/null +++ b/bskyembed/src/icons/Like.tsx @@ -0,0 +1,28 @@ +import {h} from 'preact' + +export const Like = ({ + width = 16, + height = 17, + fill = 'currentColor', + className, +}: { + width?: number + height?: number + fill?: string + className?: string +}) => ( + + + +) diff --git a/bskyembed/src/icons/Reply.tsx b/bskyembed/src/icons/Reply.tsx new file mode 100644 index 0000000000..81637e3eb4 --- /dev/null +++ b/bskyembed/src/icons/Reply.tsx @@ -0,0 +1,28 @@ +import {h} from 'preact' + +export const Reply = ({ + width = 16, + height = 17, + fill = 'currentColor', + className, +}: { + width?: number + height?: number + fill?: string + className?: string +}) => ( + + + +) diff --git a/bskyembed/src/icons/Repost.tsx b/bskyembed/src/icons/Repost.tsx new file mode 100644 index 0000000000..806ab04d38 --- /dev/null +++ b/bskyembed/src/icons/Repost.tsx @@ -0,0 +1,26 @@ +import {h} from 'preact' + +export const Repost = ({ + width = 16, + height = 17, + fill = 'currentColor', + className, +}: { + width?: number + height?: number + fill?: string + className?: string +}) => ( + + + +)