From 6c7609c5739d3513912a102d481cb5934d1a03b6 Mon Sep 17 00:00:00 2001
From: PhilReact <philliplangmartinez@gmail.com>
Date: Tue, 3 Dec 2024 14:01:07 +0200
Subject: [PATCH] move send btn to the side, changed add group label

---
 src/components/Chat/ChatDirect.tsx | 39 +++++++++---------------------
 src/components/Chat/ChatGroup.tsx  | 37 ++++++++--------------------
 src/components/Group/AddGroup.tsx  |  2 +-
 src/components/Group/Group.tsx     |  2 +-
 4 files changed, 24 insertions(+), 56 deletions(-)

diff --git a/src/components/Chat/ChatDirect.tsx b/src/components/Chat/ChatDirect.tsx
index cbd5b6e..cb40066 100644
--- a/src/components/Chat/ChatDirect.tsx
+++ b/src/components/Chat/ChatDirect.tsx
@@ -580,7 +580,7 @@ useEffect(() => {
         backgroundColor: "#232428",
         minHeight: isMobile ? '0px' : '150px',
         display: 'flex',
-        flexDirection: 'column',
+        flexDirection: 'row',
         overflow: 'hidden',
         width: '100%',
         boxSizing: 'border-box',
@@ -596,14 +596,17 @@ useEffect(() => {
             flexDirection: 'column',
             flexGrow: isMobile && 1,
             overflow: !isMobile &&  "auto",
-            flexShrink: 0
+            flexShrink: 0,
+            width: 'calc(100% - 100px)',
+            justifyContent: 'flex-end'
       }}>
       {replyMessage && (
         <Box sx={{
           display: 'flex',
           gap: '5px',
           alignItems: 'flex-start',
-          width: '100%'
+          width: 'calc(100% - 100px)',
+          justifyContent: 'flex-end'
         }}>
                   <ReplyPreview message={replyMessage} />
 
@@ -660,34 +663,14 @@ useEffect(() => {
       )}
       <Box sx={{
         display: 'flex',
-        width: '100&',
+        width: '100px',
+
         gap: '10px',
         justifyContent: 'center',
         flexShrink: 0,
         position: 'relative',
       }}>
-         {isFocusedParent && (
-               <CustomButton
-               onClick={()=> {
-                 if(isSending) return
-                 setIsFocusedParent(false)
-                 clearEditorContent()
-                 // Unfocus the editor
-               }}
-               style={{
-                 marginTop: 'auto',
-                 alignSelf: 'center',
-                 cursor: isSending ? 'default' : 'pointer',
-                 background: 'red',
-                 flexShrink: 0,
-                 padding: isMobile && '5px'
-               }}
-             >
-               
-               {` Close`}
-             </CustomButton>
-           
-            )}
+
       <CustomButton
               onClick={()=> {
                 if(messageSize > 4000) return
@@ -701,7 +684,9 @@ useEffect(() => {
                 cursor: isSending ? 'default' : 'pointer',
                 background: isSending && 'rgba(0, 0, 0, 0.8)',
                 flexShrink: 0,
-                padding: isMobile && '5px'
+                padding: '5px',
+                width: '100px',
+                minWidth: 'auto'
               }}
             >
               {isSending && (
diff --git a/src/components/Chat/ChatGroup.tsx b/src/components/Chat/ChatGroup.tsx
index 4ff4f94..b7e15d8 100644
--- a/src/components/Chat/ChatGroup.tsx
+++ b/src/components/Chat/ChatGroup.tsx
@@ -755,7 +755,7 @@ const clearEditorContent = () => {
         backgroundColor: "#232428",
         minHeight: isMobile ? '0px' : '150px',
         display: 'flex',
-        flexDirection: 'column',
+        flexDirection: 'row',
         overflow: 'hidden',
         width: '100%',
         boxSizing: 'border-box',
@@ -766,12 +766,15 @@ const clearEditorContent = () => {
         zIndex: isFocusedParent ? 5 : 'unset',
         flexShrink: 0
       }}>
+      
       <div style={{
             display: 'flex',
             flexDirection: 'column',
             flexGrow: isMobile && 1,
             overflow: !isMobile &&  "auto",
-            flexShrink: 0
+            flexShrink: 0,
+            width: 'calc(100% - 100px)',
+            justifyContent: 'flex-end'
       }}>
         {replyMessage && (
         <Box sx={{
@@ -837,34 +840,13 @@ const clearEditorContent = () => {
       )}
       <Box sx={{
         display: 'flex',
-        width: '100%',
+        width: '100px',
         gap: '10px',
         justifyContent: 'center',
         flexShrink: 0,
         position: 'relative',
       }}>
-         {isFocusedParent && (
-               <CustomButton
-               onClick={()=> {
-                 if(isSending) return
-                 setIsFocusedParent(false)
-                 clearEditorContent()
-                 // Unfocus the editor
-               }}
-               style={{
-                 marginTop: 'auto',
-                 alignSelf: 'center',
-                 cursor: isSending ? 'default' : 'pointer',
-                 background: 'red',
-                 flexShrink: 0,
-                 padding: isMobile && '5px'
-               }}
-             >
-               
-               {` Close`}
-             </CustomButton>
-           
-            )}
+
       <CustomButton
               onClick={()=> {
                 if(messageSize > 4000) return
@@ -877,7 +859,9 @@ const clearEditorContent = () => {
                 cursor: isSending ? 'default' : 'pointer',
                 background: isSending && 'rgba(0, 0, 0, 0.8)',
                 flexShrink: 0,
-                padding: isMobile && '5px',
+                padding: '5px',
+                width: '100px',
+                minWidth: 'auto'
                 
               }}
             >
@@ -898,7 +882,6 @@ const clearEditorContent = () => {
             </CustomButton>
            
               </Box>
-      {/* <button onClick={sendMessage}>send</button> */}
       </div>
               )}
       {isOpenQManager !== null && (
diff --git a/src/components/Group/AddGroup.tsx b/src/components/Group/AddGroup.tsx
index f4c6e6d..ed90c8c 100644
--- a/src/components/Group/AddGroup.tsx
+++ b/src/components/Group/AddGroup.tsx
@@ -194,7 +194,7 @@ export const AddGroup = ({ address, open, setOpen }) => {
         <AppBar sx={{ position: "relative", bgcolor: "#232428" }}>
           <Toolbar>
             <Typography sx={{ ml: 2, flex: 1 }} variant="h6" component="div">
-              Add Group
+              Group Mgmt
             </Typography>
 
             <IconButton
diff --git a/src/components/Group/Group.tsx b/src/components/Group/Group.tsx
index 51cdc76..9f9966b 100644
--- a/src/components/Group/Group.tsx
+++ b/src/components/Group/Group.tsx
@@ -2145,7 +2145,7 @@ export const Group = ({
                   color: "white",
                 }}
               />
-              Add Group
+              Group Mgmt
             </CustomButton>
           )}
           {chatMode === "directs" && (