Re-structured result components to use re-usable card

src/components/Results/ServerStatus.tsx

@@ -1,28 +1,26 @@
 
-import styled from 'styled-components';
 import colors from 'styles/colors';
-import Card from 'components/Form/Card';
-import Heading from 'components/Form/Heading';
+import { Card } from 'components/Form/Card';
 import Row from 'components/Form/Row';
 
-const Outer = styled(Card)`
+const cardStyles = `
 span.val {
   &.up { color: ${colors.success}; }
   &.down { color: ${colors.danger}; }
 }
 `;
 
-const ServerStatusCard = (serverStatus: any): JSX.Element => {
+const ServerStatusCard = (props: { data: any, title: string, actionButtons: any }): JSX.Element => {
+  const serverStatus = props.data;
   return (
-    <Outer>
-      <Heading as="h3" align="left" color={colors.primary}>Server Status</Heading>
+    <Card heading={props.title} actionButtons={props.actionButtons} styles={cardStyles}>
       <Row lbl="" val="">
         <span className="lbl">Is Up?</span>
         { serverStatus.isUp ? <span className="val up">✅ Online</span> : <span className="val down">❌ Offline</span>}
       </Row>
       <Row lbl="Status Code" val={serverStatus.responseCode} />
       { serverStatus.responseTime && <Row lbl="Response Time" val={`${Math.round(serverStatus.responseTime)}ms`} /> }
-    </Outer>
+    </Card>
   );
 }