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>
2024-09-13 12:02:58 -05:00
parent c7231537f1
commit b3381da1c1
13 changed files with 214 additions and 58 deletions
@@ -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>
+  )
+}