mobile friendly

src/components/Chat/AnnouncementDiscussion.tsx

@@ -10,7 +10,7 @@ import { decryptPublishes, getTempPublish, saveTempPublish } from "./GroupAnnoun
 import { AnnouncementList } from "./AnnouncementList";
 import { Spacer } from "../../common/Spacer";
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
-import { getBaseApiReact, pauseAllQueues, resumeAllQueues } from "../../App";
+import { getBaseApiReact, isMobile, pauseAllQueues, resumeAllQueues } from "../../App";
 
 const tempKey = 'accouncement-comment'
 
@@ -66,7 +66,7 @@ export const AnnouncementDiscussion = ({
       if (!selectedAnnouncement) return;
     
       return new Promise((res, rej) => {
-        chrome.runtime.sendMessage(
+        chrome?.runtime?.sendMessage(
           {
             action: "publishGroupEncryptedResource",
             payload: {
@@ -245,7 +245,7 @@ export const AnnouncementDiscussion = ({
   return (
     <div
       style={{
-        height: "100vh",
+        height: isMobile ? '100%' : "100vh",
         display: "flex",
         flexDirection: "column",
         width: "100%",

src/components/Chat/ChatDirect.tsx

@@ -40,7 +40,7 @@ export const ChatDirect = ({ myAddress, isNewChat, selectedDirect, setSelectedDi
     const decryptMessages = (encryptedMessages: any[])=> {
       try {
         return new Promise((res, rej)=> {
-          chrome.runtime.sendMessage({ action: "decryptDirect", payload: {
+          chrome?.runtime?.sendMessage({ action: "decryptDirect", payload: {
             data: encryptedMessages,
             involvingAddress: selectedDirect?.address
         }}, (response) => {
@@ -146,7 +146,7 @@ const sendChatDirect = async ({ chatReference = undefined, messageText}: any)=>
  
     if(!directTo) return
     return new Promise((res, rej)=> {
-      chrome.runtime.sendMessage({ action: "sendChatDirect", payload: {
+      chrome?.runtime?.sendMessage({ action: "sendChatDirect", payload: {
         directTo,  chatReference, messageText
     }}, async (response) => {
     
@@ -167,7 +167,7 @@ const sendChatDirect = async ({ chatReference = undefined, messageText}: any)=>
               "senderName": myName
           })
           setNewChat(null)
-          chrome.runtime.sendMessage({
+          chrome?.runtime?.sendMessage({
             action: "addTimestampEnterChat",
             payload: {
               timestamp: Date.now(),

src/components/Chat/ChatGroup.tsx

@@ -10,7 +10,7 @@ import Tiptap from './TipTap'
 import { CustomButton } from '../../App-styles'
 import CircularProgress from '@mui/material/CircularProgress';
 import { LoadingSnackbar } from '../Snackbar/LoadingSnackbar'
-import { getBaseApiReactSocket, pauseAllQueues, resumeAllQueues } from '../../App'
+import { getBaseApiReactSocket, isMobile, pauseAllQueues, resumeAllQueues } from '../../App'
 import { CustomizedSnackbars } from '../Snackbar/Snackbar'
 import { PUBLIC_NOTIFICATION_CODE_FIRST_SECRET_KEY } from '../../constants/codes'
 import { useMessageQueue } from '../../MessageQueueContext'
@@ -85,7 +85,7 @@ export const ChatGroup = ({selectedGroup, secretKey, setSecretKey, getSecretKey,
           return
         }
         return new Promise((res, rej)=> {
-          chrome.runtime.sendMessage({ action: "decryptSingle", payload: {
+          chrome?.runtime?.sendMessage({ action: "decryptSingle", payload: {
             data: encryptedMessages,
             secretKeyObject: secretKey
         }}, (response) => {
@@ -233,7 +233,7 @@ export const ChatGroup = ({selectedGroup, secretKey, setSecretKey, getSecretKey,
   const encryptChatMessage = async (data: string, secretKeyObject: any)=> {
     try {
       return new Promise((res, rej)=> {
-        chrome.runtime.sendMessage({ action: "encryptSingle", payload: {
+        chrome?.runtime?.sendMessage({ action: "encryptSingle", payload: {
           data,
           secretKeyObject
       }}, (response) => {
@@ -252,7 +252,7 @@ export const ChatGroup = ({selectedGroup, secretKey, setSecretKey, getSecretKey,
 const sendChatGroup = async ({groupId, typeMessage = undefined, chatReference = undefined, messageText}: any)=> {
   try {
     return new Promise((res, rej)=> {
-      chrome.runtime.sendMessage({ action: "sendChatGroup", payload: {
+      chrome?.runtime?.sendMessage({ action: "sendChatGroup", payload: {
         groupId, typeMessage, chatReference, messageText
     }}, (response) => {
     
@@ -336,7 +336,7 @@ const clearEditorContent = () => {
   
   return (
     <div style={{
-      height: '100vh',
+      height: isMobile ? '100%' : '100vh',
       display: 'flex',
       flexDirection: 'column',
       width: '100%',

src/components/Chat/CreateCommonSecret.tsx

@@ -107,7 +107,7 @@ export const CreateCommonSecret = ({groupId, secretKey, isOwner,  myAddress, sec
           const secretKeyToSend = !secretKey2 ? null : secretKey2
        
  
-            chrome.runtime.sendMessage({ action: "encryptAndPublishSymmetricKeyGroupChat", payload: {
+            chrome?.runtime?.sendMessage({ action: "encryptAndPublishSymmetricKeyGroupChat", payload: {
                 groupId: groupId,
                 previousData: secretKeyToSend
             } }, (response) => {
@@ -142,7 +142,7 @@ export const CreateCommonSecret = ({groupId, secretKey, isOwner,  myAddress, sec
       flexDirection: 'column',
       gap: '25px',
       maxWidth: '350px',
-      background: '#4444'
+      background: '#444444'
     }}>
       <LoadingButton loading={isLoading} loadingPosition="start" color="warning" variant='contained' onClick={createCommonSecret}>Re-encyrpt key</LoadingButton>
       {noSecretKey ? (

src/components/Chat/GroupAnnouncements.tsx

@@ -28,7 +28,7 @@ const uid = new ShortUniqueId({ length: 8 });
 import CampaignIcon from '@mui/icons-material/Campaign';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import { AnnouncementDiscussion } from "./AnnouncementDiscussion";
-import { MyContext, getBaseApiReact, pauseAllQueues, resumeAllQueues } from "../../App";
+import { MyContext, getBaseApiReact, isMobile, pauseAllQueues, resumeAllQueues } from "../../App";
 import { RequestQueueWithPromise } from "../../utils/queue/queue";
 import { CustomizedSnackbars } from "../Snackbar/Snackbar";
 
@@ -39,7 +39,7 @@ export const saveTempPublish = async ({ data, key }: any) => {
    
       
   return new Promise((res, rej) => {
-    chrome.runtime.sendMessage(
+    chrome?.runtime?.sendMessage(
       {
         action: "saveTempPublish",
         payload: {
@@ -62,7 +62,7 @@ export const getTempPublish = async () => {
    
       
   return new Promise((res, rej) => {
-    chrome.runtime.sendMessage(
+    chrome?.runtime?.sendMessage(
       {
         action: "getTempPublish",
         payload: {
@@ -81,7 +81,7 @@ export const getTempPublish = async () => {
 export const decryptPublishes = async (encryptedMessages: any[], secretKey) => {
   try {
     return await new Promise((res, rej) => {
-      chrome.runtime.sendMessage(
+      chrome?.runtime?.sendMessage(
         {
           action: "decryptSingleForPublishes",
           payload: {
@@ -182,7 +182,7 @@ export const GroupAnnouncements = ({
   const encryptChatMessage = async (data: string, secretKeyObject: any) => {
     try {
       return new Promise((res, rej) => {
-        chrome.runtime.sendMessage(
+        chrome?.runtime?.sendMessage(
           {
             action: "encryptSingle",
             payload: {
@@ -206,7 +206,7 @@ export const GroupAnnouncements = ({
    
       
       return new Promise((res, rej) => {
-        chrome.runtime.sendMessage(
+        chrome?.runtime?.sendMessage(
           {
             action: "publishGroupEncryptedResource",
             payload: {
@@ -460,7 +460,7 @@ export const GroupAnnouncements = ({
     return (
       <div
       style={{
-        height: "100vh",
+        height: isMobile ? '100%' : "100vh",
         display: "flex",
         flexDirection: "column",
         width: "100%",
@@ -479,7 +479,7 @@ export const GroupAnnouncements = ({
   return (
     <div
       style={{
-        height: "100vh",
+        height: isMobile ? '100%' :  "100vh",
         display: "flex",
         flexDirection: "column",
         width: "100%",

src/components/Chat/GroupForum.tsx

@@ -6,6 +6,7 @@ import React, {
   useState,
 } from "react";
 import { GroupMail } from "../Group/Forum/GroupMail";
+import { isMobile } from "../../App";
 
 
 
@@ -35,7 +36,7 @@ export const GroupForum = ({
   return (
     <div
     style={{
-      height: "100vh",
+      height: isMobile ? '100%' : "100vh",
       display: "flex",
       flexDirection: "column",
       width: "100%",