fix: message ui (#780)

* fix: start weshnet only if weshPort params available * fix: remove message from sidebar and dAppstore for web * fix: message ui * chore: refactor Avatar component
TERITORI · Nov 28, 2023 · 576685b · 576685b
1 parent a7042db
commit 576685b
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 27 deletions.
diff --git 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}
                   />
                 </TouchableOpacity>
                 <SpacerRow size={2} />

diff --git a/packages/screens/Message/components/Avatar.tsx 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 (
+      <View
+        style={{
+          backgroundColor: neutral22,
+          padding: source ? 0 : size * 0.15,
+          borderRadius: size,
+          height: size,
+          width: size,
+        }}
+      >
+        <SVG source={logoSVG} />
+      </View>
+    );
+  }
+  return (
+    <SVGorImageIcon style={style} iconSize={size} icon={source || logoSVG} />
+  );
+};
diff --git 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 && (
-            <Avatar.Image
-              source={{ uri: getConversationAvatar(conversation) }}
-              size={30}
-            />
+            <Avatar source={getConversationAvatar(conversation)} size={30} />
           )}
         </View>
       )}
@@ -210,7 +208,7 @@ export const Conversation = ({
 
           {["message", "group-invite"].includes(message.type) && (
             <>
-              <BrandText style={[fontSemibold11, { color: secondaryColor }]}>
+              <BrandText style={[fontSemibold13, { color: secondaryColor }]}>
                 {message?.payload?.message}
               </BrandText>
               {!!message?.payload?.files?.length && (

diff --git 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) => (
-          <Avatar.Image
-            source={{ uri: getConversationAvatar(conversation, index) }}
+          <Avatar
+            source={getConversationAvatar(conversation, index)}
             size={size}
             style={{
               marginLeft: -layout.spacing_x0_5,
@@ -36,12 +36,5 @@ export const ConversationAvatar = ({
       </View>
     );
   }
-  return (
-    <>
-      <Avatar.Image
-        source={{ uri: getConversationAvatar(conversation) }}
-        size={size}
-      />
-    </>
-  );
+  return <Avatar source={getConversationAvatar(conversation)} size={size} />;
 };
diff --git 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 (
     <View>
-      <Avatar.Image size={size} source={{ uri: item?.avatar || "" }} />
+      <Avatar size={size} source={item?.avatar} />
       {!disableStatus && (
         <Badge
           style={{

diff --git a/packages/screens/Message/components/MessageCard.tsx b/packages/screens/Message/components/MessageCard.tsx
@@ -17,9 +17,10 @@ interface CardProps {
   icon: React.FC<SvgProps>;
   text: string;
   subtext: string;
+  isActive: boolean;
 }
 
-const MessageCard: FC<CardProps> = ({ icon, text, subtext }) => {
+const MessageCard: FC<CardProps> = ({ icon, text, subtext, isActive }) => {
   return (
     <FlexRow
       style={{
@@ -33,7 +34,12 @@ const MessageCard: FC<CardProps> = ({ icon, text, subtext }) => {
     >
       <SVG source={icon} />
 
-      <BrandText style={[fontSemibold14, { color: neutral55 }]}>
+      <BrandText
+        style={[
+          fontSemibold14,
+          { color: isActive ? secondaryColor : neutral55 },
+        ]}
+      >
         {text}
       </BrandText>
       <SpacerRow size={1} />

diff --git 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,
           }}
         >
-          <Avatar.Image
-            source={{ uri: getConversationAvatar(conversation) }}
-            size={30}
-          />
+          <Avatar source={getConversationAvatar(conversation)} size={30} />
         </View>
 
         <FlexCol style={{}} alignItems="flex-start">