From 7d9b7cf763debf59f0b45b322d4404f315e6c93c Mon Sep 17 00:00:00 2001
From: talksik <patel.arjun50@gmail.com>
Date: Sun, 19 Jun 2022 11:24:31 -0500
Subject: [PATCH] nicer no connection reconnect page

---
 .../desktop/src/providers/SocketProvider.tsx  | 24 +++++++++++++++----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/packages/desktop/src/providers/SocketProvider.tsx b/packages/desktop/src/providers/SocketProvider.tsx
index 83da6f3..2a3dc29 100644
--- a/packages/desktop/src/providers/SocketProvider.tsx
+++ b/packages/desktop/src/providers/SocketProvider.tsx
@@ -1,3 +1,4 @@
+import { Button, Container, Typography } from '@mui/material';
 import React, { useCallback, useContext, useEffect, useState } from 'react';
 import { Socket, io } from 'socket.io-client';
 
@@ -73,14 +74,27 @@ export function SocketProvider({ children }: { children: React.ReactNode }) {
 
   if (!$ws) {
     return (
-      <div className="h-screen w-screen justify-center items-center bg-white flex flex-col">
-        <span className="text-gray-400">
+      <Container
+        maxWidth={false}
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'center',
+          gap: 2,
+          flex: 1,
+          background: 'white',
+        }}
+      >
+        <Typography variant="caption" align="center">
           {
             "Please wait for a solid connection. If that doesn't work, please click below or restart the application."
           }
-        </span>
-        <button onClick={handleReconnect}>Reconnect</button>
-      </div>
+        </Typography>
+        <Button variant={'text'} onClick={handleReconnect}>
+          reconnect
+        </Button>
+      </Container>
     );
   }