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 files changed, 47 insertions(+), 13 deletions(-) diff --git a/src/components/Loader.tsx b/src/components/Loader.tsx index b74bfc224..d18d01cfd 100644 --- a/src/components/Loader.tsx +++ b/src/components/Loader.tsx @@ -37,7 +37,8 @@ export function Loader(props: Props) { ]}> ) diff --git a/src/components/ProgressGuide/FollowDialog.tsx b/src/components/ProgressGuide/FollowDialog.tsx index fe4e29d98..84faab2e9 100644 --- a/src/components/ProgressGuide/FollowDialog.tsx +++ b/src/components/ProgressGuide/FollowDialog.tsx @@ -24,6 +24,7 @@ import { native, useBreakpoints, useTheme, + utils, type ViewStyleProp, web, } from '#/alf' @@ -664,6 +665,9 @@ function SearchInput({ 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 index 231ed4dbd..93c04e159 100644 --- a/src/components/forms/TextField.tsx +++ b/src/components/forms/TextField.tsx @@ -20,6 +20,7 @@ import { tokens, useAlf, useTheme, + utils, web, } from '#/alf' import {useInteractionState} from '#/components/hooks/useInteractionState' @@ -275,6 +276,9 @@ export function createInput(Component: typeof TextInput) { setIsFocused(true)} diff --git a/src/style.css b/src/style.css index bed117d3a..29c8d0b48 100644 --- a/src/style.css +++ b/src/style.css @@ -108,11 +108,11 @@ a[role='link'][data-no-underline='1']:hover { 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 index 2d4af4ab3..60e42f0bb 100644 --- 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 @@ export function TextInput({ // 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 index 4490f9729..75acdf521 100644 --- a/src/view/com/composer/text-input/TextInput.web.tsx +++ b/src/view/com/composer/text-input/TextInput.web.tsx @@ -393,7 +393,15 @@ export function TextInput({ return ( <> - + {/* @ts-ignore inputStyle is fine */} diff --git a/src/view/com/modals/DeleteAccount.tsx b/src/view/com/modals/DeleteAccount.tsx index 9eb30f4f4..9a0fac7f5 100644 --- 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 @@ export function Component({}: {}) { ) : undefined} {isProcessing ? ( - + ) : ( <> @@ -221,6 +221,9 @@ export function Component({}: {}) { 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 @@ export function Component({}: {}) { 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 @@ export function Component({}: {}) { ) : undefined} {isProcessing ? ( - + ) : ( <> diff --git a/src/view/com/posts/PostFeed.tsx b/src/view/com/posts/PostFeed.tsx index de59e93d3..69c202916 100644 --- 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 @@ let PostFeed = ({ isVideoFeed?: boolean useRepostCarousel?: boolean }): React.ReactNode => { + const t = useTheme() const {_} = useLingui() const queryClient = useQueryClient() const {currentAccount, hasSession} = useSession() @@ -989,7 +990,7 @@ let PostFeed = ({ return isFetchingNextPage ? ( - + ) : shouldRenderEndOfFeed ? ( diff --git a/src/view/screens/Feeds.tsx b/src/view/screens/Feeds.tsx index 2fa745077..92fceb0fc 100644 --- a/src/view/screens/Feeds.tsx +++ b/src/view/screens/Feeds.tsx @@ -106,6 +106,7 @@ type FlatlistSlice = 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 @@ export function FeedsScreen(_props: Props) { } else if (item.type === 'popularFeedsLoadingMore') { return ( - + ) } else if (item.type === 'savedFeedsHeader') { @@ -494,6 +495,7 @@ export function FeedsScreen(_props: Props) { }, [ _, + t.palette.primary_500, pal.border, pal.textLight, query, diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx index ef96bebe0..c3fc773a2 100644 --- 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 @@ export function HomeScreen(props: Props) { const {currentAccount} = useSession() const {data: pinnedFeedInfos, isLoading: isPinnedFeedsLoading} = usePinnedFeedsInfos() + const t = useTheme() React.useEffect(() => { if (IS_WEB && !currentAccount) { @@ -91,7 +93,7 @@ export function HomeScreen(props: Props) { return ( - + ) -- 2.51.2