adds spinner to ReconnectButton, refactors

pkg/interface/src/views/components/ReconnectButton.js

@@ -1,36 +1,23 @@
 import React from "react";
-import { Box, Text } from "@tlon/indigo-react";
+import { Text, LoadingSpinner, Button } from "@tlon/indigo-react";
-
-const ReconnectBox = ({ color, children, onClick }) => (
-  <Box
-    px={2}
-    py={1}
-    display="flex"
-    color={color}
-    bg="white"
-    alignItems="center"
-    border={1}
-    verticalAlign="middle"
-    lineHeight="0"
-    borderRadius={2}
-    style={{ cursor: "pointer" }}
-    onClick={onClick}
-  >
-    <Text color={color}>{children}</Text>
-  </Box>
-);
 
 const ReconnectButton = ({ connection, subscription }) => {
   const connectedStatus = connection || "connected";
   const reconnect = subscription.restart.bind(subscription);
+
   if (connectedStatus === "disconnected") {
     return (
-      <ReconnectBox onClick={reconnect} color="red">
+      <Button onClick={reconnect} borderColor='red' px='2'>
-        Reconnect ↻
+        <Text textAlign='middle' color='red'>Reconnect ↻</Text>
-      </ReconnectBox>
+      </Button>
     );
   } else if (connectedStatus === "reconnecting") {
-    return <ReconnectBox color="yellow">Reconnecting</ReconnectBox>;
+    return (
+      <Button borderColor='yellow' px='2' onClick={() => {}} cursor='default'>
+        <LoadingSpinner pr='2' foreground='scales.yellow60' background='scales.yellow30'/>
+        <Text textAlign='middle' color='yellow'>Reconnecting</Text>
+      </Button>
+    )
   } else {
     return null;
   }