Re-structured result components to use re-usable card

src/components/Results/BuiltWith.tsx

@@ -23,36 +23,26 @@ const Row = styled.div`
   }
 `;
 
-const DataRow = (props: { lbl: string, val: string }) => {
-  const { lbl, val } = props;
-  return (
-  <Row>
-    <span className="lbl">{lbl}</span>
-    <span className="val" title={val}>{val}</span>
-  </Row>
-  );
-};
-
 const ListRow = (props: { list: Technology[], title: string }) => {
   const { list, title } = props;
   return (
-  <>
-    <Heading as="h3" align="left" color={colors.primary}>{title}</Heading>
-    { list.map((entry: Technology, index: number) => {
-      return (
-      <Row key={`${title.toLocaleLowerCase()}-${index}`}><span>{ entry.Name }</span></Row>
+    <>
+      <Heading as="h3" align="left" color={colors.primary}>{title}</Heading>
+      { list.map((entry: Technology, index: number) => {
+        return (
+        <Row key={`${title.toLocaleLowerCase()}-${index}`}><span>{ entry.Name }</span></Row>
+        )}
       )}
-    )}
-  </>
-);
+    </>
+  );
 }
 
-const BuiltWithCard = (technologies: TechnologyGroup[]): JSX.Element => {
+const BuiltWithCard = (props: { data: TechnologyGroup[]}): JSX.Element => {
   // const { created, updated, expires, nameservers } = whois;
   return (
     <Outer>
       <Heading as="h3" align="left" color={colors.primary}>Technologies</Heading>
-      { technologies.map((group: TechnologyGroup) => {
+      { props.data.map((group: TechnologyGroup) => {
         return (
           <ListRow key={group.tag} title={group.tag} list={group.technologies} />
         );

src/components/Results/Cookies.tsx

@@ -1,21 +1,13 @@
-
-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 { ExpandableRow } from 'components/Form/Row';
 
-const Outer = styled(Card)``;
-
-const CookiesCard = (cookies: { cookies: any }): JSX.Element => {
+const CookiesCard = (props: { data: any, title: string, actionButtons: any}): JSX.Element => {
+  const cookies = props.data.cookies;
   return (
-    <Outer>
-      <Heading as="h3" align="left" color={colors.primary}>Cookies</Heading>
+    <Card heading={props.title} actionButtons={props.actionButtons}>
+      { cookies.length === 0 && <p>No cookies found.</p> }
       {
-        cookies.cookies.length === 0 && <p>No cookies found.</p>
-      }
-      {
-        cookies.cookies.map((cookie: any, index: number) => {
+        cookies.map((cookie: any, index: number) => {
           const attributes = Object.keys(cookie.attributes).map((key: string) => {
             return { lbl: key, val: cookie.attributes[key] }
           });
@@ -24,7 +16,7 @@ const CookiesCard = (cookies: { cookies: any }): JSX.Element => {
           )
         })
       }
-    </Outer>
+    </Card>
   );
 }
 

src/components/Results/DnsRecords.tsx

@@ -1,21 +1,17 @@
-
-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, { ListRow }  from 'components/Form/Row';
 
-const Outer = styled(Card)`
+const styles = `
   .content {
     max-height: 28rem;
     overflow-y: auto;
   }
 `;
 
-const DnsRecordsCard = (dnsRecords: any): JSX.Element => {
+const DnsRecordsCard = (props: { data: any, title: string, actionButtons: any }): JSX.Element => {
+  const dnsRecords = props.data;
   return (
-    <Outer>
-      <Heading as="h3" align="left" color={colors.primary}>DNS Records</Heading>
+    <Card heading={props.title} actionButtons={props.actionButtons} styles={styles}>
       <div className="content">
       { dnsRecords.A && <Row lbl="A" val={dnsRecords.A.address} /> }
       { dnsRecords.AAAA?.length > 0 && <ListRow title="AAAA" list={dnsRecords.AAAA} /> }
@@ -25,9 +21,8 @@ const DnsRecordsCard = (dnsRecords: any): JSX.Element => {
       { dnsRecords.PTR?.length > 0 && <ListRow title="PTR" list={dnsRecords.PTR} /> }
       { dnsRecords.SOA?.length > 0 && <ListRow title="SOA" list={dnsRecords.SOA} /> }
       </div>
-    </Outer>
+    </Card>
   );
 }
 
 export default DnsRecordsCard;
-

src/components/Results/Headers.tsx

@@ -1,18 +1,11 @@
-
-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';
+import { ReactNode } from 'react';
 
-const Outer = styled(Card)`
-  grid-row: span 2;
-`;
-
-const HeadersCard = (headers: any): JSX.Element => {
+const HeadersCard = (props: { data: any, title: string, actionButtons: ReactNode }): JSX.Element => {
+  const headers = props.data;
   return (
-    <Outer>
-      <Heading as="h3" align="left" color={colors.primary}>Headers</Heading>
+    <Card heading={props.title} styles="grid-row: span 2;" actionButtons={props.actionButtons}>
       {
         Object.keys(headers).map((header: string, index: number) => {
           return (
@@ -20,7 +13,7 @@ const HeadersCard = (headers: any): JSX.Element => {
           )
         })
       }      
-    </Outer>
+    </Card>
   );
 }
 

src/components/Results/HostNames.tsx

@@ -2,14 +2,9 @@
 import styled from 'styled-components';
 import { HostNames } from 'utils/result-processor';
 import colors from 'styles/colors';
-import Card from 'components/Form/Card';
+import { Card } from 'components/Form/Card';
 import Heading from 'components/Form/Heading';
 
-const Outer = styled(Card)`
-  max-height: 28rem;
-  overflow: auto;
-`;
-
 const Row = styled.div`
   display: flex;
   justify-content: space-between;
@@ -22,7 +17,7 @@ const HostListSection = (props: { list: string[], title: string }) => {
   const { list, title } = props;
   return (
   <>
-    <Heading as="h3" align="left" color={colors.primary}>{title}</Heading>
+    <Heading as="h4" size="small" align="left" color={colors.primary}>{title}</Heading>
     { list.map((entry: string, index: number) => {
       return (
       <Row key={`${title.toLocaleLowerCase()}-${index}`}><span>{ entry }</span></Row>
@@ -32,16 +27,22 @@ const HostListSection = (props: { list: string[], title: string }) => {
 );
 }
 
-const HostNamesCard = (hosts: HostNames): JSX.Element => {
+const cardStyles = `
+  max-height: 28rem;
+  overflow: auto;
+`;
+
+const HostNamesCard = (props: { data: HostNames, title: string, actionButtons: any }): JSX.Element => {
+  const hosts = props.data;
   return (
-    <Outer>
+    <Card heading={props.title} actionButtons={props.actionButtons} styles={cardStyles}>
       { hosts.domains.length > 0 &&
-        <HostListSection list={hosts.domains} title="Domain Names" />
+        <HostListSection list={hosts.domains} title="Domains" />
       }
       { hosts.hostnames.length > 0 &&
-        <HostListSection list={hosts.hostnames} title="Hostnames" />
+        <HostListSection list={hosts.hostnames} title="Hosts" />
       }
-    </Outer>
+    </Card>
   );
 }
 

src/components/Results/Lighthouse.tsx

@@ -1,17 +1,10 @@
-
-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 { ExpandableRow } from 'components/Form/Row';
 
 const processScore = (percentile: number) => {
   return `${Math.round(percentile * 100)}%`;
 }
 
-const Outer = styled(Card)``;
-
 interface Audit {
   id: string,
   score?: number | string,
@@ -31,13 +24,13 @@ const makeValue = (audit: Audit) => {
   return score;
 };
 
-const LighthouseCard = (lighthouse: any): JSX.Element => {
+const LighthouseCard = (props: { data: any, title: string, actionButtons: any }): JSX.Element => {
+  const lighthouse = props.data;
   const categories = lighthouse?.categories || {};
   const audits = lighthouse?.audits || [];
 
   return (
-    <Outer>
-      <Heading as="h3" align="left" color={colors.primary}>Performance</Heading>
+    <Card heading={props.title} actionButtons={props.actionButtons}>
       { Object.keys(categories).map((title: string, index: number) => {
         const scoreIds = categories[title].auditRefs.map((ref: { id: string }) => ref.id);
         const scoreList = scoreIds.map((id: string) => {
@@ -52,7 +45,7 @@ const LighthouseCard = (lighthouse: any): JSX.Element => {
           />
         );
       }) }
-    </Outer>
+    </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>
   );
 }
 

src/components/Results/Redirects.tsx

@@ -1,11 +1,8 @@
-
-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 = `
   div {
     justify-content: flex-start;
     align-items: baseline; 
@@ -16,13 +13,21 @@ const Outer = styled(Card)`
     font-weight: bold;
     margin-right: 0.5rem;
   }
+  .redirect-count {
+    color: ${colors.textColorSecondary};
+    margin: 0;
+  }
 `;
 
-const RedirectsCard = (redirects: any): JSX.Element => {
+const RedirectsCard = (props: { data: any, title: string, actionButtons: any }): JSX.Element => {
+  const redirects = props.data;
   return (
-    <Outer>
-      <Heading as="h3" align="left" color={colors.primary}>Redirects</Heading>
+    <Card heading={props.title} actionButtons={props.actionButtons} styles={cardStyles}>
       { !redirects?.redirects.length && <Row lbl="" val="No redirects" />}
+      <p className="redirect-count">
+        Followed {redirects.redirects.length}{' '}
+        redirect{redirects.redirects.length === 1 ? '' : 's'} when contacting host
+      </p>
       {redirects.redirects.map((redirect: any, index: number) => {
         return (
           <Row lbl="" val="" key={index}>
@@ -30,7 +35,7 @@ const RedirectsCard = (redirects: any): JSX.Element => {
           </Row>
         );
       })}
-    </Outer>
+    </Card>
   );
 }
 

src/components/Results/RobotsTxt.tsx

@@ -1,21 +1,18 @@
 
-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, { RowProps }  from 'components/Form/Row';
 
-const Outer = styled(Card)`
+const cardStyles = `
   .content {
     max-height: 28rem;
     overflow-y: auto;
   }
 `;
 
-const RobotsTxtCard = ( robots: { robots: RowProps[]}): JSX.Element => {
+const RobotsTxtCard = ( props: { data: { robots: RowProps[]}, title: string, actionButtons: any}): JSX.Element => {
+  const robots = props.data;
   return (
-    <Outer>
-      <Heading as="h3" align="left" color={colors.primary}>Crawl Rules</Heading>
+    <Card heading={props.title} actionButtons={props.actionButtons} styles={cardStyles}>
       <div className="content">
       {
         robots.robots.length === 0 && <p>No crawl rules found.</p>
@@ -28,7 +25,7 @@ const RobotsTxtCard = ( robots: { robots: RowProps[]}): JSX.Element => {
         })
       }
       </div>
-    </Outer>
+    </Card>
   );
 }
 

src/components/Results/Screenshot.tsx

@@ -1,25 +1,21 @@
+import { Card } from 'components/Form/Card';
 
-import styled from 'styled-components';
-import colors from 'styles/colors';
-import Card from 'components/Form/Card';
-import Heading from 'components/Form/Heading';
-
-const Outer = styled(Card)`
-overflow: auto;
-max-height: 28rem;
-img {
-  border-radius: 6px;
-  width: 100%;
-  margin 0.5rem 0;;
-}
+const cardStyles = `
+  overflow: auto;
+  max-height: 32rem;
+  img {
+    border-radius: 6px;
+    width: 100%;
+    margin 0.5rem 0;;
+  }
 `;
 
-const ScreenshotCard = (screenshot: { data: string }): JSX.Element => {
+const ScreenshotCard = (props: { data: { data: string }, title: string, actionButtons: any }): JSX.Element => {
+  const screenshot = props.data;
   return (
-    <Outer>
-      <Heading as="h3" align="left" color={colors.primary}>Screenshot</Heading>
+    <Card heading={props.title} actionButtons={props.actionButtons} styles={cardStyles}>
       <img src={screenshot.data} alt="Full page screenshot" />
-    </Outer>
+    </Card>
   );
 }
 

src/components/Results/ServerInfo.tsx

@@ -1,18 +1,12 @@
-
-import styled from 'styled-components';
 import { ServerInfo } from 'utils/result-processor';
-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 ServerInfoCard = (info: ServerInfo): JSX.Element => {
+const ServerInfoCard = (props: { data: ServerInfo, title: string, actionButtons: any }): JSX.Element => {
+  const info = props.data;
   const { org, asn, isp, os, ports, ip, loc, type } = info;
   return (
-    <Outer>
-      <Heading as="h3" align="left" color={colors.primary}>Server Info</Heading>
+    <Card heading={props.title} actionButtons={props.actionButtons}>
       { org && <Row lbl="Organization" val={org} /> }
       { (isp && isp !== org) && <Row lbl="Service Provider" val={isp} /> }
       { os && <Row lbl="Operating System" val={os} /> }
@@ -21,7 +15,7 @@ const ServerInfoCard = (info: ServerInfo): JSX.Element => {
       { ip && <Row lbl="IP" val={ip} /> }
       { type && <Row lbl="Type" val={type} /> }
       { loc && <Row lbl="Location" val={loc} /> }
-    </Outer>
+    </Card>
   );
 }
 

src/components/Results/ServerLocation.tsx

@@ -1,17 +1,13 @@
 
 import styled from 'styled-components';
 import { ServerLocation } from 'utils/result-processor';
-import colors from 'styles/colors';
-import Card from 'components/Form/Card';
-import Heading from 'components/Form/Heading';
+import { Card } from 'components/Form/Card';
 import LocationMap from 'components/misc/LocationMap';
 import Flag from 'components/misc/Flag';
 import { TextSizes } from 'styles/typography';
 import Row, { StyledRow } from 'components/Form/Row';
 
-const Outer = styled(Card)`
-  grid-row: span 2
-`;
+const cardStyles = 'grid-row: span 2';
 
 const SmallText = styled.span`
   opacity: 0.5;
@@ -30,8 +26,8 @@ const CountryValue = styled.span`
   gap: 0.5rem;
 `;
 
-const ServerLocationCard = (location: ServerLocation): JSX.Element => {
-
+const ServerLocationCard = (props: { data: ServerLocation, title: string, actionButtons: any }): JSX.Element => {
+  const location = props.data;
   const {
     city, region, country,
     postCode, countryCode, coords,
@@ -39,8 +35,7 @@ const ServerLocationCard = (location: ServerLocation): JSX.Element => {
   } = location;
 
   return (
-    <Outer>
-      <Heading as="h3" align="left" color={colors.primary}>Location</Heading>
+    <Card heading={props.title} actionButtons={props.actionButtons} styles={cardStyles}>
       <Row lbl="City" val={`${postCode}, ${city}, ${region}`} />
       <Row lbl="" val="">
         <b>Country</b>
@@ -56,7 +51,7 @@ const ServerLocationCard = (location: ServerLocation): JSX.Element => {
         <LocationMap lat={coords.latitude} lon={coords.longitude} label={`Server (${isp})`} />
         <SmallText>Latitude: {coords.latitude}, Longitude: {coords.longitude} </SmallText>
       </MapRow>
-    </Outer>
+    </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>
   );
 }
 

src/components/Results/SslCert.tsx

@@ -1,11 +1,9 @@
 
 import styled from 'styled-components';
 import colors from 'styles/colors';
-import Card from 'components/Form/Card';
+import { Card } from 'components/Form/Card';
 import Heading from 'components/Form/Heading';
 
-const Outer = styled(Card)``;
-
 const Row = styled.div`
   display: flex;
   justify-content: space-between;
@@ -79,14 +77,13 @@ const ListRow = (props: { list: string[], title: string }) => {
 );
 }
 
-const SslCertCard = (sslCert: any): JSX.Element => {
+const SslCertCard = (props: { data: any, title: string, actionButtons: any }): JSX.Element => {
+  const sslCert = props.data;
   const { subject, issuer, fingerprint, serialNumber, asn1Curve, nistCurve, valid_to, valid_from, ext_key_usage } = sslCert;
   return (
-    <Outer>
-      <Heading as="h3" align="left" color={colors.primary}>SSL Info</Heading>
+    <Card heading={props.title} actionButtons={props.actionButtons}>
       { subject && <DataRow lbl="Subject" val={subject?.CN} /> }
       { issuer?.O && <DataRow lbl="Issuer" val={issuer.O} /> }
-      
       { asn1Curve && <DataRow lbl="ASN1 Curve" val={asn1Curve} /> }
       { nistCurve && <DataRow lbl="NIST Curve" val={nistCurve} /> }
       { valid_to && <DataRow lbl="Expires" val={formatDate(valid_to)} /> }
@@ -96,7 +93,7 @@ const SslCertCard = (sslCert: any): JSX.Element => {
       { fingerprint && <DataRow lbl="Fingerprint" val={fingerprint} /> }
       { ext_key_usage && <ListRow title="Extended Key Usage" list={getExtendedKeyUsage(ext_key_usage)} /> }
       
-    </Outer>
+    </Card>
   );
 }
 

src/components/Results/TraceRoute.tsx

@@ -1,27 +1,63 @@
-
 import styled from 'styled-components';
 import colors from 'styles/colors';
-import Card from 'components/Form/Card';
+import { Card } from 'components/Form/Card';
 import Heading from 'components/Form/Heading';
-import Row from 'components/Form/Row';
 
-const Outer = styled(Card)``;
+const RouteRow = styled.div`
+  text-align: center;
+  width: fit-content;
+  margin: 0 auto;
+  .ipName {
+    font-size: 1rem;
+  }
+`;
 
-const TraceRouteCard = (traceRouteResponse: any): JSX.Element => {
-  console.log(traceRouteResponse.result);
+const RouteTimings = styled.div`
+p {
+  margin: 0 auto;
+}
+.arrow {
+  font-size: 2.5rem;
+  color: ${colors.primary};
+  margin-top: -1rem;
+}
+.times {
+  font-size: 0.85rem;
+  color: ${colors.textColorSecondary};
+}
+.completed {
+  text-align: center;
+  font-weight: bold;
+}
+`;
+
+const TraceRouteCard = (props: { data: any, title: string, actionButtons: any }): JSX.Element => {
+  const traceRouteResponse = props.data;
   const routes = traceRouteResponse.result;
-  console.log(Object.keys(routes));
   return (
-    <Outer>
-      <Heading as="h3" align="left" color={colors.primary}>Trace Route</Heading>
-      {routes.map((route: any) => (
-          <Row lbl="" val="">
+    <Card heading={props.title} actionButtons={props.actionButtons}>
+      {routes.filter((x: any) => x).map((route: any, index: number) => (
+          <RouteRow key={index}>
             {/* <span>{route}</span> */}
-            <span>{Object.keys(route)[0]}</span>
-          </Row>
+            <span className="ipName">{Object.keys(route)[0]}</span>
+            <RouteTimings>
+              {route[Object.keys(route)[0]].map((time: any, packetIndex: number) => (
+                <p className="times" key={`timing-${packetIndex}-${time}`}>
+                  { route[Object.keys(route)[0]].length > 1 && (<>Packet #{packetIndex + 1}:</>) }
+                  Took {time} ms
+                </p>
+              ))}
+              <p className="arrow">↓</p>
+            </RouteTimings>
+          </RouteRow>
         )
       )}
-    </Outer>
+      <RouteTimings>
+        <p className="completed">
+          Round trip completed in {traceRouteResponse.timeTaken} ms
+        </p>
+      </RouteTimings>
+    </Card>
   );
 }
 

src/components/Results/TxtRecords.tsx

@@ -1,23 +1,20 @@
 
-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 = '';
 
-const TxtRecordCard = (records: any): JSX.Element => {
+const TxtRecordCard = (props: {data: any, title: string, actionButtons: any }): JSX.Element => {
+  const records = props.data;
   return (
-    <Outer>
-      <Heading as="h3" align="left" color={colors.primary}>TXT Config</Heading>
+    <Card heading={props.title} actionButtons={props.actionButtons} styles={cardStyles}>
       { !records && <Row lbl="" val="No TXT Records" />}
       {Object.keys(records).map((recordName: any, index: number) => {
         return (
           <Row lbl={recordName} val={records[recordName]} key={`${recordName}-${index}`} />
         );
       })}
-    </Outer>
+    </Card>
   );
 }
 

src/components/Results/WhoIs.tsx

@@ -2,11 +2,9 @@
 import styled from 'styled-components';
 import { Whois } from 'utils/result-processor';
 import colors from 'styles/colors';
-import Card from 'components/Form/Card';
+import { Card } from 'components/Form/Card';
 import Heading from 'components/Form/Heading';
 
-const Outer = styled(Card)``;
-
 const Row = styled.div`
   display: flex;
   justify-content: space-between;
@@ -55,17 +53,17 @@ const ListRow = (props: { list: string[], title: string }) => {
 );
 }
 
-const ServerInfoCard = (whois: Whois): JSX.Element => {
+const WhoIsCard = (props: { data: Whois, title: string, actionButtons: any }): JSX.Element => {
+  const whois = props.data;
   const { created, updated, expires, nameservers } = whois;
   return (
-    <Outer>
-      <Heading as="h3" align="left" color={colors.primary}>Who Is Info</Heading>
+    <Card heading={props.title} actionButtons={props.actionButtons}>
       { created && <DataRow lbl="Created" val={formatDate(created)} /> }
       { updated && <DataRow lbl="Updated" val={formatDate(updated)} /> }
       { expires && <DataRow lbl="Expires" val={formatDate(expires)} /> }
       { nameservers && <ListRow title="Name Servers" list={nameservers} /> }
-    </Outer>
+    </Card>
   );
 }
 
-export default ServerInfoCard;
+export default WhoIsCard;