mobile new design

src/components/Group/Forum/NewThread.tsx

@@ -445,7 +445,7 @@ export const NewThread = ({
           sx={{
             backgroundColor: "#434448",
             padding: isMobile ? '5px' : "20px 42px",
-            height: "calc(100% - 150px)",
+            height: "calc(100% - 165px)",
             flexShrink: 0,
           }}
         >

src/components/Group/GroupMenu.tsx

@@ -16,7 +16,7 @@ import { ChatIcon } from "../../assets/Icons/ChatIcon";
 import { ThreadsIcon } from "../../assets/Icons/ThreadsIcon";
 import { MembersIcon } from "../../assets/Icons/MembersIcon";
 
-export const GroupMenu = ({ setGroupSection, groupSection }) => {
+export const GroupMenu = ({ setGroupSection, groupSection, setOpenManageMembers }) => {
   const [anchorEl, setAnchorEl] = useState(null);
   const open = Boolean(anchorEl);
 
@@ -177,7 +177,7 @@ export const GroupMenu = ({ setGroupSection, groupSection }) => {
         </MenuItem>
         <MenuItem
           onClick={() => {
-            // setGroupSection("")
+            setOpenManageMembers(true)
             handleClose();
           }}
         >

src/components/Group/Home.tsx

@@ -1,32 +1,58 @@
-import { Box, Button, Typography } from '@mui/material'
-import React from 'react'
-import { Spacer } from '../../common/Spacer'
-import { ListOfThreadPostsWatched } from './ListOfThreadPostsWatched'
-import { ThingsToDoInitial } from './ThingsToDoInitial'
-import { GroupJoinRequests } from './GroupJoinRequests'
-import { GroupInvites } from './GroupInvites'
+import { Box, Button, Typography } from "@mui/material";
+import React from "react";
+import { Spacer } from "../../common/Spacer";
+import { ListOfThreadPostsWatched } from "./ListOfThreadPostsWatched";
+import { ThingsToDoInitial } from "./ThingsToDoInitial";
+import { GroupJoinRequests } from "./GroupJoinRequests";
+import { GroupInvites } from "./GroupInvites";
 import RefreshIcon from "@mui/icons-material/Refresh";
 
-export const Home = ({refreshHomeDataFunc, myAddress, isLoadingGroups, balance, userInfo, groups, setGroupSection, setSelectedGroup, getTimestampEnterChat, setOpenManageMembers, setOpenAddGroup, setMobileViewMode}) => {
+export const Home = ({
+  refreshHomeDataFunc,
+  myAddress,
+  isLoadingGroups,
+  balance,
+  userInfo,
+  groups,
+  setGroupSection,
+  setSelectedGroup,
+  getTimestampEnterChat,
+  setOpenManageMembers,
+  setOpenAddGroup,
+  setMobileViewMode,
+}) => {
   return (
     <Box
-              sx={{
-                display: "flex",
-                width: "100%",
-                flexDirection: "column",
-                height: "100%",
-                overflow: "auto",
-                alignItems: "center"
-              }}
-            >
-              <Spacer height="20px" />
-              <Typography sx={{ color: 'rgba(255, 255, 255, 1)', fontWeight: 400,  fontSize: '24px'}}>
-                <Spacer height="16px" />
-              Welcome
-          </Typography>
-          <Spacer height="26px" />
+      sx={{
+        display: "flex",
+        width: "100%",
+        flexDirection: "column",
+        height: "100%",
+        overflow: "auto",
+        alignItems: "center",
+      }}
+    >
+      <Spacer height="20px" />
+      <Typography
+        sx={{
+          color: "rgba(255, 255, 255, 1)",
+          fontWeight: 400,
+          fontSize: userInfo?.name?.length > 15 ? "16px" : "20px",
+          padding: '10px'
+        }}
+      >
+        Welcome{" "}
+        {userInfo?.name ? (
+          <span
+            style={{
+              fontStyle: "italic",
+            }}
+          >{`, ${userInfo?.name}`}</span>
+        ) : null}
+      </Typography>
+      <Spacer height="26px" />
 
-              {/* <Box
+      {/* <Box
                 sx={{
                   display: "flex",
                   width: "100%",
@@ -44,42 +70,41 @@ export const Home = ({refreshHomeDataFunc, myAddress, isLoadingGroups, balance,
                   Refresh home data
                 </Button>
               </Box> */}
-              {!isLoadingGroups && (
-                <Box
-                  sx={{
-                    display: "flex",
-                    gap: "15px",
-                    flexWrap: "wrap",
-                    justifyContent: "center",
-                  }}
-                >
+      {!isLoadingGroups && (
+        <Box
+          sx={{
+            display: "flex",
+            gap: "15px",
+            flexWrap: "wrap",
+            justifyContent: "center",
+          }}
+        >
+          <ThingsToDoInitial
+            balance={balance}
+            myAddress={myAddress}
+            name={userInfo?.name}
+            hasGroups={groups?.length !== 0}
+          />
+          <ListOfThreadPostsWatched />
 
-                  <ThingsToDoInitial
-                    balance={balance}
-                    myAddress={myAddress}
-                    name={userInfo?.name}
-                    hasGroups={groups?.length !== 0}
-                  />
-                 <ListOfThreadPostsWatched />
-
-                  <GroupJoinRequests
-                    setGroupSection={setGroupSection}
-                    setSelectedGroup={setSelectedGroup}
-                    getTimestampEnterChat={getTimestampEnterChat}
-                    setOpenManageMembers={setOpenManageMembers}
-                    myAddress={myAddress}
-                    groups={groups}
-                    setMobileViewMode={setMobileViewMode}
-                  />
-                  <GroupInvites
-                    setOpenAddGroup={setOpenAddGroup}
-                    myAddress={myAddress}
-                    groups={groups}
-                    setMobileViewMode={setMobileViewMode}
-                  />
-                </Box>
-              )}
-              <Spacer height="180px" />
-            </Box>
-  )
-}
+          <GroupJoinRequests
+            setGroupSection={setGroupSection}
+            setSelectedGroup={setSelectedGroup}
+            getTimestampEnterChat={getTimestampEnterChat}
+            setOpenManageMembers={setOpenManageMembers}
+            myAddress={myAddress}
+            groups={groups}
+            setMobileViewMode={setMobileViewMode}
+          />
+          <GroupInvites
+            setOpenAddGroup={setOpenAddGroup}
+            myAddress={myAddress}
+            groups={groups}
+            setMobileViewMode={setMobileViewMode}
+          />
+        </Box>
+      )}
+      <Spacer height="180px" />
+    </Box>
+  );
+};

src/components/Group/ManageMembers.tsx

@@ -253,6 +253,7 @@ export const ManageMembers = ({
               sx={{
                 width: "100%",
                 padding: "25px",
+                maxWidth: '750px'
               }}
             >
               <ListOfMembers
@@ -271,6 +272,7 @@ export const ManageMembers = ({
               sx={{
                 width: "100%",
                 padding: "25px",
+                maxWidth: '750px'
               }}
             >
               <InviteMember show={show} groupId={selectedGroup?.groupId} setOpenSnack={setOpenSnack} setInfoSnack={setInfoSnack} />
@@ -281,7 +283,8 @@ export const ManageMembers = ({
             <Box
               sx={{
                 width: "100%",
-                padding: "25px",
+                 padding: "25px",
+                maxWidth: '750px'
               }}
             >
               <ListOfInvites show={show} groupId={selectedGroup?.groupId} setOpenSnack={setOpenSnack} setInfoSnack={setInfoSnack} />
@@ -293,7 +296,8 @@ export const ManageMembers = ({
             <Box
               sx={{
                 width: "100%",
-                padding: "25px",
+                 padding: "25px",
+                maxWidth: '750px'
               }}
             >
               <ListOfBans show={show} groupId={selectedGroup?.groupId} setOpenSnack={setOpenSnack} setInfoSnack={setInfoSnack} />
@@ -304,7 +308,8 @@ export const ManageMembers = ({
             <Box
               sx={{
                 width: "100%",
-                padding: "25px",
+                 padding: "25px",
+                maxWidth: '750px'
               }}
             >
               <ListOfJoinRequests show={show} setOpenSnack={setOpenSnack} setInfoSnack={setInfoSnack}  groupId={selectedGroup?.groupId} />