fix: update status component

src/common/constants.ts

@@ -5,3 +5,5 @@ export const PAGE_WIDTH = 1104;
 
 export const SHIKI_THEME = 'Material-Theme-Default';
 export const THEME_STORAGE_KEY = 'theme';
+
+export const STATUS_CHECKER_URL = 'https://status.test-blockstack.com';

src/components/feedback.tsx

@@ -18,6 +18,7 @@ import { border } from '@common/utils';
 import { useRouter } from 'next/router';
 import { getHeadingStyles } from '@components/mdx/typography';
 import { css } from '@styled-system/css';
+import { StatusCheck } from '@components/status-check';
 
 const Icon: React.FC<BoxProps & { icon: React.FC<any> }> = ({ icon: IconComponent, ...props }) => {
   const { bind, hover, active } = useTouchable();
@@ -117,15 +118,22 @@ export const FeedbackSection: React.FC<BoxProps> = props => {
         </Box>
         <FeedbackCard show={showButton} onClose={() => setShowButton(false)} />
       </Flex>
-      <Box mt={space(['extra-loose', 'extra-loose', 'base-loose'])}>
+      <Flex
+        flexDirection="column"
+        justifyContent="flex-end"
+        align="flex-end"
+        mt={space(['extra-loose', 'extra-loose', 'base-loose'])}
+      >
         <Link
           href={`https://github.com/blockstack/docs.blockstack/tree/feat/next/src/pages${pathname}.md`}
           target="_blank"
           rel="nofollow noopener noreferrer"
+          fontSize="14px"
         >
           Edit this page on GitHub
         </Link>
-      </Box>
+        <StatusCheck mt={space('base-loose')} />
+      </Flex>
     </Flex>
   );
 };

src/components/icons/circle-check.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { BaseSvg, SvgProps } from '@components/icons/_base';
+
+export const CircleCheck: SvgProps = props => (
+  <BaseSvg {...props}>
+    <path stroke="none" d="M0 0h24v24H0z" />
+    <circle cx="12" cy="12" r="9" />
+    <path d="M9 12l2 2l4 -4" />
+  </BaseSvg>
+);

src/components/mdx/components/link.tsx

@@ -28,6 +28,7 @@ export const Link = forwardRef(
       textDecoration="underline"
       _hover={{ textDecoration: 'none' }}
       _focus={{ boxShadow: 'outline' }}
+      rel="nofollow noopener noreferrer"
       {...props}
     />
   )

src/components/status-check.tsx

@@ -1,64 +1,75 @@
 import React from 'react';
-import { Box, Flex, space, themeColor, color } from '@blockstack/ui';
+import useSWR from 'swr';
+import { Box, Flex, space, color, BoxProps } from '@blockstack/ui';
 import { border } from '@common/utils';
 import { Link } from '@components/mdx';
-import { Text } from '@components/typography';
-import { CheckmarkCircleIcon, ExclamationMarkCircleIcon, Spinner } from '@blockstack/ui';
-import useSWR from 'swr';
+import { LinkProps, Text } from '@components/typography';
+import { Spinner } from '@blockstack/ui';
+import { CircleCheck } from '@components/icons/circle-check';
+import { AlertCircleIcon } from '@components/icons/alert-circle';
+import { STATUS_CHECKER_URL } from '@common/constants';
+import { css } from '@styled-system/css';
+import { getCapsizeStyles } from '@components/mdx/typography';
 
 const fetcher = url => fetch(url).then(r => r.json());
 
-export const StatusCheck: React.FC<any> = () => {
-  const STATUS_CHECKER_URL = 'https://status.test-blockstack.com';
+const StatusWords: React.FC<BoxProps & { status?: boolean }> = ({ status, ...rest }) => (
+  <>
+    <Box as="span">:</Box>
+    <Box as="span" color={status ? color('feedback-success') : color('feedback-alert')}>{`${
+      status ? ' online' : ' offline'
+    }`}</Box>
+  </>
+);
+
+export const StatusCheck: React.FC<LinkProps> = props => {
   const { data, error } = useSWR(`${STATUS_CHECKER_URL}/json`, fetcher);
-  let status = false;
+  const [status, setStatus] = React.useState(undefined);
 
-  if (data && data.hasOwnProperty('masterNodePings') && data.masterNodePings.length > 1) {
-    status = data.masterNodePings[0].value;
+  React.useEffect(() => {
+    if (data?.masterNodePings?.length > 1) {
+      setStatus(data.masterNodePings[0].value);
+    } else if (status) {
+      setStatus(undefined);
     }
+  }, [data, error]);
+
+  const critical = error && !status;
+  const positive = data && status && !error;
 
   return (
-    <Link href={STATUS_CHECKER_URL} target="_blank" textDecoration="none">
-      <Box pt={space('base-loose')} px={space('base')} display={['none', 'none', 'block', 'block']}>
-        <Flex
+    <Link
+      href={STATUS_CHECKER_URL}
+      target="_blank"
+      textDecoration="none"
       border={border()}
       borderRadius="6px"
       px={space('base-tight')}
       py={space('tight')}
-          align="center"
-          _hover={{ borderColor: themeColor('blue.400'), cursor: 'pointer' }}
+      color={color('text-caption')}
+      _hover={{ cursor: 'pointer', bg: color('bg-alt') }}
+      {...props}
     >
+      <Flex align="center">
         <Box mr={space('tight')}>
-            {!data && !error && (
-              <Spinner color={themeColor('ink.600')} speed="1s" thickness="2px" size="sm" />
-            )}
-            {error && !status && (
-              <ExclamationMarkCircleIcon
-                color={themeColor('feedback.error')}
-                size="20px"
-                alignItems="center"
-                justifyContent="center"
-              />
-            )}
-            {data && status && (
-              <CheckmarkCircleIcon
-                color={themeColor('feedback.success')}
-                size="20px"
-                alignItems="center"
-                justifyContent="center"
-              />
+          {!data && !error ? (
+            <Spinner color={color('accent')} speed="1s" thickness="2px" size="sm" />
+          ) : critical ? (
+            <AlertCircleIcon color={color('feedback-alert')} size="20px" />
+          ) : (
+            positive && <CircleCheck size="20px" color={color('feedback-success')} />
           )}
         </Box>
-          <Text fontSize={'14px'} color={themeColor('ink.600')}>
-            {!data && `Stack 2.0 testnet status`}
-            {data && `Stacks 2.0 testnet is ${status ? 'online' : 'offline'}`}
+        <Text
+          css={css({
+            color: 'currentColor',
+            ...getCapsizeStyles(14, 24),
+          })}
+        >
+          Stacks 2.0 testnet status
+          <StatusWords status={status} />
         </Text>
       </Flex>
-      </Box>
     </Link>
   );
 };
-
-const SpinnerComponent = ({ color }: { color: string }) => (
-  <Spinner color={color} speed="1s" thickness="2px" size="sm" />
-);