using mui for big error and stability messages

packages/desktop/src/providers/ConversationProvider.tsx

@@ -13,6 +13,7 @@ import {
   TuneToLineRequest,
   UntuneFromLineRequest,
 } from '@nirvana/core/sockets/channels';
+import { Container, Typography } from '@mui/material';
 import Conversation, { MemberState } from '@nirvana/core/models/conversation.model';
 import { ConversationMap, MasterConversation } from '../util/types';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
@@ -28,7 +29,6 @@ import { useAsyncFn, useEffectOnce, useKeyPressEvent, useUnmount } from 'react-u
 import CreateConversationRequest from '@nirvana/core/requests/CreateConversationRequest.request';
 import { KeyboardShortcuts } from '../util/keyboard';
 import Peer from 'simple-peer';
-import { Typography } from '@mui/material';
 import User from '@nirvana/core/models/user.model';
 import toast from 'react-hot-toast';
 import useAuth from './AuthProvider';
@@ -213,6 +213,11 @@ export function ConversationProvider({ children }: { children: React.ReactNode }
        * set the temporary sort accordingly
        */
 
+      if (!conversationId) {
+        toast.error('must select a conversation');
+        return;
+      }
+
       const allConversationIds = Object.keys(conversationMap);
       let conversationToSelect: MasterConversation;
 
@@ -393,9 +398,22 @@ export function ConversationProvider({ children }: { children: React.ReactNode }
 
   if (fetchState.error) {
     return (
-      <Typography variant={'h6'} color={'danger'}>
-        Something went terribly wrong
-      </Typography>
+      <Container
+        maxWidth={false}
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'center',
+          gap: 2,
+          flex: 1,
+          background: 'white',
+        }}
+      >
+        <Typography variant="caption" align="center">
+          Something went terribly wrong
+        </Typography>
+      </Container>
     );
   }
 

packages/desktop/src/providers/StabilityProvider.tsx

@@ -1,3 +1,4 @@
+import { Container, Typography } from '@mui/material';
 import React, { useContext, useEffect, useState } from 'react';
 import { useAsyncFn, useAsyncRetry } from 'react-use';
 
@@ -34,20 +35,44 @@ export function StabilityProvider({ children }: { children: React.ReactNode }) {
 
   if (isOffline)
     return (
-      <div className="h-screen w-screen bg-white flex-1 flex flex-row justify-center items-center">
-        <span>{'poor network connection... :('}</span>{' '}
-      </div>
+      <Container
+        maxWidth={false}
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'center',
+          gap: 2,
+          flex: 1,
+          background: 'white',
+        }}
+      >
+        <Typography variant="caption" align="center">
+          {'poor network connection... :('}
+        </Typography>
+      </Container>
     );
 
   if (state.error)
     return (
-      <div className="h-screen w-screen text-gray-400 bg-white flex-1 flex flex-col justify-center items-center">
-        <span>{'sorry this is our bad. servers are rebooting... :('}</span>
-        <br />
-        <span>{'try refresh or restart application'}</span>
-        <br />
-        <span>{'call me for emergencies : (949)237-2715'}</span>
-      </div>
+      <Container
+        maxWidth={false}
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'center',
+          gap: 2,
+          flex: 1,
+          background: 'white',
+        }}
+      >
+        <Typography variant="caption" align="center">
+          {
+            'sorry this is our bad. servers are rebooting... :( call me for emergencies : (949)237-2715'
+          }
+        </Typography>
+      </Container>
     );
 
   return (