Merge pull request #1555 from The-Commit-Company/add-animations-and-ui-improvements

Add animations and UI improvements

Author: janhvipatil

apps/mobile/app/[site_id]/(tabs)/home/browse-channels.tsx

@@ -89,15 +89,15 @@ const ChannelFilter = ({ channel, setChannel }: { channel: string, setChannel: (
     const { colors } = useColorScheme()
     return <DropdownMenu.Root>
         <DropdownMenu.Trigger>
-            <View className={`items-center p-2 border border-border rounded-md w-fit ${channel !== 'All' ? 'border-primary bg-primary/5' : ''}`}>
+            <View className={`items-center p-2 border border-border rounded-lg w-fit ${channel !== 'All' ? 'border-primary bg-primary/5' : ''}`}>
                 {
                     channel === 'Public' ?
-                        <HashIcon fill={colors.icon} height={18} width={18} />
+                        <HashIcon fill={colors.icon} height={20} width={20} />
                         : channel === 'Open' ?
-                            <GlobeIcon fill={colors.icon} height={18} width={18} />
+                            <GlobeIcon fill={colors.icon} height={20} width={20} />
                             : channel === 'Private' ?
-                                <LockIcon fill={colors.icon} height={18} width={18} />
-                                : <FilterIcon color={colors.icon} height={18} width={18} />
+                                <LockIcon fill={colors.icon} height={20} width={20} />
+                                : <FilterIcon color={colors.icon} height={20} width={20} />
                 }
             </View>
         </DropdownMenu.Trigger>

apps/mobile/app/[site_id]/chat/[id]/add-members.tsx

@@ -18,7 +18,6 @@ import { ActivityIndicator } from '@components/nativewindui/ActivityIndicator';
 import SelectedMembers from '@components/features/channel-settings/Members/SelectedMembers';
 import MemberList from '@components/features/channel-settings/Members/MemberList';
 import { toast } from 'sonner-native';
-import { Divider } from '@components/layout/Divider';
 import SearchInput from '@components/common/SearchInput/SearchInput';
 
 export default function AddNewChannelMembers() {
@@ -126,14 +125,12 @@ export default function AddNewChannelMembers() {
                 },
                 headerStyle: { backgroundColor: colors.background },
             }} />
-            <View className='px-4 py-3'>
+            <View className='px-4 pt-3'>
                 <SearchInput
                     onChangeText={setSearchQuery}
                     value={searchQuery}
                 />
             </View>
-            <Divider className='mx-0' prominent />
-
             <KeyboardAwareScrollView
                 bottomOffset={8}
                 keyboardShouldPersistTaps="handled"

apps/mobile/app/[site_id]/chat/[id]/channel-members.tsx

@@ -62,7 +62,6 @@ const ChannelMembers = () => {
                     value={searchQuery}
                 />
             </View>
-            <Divider className='mx-0' prominent />
             <KeyboardAwareScrollView
                 bottomOffset={8}
                 keyboardShouldPersistTaps="handled"
@@ -82,7 +81,7 @@ const ChannelMembers = () => {
                         showsVerticalScrollIndicator={false}
                         ListEmptyComponent={!debouncedText.length ? () => {
                             return (
-                                <View className="flex-1 items-center justify-center pt-10">
+                                <View className="flex-1 items-center justify-center">
                                     <Text className="text-[15px] text-center text-muted-foreground">
                                         No channel members found
                                     </Text>

apps/mobile/components/common/Buttons/ActionButtonLarge.tsx

@@ -0,0 +1,21 @@
+import { Pressable } from 'react-native'
+import { Text } from '@components/nativewindui/Text'
+import { ReactNode } from 'react'
+
+interface ActionButtonLargeProps {
+    icon: ReactNode
+    text: string
+    onPress: () => void
+}
+
+export const ActionButtonLarge = ({ icon, text, onPress }: ActionButtonLargeProps) => {
+    return (
+        <Pressable
+            onPress={onPress}
+            className='flex-1 flex flex-col items-center gap-2 px-2 py-3.5 rounded-lg bg-card active:bg-linkColor'
+            android_ripple={{ color: 'rgba(0,0,0,0.1)', borderless: false }}>
+            {icon}
+            <Text className='text-[15px] font-medium text-foreground/80'>{text}</Text>
+        </Pressable>
+    )
+}

apps/mobile/components/common/ErrorBanner.tsx

@@ -62,7 +62,7 @@ const ErrorBanner = ({ heading, message, error }: ErrorBannerProps) => {
     const messages = getErrorMessages(error)
     return (
         <View className="container">
-            <View className="border-l-[5px] border-error-border bg-error-background flex w-full rounded-md px-6 py-3 md:p-9">
+            <View className="border-l-[5px] border-error-border bg-error-background flex w-full rounded-lg px-6 py-3 md:p-9">
                 <View className="w-full">
                     {(heading || error) && (heading ?
                         <Text className="mb-2 text-base font-semibold text-error-heading">

apps/mobile/components/features/auth/AddSite.tsx

@@ -85,7 +85,7 @@ const AddSite = (props: Props) => {
                     <FormLabel className='text-base'>Site URL</FormLabel>
                 </View>
                 <TextInput
-                    className="w-full border py-3 text-[16px] border-border rounded-md px-3 text-foreground"
+                    className="w-full border py-3 text-[16px] border-border rounded-lg px-3 text-foreground"
                     numberOfLines={1}
                     inputMode='url'
                     autoCapitalize='none'

apps/mobile/components/features/channel-settings/BaseDetails/EditChannelBaseDetailsForm.tsx

@@ -64,7 +64,7 @@ const EditChannelBaseDetailsForm = () => {
                                 },
                             }}
                             render={({ field: { onBlur, value }, fieldState: { error } }) => (
-                                <View className={`mt-2.5 flex-row items-center rounded-md border ${error ? "border-red-600" : "border-border"}`}>
+                                <View className={`mt-2.5 flex-row items-center rounded-lg border ${error ? "border-red-600" : "border-border"}`}>
                                     <View className="ml-3 mr-1 items-center">
                                         <ChannelIcon type={channel?.channelData.type ?? ""} fill={colors.icon} />
                                     </View>
@@ -104,7 +104,7 @@ const EditChannelBaseDetailsForm = () => {
                                 required: "Please add a channel description",
                             }}
                             render={({ field: { onBlur, value, onChange }, fieldState: { error } }) => (
-                                <View className={`mt-2.5 flex-row items-center rounded-md border ${error ? "border-red-600" : "border-border"}`}>
+                                <View className={`mt-2.5 flex-row items-center rounded-lg border ${error ? "border-red-600" : "border-border"}`}>
                                     <View className="flex-1">
                                         <TextField
                                             className="px-3"

apps/mobile/components/features/channel-settings/Members/ChannelMemberRow.tsx

@@ -138,7 +138,7 @@ const ChannelMemberRow = ({ member }: { member: Member }) => {
             rightThreshold={40}
             renderRightActions={(prog, drag) => RightAction(prog, drag, member)}>
             <View>
-                <Pressable onLongPress={showActions} className='ios:active:bg-linkColor flex-row items-center justify-between rounded-md'>
+                <Pressable onLongPress={showActions} className='ios:active:bg-linkColor flex-row items-center justify-between rounded-lg'>
                     <View className='gap-3 px-4 py-3 flex-row items-center'>
                         <UserAvatar
                             src={member.user_image ?? ""}

apps/mobile/components/features/channel-settings/Members/MemberList.tsx

@@ -23,14 +23,14 @@ configureReanimatedLogger({
 })
 
 const MemberList: React.FC<MemberListProps> = ({ filteredMembers, selectedMembers, handleSelectMember, debouncedText }) => {
-    const { colors, isDarkColorScheme } = useColorScheme()
+    const { isDarkColorScheme } = useColorScheme()
     return (
         <FlashList
             data={filteredMembers}
             renderItem={({ item }) => {
                 const isMemberSelected = selectedMembers.find(member => member.name === item.name);
                 return (
-                    <Pressable onPress={() => handleSelectMember(item as Member)} className='ios:active:bg-background dark:ios:active:bg-linkColor flex-row items-center justify-between rounded-md px-2.5'>
+                    <Pressable onPress={() => handleSelectMember(item as Member)} className='ios:active:bg-background dark:ios:active:bg-linkColor flex-row items-center justify-between rounded-lg px-2.5'>
                         <View className='gap-3 px-2 py-2.5 flex-row items-center'>
                             <View className='relative'>
                                 <UserAvatar

apps/mobile/components/features/channels/ChannelList/ChannelsList.tsx

@@ -40,7 +40,7 @@ export const ChannelListUI = ({ channels }: { channels: ChannelListItem[] }) =>
             <TouchableOpacity onPress={toggleAccordion} style={styles.header} activeOpacity={0.7}>
                 <Text style={styles.headerText}>Channels</Text>
                 <View className="flex-row items-center gap-1">
-                    <Pressable className='active:bg-card-background px-1.5 py-1 rounded-md'
+                    <Pressable className='active:bg-card-background px-1.5 py-1 rounded-lg'
                         onPress={() => router.push('../home/create-channel', { relativeToDirectory: true })}>
                         <PlusIcon fill={colors.icon} height={18} width={18} />
                     </Pressable>