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)
bluesky-social · Sep 19, 2024 · a55d366 · a55d366
2 parents f02f62a + c8184e8
commit a55d366
Show file tree

Hide file tree

Showing 20 changed files with 237 additions and 187 deletions.
diff --git a/assets/icons/aspectRatio11_stroke2_corner0_rounded.svg b/assets/icons/aspectRatio11_stroke2_corner0_rounded.svg
diff --git a/assets/icons/aspectRatio34_stroke2_corner0_rounded.svg b/assets/icons/aspectRatio34_stroke2_corner0_rounded.svg
diff --git a/assets/icons/aspectRatio43_stroke2_corner0_rounded.svg b/assets/icons/aspectRatio43_stroke2_corner0_rounded.svg
diff --git a/assets/icons/flipHorizontal_stroke2_corner0_rounded.svg b/assets/icons/flipHorizontal_stroke2_corner0_rounded.svg
diff --git a/assets/icons/flipVertical_stroke2_corner0_rounded.svg b/assets/icons/flipVertical_stroke2_corner0_rounded.svg
diff --git a/bskyweb/templates/base.html b/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 {

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

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

diff --git a/src/alf/fonts.ts b/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']
 }
diff --git a/src/components/dialogs/nuxs/NeueTypography.tsx b/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
-                new theme font, along with adjustable font sizing settings.
+                We're introducing a new theme font, along with adjustable font
+                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
-                Settings later.
+                You can adjust these in your Appearance Settings later.
               </Trans>
             </Text>
           </View>

diff --git a/src/components/forms/Toggle.tsx b/src/components/forms/Toggle.tsx
@@ -351,8 +351,8 @@ export function Checkbox() {
         t.atoms.border_contrast_high,
         {
           borderWidth: 1,
-          height: 20,
-          width: 20,
+          height: 24,
+          width: 24,
         },
         baseStyles,
         hovered ? baseHoverStyles : {},
@@ -383,9 +383,9 @@ export function Switch() {
         t.atoms.border_contrast_high,
         {
           borderWidth: 1,
-          height: 20,
-          width: 32,
-          padding: 2,
+          height: 24,
+          width: 36,
+          padding: 3,
         },
         baseStyles,
         hovered ? baseHoverStyles : {},
@@ -395,8 +395,8 @@ export function Switch() {
         style={[
           a.rounded_full,
           {
-            height: 14,
-            width: 14,
+            height: 16,
+            width: 16,
           },
           selected
             ? {
@@ -436,8 +436,8 @@ export function Radio() {
         t.atoms.border_contrast_high,
         {
           borderWidth: 1,
-          height: 20,
-          width: 20,
+          height: 24,
+          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,

diff --git a/src/components/icons/AspectRatio.tsx b/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',
+})
diff --git a/src/components/icons/FlipImage.tsx b/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',
+})
diff --git a/src/lib/embeds.ts b/src/lib/embeds.ts
@@ -1,7 +1,7 @@
 import {
-  AppBskyFeedDefs,
   AppBskyEmbedRecord,
   AppBskyEmbedRecordWithMedia,
+  AppBskyFeedDefs,
 } from '@atproto/api'
 
 export function isEmbedByEmbedder(

diff --git a/src/screens/Settings/AppearanceSettings.tsx b/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} />