From 5a98ea684d90526e80b8b3ef7554452c4f8db53b Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Tue, 1 Oct 2024 15:57:49 -0500 Subject: [PATCH 1/7] Include ghost hook to statically export fonts (#5553) --- src/alf/fonts.ts | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/src/alf/fonts.ts b/src/alf/fonts.ts index ae2aaa97a0..54fe7a34e0 100644 --- a/src/alf/fonts.ts +++ b/src/alf/fonts.ts @@ -1,3 +1,5 @@ +import {useFonts} from 'expo-font' + import {isWeb} from '#/platform/detection' import {Device, device} from '#/storage' @@ -63,3 +65,15 @@ export function applyFonts( */ style.fontVariant = ['no-contextual'] } + +/* + * IMPORTANT: This is unused. Expo statically extracts these fonts. + * + * All used fonts MUST be configured here. Unused fonts can be commented out. + */ +export function DO_NOT_USE() { + return useFonts({ + InterVariable: require('../../assets/fonts/inter/InterVariable.ttf'), + 'InterVariable-Italic': require('../../assets/fonts/inter/InterVariable-Italic.ttf'), + }) +} From f251a43dd6418bbd99fbcef3d405798b5308ab89 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Wed, 2 Oct 2024 10:54:25 -0500 Subject: [PATCH 2/7] Add intent/verify-email to go server (#5554) --- bskyweb/cmd/bskyweb/server.go | 1 + 1 file changed, 1 insertion(+) diff --git a/bskyweb/cmd/bskyweb/server.go b/bskyweb/cmd/bskyweb/server.go index 0f49ce5c3a..54c5f075ac 100644 --- a/bskyweb/cmd/bskyweb/server.go +++ b/bskyweb/cmd/bskyweb/server.go @@ -255,6 +255,7 @@ func serve(cctx *cli.Context) error { e.GET("/support/community-guidelines", server.WebGeneric) e.GET("/support/copyright", server.WebGeneric) e.GET("/intent/compose", server.WebGeneric) + e.GET("/intent/verify-email", server.WebGeneric) e.GET("/messages", server.WebGeneric) e.GET("/messages/:conversation", server.WebGeneric) From 35698731232ec43571818c61e17ed76765a55ee5 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Wed, 2 Oct 2024 10:54:51 -0500 Subject: [PATCH 3/7] Tweak verify email dialog (#5555) * Add intent/verify-email to go server * Tweak verify intent dialog --- .../intents/VerifyEmailIntentDialog.tsx | 86 +++++++++---------- 1 file changed, 43 insertions(+), 43 deletions(-) diff --git a/src/components/intents/VerifyEmailIntentDialog.tsx b/src/components/intents/VerifyEmailIntentDialog.tsx index e8c63af82f..90fb2debe9 100644 --- a/src/components/intents/VerifyEmailIntentDialog.tsx +++ b/src/components/intents/VerifyEmailIntentDialog.tsx @@ -3,11 +3,14 @@ import {View} from 'react-native' import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' -import {useAgent, useSession} from 'state/session' -import {atoms as a} from '#/alf' -import {Button, ButtonText} from '#/components/Button' +import {isNative} from '#/platform/detection' +import {useAgent, useSession} from '#/state/session' +import {atoms as a, useBreakpoints,useTheme} from '#/alf' +import {Button, ButtonIcon,ButtonText} from '#/components/Button' import * as Dialog from '#/components/Dialog' import {DialogControlProps} from '#/components/Dialog' +import {Divider} from '#/components/Divider' +import {ArrowRotateCounterClockwise_Stroke2_Corner0_Rounded as Resend} from '#/components/icons/ArrowRotateCounterClockwise' import {useIntentDialogs} from '#/components/intents/IntentDialogs' import {Loader} from '#/components/Loader' import {Text} from '#/components/Typography' @@ -23,7 +26,9 @@ export function VerifyEmailIntentDialog() { ) } -function Inner({control}: {control: DialogControlProps}) { +function Inner({}: {control: DialogControlProps}) { + const t = useTheme() + const {gtMobile} = useBreakpoints() const {_} = useLingui() const {verifyEmailState: state} = useIntentDialogs() const [status, setStatus] = React.useState< @@ -58,43 +63,47 @@ function Inner({control}: {control: DialogControlProps}) { } return ( - - + {status === 'loading' ? ( - + ) : status === 'success' ? ( - <> - + + Email Verified - + - Thanks, you have successfully verified your email address. + Thanks, you have successfully verified your email address. You + can close this dialog. - + ) : status === 'failure' ? ( - <> - + + Invalid Verification Code - + The verification code you have provided is invalid. Please make sure that you have used the correct verification link or request a new one. - + ) : ( - <> - + + Email Resent - + We have sent another verification email to{' '} @@ -103,38 +112,29 @@ function Inner({control}: {control: DialogControlProps}) { . - + )} - {status !== 'loading' ? ( - + + {status === 'failure' && ( + <> + - {status === 'failure' ? ( - - ) : null} - - ) : null} + + )} + + ) } From 1a7885b9215ec48f064de990e9a97070206996b8 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Wed, 2 Oct 2024 10:55:06 -0500 Subject: [PATCH 4/7] Add suspense boundary in onboarding (#5556) --- .../StepProfile/PlaceholderCanvas.tsx | 48 ++++++++++--------- 1 file changed, 25 insertions(+), 23 deletions(-) diff --git a/src/screens/Onboarding/StepProfile/PlaceholderCanvas.tsx b/src/screens/Onboarding/StepProfile/PlaceholderCanvas.tsx index eaad2113f8..acc0893350 100644 --- a/src/screens/Onboarding/StepProfile/PlaceholderCanvas.tsx +++ b/src/screens/Onboarding/StepProfile/PlaceholderCanvas.tsx @@ -46,29 +46,31 @@ export const PlaceholderCanvas = React.forwardRef( return ( - - - - - + + + + + + + ) }, From a444fc53a0ec4e575987d7d689df030878a24021 Mon Sep 17 00:00:00 2001 From: Hailey Date: Wed, 2 Oct 2024 09:09:54 -0700 Subject: [PATCH 5/7] import order (#5571) --- src/components/intents/VerifyEmailIntentDialog.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/intents/VerifyEmailIntentDialog.tsx b/src/components/intents/VerifyEmailIntentDialog.tsx index 90fb2debe9..c78aabb6d4 100644 --- a/src/components/intents/VerifyEmailIntentDialog.tsx +++ b/src/components/intents/VerifyEmailIntentDialog.tsx @@ -5,8 +5,8 @@ import {useLingui} from '@lingui/react' import {isNative} from '#/platform/detection' import {useAgent, useSession} from '#/state/session' -import {atoms as a, useBreakpoints,useTheme} from '#/alf' -import {Button, ButtonIcon,ButtonText} from '#/components/Button' +import {atoms as a, useBreakpoints, useTheme} from '#/alf' +import {Button, ButtonIcon, ButtonText} from '#/components/Button' import * as Dialog from '#/components/Dialog' import {DialogControlProps} from '#/components/Dialog' import {Divider} from '#/components/Divider' From 3972d3d4c3697ab89c054a82b1d03aff96cfce07 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Wed, 2 Oct 2024 11:18:15 -0500 Subject: [PATCH 6/7] Ignore built files (#5572) --- .prettierignore | 3 +++ 1 file changed, 3 insertions(+) diff --git a/.prettierignore b/.prettierignore index 8ccbae2148..e107e129a4 100644 --- a/.prettierignore +++ b/.prettierignore @@ -15,3 +15,6 @@ android ios src/locale/locales lib/react-compiler-runtime +bskyweb/static +coverage +web-build From 405966830ccdbee6152037eebb76c4815ff5526c Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Wed, 2 Oct 2024 19:40:18 +0300 Subject: [PATCH 7/7] Make reply prompt more subtle on desktop (#5569) * make reply prompt more subtle on desktop * fix alignment * Tweak transition timing --------- Co-authored-by: Eric Bailey --- src/alf/atoms.ts | 28 +++++++++++++++++++ .../post-thread/PostThreadComposePrompt.tsx | 24 ++++++++++------ 2 files changed, 44 insertions(+), 8 deletions(-) diff --git a/src/alf/atoms.ts b/src/alf/atoms.ts index 0c8eb330d7..2625beda27 100644 --- a/src/alf/atoms.ts +++ b/src/alf/atoms.ts @@ -901,4 +901,32 @@ export const atoms = { hidden: { display: 'none', }, + + /* + * Transition + */ + transition_none: web({ + transitionProperty: 'none', + }), + transition_all: web({ + transitionProperty: 'all', + transitionTimingFunction: 'cubic-bezier(0.17, 0.73, 0.14, 1)', + transitionDuration: '100ms', + }), + transition_color: web({ + transitionProperty: + 'color, background-color, border-color, text-decoration-color, fill, stroke', + transitionTimingFunction: 'cubic-bezier(0.17, 0.73, 0.14, 1)', + transitionDuration: '100ms', + }), + transition_opacity: web({ + transitionProperty: 'opacity', + transitionTimingFunction: 'cubic-bezier(0.17, 0.73, 0.14, 1)', + transitionDuration: '100ms', + }), + transition_transform: web({ + transitionProperty: 'transform', + transitionTimingFunction: 'cubic-bezier(0.17, 0.73, 0.14, 1)', + transitionDuration: '100ms', + }), } as const diff --git a/src/view/com/post-thread/PostThreadComposePrompt.tsx b/src/view/com/post-thread/PostThreadComposePrompt.tsx index 67981618e1..5ad4c256dd 100644 --- a/src/view/com/post-thread/PostThreadComposePrompt.tsx +++ b/src/view/com/post-thread/PostThreadComposePrompt.tsx @@ -5,12 +5,12 @@ import {useLingui} from '@lingui/react' import {PressableScale} from '#/lib/custom-animations/PressableScale' import {useHaptics} from '#/lib/haptics' -import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' import {useHapticsDisabled} from '#/state/preferences' import {useProfileQuery} from '#/state/queries/profile' import {useSession} from '#/state/session' import {UserAvatar} from '#/view/com/util/UserAvatar' -import {atoms as a, useTheme} from '#/alf' +import {atoms as a, useBreakpoints, useTheme} from '#/alf' +import {useInteractionState} from '#/components/hooks/useInteractionState' import {Text} from '#/components/Typography' export function PostThreadComposePrompt({ @@ -21,10 +21,15 @@ export function PostThreadComposePrompt({ const {currentAccount} = useSession() const {data: profile} = useProfileQuery({did: currentAccount?.did}) const {_} = useLingui() - const {isTabletOrDesktop} = useWebMediaQueries() + const {gtMobile} = useBreakpoints() const t = useTheme() const playHaptics = useHaptics() const isHapticsDisabled = useHapticsDisabled() + const { + state: hovered, + onIn: onHoverIn, + onOut: onHoverOut, + } = useInteractionState() const onPress = () => { playHaptics('Light') @@ -42,13 +47,15 @@ export function PostThreadComposePrompt({ accessibilityLabel={_(msg`Compose reply`)} accessibilityHint={_(msg`Opens composer`)} style={[ - {paddingTop: 8, paddingBottom: isTabletOrDesktop ? 8 : 11}, - a.px_sm, + gtMobile ? a.py_xs : {paddingTop: 8, paddingBottom: 11}, + gtMobile ? {paddingLeft: 6, paddingRight: 6} : a.px_sm, a.border_t, t.atoms.border_contrast_low, t.atoms.bg, ]} - onPress={onPress}> + onPress={onPress} + onHoverIn={onHoverIn} + onHoverOut={onHoverOut}>