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>

1 files changed, 67 insertions, 90 deletions

diff --git a/src/view/com/composer/ComposerReplyTo.tsx b/src/view/com/composer/ComposerReplyTo.tsx
index d4ba1f3a8..74ca61507 100644
--- a/src/view/com/composer/ComposerReplyTo.tsx
+++ b/src/view/com/composer/ComposerReplyTo.tsx
@@ -16,7 +16,7 @@ import {ComposerOptsPostRef} from 'state/shell/composer'
 import {QuoteEmbed} from 'view/com/util/post-embeds/QuoteEmbed'
 import {Text} from 'view/com/util/text/Text'
 import {PreviewableUserAvatar} from 'view/com/util/UserAvatar'
-import {useTheme} from '#/alf'
+import {atoms as a, useTheme} from '#/alf'
 
 export function ComposerReplyTo({replyTo}: {replyTo: ComposerOptsPostRef}) {
   const t = useTheme()
@@ -122,94 +122,87 @@ function ComposerReplyToImages({
   showFull: boolean
 }) {
   return (
-    <View
-      style={{
-        width: 65,
-        flexDirection: 'column',
-        alignItems: 'center',
-      }}>
-      <View style={styles.imagesContainer}>
-        {(images.length === 1 && (
-          <Image
-            source={{uri: images[0].thumb}}
-            style={styles.singleImage}
-            cachePolicy="memory-disk"
-            accessibilityIgnoresInvertColors
-          />
+    <View style={[styles.imagesContainer, a.mx_xs]}>
+      {(images.length === 1 && (
+        <Image
+          source={{uri: images[0].thumb}}
+          style={[a.flex_1]}
+          cachePolicy="memory-disk"
+          accessibilityIgnoresInvertColors
+        />
+      )) ||
+        (images.length === 2 && (
+          <View style={[a.flex_1, a.flex_row, a.gap_2xs]}>
+            <Image
+              source={{uri: images[0].thumb}}
+              style={[a.flex_1]}
+              cachePolicy="memory-disk"
+              accessibilityIgnoresInvertColors
+            />
+            <Image
+              source={{uri: images[1].thumb}}
+              style={[a.flex_1]}
+              cachePolicy="memory-disk"
+              accessibilityIgnoresInvertColors
+            />
+          </View>
         )) ||
-          (images.length === 2 && (
-            <View style={[styles.imagesInner, styles.imagesRow]}>
+        (images.length === 3 && (
+          <View style={[a.flex_1, a.flex_row, a.gap_2xs]}>
+            <Image
+              source={{uri: images[0].thumb}}
+              style={[a.flex_1]}
+              cachePolicy="memory-disk"
+              accessibilityIgnoresInvertColors
+            />
+            <View style={[a.flex_1, a.gap_2xs]}>
               <Image
-                source={{uri: images[0].thumb}}
-                style={styles.doubleImageTall}
+                source={{uri: images[1].thumb}}
+                style={[a.flex_1]}
                 cachePolicy="memory-disk"
                 accessibilityIgnoresInvertColors
               />
               <Image
-                source={{uri: images[1].thumb}}
-                style={styles.doubleImageTall}
+                source={{uri: images[2].thumb}}
+                style={[a.flex_1]}
                 cachePolicy="memory-disk"
                 accessibilityIgnoresInvertColors
               />
             </View>
-          )) ||
-          (images.length === 3 && (
-            <View style={[styles.imagesInner, styles.imagesRow]}>
+          </View>
+        )) ||
+        (images.length === 4 && (
+          <View style={[a.flex_1, a.gap_2xs]}>
+            <View style={[a.flex_1, a.flex_row, a.gap_2xs]}>
               <Image
                 source={{uri: images[0].thumb}}
-                style={styles.doubleImageTall}
+                style={[a.flex_1]}
+                cachePolicy="memory-disk"
+                accessibilityIgnoresInvertColors
+              />
+              <Image
+                source={{uri: images[1].thumb}}
+                style={[a.flex_1]}
                 cachePolicy="memory-disk"
                 accessibilityIgnoresInvertColors
               />
-              <View style={styles.imagesInner}>
-                <Image
-                  source={{uri: images[1].thumb}}
-                  style={styles.doubleImage}
-                  cachePolicy="memory-disk"
-                  accessibilityIgnoresInvertColors
-                />
-                <Image
-                  source={{uri: images[2].thumb}}
-                  style={styles.doubleImage}
-                  cachePolicy="memory-disk"
-                  accessibilityIgnoresInvertColors
-                />
-              </View>
             </View>
-          )) ||
-          (images.length === 4 && (
-            <View style={styles.imagesInner}>
-              <View style={[styles.imagesInner, styles.imagesRow]}>
-                <Image
-                  source={{uri: images[0].thumb}}
-                  style={styles.doubleImage}
-                  cachePolicy="memory-disk"
-                  accessibilityIgnoresInvertColors
-                />
-                <Image
-                  source={{uri: images[1].thumb}}
-                  style={styles.doubleImage}
-                  cachePolicy="memory-disk"
-                  accessibilityIgnoresInvertColors
-                />
-              </View>
-              <View style={[styles.imagesInner, styles.imagesRow]}>
-                <Image
-                  source={{uri: images[2].thumb}}
-                  style={styles.doubleImage}
-                  cachePolicy="memory-disk"
-                  accessibilityIgnoresInvertColors
-                />
-                <Image
-                  source={{uri: images[3].thumb}}
-                  style={styles.doubleImage}
-                  cachePolicy="memory-disk"
-                  accessibilityIgnoresInvertColors
-                />
-              </View>
+            <View style={[a.flex_1, a.flex_row, a.gap_2xs]}>
+              <Image
+                source={{uri: images[2].thumb}}
+                style={[a.flex_1]}
+                cachePolicy="memory-disk"
+                accessibilityIgnoresInvertColors
+              />
+              <Image
+                source={{uri: images[3].thumb}}
+                style={[a.flex_1]}
+                cachePolicy="memory-disk"
+                accessibilityIgnoresInvertColors
+              />
             </View>
-          ))}
-      </View>
+          </View>
+        ))}
     </View>
   )
 }
@@ -240,23 +233,7 @@ const styles = StyleSheet.create({
     borderRadius: 6,
     overflow: 'hidden',
     marginTop: 2,
-  },
-  imagesInner: {
-    gap: 2,
-  },
-  imagesRow: {
-    flexDirection: 'row',
-  },
-  singleImage: {
-    width: 65,
-    height: 65,
-  },
-  doubleImageTall: {
-    width: 32.5,
-    height: 65,
-  },
-  doubleImage: {
-    width: 32.5,
-    height: 32.5,
+    height: 64,
+    width: 64,
   },
 })