Increase rounding for all embeds (#5421)

* tweak image styles

* fix reply image preview and covert to atoms

* increase rounding on media inset border

* decrease gap on desktop

* fix inset styles

* increase rounding on embeds to `md`

* Couple edge cases

---------

Co-authored-by: Eric Bailey <git@esb.lol>

src/view/com/util/post-embeds/ExternalGifEmbed.tsx

@@ -117,7 +117,7 @@ export function ExternalGifEmbed({
         style={[
           {height: imageDims.height},
           styles.gifContainer,
-          a.rounded_sm,
+          a.rounded_md,
           a.overflow_hidden,
           {
             borderBottomLeftRadius: 0,

src/view/com/util/post-embeds/ExternalLinkEmbed.tsx

@@ -59,15 +59,15 @@ export const ExternalLinkEmbed = ({
   }
 
   return (
-    <View style={[a.flex_col, a.w_full]}>
+    <View style={[a.flex_col, a.rounded_md, a.w_full]}>
       <LinkWrapper link={link} onOpen={onOpen} style={style}>
         {imageUri && !embedPlayerParams ? (
           <View>
             <Image
               style={{
                 aspectRatio: 1.91,
-                borderTopRightRadius: 8,
-                borderTopLeftRadius: 8,
+                borderTopRightRadius: a.rounded_md.borderRadius,
+                borderTopLeftRadius: a.rounded_md.borderRadius,
               }}
               source={{uri: imageUri}}
               accessibilityIgnoresInvertColors
@@ -101,11 +101,11 @@ export const ExternalLinkEmbed = ({
             a.py_sm,
             t.atoms.border_contrast_low,
             {
-              borderBottomRightRadius: 8,
-              borderBottomLeftRadius: 8,
+              borderBottomRightRadius: a.rounded_md.borderRadius,
+              borderBottomLeftRadius: a.rounded_md.borderRadius,
               paddingHorizontal: isMobile ? 10 : 14,
             },
-            !imageUri && !embedPlayerParams && [a.border, a.rounded_sm],
+            !imageUri && !embedPlayerParams && [a.border, a.rounded_md],
           ]}>
           <Text
             type="sm"

src/view/com/util/post-embeds/ExternalPlayerEmbed.tsx

@@ -229,7 +229,7 @@ export function ExternalPlayer({
         collapsable={false}
         style={[
           aspect,
-          a.rounded_sm,
+          a.rounded_md,
           a.overflow_hidden,
           {
             borderBottomLeftRadius: 0,
@@ -245,7 +245,7 @@ export function ExternalPlayer({
             />
             <Fill
               style={[
-                a.rounded_sm,
+                a.rounded_md,
                 t.name === 'light' ? t.atoms.bg_contrast_975 : t.atoms.bg,
                 {
                   borderBottomLeftRadius: 0,
@@ -267,7 +267,7 @@ export function ExternalPlayer({
         ) : (
           <Fill
             style={[
-              a.rounded_sm,
+              a.rounded_md,
               {
                 backgroundColor:
                   t.name === 'light' ? t.palette.contrast_975 : 'black',
@@ -304,8 +304,8 @@ export function ExternalPlayer({
 
 const styles = StyleSheet.create({
   topRadius: {
-    borderTopLeftRadius: 8,
-    borderTopRightRadius: 8,
+    borderTopLeftRadius: a.rounded_md.borderRadius,
+    borderTopRightRadius: a.rounded_md.borderRadius,
   },
   overlayContainer: {
     flex: 1,
@@ -319,8 +319,8 @@ const styles = StyleSheet.create({
     zIndex: 3,
   },
   webview: {
-    borderTopRightRadius: 8,
-    borderTopLeftRadius: 8,
+    borderTopRightRadius: a.rounded_md.borderRadius,
+    borderTopLeftRadius: a.rounded_md.borderRadius,
     backgroundColor: 'transparent',
   },
   gifContainer: {

src/view/com/util/post-embeds/GifEmbed.tsx

@@ -53,7 +53,7 @@ function PlaybackControls({
         a.inset_0,
         a.w_full,
         a.h_full,
-        a.rounded_sm,
+        a.rounded_md,
         {
           zIndex: 2,
           backgroundColor: !isLoaded
@@ -117,10 +117,10 @@ export function GifEmbed({
   )
 
   return (
-    <View style={[a.rounded_sm, a.overflow_hidden, a.mt_sm, style]}>
+    <View style={[a.rounded_md, a.overflow_hidden, a.mt_sm, style]}>
       <View
         style={[
-          a.rounded_sm,
+          a.rounded_md,
           a.overflow_hidden,
           {aspectRatio: params.dimensions!.width / params.dimensions!.height},
         ]}>
@@ -132,7 +132,7 @@ export function GifEmbed({
         <GifView
           source={params.playerUri}
           placeholderSource={link.thumb}
-          style={[a.flex_1, a.rounded_sm]}
+          style={[a.flex_1, a.rounded_md]}
           autoplay={!autoplayDisabled}
           onPlayerStateChange={onPlayerStateChange}
           ref={playerRef}

src/view/com/util/post-embeds/QuoteEmbed.tsx

@@ -219,7 +219,14 @@ export function QuoteEmbed({
   return (
     <ContentHider
       modui={moderation?.ui('contentList')}
-      style={[styles.container, a.border, t.atoms.border_contrast_low, style]}
+      style={[
+        a.rounded_md,
+        a.p_md,
+        a.mt_sm,
+        a.border,
+        t.atoms.border_contrast_low,
+        style,
+      ]}
       childContainerStyle={[a.pt_sm]}>
       <Link
         hoverStyle={{borderColor: pal.colors.borderLinkHover}}
@@ -293,13 +300,6 @@ function viewRecordToPostView(
 }
 
 const styles = StyleSheet.create({
-  container: {
-    borderRadius: 8,
-    marginTop: 8,
-    paddingVertical: 12,
-    paddingHorizontal: 12,
-    borderWidth: StyleSheet.hairlineWidth,
-  },
   errorContainer: {
     flexDirection: 'row',
     alignItems: 'center',

src/view/com/util/post-embeds/VideoEmbed.tsx

@@ -40,11 +40,11 @@ export function VideoEmbed({embed}: Props) {
     <View
       style={[
         a.w_full,
-        a.rounded_sm,
+        a.rounded_md,
         a.overflow_hidden,
         {aspectRatio},
         {backgroundColor: 'black'},
-        a.my_xs,
+        a.mt_xs,
       ]}>
       <ErrorBoundary renderError={renderError} key={key}>
         <InnerWrapper embed={embed} />

src/view/com/util/post-embeds/VideoEmbed.web.tsx

@@ -66,8 +66,8 @@ export function VideoEmbed({embed}: {embed: AppBskyEmbedVideo.View}) {
         {aspectRatio},
         {backgroundColor: 'black'},
         a.relative,
-        a.rounded_sm,
-        a.my_xs,
+        a.rounded_md,
+        a.mt_xs,
       ]}>
       <div
         ref={ref}

src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerWeb.tsx

@@ -78,7 +78,7 @@ export function VideoEmbedInnerWeb({
   }, [embed.playlist])
 
   return (
-    <View style={[a.flex_1, a.rounded_sm, a.overflow_hidden]}>
+    <View style={[a.flex_1, a.rounded_md, a.overflow_hidden]}>
       <div ref={containerRef} style={{height: '100%', width: '100%'}}>
         <figure style={{margin: 0, position: 'absolute', inset: 0}}>
           <video

src/view/com/util/post-embeds/index.tsx

@@ -138,7 +138,7 @@ export function PostEmbeds({
         const image = images[0]
         return (
           <ContentHider modui={moderation?.ui('contentMedia')}>
-            <View style={[styles.container, style]}>
+            <View style={[a.mt_sm, style]}>
               <AutoSizedImage
                 crop={
                   viewContext === PostEmbedViewContext.ThreadHighlighted
@@ -162,7 +162,7 @@ export function PostEmbeds({
 
       return (
         <ContentHider modui={moderation?.ui('contentMedia')}>
-          <View style={[styles.container, style]}>
+          <View style={[a.mt_sm, style]}>
             <ImageLayoutGrid
               images={embed.images}
               onPress={_openLightbox}
@@ -184,7 +184,7 @@ export function PostEmbeds({
         <ExternalLinkEmbed
           link={link}
           onOpen={onOpen}
-          style={[styles.container, style]}
+          style={[a.mt_sm, style]}
         />
       </ContentHider>
     )
@@ -247,9 +247,6 @@ function MaybeListCard({view}: {view: AppBskyGraphDefs.ListView}) {
 }
 
 const styles = StyleSheet.create({
-  container: {
-    marginTop: 8,
-  },
   altContainer: {
     backgroundColor: 'rgba(0, 0, 0, 0.75)',
     borderRadius: 6,