From cf6d7575f7ca2b53be2cdf994036290312e87586 Mon Sep 17 00:00:00 2001 From: shi.gg Date: Tue, 20 Jan 2026 16:30:52 +0000 Subject: [PATCH] fix: @mentions; loading spinner; text select theme ![](https://i.postimg.cc/MHnsb0tL/Screenshot-2026-01-20-at-16-53-33-Screenshot-20260120-164952-Witchsky-jpg-(JPEG-Image-1440-633-pix.png) ![](https://i.postimg.cc/x8XsyGgt/Screenshot-2026-01-20-at-16-53-41-Screenshot-20260120-165009-Witchsky-jpg-(JPEG-Image-973-906-pixe.png) --- src/components/Loader.tsx | 3 ++- src/components/ProgressGuide/FollowDialog.tsx | 4 ++++ src/components/forms/TextField.tsx | 4 ++++ src/screens/Messages/components/MessageInput.tsx | 5 ++++- src/style.css | 4 ++-- src/view/com/composer/text-input/TextInput.tsx | 5 ++++- src/view/com/composer/text-input/TextInput.web.tsx | 10 +++++++++- src/view/com/modals/DeleteAccount.tsx | 12 +++++++++--- src/view/com/posts/PostFeed.tsx | 5 +++-- src/view/screens/Feeds.tsx | 4 +++- src/view/screens/Home.tsx | 4 +++- 11 file(s) changed, 47 insertion(s)(+), 13 deletion(s)(-) diff --git a/src/components/Loader.tsx b/src/components/Loader.tsx --- a/src/components/Loader.tsx +++ b/src/components/Loader.tsx @@ -37,7 +37,8 @@ animatedStyles, ]}> ) diff --git a/src/components/ProgressGuide/FollowDialog.tsx b/src/components/ProgressGuide/FollowDialog.tsx --- a/src/components/ProgressGuide/FollowDialog.tsx +++ b/src/components/ProgressGuide/FollowDialog.tsx @@ -24,6 +24,7 @@ atoms as a, native, useBreakpoints, useTheme, + utils, type ViewStyleProp, web, } from '#/alf' @@ -664,6 +665,9 @@ defaultValue={defaultValue} onChangeText={onChangeText} onFocus={onFocus} onBlur={onBlur} + selectionColor={utils.alpha(t.palette.primary_500, 0.4)} + cursorColor={t.palette.primary_500} + selectionHandleColor={t.palette.primary_500} style={[a.flex_1, a.py_md, a.text_md, t.atoms.text]} placeholderTextColor={t.palette.contrast_500} keyboardAppearance={t.name === 'light' ? 'light' : 'dark'} diff --git a/src/components/forms/TextField.tsx b/src/components/forms/TextField.tsx --- a/src/components/forms/TextField.tsx +++ b/src/components/forms/TextField.tsx @@ -20,6 +20,7 @@ type TextStyleProp, tokens, useAlf, useTheme, + utils, web, } from '#/alf' import {useInteractionState} from '#/components/hooks/useInteractionState' @@ -275,6 +276,9 @@ <> setIsFocused(true)} diff --git a/src/style.css b/src/style.css --- a/src/style.css +++ b/src/style.css @@ -108,11 +108,11 @@ height: 0; pointer-events: none; } .ProseMirror .mention { - color: #ed5345; + color: var(--mention-color, #ed5345); } .ProseMirror a, .ProseMirror .autolink { - color: #ed5345; + color: var(--mention-color, #ed5345); } /* OLLIE: TODO -- this is not accessible */ /* Remove focus state on inputs */ diff --git a/src/view/com/composer/text-input/TextInput.tsx b/src/view/com/composer/text-input/TextInput.tsx --- a/src/view/com/composer/text-input/TextInput.tsx +++ b/src/view/com/composer/text-input/TextInput.tsx @@ -29,7 +29,7 @@ import { type LinkFacetMatch, suggestLinkCardUri, } from '#/view/com/composer/text-input/text-input-util' -import {atoms as a, useAlf} from '#/alf' +import {atoms as a, useAlf, utils} from '#/alf' import {normalizeTextStyles} from '#/alf/typography' import {IS_ANDROID, IS_NATIVE} from '#/env' import {Autocomplete} from './mobile/Autocomplete' @@ -283,6 +283,9 @@ numberOfLines={2} // Note: should be the default value, but as of v1.104 // it switched to "none" on Android autoCapitalize="sentences" + selectionColor={utils.alpha(t.palette.primary_500, 0.4)} + cursorColor={t.palette.primary_500} + selectionHandleColor={t.palette.primary_500} {...props} style={[ inputTextStyle, diff --git a/src/view/com/composer/text-input/TextInput.web.tsx b/src/view/com/composer/text-input/TextInput.web.tsx --- a/src/view/com/composer/text-input/TextInput.web.tsx +++ b/src/view/com/composer/text-input/TextInput.web.tsx @@ -393,7 +393,15 @@ }, [t, fonts, webForceMinHeight]) return ( <> - + {/* @ts-ignore inputStyle is fine */} diff --git a/src/view/com/modals/DeleteAccount.tsx b/src/view/com/modals/DeleteAccount.tsx --- a/src/view/com/modals/DeleteAccount.tsx +++ b/src/view/com/modals/DeleteAccount.tsx @@ -19,7 +19,7 @@ import {useTheme} from '#/lib/ThemeContext' import {useModalControls} from '#/state/modals' import {useAgent, useSession, useSessionApi} from '#/state/session' import {pdsAgent} from '#/state/session/agent' -import {atoms as a, useTheme as useNewTheme} from '#/alf' +import {atoms as a, useTheme as useNewTheme, utils} from '#/alf' import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo' import {Text as NewText} from '#/components/Typography' import {IS_ANDROID, IS_WEB} from '#/env' @@ -135,7 +135,7 @@ ) : undefined} {isProcessing ? ( - + ) : ( <> @@ -221,6 +221,9 @@ style={[styles.textInput, pal.borderDark, pal.text, styles.mb20]} placeholder={_(msg`Confirmation code`)} placeholderTextColor={pal.textLight.color} keyboardAppearance={theme.colorScheme} + selectionColor={utils.alpha(t.palette.primary_500, 0.4)} + cursorColor={t.palette.primary_500} + selectionHandleColor={t.palette.primary_500} value={confirmCode} onChangeText={setConfirmCode} accessibilityLabelledBy="confirmationCode" @@ -240,6 +243,9 @@ style={[styles.textInput, pal.borderDark, pal.text]} placeholder={_(msg`Password`)} placeholderTextColor={pal.textLight.color} keyboardAppearance={theme.colorScheme} + selectionColor={utils.alpha(t.palette.primary_500, 0.4)} + cursorColor={t.palette.primary_500} + selectionHandleColor={t.palette.primary_500} secureTextEntry value={password} onChangeText={setPassword} @@ -254,7 +260,7 @@ ) : undefined} {isProcessing ? ( - + ) : ( <> diff --git a/src/view/com/posts/PostFeed.tsx b/src/view/com/posts/PostFeed.tsx --- a/src/view/com/posts/PostFeed.tsx +++ b/src/view/com/posts/PostFeed.tsx @@ -59,7 +59,7 @@ import {List, type ListRef} from '#/view/com/util/List' import {PostFeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder' import {LoadMoreRetryBtn} from '#/view/com/util/LoadMoreRetryBtn' import {type VideoFeedSourceContext} from '#/screens/VideoFeed/types' -import {useBreakpoints, useLayoutBreakpoints} from '#/alf' +import {useBreakpoints, useLayoutBreakpoints, useTheme} from '#/alf' import { AgeAssuranceDismissibleFeedBanner, useInternalState as useAgeAssuranceBannerState, @@ -303,6 +303,7 @@ initialNumToRender?: number isVideoFeed?: boolean useRepostCarousel?: boolean }): React.ReactNode => { + const t = useTheme() const {_} = useLingui() const queryClient = useQueryClient() const {currentAccount, hasSession} = useSession() @@ -989,7 +990,7 @@ const offset = Math.max(headerOffset, 32) * (IS_WEB ? 1 : 2) return isFetchingNextPage ? ( - + ) : shouldRenderEndOfFeed ? ( diff --git a/src/view/screens/Feeds.tsx b/src/view/screens/Feeds.tsx --- a/src/view/screens/Feeds.tsx +++ b/src/view/screens/Feeds.tsx @@ -106,6 +106,7 @@ } export function FeedsScreen(_props: Props) { const pal = usePalette('default') + const t = useTheme() const {openComposer} = useOpenComposer() const {isMobile} = useWebMediaQueries() const [query, setQuery] = React.useState('') @@ -417,7 +418,7 @@ return } else if (item.type === 'popularFeedsLoadingMore') { return ( - + ) } else if (item.type === 'savedFeedsHeader') { @@ -494,6 +495,7 @@ return null }, [ _, + t.palette.primary_500, pal.border, pal.textLight, query, diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx --- a/src/view/screens/Home.tsx +++ b/src/view/screens/Home.tsx @@ -35,6 +35,7 @@ import {CustomFeedEmptyState} from '#/view/com/posts/CustomFeedEmptyState' import {FollowingEmptyState} from '#/view/com/posts/FollowingEmptyState' import {FollowingEndOfFeed} from '#/view/com/posts/FollowingEndOfFeed' import {NoFeedsPinned} from '#/screens/Home/NoFeedsPinned' +import {useTheme} from '#/alf' import * as Layout from '#/components/Layout' import {IS_WEB} from '#/env' import {useDemoMode} from '#/storage/hooks/demo-mode' @@ -46,6 +47,7 @@ const {data: preferences} = usePreferencesQuery() const {currentAccount} = useSession() const {data: pinnedFeedInfos, isLoading: isPinnedFeedsLoading} = usePinnedFeedsInfos() + const t = useTheme() React.useEffect(() => { if (IS_WEB && !currentAccount) { @@ -91,7 +93,7 @@ } else { return ( - + ) -- tangled.sh