diff --git a/packages/screens/Message/MessageScreen.tsx b/packages/screens/Message/MessageScreen.tsx
index 18157b8314..8ae40f57be 100644
--- a/packages/screens/Message/MessageScreen.tsx
+++ b/packages/screens/Message/MessageScreen.tsx
@@ -40,13 +40,13 @@ export const MessageScreen: ScreenFC<"Message"> = ({ route }) => {
const { activeConversation, setActiveConversation } = useMessage();
const navigation = useAppNavigation();
- // const contactInfo = useSelector(selectContactInfo);
const HEADER_CONFIG = [
{
id: 1,
title: "Create a conversation",
icon: chat,
+ isActive: true,
onPress: () => {
navigation.navigate("Message", { view: "CreateConversation" });
},
@@ -55,6 +55,7 @@ export const MessageScreen: ScreenFC<"Message"> = ({ route }) => {
id: 2,
title: "Create a group",
icon: group,
+ isActive: true,
onPress() {
navigation.navigate("Message", { view: "CreateGroup" });
},
@@ -63,6 +64,7 @@ export const MessageScreen: ScreenFC<"Message"> = ({ route }) => {
id: 3,
title: "Add a friend",
icon: friend,
+ isActive: true,
onPress() {
if (["android", "ios"].includes(Platform.OS)) {
navigation.navigate("FriendshipManager");
@@ -75,6 +77,7 @@ export const MessageScreen: ScreenFC<"Message"> = ({ route }) => {
id: 4,
title: "Join a group",
icon: group,
+ isActive: true,
onPress() {
navigation.navigate("Message", { view: "JoinGroup" });
},
@@ -83,6 +86,7 @@ export const MessageScreen: ScreenFC<"Message"> = ({ route }) => {
id: 5,
title: "Create a Teritori space",
icon: space,
+ isActive: false,
subtitle: "coming soon",
onPress() {},
},
@@ -152,6 +156,7 @@ export const MessageScreen: ScreenFC<"Message"> = ({ route }) => {
text={item.title}
icon={item.icon}
subtext={item?.subtitle || ""}
+ isActive={item.isActive}
/>
diff --git a/packages/screens/Message/components/Avatar.tsx b/packages/screens/Message/components/Avatar.tsx
new file mode 100644
index 0000000000..48a6a7ed7e
--- /dev/null
+++ b/packages/screens/Message/components/Avatar.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import { ImageStyle, View } from "react-native";
+
+import logoSVG from "../../../../assets/logos/logo.svg";
+import { SVG } from "../../../components/SVG";
+import { SVGorImageIcon } from "../../../components/SVG/SVGorImageIcon";
+import { neutral22 } from "../../../utils/style/colors";
+
+type AvatarProps = {
+ source: string;
+ size?: number;
+ style?: ImageStyle;
+};
+
+export const Avatar = ({ source, size = 40, style = {} }: AvatarProps) => {
+ if (!source) {
+ return (
+
+
+
+ );
+ }
+ return (
+
+ );
+};
diff --git a/packages/screens/Message/components/Conversation.tsx b/packages/screens/Message/components/Conversation.tsx
index 8ffced63b8..c94fd7be12 100644
--- a/packages/screens/Message/components/Conversation.tsx
+++ b/packages/screens/Message/components/Conversation.tsx
@@ -2,8 +2,8 @@ import { chain } from "lodash";
import moment from "moment";
import React, { useMemo, useState } from "react";
import { View, TouchableOpacity } from "react-native";
-import { Avatar } from "react-native-paper";
+import { Avatar } from "./Avatar";
import { FileRenderer } from "./FileRenderer";
import { GroupInvitationAction } from "./GroupInvitationAction";
import { MessagePopup } from "./MessagePopup";
@@ -28,6 +28,7 @@ import {
fontBold9,
fontMedium10,
fontSemibold11,
+ fontSemibold13,
} from "../../../utils/style/fonts";
import { layout } from "../../../utils/style/layout";
import {
@@ -120,10 +121,7 @@ export const Conversation = ({
}}
>
{!isMessageChain && (
-
+
)}
)}
@@ -210,7 +208,7 @@ export const Conversation = ({
{["message", "group-invite"].includes(message.type) && (
<>
-
+
{message?.payload?.message}
{!!message?.payload?.files?.length && (
diff --git a/packages/screens/Message/components/ConversationAvatar.tsx b/packages/screens/Message/components/ConversationAvatar.tsx
index 9bcaf33f2a..adb0cdff7b 100644
--- a/packages/screens/Message/components/ConversationAvatar.tsx
+++ b/packages/screens/Message/components/ConversationAvatar.tsx
@@ -1,7 +1,7 @@
import React from "react";
import { View } from "react-native";
-import { Avatar } from "react-native-paper";
+import { Avatar } from "./Avatar";
import { layout } from "../../../utils/style/layout";
import { Conversation } from "../../../utils/types/message";
import { getConversationAvatar } from "../../../weshnet/messageHelpers";
@@ -25,8 +25,8 @@ export const ConversationAvatar = ({
}}
>
{conversation.members.map((_, index) => (
-
);
}
- return (
- <>
-
- >
- );
+ return ;
};
diff --git a/packages/screens/Message/components/MessageAvatar.tsx b/packages/screens/Message/components/MessageAvatar.tsx
index 4f532551f5..1ec4d41a3f 100644
--- a/packages/screens/Message/components/MessageAvatar.tsx
+++ b/packages/screens/Message/components/MessageAvatar.tsx
@@ -1,8 +1,9 @@
import React from "react";
import { View } from "react-native";
-import { Avatar, Badge } from "react-native-paper";
+import { Badge } from "react-native-paper";
import { useSelector } from "react-redux";
+import { Avatar } from "./Avatar";
import { selectPeerById } from "../../../store/slices/message";
import { RootState } from "../../../store/store";
import { Contact } from "../../../utils/types/message";
@@ -23,7 +24,7 @@ export const MessageAvatar = ({
);
return (
-
+
{!disableStatus && (
;
text: string;
subtext: string;
+ isActive: boolean;
}
-const MessageCard: FC = ({ icon, text, subtext }) => {
+const MessageCard: FC = ({ icon, text, subtext, isActive }) => {
return (
= ({ icon, text, subtext }) => {
>
-
+
{text}
diff --git a/packages/screens/Message/components/SearchConversation.tsx b/packages/screens/Message/components/SearchConversation.tsx
index fe4ed4221b..2f2425bd81 100644
--- a/packages/screens/Message/components/SearchConversation.tsx
+++ b/packages/screens/Message/components/SearchConversation.tsx
@@ -1,8 +1,8 @@
import moment from "moment";
import React from "react";
import { View, TouchableOpacity, Image } from "react-native";
-import { Avatar } from "react-native-paper";
+import { Avatar } from "./Avatar";
import { FileRenderer } from "./FileRenderer";
import { BrandText } from "../../../components/BrandText";
import FlexCol from "../../../components/FlexCol";
@@ -57,10 +57,7 @@ export const SearchConversation = ({
marginRight: layout.spacing_x1,
}}
>
-
+