Re-structured result components to use re-usable card

src/components/Results/OpenPorts.tsx

@@ -1,23 +1,14 @@
-
-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)`
-
-small {
-  margin-top: 1rem;
-  opacity: 0.5;
-}
+const cardStyles = `
+  small { margin-top: 1rem; opacity: 0.5; }
 `;
 
-const OpenPortsCard = (portData: any): JSX.Element => {
+const OpenPortsCard = (props: { data: any, title: string, actionButtons: any }): JSX.Element => {
+  const portData = props.data;
   return (
-    <Outer>
-      <Heading as="h3" align="left" color={colors.primary}>Open Ports</Heading>
-
+    <Card heading={props.title} actionButtons={props.actionButtons} styles={cardStyles}>
       {portData.openPorts.map((port: any) => (
           <Row key={port} lbl="" val="">
             <span>{port}</span>
@@ -29,7 +20,7 @@ const OpenPortsCard = (portData: any): JSX.Element => {
         Unable to establish connections to:<br />
         {portData.failedPorts.join(', ')}
       </small>
-    </Outer>
+    </Card>
   );
 }