Bluesky app fork with some witchin' additions 💫
Tweak embed styles (#10226)
authored by
Samuel Newman
and committed by
GitHub
c79dff9b
13b453e5
+38
-8
+12
-6
bskyembed/src/components/embed.tsx
+12
-6
bskyembed/src/components/embed.tsx
···
16
16
import infoIcon from '../../assets/circleInfo_stroke2_corner0_rounded.svg'
17
17
import playIcon from '../../assets/play_filled_corner0_rounded.svg'
18
18
import starterPackIcon from '../../assets/starterPack.svg'
19
+
import {Globe} from '../icons/Globe'
19
20
import {CONTENT_LABELS, labelsToInfo} from '../labels'
20
21
import * as bsky from '../types/bsky'
21
22
import {getRkey} from '../util/rkey'
···
93
94
/>
94
95
</div>
95
96
<div className="flex flex-1 items-center shrink min-w-0 min-h-0">
96
-
<p className="block text-sm shrink-0 font-bold max-w-[70%] line-clamp-1">
97
+
<p className="block text-sm shrink-0 font-semibold max-w-[70%] line-clamp-1">
97
98
{record.author.displayName?.trim() || record.author.handle}
98
99
</p>
99
100
{verification.isVerified && (
···
334
335
/>
335
336
)}
336
337
<div className="py-3 px-4">
337
-
<p className="text-sm text-textLight dark:text-textDimmed line-clamp-1">
338
-
{toNiceDomain(content.external.uri)}
338
+
<p className="font-semibold leading-tight line-clamp-3">
339
+
{content.external.title}
339
340
</p>
340
-
<p className="font-semibold line-clamp-3">{content.external.title}</p>
341
-
<p className="text-sm text-textLight dark:text-textDimmed line-clamp-2 mt-0.5">
341
+
<p className="text-sm leading-snug text-textLight dark:text-textDimmed line-clamp-2 mt-0.5">
342
342
{content.external.description}
343
343
</p>
344
+
<div className="flex flex-row items-center gap-1 border-t dark:border-slate-600 mt-1 pt-1.5">
345
+
<Globe size={12} className="text-textLight dark:text-textDimmed" />
346
+
<p className="text-sm leading-none text-textLight dark:text-textDimmed line-clamp-1">
347
+
{toNiceDomain(content.external.uri)}
348
+
</p>
349
+
</div>
344
350
</div>
345
351
</Link>
346
352
)
···
374
380
<div className="w-8 h-8 rounded-md bg-brand shrink-0" />
375
381
)}
376
382
<div className="flex-1">
377
-
<p className="font-bold text-sm">{title}</p>
383
+
<p className="font-semibold text-sm">{title}</p>
378
384
<p className="text-textLight dark:text-textDimmed text-sm">
379
385
{subtitle}
380
386
</p>
+2
-2
bskyembed/src/components/post.tsx
+2
-2
bskyembed/src/components/post.tsx
···
70
70
<div className="flex flex-1 items-center">
71
71
<Link
72
72
href={`/profile/${post.author.did}`}
73
-
className="block font-bold text-[15px] min-[400px]:text-[17px] leading-5 line-clamp-1 hover:underline underline-offset-2 text-ellipsis decoration-2">
73
+
className="block font-semibold text-[15px] min-[400px]:text-[17px] leading-5 line-clamp-1 hover:underline underline-offset-2 text-ellipsis decoration-2">
74
74
{post.author.displayName?.trim() || post.author.handle}
75
75
</Link>
76
76
{verification.isVerified && (
···
213
213
}
214
214
215
215
return (
216
-
<p className="text-md min-[400px]:text-lg leading-6 min-[300px]:leading-6 break-word break-words whitespace-pre-wrap">
216
+
<p className="text-md min-[400px]:text-lg leading-snug min-[400px]:leading-snug break-word break-words whitespace-pre-wrap">
217
217
{richText}
218
218
</p>
219
219
)
+24
bskyembed/src/icons/Globe.tsx
+24
bskyembed/src/icons/Globe.tsx
···
1
+
import {h} from 'preact'
2
+
3
+
export const Globe = ({
4
+
size = 14,
5
+
className,
6
+
}: {
7
+
size?: number
8
+
className?: string
9
+
}) => (
10
+
<svg
11
+
className={className}
12
+
width={size}
13
+
height={size}
14
+
xmlns="http://www.w3.org/2000/svg"
15
+
fill="none"
16
+
viewBox="0 0 24 24">
17
+
<path
18
+
fill="currentColor"
19
+
fill-rule="evenodd"
20
+
d="M4.4 9.493C4.14 10.28 4 11.124 4 12a8 8 0 1 0 10.899-7.459l-.953 3.81a1 1 0 0 1-.726.727l-3.444.866-.772 1.533a1 1 0 0 1-1.493.35L4.4 9.493Zm.883-1.84L7.756 9.51l.44-.874a1 1 0 0 1 .649-.52l3.306-.832.807-3.227a7.99 7.99 0 0 0-7.676 3.597ZM2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm8.43.162a1 1 0 0 1 .77-.29l1.89.121a1 1 0 0 1 .494.168l2.869 1.928a1 1 0 0 1 .336 1.277l-.973 1.946a1 1 0 0 1-.894.553h-2.92a1 1 0 0 1-.831-.445L9.225 14.5a1 1 0 0 1 .126-1.262l1.08-1.076Zm.915 1.913.177-.177 1.171.074 1.914 1.286-.303.607h-1.766l-1.194-1.79Z"
21
+
clip-rule="evenodd"
22
+
/>
23
+
</svg>
24
+
)