Merge remote-tracking branch 'origin/main' into neue/font-loading

* origin/main:
  Adjust toggle components sizing (#5408)
  [Neue] Copy and spacing tweaks (#5428)
  [Neue] Ligatures & composer (#5427)
  Remove expo/vector-icons from EditImage modal (#5422)
  Revert provider stacking changes (#5423)
  Fix ext embeds in DMs (#5419)
  Fix font loading on web (#5412)

assets/icons/aspectRatio11_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M3 4a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4Zm2 1v14h14V5H5Z" clip-rule="evenodd"/></svg>

assets/icons/aspectRatio34_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M4 2c0-.552.41-1 .917-1h14.666c.507 0 .917.448.917 1v20c0 .552-.41 1-.917 1H4.917C4.41 23 4 22.552 4 22V2Zm1.833 1v18h12.834V3H5.833Z" clip-rule="evenodd"/></svg>

assets/icons/aspectRatio43_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M2 20.5c-.552 0-1-.41-1-.917V4.917C1 4.41 1.448 4 2 4h20c.552 0 1 .41 1 .917v14.666c0 .507-.448.917-1 .917H2Zm1-1.833h18V5.833H3v12.834Z" clip-rule="evenodd"/></svg>

assets/icons/flipHorizontal_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M4 21a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5v2H5v14h4v2H4Zm9-20v22h-2V1h2Zm7.707 2.293A1 1 0 0 1 21 4v1h-2V3h1a1 1 0 0 1 .707.293ZM19 7h2v2h-2V7Zm0 4h2v2h-2v-2Zm0 4h2v2h-2v-2Zm0 4h2v1a1 1 0 0 1-1 1h-1v-2Zm-2 0v2h-2v-2h2ZM15 5h2V3h-2v2Z" clip-rule="evenodd"/></svg>

assets/icons/flipVertical_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M3 4a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v5h-2V5H5v4H3V4Zm20 9H1v-2h22v2Zm-2.293 7.707A1 1 0 0 1 20 21h-1v-2h2v1a1 1 0 0 1-.293.707ZM17 19v2h-2v-2h2Zm-4 0v2h-2v-2h2Zm-4 0v2H7v-2h2Zm-4 0v2H4a1 1 0 0 1-1-1v-1h2Zm0-2H3v-2h2v2Zm14-2v2h2v-2h-2Z" clip-rule="evenodd"/></svg>

bskyweb/templates/base.html

@@ -247,7 +247,6 @@
 
     /* ProseMirror */
     .ProseMirror {
-      font: 18px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Liberation Sans", Helvetica, Arial, sans-serif;
       min-height: 140px;
     }
     .ProseMirror-dark {

src/App.native.tsx

@@ -106,48 +106,51 @@ function InnerApp() {
   }, [_])
 
   return (
-    <StatsigProvider
+    <Alf theme={theme}>
-      // Resets the entire tree below when it changes:
+      <ThemeProvider theme={theme}>
-      key={currentAccount?.did}>
+        <Splash isReady={isReady && hasCheckedReferrer}>
-      <Alf theme={theme}>
+          <RootSiblingParent>
-        <ThemeProvider theme={theme}>
+            <VideoVolumeProvider>
-          <Splash isReady={isReady && hasCheckedReferrer}>
+              <React.Fragment
-            <RootSiblingParent>
+                // Resets the entire tree below when it changes:
-              <VideoVolumeProvider>
+                key={currentAccount?.did}>
                 <QueryProvider currentDid={currentAccount?.did}>
-                  <MessagesProvider>
+                  <StatsigProvider>
-                    {/* LabelDefsProvider MUST come before ModerationOptsProvider */}
+                    <MessagesProvider>
-                    <LabelDefsProvider>
+                      {/* LabelDefsProvider MUST come before ModerationOptsProvider */}
-                      <ModerationOptsProvider>
+                      <LabelDefsProvider>
-                        <LoggedOutViewProvider>
+                        <ModerationOptsProvider>
-                          <SelectedFeedProvider>
+                          <LoggedOutViewProvider>
-                            <HiddenRepliesProvider>
+                            <SelectedFeedProvider>
-                              <UnreadNotifsProvider>
+                              <HiddenRepliesProvider>
-                                <BackgroundNotificationPreferencesProvider>
+                                <UnreadNotifsProvider>
-                                  <MutedThreadsProvider>
+                                  <BackgroundNotificationPreferencesProvider>
-                                    <ProgressGuideProvider>
+                                    <MutedThreadsProvider>
-                                      <GestureHandlerRootView style={s.h100pct}>
+                                      <ProgressGuideProvider>
-                                        <TestCtrls />
+                                        <GestureHandlerRootView
-                                        <Shell />
+                                          style={s.h100pct}>
-                                        <NuxDialogs />
+                                          <TestCtrls />
-                                      </GestureHandlerRootView>
+                                          <Shell />
-                                    </ProgressGuideProvider>
+                                          <NuxDialogs />
-                                  </MutedThreadsProvider>
+                                        </GestureHandlerRootView>
-                                </BackgroundNotificationPreferencesProvider>
+                                      </ProgressGuideProvider>
-                              </UnreadNotifsProvider>
+                                    </MutedThreadsProvider>
-                            </HiddenRepliesProvider>
+                                  </BackgroundNotificationPreferencesProvider>
-                          </SelectedFeedProvider>
+                                </UnreadNotifsProvider>
-                        </LoggedOutViewProvider>
+                              </HiddenRepliesProvider>
-                      </ModerationOptsProvider>
+                            </SelectedFeedProvider>
-                    </LabelDefsProvider>
+                          </LoggedOutViewProvider>
-                  </MessagesProvider>
+                        </ModerationOptsProvider>
+                      </LabelDefsProvider>
+                    </MessagesProvider>
+                  </StatsigProvider>
                 </QueryProvider>
-              </VideoVolumeProvider>
+              </React.Fragment>
-            </RootSiblingParent>
+            </VideoVolumeProvider>
-          </Splash>
+          </RootSiblingParent>
-        </ThemeProvider>
+        </Splash>
-      </Alf>
+      </ThemeProvider>
-    </StatsigProvider>
+    </Alf>
   )
 }
 

src/App.web.tsx

@@ -96,48 +96,50 @@ function InnerApp() {
 
   return (
     <KeyboardProvider enabled={false}>
-      <StatsigProvider
+      <Alf theme={theme}>
-        // Resets the entire tree below when it changes:
+        <ThemeProvider theme={theme}>
-        key={currentAccount?.did}>
+          <RootSiblingParent>
-        <Alf theme={theme}>
+            <VideoVolumeProvider>
-          <ThemeProvider theme={theme}>
+              <ActiveVideoProvider>
-            <RootSiblingParent>
+                <React.Fragment
-              <VideoVolumeProvider>
+                  // Resets the entire tree below when it changes:
-                <ActiveVideoProvider>
+                  key={currentAccount?.did}>
                   <QueryProvider currentDid={currentAccount?.did}>
-                    <MessagesProvider>
+                    <StatsigProvider>
-                      {/* LabelDefsProvider MUST come before ModerationOptsProvider */}
+                      <MessagesProvider>
-                      <LabelDefsProvider>
+                        {/* LabelDefsProvider MUST come before ModerationOptsProvider */}
-                        <ModerationOptsProvider>
+                        <LabelDefsProvider>
-                          <LoggedOutViewProvider>
+                          <ModerationOptsProvider>
-                            <SelectedFeedProvider>
+                            <LoggedOutViewProvider>
-                              <HiddenRepliesProvider>
+                              <SelectedFeedProvider>
-                                <UnreadNotifsProvider>
+                                <HiddenRepliesProvider>
-                                  <BackgroundNotificationPreferencesProvider>
+                                  <UnreadNotifsProvider>
-                                    <MutedThreadsProvider>
+                                    <BackgroundNotificationPreferencesProvider>
-                                      <SafeAreaProvider>
+                                      <MutedThreadsProvider>
-                                        <ProgressGuideProvider>
+                                        <SafeAreaProvider>
-                                          <Shell />
+                                          <ProgressGuideProvider>
-                                          <NuxDialogs />
+                                            <Shell />
-                                        </ProgressGuideProvider>
+                                            <NuxDialogs />
-                                      </SafeAreaProvider>
+                                          </ProgressGuideProvider>
-                                    </MutedThreadsProvider>
+                                        </SafeAreaProvider>
-                                  </BackgroundNotificationPreferencesProvider>
+                                      </MutedThreadsProvider>
-                                </UnreadNotifsProvider>
+                                    </BackgroundNotificationPreferencesProvider>
-                              </HiddenRepliesProvider>
+                                  </UnreadNotifsProvider>
-                            </SelectedFeedProvider>
+                                </HiddenRepliesProvider>
-                          </LoggedOutViewProvider>
+                              </SelectedFeedProvider>
-                        </ModerationOptsProvider>
+                            </LoggedOutViewProvider>
-                      </LabelDefsProvider>
+                          </ModerationOptsProvider>
-                    </MessagesProvider>
+                        </LabelDefsProvider>
+                      </MessagesProvider>
+                    </StatsigProvider>
                   </QueryProvider>
                   <ToastContainer />
-                </ActiveVideoProvider>
+                </React.Fragment>
-              </VideoVolumeProvider>
+              </ActiveVideoProvider>
-            </RootSiblingParent>
+            </VideoVolumeProvider>
-          </ThemeProvider>
+          </RootSiblingParent>
-        </Alf>
+        </ThemeProvider>
-      </StatsigProvider>
+      </Alf>
     </KeyboardProvider>
   )
 }

src/alf/fonts.ts

@@ -109,4 +109,10 @@ export function applyFonts(
       style.fontFamily = style.fontFamily || FAMILIES
     }
   }
+
+  /**
+   * Disable contextual ligatures
+   * {@link https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant}
+   */
+  style.fontVariant = ['no-contextual']
 }

src/components/dialogs/nuxs/NeueTypography.tsx

@@ -49,19 +49,18 @@ export function NeueTypography() {
         <View style={[a.gap_xl]}>
           <View style={[a.gap_md]}>
             <Text style={[a.text_3xl, {fontWeight: '900'}]}>
-              <Trans>Introducing new font settings ✨</Trans>
+              <Trans>New font settings ✨</Trans>
             </Text>
-            <Text style={[a.text_lg, a.leading_snug]}>
+            <Text style={[a.text_lg, a.leading_snug, {maxWidth: 400}]}>
               <Trans>
-                To the ensure the best possible experience, we're introducing a
+                We're introducing a new theme font, along with adjustable font
-                new theme font, along with adjustable font sizing settings.
+                sizing.
               </Trans>
             </Text>
             <Text
               style={[a.text_sm, a.leading_snug, t.atoms.text_contrast_medium]}>
               <Trans>
-                Defaults are shown below. You can edit these in your Appearance
+                You can adjust these in your Appearance Settings later.
-                Settings later.
               </Trans>
             </Text>
           </View>

src/components/forms/Toggle.tsx

@@ -351,8 +351,8 @@ export function Checkbox() {
         t.atoms.border_contrast_high,
         {
           borderWidth: 1,
-          height: 20,
+          height: 24,
-          width: 20,
+          width: 24,
         },
         baseStyles,
         hovered ? baseHoverStyles : {},
@@ -383,9 +383,9 @@ export function Switch() {
         t.atoms.border_contrast_high,
         {
           borderWidth: 1,
-          height: 20,
+          height: 24,
-          width: 32,
+          width: 36,
-          padding: 2,
+          padding: 3,
         },
         baseStyles,
         hovered ? baseHoverStyles : {},
@@ -395,8 +395,8 @@ export function Switch() {
         style={[
           a.rounded_full,
           {
-            height: 14,
+            height: 16,
-            width: 14,
+            width: 16,
           },
           selected
             ? {
@@ -436,8 +436,8 @@ export function Radio() {
         t.atoms.border_contrast_high,
         {
           borderWidth: 1,
-          height: 20,
+          height: 24,
-          width: 20,
+          width: 24,
         },
         baseStyles,
         hovered ? baseHoverStyles : {},
@@ -447,7 +447,7 @@ export function Radio() {
           style={[
             a.absolute,
             a.rounded_full,
-            {height: 12, width: 12},
+            {height: 16, width: 16},
             selected
               ? {
                   backgroundColor: t.palette.primary_500,

src/components/icons/AspectRatio.tsx

@@ -0,0 +1,13 @@
+import {createSinglePathSVG} from './TEMPLATE'
+
+export const AspectRatio11_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M3 4a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4Zm2 1v14h14V5H5Z',
+})
+
+export const AspectRatio43_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M2 20.5c-.552 0-1-.41-1-.917V4.917C1 4.41 1.448 4 2 4h20c.552 0 1 .41 1 .917v14.666c0 .507-.448.917-1 .917H2Zm1-1.833h18V5.833H3v12.834Z',
+})
+
+export const AspectRatio34_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M4 2c0-.552.41-1 .917-1h14.666c.507 0 .917.448.917 1v20c0 .552-.41 1-.917 1H4.917C4.41 23 4 22.552 4 22V2Zm1.833 1v18h12.834V3H5.833Z',
+})

src/components/icons/FlipImage.tsx

@@ -0,0 +1,9 @@
+import {createSinglePathSVG} from './TEMPLATE'
+
+export const FlipVertical_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M3 4a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v5h-2V5H5v4H3V4Zm20 9H1v-2h22v2Zm-2.293 7.707A1 1 0 0 1 20 21h-1v-2h2v1a1 1 0 0 1-.293.707ZM17 19v2h-2v-2h2Zm-4 0v2h-2v-2h2Zm-4 0v2H7v-2h2Zm-4 0v2H4a1 1 0 0 1-1-1v-1h2Zm0-2H3v-2h2v2Zm14-2v2h2v-2h-2Z',
+})
+
+export const FlipHorizontal_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M4 21a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5v2H5v14h4v2H4Zm9-20v22h-2V1h2Zm7.707 2.293A1 1 0 0 1 21 4v1h-2V3h1a1 1 0 0 1 .707.293ZM19 7h2v2h-2V7Zm0 4h2v2h-2v-2Zm0 4h2v2h-2v-2Zm0 4h2v1a1 1 0 0 1-1 1h-1v-2Zm-2 0v2h-2v-2h2ZM15 5h2V3h-2v2Z',
+})

src/lib/embeds.ts

@@ -1,7 +1,7 @@
 import {
-  AppBskyFeedDefs,
   AppBskyEmbedRecord,
   AppBskyEmbedRecordWithMedia,
+  AppBskyFeedDefs,
 } from '@atproto/api'
 
 export function isEmbedByEmbedder(

src/screens/Settings/AppearanceSettings.tsx

@@ -205,7 +205,7 @@ export function AppearanceToggleButtonGroup({
 }) {
   const t = useTheme()
   return (
-    <View style={[a.gap_md]}>
+    <View style={[a.gap_sm]}>
       <View style={[a.gap_xs]}>
         <View style={[a.flex_row, a.align_center, a.gap_md]}>
           <Icon style={t.atoms.text} />

src/view/com/composer/text-input/TextInput.tsx

@@ -19,6 +19,7 @@ import PasteInput, {
   PasteInputRef,
 } from '@mattermost/react-native-paste-input'
 
+import {isAndroid} from '#/platform/detection'
 import {POST_IMG_MAX} from 'lib/constants'
 import {usePalette} from 'lib/hooks/usePalette'
 import {downloadAndResize} from 'lib/media/manip'
@@ -26,12 +27,13 @@ import {isUriImage} from 'lib/media/util'
 import {cleanError} from 'lib/strings/errors'
 import {getMentionAt, insertMentionAt} from 'lib/strings/mention-manip'
 import {useTheme} from 'lib/ThemeContext'
-import {isIOS} from 'platform/detection'
 import {
   LinkFacetMatch,
   suggestLinkCardUri,
 } from 'view/com/composer/text-input/text-input-util'
 import {Text} from 'view/com/util/text/Text'
+import {atoms as a, useAlf} from '#/alf'
+import {normalizeTextStyles} from '#/components/Typography'
 import {Autocomplete} from './mobile/Autocomplete'
 
 export interface TextInputRef {
@@ -67,6 +69,7 @@ export const TextInput = forwardRef(function TextInputImpl(
   }: TextInputProps,
   ref,
 ) {
+  const {theme: t, fonts} = useAlf()
   const pal = usePalette('default')
   const textInput = useRef<PasteInputRef>(null)
   const textInputSelection = useRef<Selection>({start: 0, end: 0})
@@ -180,6 +183,33 @@ export const TextInput = forwardRef(function TextInputImpl(
     [onChangeText, richtext, setAutocompletePrefix],
   )
 
+  const inputTextStyle = React.useMemo(() => {
+    const style = normalizeTextStyles(
+      [a.text_xl, a.leading_snug, t.atoms.text],
+      {
+        fontScale: fonts.scaleMultiplier,
+        fontFamily: fonts.family,
+        flags: {},
+      },
+    )
+
+    /*
+     * `PasteInput` appears to prefer no `lineHeight`
+     */
+    style.lineHeight = undefined
+
+    /*
+     * Android impl of `PasteInput` doesn't support the array syntax for `fontVariant`
+     */
+    if (isAndroid) {
+      // @ts-ignore
+      style.fontVariant = style.fontVariant
+        ? style.fontVariant.join(' ')
+        : undefined
+    }
+    return style
+  }, [t, fonts])
+
   const textDecorated = useMemo(() => {
     let i = 0
 
@@ -187,15 +217,12 @@ export const TextInput = forwardRef(function TextInputImpl(
       return (
         <Text
           key={i++}
-          style={[
+          style={[inputTextStyle, segment.facet ? pal.link : pal.text]}>
-            segment.facet ? pal.link : pal.text,
-            styles.textInputFormatting,
-          ]}>
           {segment.text}
         </Text>
       )
     })
-  }, [richtext, pal.link, pal.text])
+  }, [richtext, pal.link, pal.text, inputTextStyle])
 
   return (
     <View style={styles.container}>
@@ -213,12 +240,7 @@ export const TextInput = forwardRef(function TextInputImpl(
         multiline
         scrollEnabled={false}
         numberOfLines={4}
-        style={[
+        style={[inputTextStyle, styles.textInput, {textAlignVertical: 'top'}]}
-          pal.text,
-          styles.textInput,
-          styles.textInputFormatting,
-          {textAlignVertical: 'top'},
-        ]}
         {...props}>
         {textDecorated}
       </PasteInput>
@@ -242,11 +264,4 @@ const styles = StyleSheet.create({
     marginLeft: 8,
     alignSelf: 'flex-start',
   },
-  textInputFormatting: {
-    fontSize: 18,
-    letterSpacing: 0.2,
-    fontWeight: '400',
-    // This is broken on ios right now, so don't set it there.
-    lineHeight: isIOS ? undefined : 23.4, // 1.3*16
-  },
 })

src/view/com/composer/text-input/TextInput.web.tsx

@@ -22,7 +22,9 @@ import {
   LinkFacetMatch,
   suggestLinkCardUri,
 } from 'view/com/composer/text-input/text-input-util'
+import {atoms as a, useAlf} from '#/alf'
 import {Portal} from '#/components/Portal'
+import {normalizeTextStyles} from '#/components/Typography'
 import {Text} from '../../util/text/Text'
 import {createSuggestion} from './web/Autocomplete'
 import {Emoji} from './web/EmojiPicker.web'
@@ -58,6 +60,7 @@ export const TextInput = React.forwardRef(function TextInputImpl(
   TextInputProps,
   ref,
 ) {
+  const {theme: t, fonts} = useAlf()
   const autocomplete = useActorAutocompleteFn()
   const pal = usePalette('default')
   const modeClass = useColorSchemeStyle('ProseMirror-light', 'ProseMirror-dark')
@@ -247,13 +250,32 @@ export const TextInput = React.forwardRef(function TextInputImpl(
     },
   }))
 
+  const inputStyle = React.useMemo(() => {
+    const style = normalizeTextStyles(
+      [a.text_lg, a.leading_snug, t.atoms.text],
+      {
+        fontScale: fonts.scaleMultiplier,
+        fontFamily: fonts.family,
+        flags: {},
+      },
+    )
+    /*
+     * TipTap component isn't a RN View and while it seems to convert
+     * `fontSize` to `px`, it doesn't convert `lineHeight`.
+     *
+     * `lineHeight` should always be defined here, this is defensive.
+     */
+    style.lineHeight = style.lineHeight
+      ? ((style.lineHeight + 'px') as unknown as number)
+      : undefined
+    return style
+  }, [t, fonts])
+
   return (
     <>
       <View style={styles.container}>
-        <EditorContent
+        {/* @ts-ignore inputStyle is fine */}
-          editor={editor}
+        <EditorContent editor={editor} style={inputStyle} />
-          style={{color: pal.text.color as string}}
-        />
       </View>
 
       {isDropping && (

src/view/com/modals/EditImage.tsx

@@ -2,7 +2,6 @@ import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'
 import {Pressable, StyleSheet, View} from 'react-native'
 import {useWindowDimensions} from 'react-native'
 import {LinearGradient} from 'expo-linear-gradient'
-import {MaterialIcons} from '@expo/vector-icons'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {Slider} from '@miblanchard/react-native-slider'
@@ -13,13 +12,24 @@ import {useModalControls} from '#/state/modals'
 import {MAX_ALT_TEXT} from 'lib/constants'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {RectTallIcon, RectWideIcon, SquareIcon} from 'lib/icons'
 import {enforceLen} from 'lib/strings/helpers'
 import {gradients, s} from 'lib/styles'
 import {useTheme} from 'lib/ThemeContext'
 import {getKeys} from 'lib/type-assertions'
 import {GalleryModel} from 'state/models/media/gallery'
 import {ImageModel} from 'state/models/media/image'
+import {atoms as a} from '#/alf'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import {
+  AspectRatio11_Stroke2_Corner0_Rounded as A11,
+  AspectRatio34_Stroke2_Corner0_Rounded as A34,
+  AspectRatio43_Stroke2_Corner0_Rounded as A43,
+} from '#/components/icons/AspectRatio'
+import {CircleBanSign_Stroke2_Corner0_Rounded as Ban} from '#/components/icons/CircleBanSign'
+import {
+  FlipHorizontal_Stroke2_Corner0_Rounded as FlipHorizontal,
+  FlipVertical_Stroke2_Corner0_Rounded as FlipVertical,
+} from '#/components/icons/FlipImage'
 import {Text} from '../util/text/Text'
 import {TextInput} from './util'
 
@@ -27,18 +37,16 @@ export const snapPoints = ['80%']
 
 const RATIOS = {
   '4:3': {
-    Icon: RectWideIcon,
+    icon: A43,
   },
   '1:1': {
-    Icon: SquareIcon,
+    icon: A11,
   },
   '3:4': {
-    Icon: RectTallIcon,
+    icon: A34,
   },
   None: {
-    label: 'None',
+    icon: Ban,
-    Icon: MaterialIcons,
-    name: 'do-not-disturb-alt',
   },
 } as const
 
@@ -112,12 +120,12 @@ export const Component = observer(function EditImageImpl({
       //   },
       // },
       {
-        name: 'flip' as const,
+        icon: FlipHorizontal,
         label: _(msg`Flip horizontal`),
         onPress: onFlipHorizontal,
       },
       {
-        name: 'flip' as const,
+        icon: FlipVertical,
         label: _(msg`Flip vertically`),
         onPress: onFlipVertical,
       },
@@ -165,17 +173,6 @@ export const Component = observer(function EditImageImpl({
     onCloseModal()
   }, [altText, image, position, scale, onCloseModal])
 
-  const getLabelIconSize = useCallback((as: AspectRatio) => {
-    switch (as) {
-      case 'None':
-        return 22
-      case '1:1':
-        return 32
-      default:
-        return 26
-    }
-  }, [])
-
   if (image.cropped === undefined) {
     return null
   }
@@ -231,7 +228,7 @@ export const Component = observer(function EditImageImpl({
             maximumValue={3}
           />
         </View>
-        <View>
+        <View style={[a.gap_sm]}>
           {!isMobile ? (
             <Text type="sm-bold" style={pal.text}>
               <Trans>Ratios</Trans>
@@ -239,31 +236,25 @@ export const Component = observer(function EditImageImpl({
           ) : null}
           <View style={imgControlStyles}>
             {getKeys(RATIOS).map(ratio => {
-              const {Icon, ...props} = RATIOS[ratio]
+              const {icon} = RATIOS[ratio]
-              const labelIconSize = getLabelIconSize(ratio)
               const isSelected = aspectRatio === ratio
 
               return (
-                <Pressable
+                <Button
                   key={ratio}
+                  label={ratio}
+                  size="large"
+                  shape="square"
+                  variant="outline"
+                  color={isSelected ? 'primary' : 'secondary'}
                   onPress={() => {
                     onSetRatio(ratio)
-                  }}
+                  }}>
-                  accessibilityLabel={ratio}
+                  <View style={[a.align_center, a.gap_2xs]}>
-                  accessibilityHint="">
+                    <ButtonIcon icon={icon} />
-                  <Icon
+                    <ButtonText style={[a.text_xs]}>{ratio}</ButtonText>
-                    size={labelIconSize}
+                  </View>
-                    style={[styles.imgControl, isSelected ? s.blue3 : pal.text]}
+                </Button>
-                    color={(isSelected ? s.blue3 : pal.text).color}
-                    {...props}
-                  />
-
-                  <Text
-                    type={isSelected ? 'xs-bold' : 'xs-medium'}
-                    style={[isSelected ? s.blue3 : pal.text, s.textCenter]}>
-                    {ratio}
-                  </Text>
-                </Pressable>
               )
             })}
           </View>
@@ -273,24 +264,17 @@ export const Component = observer(function EditImageImpl({
             </Text>
           ) : null}
           <View style={imgControlStyles}>
-            {adjustments.map(({label, name, onPress}) => (
+            {adjustments.map(({label, icon, onPress}) => (
-              <Pressable
+              <Button
                 key={label}
-                onPress={onPress}
+                label={label}
-                accessibilityLabel={label}
+                size="large"
-                accessibilityHint=""
+                shape="square"
-                style={styles.flipBtn}>
+                variant="outline"
-                <MaterialIcons
+                color="secondary"
-                  name={name}
+                onPress={onPress}>
-                  size={label?.startsWith('Flip') ? 22 : 24}
+                <ButtonIcon icon={icon} />
-                  style={[
+              </Button>
-                    pal.text,
-                    label === _(msg`Flip vertically`)
-                      ? styles.flipVertical
-                      : undefined,
-                  ]}
-                />
-              </Pressable>
             ))}
           </View>
         </View>
@@ -362,12 +346,6 @@ const styles = StyleSheet.create({
     paddingVertical: 8,
     paddingHorizontal: 24,
   },
-  imgControl: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    height: 40,
-  },
   imgEditor: {
     maxWidth: '100%',
   },

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

@@ -59,7 +59,7 @@ export const ExternalLinkEmbed = ({
   }
 
   return (
-    <View style={[a.flex_col, a.rounded_sm]}>
+    <View style={[a.flex_col, a.w_full]}>
       <LinkWrapper link={link} onOpen={onOpen} style={style}>
         {imageUri && !embedPlayerParams ? (
           <View>

web/index.html

@@ -252,7 +252,6 @@
 
       /* ProseMirror */
       .ProseMirror {
-        font: 18px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Liberation Sans", Helvetica, Arial, sans-serif;
         min-height: 140px;
       }
       .ProseMirror-dark {