From 31e20a74b2093235be11d6f528c40ac374ab5669 Mon Sep 17 00:00:00 2001
From: Alex Risch <alex.j.risch@gmail.com>
Date: Mon, 28 Oct 2024 17:26:40 -0400
Subject: [PATCH] fix: Fixed Buttons for Certain cases

Removed deprecated uses
Updated props
Fixed navigation to pop to top
---
 .../Chat/ChatPlaceholder/ChatPlaceholder.tsx  | 10 ++++----
 .../ChatPlaceholder/GroupChatPlaceholder.tsx  |  6 ++---
 components/Chat/ConsentPopup/ConsentPopup.tsx | 11 ++++----
 .../Chat/ConsentPopup/GroupConsentPopup.tsx   |  8 +++---
 design-system/Button/Button.props.ts          |  2 +-
 i18n/translations/en.ts                       |  4 +++
 screens/NewConversation/NewConversation.tsx   | 25 ++++++++-----------
 screens/Profile.tsx                           |  7 +++---
 8 files changed, 38 insertions(+), 35 deletions(-)

diff --git a/components/Chat/ChatPlaceholder/ChatPlaceholder.tsx b/components/Chat/ChatPlaceholder/ChatPlaceholder.tsx
index 6d3edcbbc..7b90ad27b 100644
--- a/components/Chat/ChatPlaceholder/ChatPlaceholder.tsx
+++ b/components/Chat/ChatPlaceholder/ChatPlaceholder.tsx
@@ -1,3 +1,4 @@
+import { Button } from "@design-system/Button/Button";
 import { translate } from "@i18n";
 import { actionSheetColors, textPrimaryColor } from "@styles/colors";
 import { isGroupTopic } from "@utils/groupUtils/groupId";
@@ -23,7 +24,6 @@ import { getProfile, getProfileData } from "../../../utils/profile";
 import { conversationName } from "../../../utils/str";
 import { consentToPeersOnProtocol } from "../../../utils/xmtpRN/conversations";
 import ActivityIndicator from "../../ActivityIndicator/ActivityIndicator";
-import Button from "../../Button/Button";
 import { Recommendation } from "../../Recommendations/Recommendation";
 import { showActionSheetWithOptions } from "../../StateHandlers/ActionSheetStateHandler";
 
