diff --git a/bskyembed/assets/logo_full_name.svg b/bskyembed/assets/logo_full_name.svg index 7e46f1426e..150b3121ea 100644 --- a/bskyembed/assets/logo_full_name.svg +++ b/bskyembed/assets/logo_full_name.svg @@ -1,10 +1,10 @@ - - - - - - - - - + + + + + + + + + diff --git a/bskyembed/src/components/container.tsx b/bskyembed/src/components/container.tsx index 554d47142e..893319f367 100644 --- a/bskyembed/src/components/container.tsx +++ b/bskyembed/src/components/container.tsx @@ -20,7 +20,7 @@ export function Container({ if (!entry) return let {height} = entry.contentRect - height += 2 // border top and bottom + height += 4 // border-2 = 2px top + 2px bottom if (height !== prevHeight.current) { prevHeight.current = height window.parent.postMessage( @@ -37,7 +37,7 @@ export function Container({ return (
{ if (ref.current && href) { // forwardRef requires preact/compat - let's keep it simple @@ -49,9 +49,7 @@ export function Container({ } }}> {href && } -
- {children} -
+
{children}
) } diff --git a/bskyembed/src/components/post.tsx b/bskyembed/src/components/post.tsx index fb32250464..7d3dd47d64 100644 --- a/bskyembed/src/components/post.tsx +++ b/bskyembed/src/components/post.tsx @@ -53,7 +53,7 @@ export function Post({thread}: Props) { return (
+ className="block font-bold text-[15px] min-[400px]:text-[17px] leading-5 line-clamp-1 hover:underline underline-offset-2 text-ellipsis decoration-2"> {post.author.displayName?.trim() || post.author.handle} {verification.isVerified && ( @@ -87,72 +87,68 @@ export function Post({thread}: Props) { /> )}
- - @{post.author.handle} - +
+ + @{post.author.handle} + + · + + Follow + +
+ -
-
- {!!post.likeCount && ( -
- -

- {prettyNumber(post.likeCount)} -

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

- {prettyNumber(post.replyCount)} -

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

- {prettyNumber(post.repostCount)} -

-
- )} +
+
+
+ {!!post.likeCount && ( +
+ +

+ {prettyNumber(post.likeCount)} +

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

+ {prettyNumber(post.replyCount)} +

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

+ {prettyNumber(post.repostCount)} +

+
+ )} +
+ + +
- - + +
-
- - - -
) } @@ -177,7 +173,7 @@ function PostContent({record}: {record: AppBskyFeedPost.Record | null}) { + className="text-brand hover:underline"> {segment.text} , ) @@ -205,7 +201,7 @@ function PostContent({record}: {record: AppBskyFeedPost.Record | null}) { + className="text-brand hover:underline"> {segment.text} , ) @@ -217,7 +213,7 @@ function PostContent({record}: {record: AppBskyFeedPost.Record | null}) { } return ( -

+

{richText}

) diff --git a/bskyembed/src/screens/landing.tsx b/bskyembed/src/screens/landing.tsx index bb650241f4..703cbad1b5 100644 --- a/bskyembed/src/screens/landing.tsx +++ b/bskyembed/src/screens/landing.tsx @@ -39,6 +39,7 @@ render(, root) function LandingPage() { const [uri, setUri] = useState('') const [colorMode, setColorMode] = useState('system') + const [error, setError] = useState(null) const [loading, setLoading] = useState(false) const [thread, setThread] = useState( diff --git a/bskyembed/src/util/nice-date.ts b/bskyembed/src/util/nice-date.ts index 016c97a694..c6efa6471b 100644 --- a/bskyembed/src/util/nice-date.ts +++ b/bskyembed/src/util/nice-date.ts @@ -1,11 +1,11 @@ export function niceDate(date: number | string | Date) { const d = new Date(date) - return `${d.toLocaleDateString('en-us', { + return `${d.toLocaleTimeString(undefined, { + hour: 'numeric', + minute: '2-digit', + })} · ${d.toLocaleDateString('en-us', { year: 'numeric', month: 'short', day: 'numeric', - })} at ${d.toLocaleTimeString(undefined, { - hour: 'numeric', - minute: '2-digit', })}` } diff --git a/bskyembed/tailwind.config.cjs b/bskyembed/tailwind.config.cjs index adbeadd4c3..e58a4e6b41 100644 --- a/bskyembed/tailwind.config.cjs +++ b/bskyembed/tailwind.config.cjs @@ -5,10 +5,13 @@ module.exports = { theme: { extend: { colors: { - brand: 'rgb(10,122,255)', + brand: 'rgb(0,106,255)', + brandHover: 'rgb(245,249,255)', + brandHoverDark: 'rgb(17,24,34)', brandLighten: 'rgb(32,139,254)', - textLight: 'rgb(66,87,108)', - textDimmed: 'rgb(174,187,201)', + textLight: 'rgb(63,82,104)', + textDimmed: 'rgb(164,179,197)', + textNeutral: 'rgb(102,123,153)', dimmedBgLighten: 'rgb(30,41,54)', dimmedBg: 'rgb(22,30,39)', dimmedBgDarken: 'rgb(18,25,32)',