Image/video border + tweaks (#5324)

* Image/video border (#5253)

* Update AutoSizedImage.tsx

* Update AutoSizedImage.tsx

* Update Gallery.tsx

* Update ExternalLinkEmbed.tsx

* Update MediaPreview.tsx

* Update UserAvatar.tsx

* Update ExternalLinkEmbed.tsx

* Update ExternalPlayerEmbed.tsx

* Update ExternalGifEmbed.tsx

* Update GifEmbed.tsx

* Update ExternalGifEmbed.tsx

* Update GifEmbed.tsx

* Update UserAvatar.tsx

* Update ExternalPlayerEmbed.tsx

* Update ExternalPlayerEmbed.tsx

* video

* Update QuoteEmbed.tsx

* Tweaks, abstract components

---------

Co-authored-by: Minseo Lee <itoupluk427@gmail.com>

3 files changed, 55 insertions, 0 deletions

diff --git a/src/components/Fill.tsx b/src/components/Fill.tsx
new file mode 100644
index 000000000..ac74f1660
--- /dev/null
+++ b/src/components/Fill.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import {View} from 'react-native'
+
+import {atoms as a, ViewStyleProp} from '#/alf'
+
+export function Fill({
+  children,
+  style,
+}: {children?: React.ReactNode} & ViewStyleProp) {
+  return <View style={[a.absolute, a.inset_0, style]}>{children}</View>
+}
diff --git a/src/components/MediaInsetBorder.tsx b/src/components/MediaInsetBorder.tsx
new file mode 100644
index 000000000..839d79cae
--- /dev/null
+++ b/src/components/MediaInsetBorder.tsx
@@ -0,0 +1,42 @@
+import React from 'react'
+
+import {atoms as a, useTheme, ViewStyleProp} from '#/alf'
+import {Fill} from '#/components/Fill'
+
+/**
+ * Applies and thin border within a bounding box. Used to contrast media from
+ * bg of the container.
+ */
+export function MediaInsetBorder({
+  children,
+  style,
+  opaque,
+}: {
+  children?: React.ReactNode
+  /**
+   * Used where this border needs to match adjacent borders, such as in
+   * external link previews
+   */
+  opaque?: boolean
+} & ViewStyleProp) {
+  const t = useTheme()
+  const isLight = t.name === 'light'
+  return (
+    <Fill
+      style={[
+        a.rounded_sm,
+        a.border,
+        opaque
+          ? [t.atoms.border_contrast_low]
+          : [
+              isLight
+                ? t.atoms.border_contrast_low
+                : t.atoms.border_contrast_high,
+              {opacity: 0.6},
+            ],
+        style,
+      ]}>
+      {children}
+    </Fill>
+  )
+}
diff --git a/src/components/MediaPreview.tsx b/src/components/MediaPreview.tsx
index f2ebb4584..28609c6f4 100644
--- a/src/components/MediaPreview.tsx
+++ b/src/components/MediaPreview.tsx
@@ -11,6 +11,7 @@ import {Trans} from '@lingui/macro'
 
 import {parseTenorGif} from '#/lib/strings/embed-player'
 import {atoms as a, useTheme} from '#/alf'
+import {MediaInsetBorder} from '#/components/MediaInsetBorder'
 import {Text} from '#/components/Typography'
 import {PlayButtonIcon} from '#/components/video/PlayButtonIcon'
 
@@ -104,6 +105,7 @@ export function ImageItem({
         accessibilityHint={alt}
         accessibilityLabel=""
       />
+      <MediaInsetBorder style={[a.rounded_xs]} />
       {children}
     </View>
   )