@@ -78,9 +78,9 @@ export default function ChatPlaceholder({ messagesCount }: Props) {
           <View>
             <Text style={styles.chatPlaceholderText}>This user is blocked</Text>
             <Button
-              variant="secondary"
+              variant="fill"
               picto="lock.open"
-              title="Unblock"
+              text="Unblock"
               style={styles.cta}
               onPress={() => {
                 showActionSheetWithOptions(
@@ -124,9 +124,9 @@ export default function ChatPlaceholder({ messagesCount }: Props) {
             )}
 
             <Button
-              variant="secondary"
+              variant="fill"
               picto="hand.wave"
-              title="Say hi"
+              text="Say hi"
               style={styles.cta}
               onPress={() => {
                 sendMessage({
diff --git a/components/Chat/ChatPlaceholder/GroupChatPlaceholder.tsx b/components/Chat/ChatPlaceholder/GroupChatPlaceholder.tsx
index f38da8186..4d93b5165 100644
--- a/components/Chat/ChatPlaceholder/GroupChatPlaceholder.tsx
+++ b/components/Chat/ChatPlaceholder/GroupChatPlaceholder.tsx
@@ -1,3 +1,4 @@
+import { Button } from "@design-system/Button/Button";
 import { useGroupMembers } from "@hooks/useGroupMembers";
 import { useGroupName } from "@hooks/useGroupName";
 import { translate } from "@i18n";
@@ -19,7 +20,6 @@ import { useCurrentAccount } from "../../../data/store/accountsStore";
 import { useConversationContext } from "../../../utils/conversation";
 import { sendMessage } from "../../../utils/message";
 import ActivityIndicator from "../../ActivityIndicator/ActivityIndicator";
-import Button from "../../Button/Button";
 
 type Props = {
   messagesCount: number;
@@ -93,9 +93,9 @@ export function GroupChatPlaceholder({ messagesCount }: Props) {
             </Text>
 
             <Button
-              variant="outline"
+              variant="fill"
               picto="hand.wave"
-              title={translate("say_hi")}
+              text={translate("say_hi")}
               style={styles.cta}
               onPress={handleSend}
             />
diff --git a/components/Chat/ConsentPopup/ConsentPopup.tsx b/components/Chat/ConsentPopup/ConsentPopup.tsx
index abd75fef4..87f0885b8 100644
--- a/components/Chat/ConsentPopup/ConsentPopup.tsx
+++ b/components/Chat/ConsentPopup/ConsentPopup.tsx
@@ -1,3 +1,4 @@
+import { Button } from "@design-system/Button/Button";
 import { translate } from "@i18n";
 import { useNavigation } from "@react-navigation/native";
 import { NativeStackNavigationProp } from "@react-navigation/native-stack";
@@ -17,7 +18,6 @@ import {
 import { NavigationParamList } from "../../../screens/Navigation/Navigation";
 import { useConversationContext } from "../../../utils/conversation";
 import { consentToPeersOnProtocol } from "../../../utils/xmtpRN/conversations";
-import Button from "../../Button/Button";
 import { showActionSheetWithOptions } from "../../StateHandlers/ActionSheetStateHandler";
 
 export default function ConsentPopup() {
@@ -59,9 +59,10 @@ export default function ConsentPopup() {
       <Text style={styles.info}>{translate("do_you_trust_this_contact")}</Text>
       <View style={styles.buttonsContainer}>
         <Button
-          variant="secondary-danger"
+          variant="text"
+          action="danger"
           picto="xmark"
-          title={translate("block")}
+          text={translate("block")}
           style={styles.cta}
           onPress={() => {
             showActionSheetWithOptions(
@@ -87,9 +88,9 @@ export default function ConsentPopup() {
           }}
         />
         <Button
-          variant="secondary"
+          variant="fill"
           picto="checkmark"
-          title={translate("accept")}
+          text={translate("accept")}
           style={styles.cta}
           onPress={() => {
             if (!conversation.peerAddress) return;
diff --git a/components/Chat/ConsentPopup/GroupConsentPopup.tsx b/components/Chat/ConsentPopup/GroupConsentPopup.tsx
index 62b93c295..6706e8a28 100644
--- a/components/Chat/ConsentPopup/GroupConsentPopup.tsx
+++ b/components/Chat/ConsentPopup/GroupConsentPopup.tsx
@@ -1,4 +1,5 @@
 import { useSelect } from "@data/store/storeHelpers";
+import { Button } from "@design-system/Button/Button";
 import { useGroupConsent } from "@hooks/useGroupConsent";
 import { useGroupCreator } from "@hooks/useGroupCreator";
 import { useGroupMembers } from "@hooks/useGroupMembers";
@@ -17,7 +18,6 @@ import {
 } from "../../../data/store/accountsStore";
 import { NavigationParamList } from "../../../screens/Navigation/Navigation";
 import { useConversationContext } from "../../../utils/conversation";
-import Button from "../../Button/Button";
 
 export function GroupConsentPopup() {
   const conversation = useConversationContext("conversation");
@@ -92,14 +92,14 @@ export function GroupConsentPopup() {
       <View style={styles.buttonsContainer}>
         <Button
           variant="text"
-          title={translate("decline")}
+          text={translate("decline")}
           style={[styles.cta, styles.blockCta]}
           onPress={onBlock}
         />
         <Button
-          variant="secondary"
+          variant="fill"
           picto="checkmark"
-          title={translate("join_this_group")}
+          text={translate("join_this_group")}
           style={styles.cta}
           onPress={onAccept}
         />
diff --git a/design-system/Button/Button.props.ts b/design-system/Button/Button.props.ts
index 3acb2f0c0..9bb510d96 100644
--- a/design-system/Button/Button.props.ts
+++ b/design-system/Button/Button.props.ts
@@ -107,7 +107,7 @@ export interface IButtonProps extends RNPressableProps {
    */
   withHapticFeedback?: boolean;
 
-  /** @deprecated */
+  /** @deprecated - use text instead */
   title?: string;
   /** @deprecated */
   picto?: IPicto;
diff --git a/i18n/translations/en.ts b/i18n/translations/en.ts
index cf381f14a..949e02cd7 100644
--- a/i18n/translations/en.ts
+++ b/i18n/translations/en.ts
@@ -310,6 +310,10 @@ export const en = {
   // Wallet selector
   no_wallet_detected: "No wallet detected",
 
+  // Profile
+  view_removed_chats: "View removed chats",
+  change_or_add_account: "Change or add account",
+
   // Revocation
   current_installation_revoked: "Logged out",
   current_installation_revoked_description:
diff --git a/screens/NewConversation/NewConversation.tsx b/screens/NewConversation/NewConversation.tsx
index 693797e83..0d9627b2c 100644
--- a/screens/NewConversation/NewConversation.tsx
+++ b/screens/NewConversation/NewConversation.tsx
@@ -1,3 +1,4 @@
+import { Button } from "@design-system/Button/Button";
 import { NativeStackScreenProps } from "@react-navigation/native-stack";
 import {
   backgroundColor,
@@ -21,7 +22,6 @@ import {
 import { NewConversationModalParams } from "./NewConversationModal";
 import ActivityIndicator from "../../components/ActivityIndicator/ActivityIndicator";
 import AndroidBackAction from "../../components/AndroidBackAction";
-import ConverseButton from "../../components/Button/Button";
 import SearchBar from "../../components/NewConversation/SearchBar";
 import Recommendations from "../../components/Recommendations/Recommendations";
 import ProfileSearch from "../../components/Search/ProfileSearch";
@@ -94,7 +94,7 @@ export default function NewConversation({
     navigation.setOptions({
       headerLeft: () =>
         Platform.OS === "ios" ? (
-          <ConverseButton variant="text" title="Cancel" onPress={handleBack} />
+          <Button variant="text" text="Cancel" onPress={handleBack} />
         ) : (
           <AndroidBackAction navigation={navigation} />
         ),
@@ -109,9 +109,9 @@ export default function NewConversation({
             return <ActivityIndicator style={styles.activityIndicator} />;
           } else {
             return (
-              <ConverseButton
+              <Button
                 variant="text"
-                title={route.params?.addingToGroupTopic ? "Add" : "Next"}
+                text={route.params?.addingToGroupTopic ? "Add" : "Next"}
                 onPress={handleRightAction}
                 style={{ marginRight: -10, padding: 10 }}
               />
@@ -334,10 +334,10 @@ export default function NewConversation({
         ]}
       >
         {!group.enabled && (
-          <ConverseButton
+          <Button
             variant="text"
             picto="person.2"
-            title="New group"
+            text="New group"
             style={styles.newGroupButton}
             onPress={() => {
               setGroup({ enabled: true, members: [] });
@@ -351,16 +351,13 @@ export default function NewConversation({
             const preferredName = getPreferredName(m, m.address);
 
             return (
-              <ConverseButton
+              <Button
                 key={m.address}
-                title={preferredName}
-                variant="secondary"
+                text={preferredName}
+                variant="fill"
+                size="md"
                 picto="xmark"
                 style={styles.groupMemberButton}
-                textStyle={{
-                  lineHeight: 17,
-                  top: Platform.OS === "ios" ? undefined : 1,
-                }}
                 onPress={() =>
                   setGroup((g) => {
                     const members = [...g.members];
@@ -544,7 +541,7 @@ const useStyles = () => {
       padding: 0,
       marginHorizontal: 0,
       marginRight: 10,
-      height: Platform.OS === "ios" ? 30 : undefined,
+      // height: Platform.OS === "ios" ? 30 : undefined,
       marginTop: 10,
     },
     activityIndicator: {
diff --git a/screens/Profile.tsx b/screens/Profile.tsx
index 3624dab4a..9c77d276a 100644
--- a/screens/Profile.tsx
+++ b/screens/Profile.tsx
@@ -707,8 +707,9 @@ export default function ProfileScreen({
             items={[
               {
                 id: "blocked",
-                title: "View removed chats",
+                title: translate("view_removed_chats"),
                 action: () => {
+                  navigation.popToTop();
                   navigate("Blocked");
                 },
                 titleColor:
@@ -718,7 +719,7 @@ export default function ProfileScreen({
               },
               {
                 id: "accounts",
-                title: "Change or add account",
+                title: translate("change_or_add_account"),
                 action: () => {
                   navigation.push("Accounts");
                 },
@@ -729,7 +730,7 @@ export default function ProfileScreen({
               },
               {
                 id: "notifications",
-                title: "Turn on notifications",
+                title: translate("turn_on_notifications"),
                 action: () => {
                   // @todo => move that to a helper because also used in AccountSettingsButton
                   if (notificationsPermissionStatus === "denied") {