Merge pull request #4288 from tloncorp/ja/color-fixes

native: color fixes

packages/app/features/settings/ThemeScreen.tsx

@@ -12,6 +12,7 @@ import {
 import { useContext, useEffect, useState } from 'react';
 import { ScrollView, YStack } from 'tamagui';
 import type { ThemeName } from 'tamagui';
+import { useTheme } from 'tamagui';
 
 import { useIsDarkMode } from '../../hooks/useIsDarkMode';
 import { RootStackParamList } from '../../navigation/types';
@@ -20,6 +21,7 @@ import { ThemeContext, clearTheme, setTheme } from '../../provider';
 type Props = NativeStackScreenProps<RootStackParamList, 'Theme'>;
 
 export function ThemeScreen(props: Props) {
+  const theme = useTheme();
   const { setActiveTheme } = useContext(ThemeContext);
   const isDarkMode = useIsDarkMode();
   const [selectedTheme, setSelectedTheme] = useState<ThemeName | 'auto'>(
@@ -71,7 +73,7 @@ export function ThemeScreen(props: Props) {
   }, []);
 
   return (
-    <View backgroundColor="$background" flex={1}>
+    <View backgroundColor={theme?.background?.val} flex={1}>
       <ScreenHeader
         title="Theme"
         backAction={() => props.navigation.goBack()}

packages/app/features/top/ActivityScreen.tsx

@@ -4,6 +4,7 @@ import * as db from '@tloncorp/shared/db';
 import * as store from '@tloncorp/shared/store';
 import { ActivityScreenView, NavBarView, View } from '@tloncorp/ui';
 import { useCallback, useMemo } from 'react';
+import { useTheme } from 'tamagui';
 
 import { useCurrentUserId } from '../../hooks/useCurrentUser';
 import { useGroupActions } from '../../hooks/useGroupActions';
@@ -14,6 +15,7 @@ import { useRootNavigation } from '../../navigation/utils';
 type Props = NativeStackScreenProps<RootStackParamList, 'Activity'>;
 
 export function ActivityScreen(props: Props) {
+  const theme = useTheme();
   const isFocused = useIsFocused();
   const currentUserId = useCurrentUserId();
   const [contactsTabEnabled] = useFeatureFlag('contactsTab');
@@ -69,9 +71,8 @@ export function ActivityScreen(props: Props) {
     },
     [props.navigation]
   );
-
   return (
-    <View backgroundColor="$background" flex={1}>
+    <View backgroundColor={theme.background?.val} flex={1}>
       <ActivityScreenView
         bucketFetchers={bucketedActivity}
         isFocused={isFocused}

packages/app/features/top/ChatListScreen.tsx

@@ -22,12 +22,9 @@ import {
   WelcomeSheet,
 } from '@tloncorp/ui';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { ColorTokens, useTheme } from 'tamagui';
 
 import { TLON_EMPLOYEE_GROUP } from '../../constants';
-import {
-  INVITE_SERVICE_ENDPOINT,
-  INVITE_SERVICE_IS_DEV,
-} from '../../constants';
 import { useChatSettingsNavigation } from '../../hooks/useChatSettingsNavigation';
 import { useCurrentUserId } from '../../hooks/useCurrentUser';
 import { useGroupActions } from '../../hooks/useGroupActions';
@@ -58,6 +55,19 @@ export function ChatListScreenView({
   const [screenTitle, setScreenTitle] = useState('Home');
   const [inviteSheetGroup, setInviteSheetGroup] = useState<db.Group | null>();
   const personalInvite = db.personalInviteLink.useValue();
+  const viewedPersonalInvite = db.hasViewedPersonalInvite.useValue();
+  const theme = useTheme();
+  const inviteButtonColor = useMemo(
+    () =>
+      (viewedPersonalInvite
+        ? theme?.primaryText?.val
+        : theme?.positiveActionText?.val) as ColorTokens,
+    [
+      theme?.positiveActionText?.val,
+      theme?.primaryText?.val,
+      viewedPersonalInvite,
+    ]
+  );
 
   const [activeTab, setActiveTab] = useState<'all' | 'groups' | 'messages'>(
     'all'
@@ -236,6 +246,7 @@ export function ChatListScreenView({
 
   const handlePersonalInvitePress = useCallback(() => {
     logger.trackEvent(AnalyticsEvent.PersonalInvitePressed);
+    db.hasViewedPersonalInvite.setValue(true);
     setPersonalInviteOpen(true);
   }, []);
 
@@ -261,7 +272,7 @@ export function ChatListScreenView({
                 personalInvite ? (
                   <ScreenHeader.IconButton
                     type="Send"
-                    color="$blue"
+                    color={inviteButtonColor}
                     onPress={handlePersonalInvitePress}
                   />
                 ) : undefined

packages/app/features/top/ContactsScreen.tsx

@@ -12,13 +12,15 @@ import {
 } from '@tloncorp/ui';
 import { useCallback } from 'react';
 import { Alert } from 'react-native';
+import { useTheme } from 'tamagui';
 
 import { useCurrentUserId } from '../../hooks/useCurrentUser';
 import type { RootStackParamList } from '../../navigation/types';
 
 type Props = NativeStackScreenProps<RootStackParamList, 'Contacts'>;
 
 export default function ContactsScreen(props: Props) {
+  const theme = useTheme();
   const {
     navigation: { navigate },
   } = props;
@@ -63,7 +65,7 @@ export default function ContactsScreen(props: Props) {
 
   return (
     <AppDataContextProvider contacts={contacts} currentUserId={currentUser}>
-      <View backgroundColor="$background" flex={1}>
+      <View backgroundColor={theme?.background?.val} flex={1}>
         <ScreenHeader
           title="Contacts"
           leftControls={

packages/shared/src/db/keyValue.ts

@@ -327,6 +327,11 @@ export const personalInviteLink = createStorageItem<string | null>({
   defaultValue: null,
 });
 
+export const hasViewedPersonalInvite = createStorageItem<boolean>({
+  key: 'hasViewedPersonalInvite',
+  defaultValue: false,
+});
+
 export const postDraft = (opts: {
   key: string;
   type: 'caption' | 'text' | undefined; // matches GalleryDraftType

packages/ui/src/components/ChatList.tsx

@@ -17,7 +17,7 @@ import Animated, {
   useAnimatedStyle,
   useSharedValue,
 } from 'react-native-reanimated';
-import { Text, View, YStack, getTokenValue } from 'tamagui';
+import { Text, View, YStack, getTokenValue, useTheme } from 'tamagui';
 
 import { useCalm, useChatOptions } from '../contexts';
 import { getChannelTitle, getGroupTitle } from '../utils';
@@ -242,6 +242,7 @@ const ChatListSearch = React.memo(function ChatListSearchComponent({
   onPressClear: () => void;
   onPressClose: () => void;
 }) {
+  const theme = useTheme();
   const [contentHeight, setContentHeight] = useState(0);
 
   const openProgress = useSharedValue(isOpen ? 1 : 0);
@@ -277,7 +278,7 @@ const ChatListSearch = React.memo(function ChatListSearchComponent({
       <YStack
         onLayout={handleContentLayout}
         flexShrink={0}
-        backgroundColor="$background"
+        backgroundColor={theme.background.val}
         gap="$m"
         position="absolute"
         top={0}

packages/ui/src/components/ProfileStatusSheet.tsx

@@ -83,12 +83,12 @@ export default function ProfileStatusSheet({
               }}
             />
             <Button
-              hero
               onPress={handleSave}
               disabled={!isValid}
-              paddingHorizontal="$l"
+              paddingVertical="$l"
+              borderColor="transparent"
             >
-              <Icon type="Send" color="$background" />
+              <Icon type="ArrowUp" />
             </Button>
           </XStack>
         </YStack>

packages/ui/src/components/UserProfileScreenView.tsx

@@ -16,6 +16,7 @@ import {
   XStack,
   YStack,
   styled,
+  useTheme,
   useWindowDimensions,
 } from 'tamagui';
 
@@ -41,6 +42,7 @@ interface Props {
 }
 
 export function UserProfileScreenView(props: Props) {
+  const theme = useTheme();
   const insets = useSafeAreaInsets();
   const currentUserId = useCurrentUserId();
   const userContact = useContact(props.userId);
@@ -79,7 +81,7 @@ export function UserProfileScreenView(props: Props) {
   }, [currentUserId, props.userId, userContact]);
 
   return (
-    <View flex={1} backgroundColor={'$secondaryBackground'}>
+    <View flex={1} backgroundColor={theme.secondaryBackground.val}>
       <ScreenHeader
         title="Profile"
         leftControls={<ScreenHeader.BackButton onPress={props.onBack} />}
@@ -345,6 +347,7 @@ function UserInfoRow(props: { userId: string; hasNickname: boolean }) {
             <>
               <ContactName
                 contactId={props.userId}
+                color="$primaryText"
                 mode="nickname"
                 fontSize={24}
                 lineHeight={24}