added lock icon to list of groups

src/components/Group/AddGroup.tsx

@@ -217,6 +217,9 @@ export const AddGroup = ({ address, open, setOpen }) => {
             flexGrow: 1,
             overflowY: "auto",
             color: "white",
+            flexDirection: 'column',
+            flexGrow: 1,
+            display: 'flex'
           }}
         >
           <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
@@ -454,7 +457,10 @@ export const AddGroup = ({ address, open, setOpen }) => {
           {value === 1 && (
             <Box sx={{
               width: '100%',
-              padding: '25px'
+              padding: '25px',
+              flexDirection: 'column',
+              flexGrow: 1,
+              display: 'flex'
             }}>
                         <AddGroupList  setOpenSnack={setOpenSnack} setInfoSnack={setInfoSnack} />
 
@@ -465,7 +471,10 @@ export const AddGroup = ({ address, open, setOpen }) => {
     {value === 2 && (
             <Box sx={{
               width: '100%',
-              padding: '25px'
+              padding: '25px',
+              flexDirection: 'column',
+              flexGrow: 1,
+              display: 'flex'
             }}>
             <UserListOfInvites myAddress={address} setOpenSnack={setOpenSnack} setInfoSnack={setInfoSnack} />
          </Box>

src/components/Group/AddGroupList.tsx

@@ -26,7 +26,9 @@ import _ from "lodash";
 import { MyContext, getBaseApiReact } from "../../App";
 import { LoadingButton } from "@mui/lab";
 import { getBaseApi, getFee } from "../../background";
-
+import LockIcon from '@mui/icons-material/Lock';
+import NoEncryptionGmailerrorredIcon from '@mui/icons-material/NoEncryptionGmailerrorred';
+import { Spacer } from "../../common/Spacer";
 const cache = new CellMeasurerCache({
   fixedWidth: true,
   defaultHeight: 50,
@@ -231,7 +233,17 @@ export const AddGroupList = ({ setInfoSnack, setOpenSnack }) => {
               <ListItemButton
                 onClick={(event) => handlePopoverOpen(event, index)}
               >
-    
+                {group?.isOpen === false && (
+          <LockIcon sx={{
+            color: 'var(--green)'
+          }} />
+        )}
+        {group?.isOpen === true && (
+          <NoEncryptionGmailerrorredIcon sx={{
+            color: 'var(--unread)'
+          }} />
+        )}
+        <Spacer width="15px" />
                 <ListItemText
                   primary={group?.groupName}
                   secondary={group?.description}
@@ -245,7 +257,11 @@ export const AddGroupList = ({ setInfoSnack, setOpenSnack }) => {
   };
 
   return (
-    <div>
+    <Box sx={{
+      display: 'flex',
+      flexDirection: 'column',
+      flexGrow: 1
+    }}>
       <p>Groups list</p>
       <TextField
         label="Search for Groups"
@@ -257,11 +273,10 @@ export const AddGroupList = ({ setInfoSnack, setOpenSnack }) => {
       <div
         style={{
           position: "relative",
-          height: "500px",
           width: "100%",
           display: "flex",
           flexDirection: "column",
-          flexShrink: 1,
+          flexGrow: 1,
         }}
       >
         <AutoSizer>
@@ -278,6 +293,6 @@ export const AddGroupList = ({ setInfoSnack, setOpenSnack }) => {
           )}
         </AutoSizer>
       </div>
-    </div>
+    </Box>
   );
 };

src/components/Group/ListOfGroupPromotions.tsx

@@ -33,6 +33,8 @@ import {
 import { getNameInfo } from "./Group";
 import { getBaseApi, getFee } from "../../background";
 import { LoadingButton } from "@mui/lab";
+import LockIcon from '@mui/icons-material/Lock';
+import NoEncryptionGmailerrorredIcon from '@mui/icons-material/NoEncryptionGmailerrorred';
 import {
   MyContext,
   getArbitraryEndpointReact,
@@ -540,6 +542,31 @@ export const ListOfGroupPromotions = () => {
                   {promotion?.groupName}
                 </Typography>
               </Box>
+              <Spacer height="20px" />
+                <Box sx={{
+                  display: 'flex',
+                  gap: '20px',
+                  alignItems: 'center'
+                }}>
+                {promotion?.isOpen === false && (
+          <LockIcon sx={{
+            color: 'var(--green)'
+          }} />
+        )}
+        {promotion?.isOpen === true && (
+          <NoEncryptionGmailerrorredIcon sx={{
+            color: 'var(--unread)'
+          }} />
+        )}
+         <Typography
+                      sx={{
+                        fontSize: "15px",
+                        fontWeight: 600,
+                      }}
+                    >
+                      {promotion?.isOpen ? 'Public group' : 'Private group' }
+                    </Typography>
+                </Box>
               <Spacer height="20px" />
               <Typography
                 sx={{

src/components/Group/UserListOfInvites.tsx

@@ -4,7 +4,9 @@ import { AutoSizer, CellMeasurer, CellMeasurerCache, List } from 'react-virtuali
 import { MyContext, getBaseApiReact } from '../../App';
 import { LoadingButton } from '@mui/lab';
 import { getBaseApi, getFee } from '../../background';
-
+import LockIcon from '@mui/icons-material/Lock';
+import NoEncryptionGmailerrorredIcon from '@mui/icons-material/NoEncryptionGmailerrorred';
+import { Spacer } from "../../common/Spacer";
 
 const cache = new CellMeasurerCache({
     fixedWidth: true,
@@ -183,7 +185,17 @@ export const UserListOfInvites = ({myAddress, setInfoSnack, setOpenSnack}) => {
                   </Box>
                 </Popover>
                 <ListItemButton onClick={(event) => handlePopoverOpen(event, index)}>
-
+                {invite?.isOpen === false && (
+          <LockIcon sx={{
+            color: 'var(--green)'
+          }} />
+        )}
+        {invite?.isOpen === true && (
+          <NoEncryptionGmailerrorredIcon sx={{
+            color: 'var(--unread)'
+          }} />
+        )}
+        <Spacer width="15px" />
                   <ListItemText primary={invite?.groupName} secondary={invite?.description} />
                 </ListItemButton>
               </ListItem>
@@ -194,9 +206,21 @@ export const UserListOfInvites = ({myAddress, setInfoSnack, setOpenSnack}) => {
     };
   
     return (
-      <div>
+      <Box sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        flexGrow: 1
+      }}>
         <p>Invite list</p>
-        <div style={{ position: 'relative', height: '500px', width: '100%', display: 'flex', flexDirection: 'column', flexShrink: 1 }}>
+        <div
+        style={{
+          position: "relative",
+          width: "100%",
+          display: "flex",
+          flexDirection: "column",
+          flexGrow: 1,
+        }}
+      >
           <AutoSizer>
             {({ height, width }) => (
               <List
@@ -211,6 +235,6 @@ export const UserListOfInvites = ({myAddress, setInfoSnack, setOpenSnack}) => {
             )}
           </AutoSizer>
         </div>
-      </div>
+        </Box>
     );
 }