Tweak embed styles (#10226)

bskyembed/src/components/embed.tsx

@@ -16,6 +16,7 @@ import {useMemo} from 'preact/hooks'
 import infoIcon from '../../assets/circleInfo_stroke2_corner0_rounded.svg'
 import playIcon from '../../assets/play_filled_corner0_rounded.svg'
 import starterPackIcon from '../../assets/starterPack.svg'
+import {Globe} from '../icons/Globe'
 import {CONTENT_LABELS, labelsToInfo} from '../labels'
 import * as bsky from '../types/bsky'
 import {getRkey} from '../util/rkey'
@@ -93,7 +94,7 @@ export function Embed({
                 />
               </div>
               <div className="flex flex-1 items-center shrink min-w-0 min-h-0">
-                <p className="block text-sm shrink-0 font-bold max-w-[70%] line-clamp-1">
+                <p className="block text-sm shrink-0 font-semibold max-w-[70%] line-clamp-1">
                   {record.author.displayName?.trim() || record.author.handle}
                 </p>
                 {verification.isVerified && (
@@ -334,13 +335,18 @@ function ExternalEmbed({
         />
       )}
       <div className="py-3 px-4">
-        <p className="text-sm text-textLight dark:text-textDimmed line-clamp-1">
-          {toNiceDomain(content.external.uri)}
+        <p className="font-semibold leading-tight line-clamp-3">
+          {content.external.title}
         </p>
-        <p className="font-semibold line-clamp-3">{content.external.title}</p>
-        <p className="text-sm text-textLight dark:text-textDimmed line-clamp-2 mt-0.5">
+        <p className="text-sm leading-snug text-textLight dark:text-textDimmed line-clamp-2 mt-0.5">
           {content.external.description}
         </p>
+        <div className="flex flex-row items-center gap-1 border-t dark:border-slate-600 mt-1 pt-1.5">
+          <Globe size={12} className="text-textLight dark:text-textDimmed" />
+          <p className="text-sm leading-none text-textLight dark:text-textDimmed line-clamp-1">
+            {toNiceDomain(content.external.uri)}
+          </p>
+        </div>
       </div>
     </Link>
   )
@@ -374,7 +380,7 @@ function GenericWithImageEmbed({
           <div className="w-8 h-8 rounded-md bg-brand shrink-0" />
         )}
         <div className="flex-1">
-          <p className="font-bold text-sm">{title}</p>
+          <p className="font-semibold text-sm">{title}</p>
           <p className="text-textLight dark:text-textDimmed text-sm">
             {subtitle}
           </p>

bskyembed/src/components/post.tsx

@@ -70,7 +70,7 @@ export function Post({thread}: Props) {
             <div className="flex flex-1 items-center">
               <Link
                 href={`/profile/${post.author.did}`}
-                className="block font-bold text-[15px] min-[400px]:text-[17px] leading-5 line-clamp-1 hover:underline underline-offset-2 text-ellipsis decoration-2">
+                className="block font-semibold 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}
               </Link>
               {verification.isVerified && (
@@ -213,7 +213,7 @@ function PostContent({record}: {record: AppBskyFeedPost.Record | null}) {
   }
 
   return (
-    <p className="text-md min-[400px]:text-lg leading-6 min-[300px]:leading-6 break-word break-words whitespace-pre-wrap">
+    <p className="text-md min-[400px]:text-lg leading-snug min-[400px]:leading-snug break-word break-words whitespace-pre-wrap">
       {richText}
     </p>
   )

bskyembed/src/icons/Globe.tsx

@@ -0,0 +1,24 @@
+import {h} from 'preact'
+
+export const Globe = ({
+  size = 14,
+  className,
+}: {
+  size?: number
+  className?: string
+}) => (
+  <svg
+    className={className}
+    width={size}
+    height={size}
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24">
+    <path
+      fill="currentColor"
+      fill-rule="evenodd"
+      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"
+      clip-rule="evenodd"
+    />
+  </svg>
+)