Updates title sizes

src/components/Form/Heading.tsx

@@ -17,6 +17,7 @@ const StyledHeading = styled.h1<HeadingProps>`
   display: flex;
   gap: 1rem;
   align-items: center;
+  font-size: ${TextSizes.medium};
   img { // Some titles have an icon
     width: 2rem;
     border-radius: 4px;
@@ -27,8 +28,8 @@ const StyledHeading = styled.h1<HeadingProps>`
   }
   ${props => {
     switch (props.size) {
-      case 'xSmall': return `font-size: ${TextSizes.small};`;
+      case 'xSmall': return `font-size: ${TextSizes.xSmall};`;
-      case 'small': return `font-size: ${TextSizes.medium};`;
+      case 'small': return `font-size: ${TextSizes.small};`;
       case 'medium': return `font-size: ${TextSizes.large};`;
       case 'large': return `font-size: ${TextSizes.xLarge};`;
     }

src/components/Form/Row.tsx

@@ -1,11 +1,13 @@
+import { ReactNode } from 'react';
 import styled from 'styled-components';
 import colors from 'styles/colors';
+import Heading from 'components/Form/Heading';
 
 export interface RowProps {
   lbl: string,
   val: string,
   key?: string,
-  children?: JSX.Element[],
+  children?: ReactNode,
   rowList?: RowProps[],
   title?: string,
 }
@@ -100,12 +102,28 @@ export const ExpandableRow = (props: RowProps) => {
   );
 };
 
+export const ListRow = (props: { list: string[], title: string }) => {
+  const { list, title } = props;
+  return (
+  <>
+    <Heading as="h4" size="small" align="left" color={colors.primary}>{title}</Heading>
+    { list.map((entry: string, index: number) => {
+      return (
+      <Row lbl="" val="" key={`${title.toLocaleLowerCase()}-${index}`}>
+        <span>{ entry }</span>
+      </Row>
+      )}
+    )}
+  </>
+);
+}
+
 const Row = (props: RowProps) => {
   const { lbl, val, key, title, children } = props;
   if (children) return <StyledRow key={key}>{children}</StyledRow>;
   return (
   <StyledRow key={key}>
-    <span className="lbl" title={title}>{lbl}</span>
+    { lbl && <span className="lbl" title={title}>{lbl}</span> }
     <span className="val" title={val} onClick={() => copyToClipboard(val)}>
       {formatValue(val)}
     </span>

src/components/Results/BuiltWith.tsx

@@ -37,7 +37,7 @@ const ListRow = (props: { list: Technology[], title: string }) => {
   const { list, title } = props;
   return (
   <>
-    <Heading as="h3" size="small" align="left" color={colors.primary}>{title}</Heading>
+    <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>
@@ -52,7 +52,7 @@ const BuiltWithCard = (props: { technologies: TechnologyGroup[] }): JSX.Element
   const { technologies } = props;
   return (
     <Outer>
-      <Heading as="h3" size="small" align="left" color={colors.primary}>Technologies</Heading>
+      <Heading as="h3" align="left" color={colors.primary}>Technologies</Heading>
       { technologies.map((group: TechnologyGroup) => {
         return (
           <ListRow key={group.tag} title={group.tag} list={group.technologies} />

src/components/Results/Cookies.tsx

@@ -11,7 +11,7 @@ const CookiesCard = (props: { cookies: any }): JSX.Element => {
   const cookies = props.cookies;
   return (
     <Outer>
-      <Heading as="h3" size="small" align="left" color={colors.primary}>Cookies</Heading>
+      <Heading as="h3" align="left" color={colors.primary}>Cookies</Heading>
       {
         cookies.length === 0 && <p>No cookies found.</p>
       }

src/components/Results/DnsRecords.tsx

@@ -0,0 +1,34 @@
+
+import styled from 'styled-components';
+import colors from 'styles/colors';
+import Card from 'components/Form/Card';
+import Heading from 'components/Form/Heading';
+import Row, { ListRow, RowProps }  from 'components/Form/Row';
+
+const Outer = styled(Card)`
+  .content {
+    max-height: 28rem;
+    overflow-y: auto;
+  }
+`;
+
+const DnsRecordsCard = (props: { dnsRecords: any }): JSX.Element => {
+  const dnsRecords = props.dnsRecords;
+  return (
+    <Outer>
+      <Heading as="h3" align="left" color={colors.primary}>DNS Records</Heading>
+      <div className="content">
+      { dnsRecords.A && <Row lbl="A" val={dnsRecords.A.address} /> }
+      { dnsRecords.AAAA?.length > 0 && <ListRow title="AAAA" list={dnsRecords.AAAA} /> }
+      { dnsRecords.MX?.length > 0 && <ListRow title="MX" list={dnsRecords.MX} /> }
+      { dnsRecords.CNAME?.length > 0 && <ListRow title="CNAME" list={dnsRecords.CNAME} /> }
+      { dnsRecords.NS?.length > 0 && <ListRow title="NS" list={dnsRecords.NS} /> }
+      { dnsRecords.PTR?.length > 0 && <ListRow title="PTR" list={dnsRecords.PTR} /> }
+      { dnsRecords.SOA?.length > 0 && <ListRow title="SOA" list={dnsRecords.SOA} /> }
+      </div>
+    </Outer>
+  );
+}
+
+export default DnsRecordsCard;
+

src/components/Results/Headers.tsx

@@ -13,7 +13,7 @@ const HeadersCard = (props: { headers: any }): JSX.Element => {
   const headers = props.headers;
   return (
     <Outer>
-      <Heading as="h3" size="small" align="left" color={colors.primary}>Headers</Heading>
+      <Heading as="h3" align="left" color={colors.primary}>Headers</Heading>
       {
         Object.keys(headers).map((header: string, index: number) => {
           return (

src/components/Results/HostNames.tsx

@@ -6,7 +6,7 @@ import Card from 'components/Form/Card';
 import Heading from 'components/Form/Heading';
 
 const Outer = styled(Card)`
-  max-height: 20rem;
+  max-height: 28rem;
   overflow: auto;
 `;
 
@@ -22,7 +22,7 @@ const HostListSection = (props: { list: string[], title: string }) => {
   const { list, title } = props;
   return (
   <>
-    <Heading as="h3" size="small" align="left" color={colors.primary}>{title}</Heading>
+    <Heading as="h3" align="left" color={colors.primary}>{title}</Heading>
     { list.map((entry: string, index: number) => {
       return (
       <Row key={`${title.toLocaleLowerCase()}-${index}`}><span>{ entry }</span></Row>

src/components/Results/Lighthouse.tsx

@@ -95,7 +95,7 @@ const LighthouseCard = (props: { lighthouse: any }): JSX.Element => {
 
   return (
     <Outer>
-      <Heading as="h3" size="small" align="left" color={colors.primary}>Performance</Heading>
+      <Heading as="h3" align="left" color={colors.primary}>Performance</Heading>
       { 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) => {

src/components/Results/RobotsTxt.tsx

@@ -7,7 +7,7 @@ import Row, { RowProps }  from 'components/Form/Row';
 
 const Outer = styled(Card)`
   .content {
-    max-height: 20rem;
+    max-height: 28rem;
     overflow-y: auto;
   }
 `;
@@ -15,7 +15,7 @@ const Outer = styled(Card)`
 const RobotsTxtCard = (props: { robotTxt: RowProps[] }): JSX.Element => {
   return (
     <Outer>
-      <Heading as="h3" size="small" align="left" color={colors.primary}>Crawl Rules</Heading>
+      <Heading as="h3" align="left" color={colors.primary}>Crawl Rules</Heading>
       <div className="content">
       {
         props.robotTxt.length === 0 && <p>No crawl rules found.</p>

src/components/Results/Screenshot.tsx

@@ -10,13 +10,14 @@ max-height: 28rem;
 img {
   border-radius: 6px;
   width: 100%;
+  margin 0.5rem 0;;
 }
 `;
 
 const ScreenshotCard = (props: { screenshot: string }): JSX.Element => {
   return (
     <Outer>
-      <Heading as="h3" size="small" align="left" color={colors.primary}>Screenshot</Heading>
+      <Heading as="h3" align="left" color={colors.primary}>Screenshot</Heading>
       <img src={props.screenshot} alt="Full page screenshot" />
     </Outer>
   );

src/components/Results/ServerInfo.tsx

@@ -12,7 +12,7 @@ const ServerInfoCard = (info: ServerInfo): JSX.Element => {
   const { org, asn, isp, os, ports, ip, loc, type } = info;
   return (
     <Outer>
-      <Heading as="h3" size="small" align="left" color={colors.primary}>Server Info</Heading>
+      <Heading as="h3" align="left" color={colors.primary}>Server Info</Heading>
       { org && <Row lbl="Organization" val={org} /> }
       { (isp && isp !== org) && <Row lbl="Service Provider" val={isp} /> }
       { os && <Row lbl="Operating System" val={os} /> }

src/components/Results/ServerLocation.tsx

@@ -40,7 +40,7 @@ const ServerLocationCard = (location: ServerLocation): JSX.Element => {
 
   return (
     <Outer>
-      <Heading as="h3" size="small" align="left" color={colors.primary}>Location</Heading>
+      <Heading as="h3" align="left" color={colors.primary}>Location</Heading>
       <Row lbl="City" val={`${postCode}, ${city}, ${region}`} />
       <Row lbl="" val="">
         <b>Country</b>

src/components/Results/SslCert.tsx

@@ -70,7 +70,7 @@ const ListRow = (props: { list: string[], title: string }) => {
   const { list, title } = props;
   return (
   <>
-    <Heading as="h3" size="small" align="left" color={colors.primary}>{title}</Heading>
+    <Heading as="h3" align="left" color={colors.primary}>{title}</Heading>
     { list.map((entry: string, index: number) => {
       return (
       <Row key={`${title.toLocaleLowerCase()}-${index}`}><span>{ entry }</span></Row>
@@ -84,7 +84,7 @@ const SslCertCard = (props: { sslCert: any }): JSX.Element => {
   const { subject, issuer, fingerprint, serialNumber, asn1Curve, nistCurve, valid_to, valid_from, ext_key_usage } = props.sslCert;
   return (
     <Outer>
-      <Heading as="h3" size="small" align="left" color={colors.primary}>SSL Info</Heading>
+      <Heading as="h3" align="left" color={colors.primary}>SSL Info</Heading>
       { subject && <DataRow lbl="Subject" val={subject?.CN} /> }
       { issuer?.O && <DataRow lbl="Issuer" val={issuer.O} /> }
       

src/components/Results/WhoIs.tsx

@@ -59,7 +59,7 @@ const ServerInfoCard = (whois: Whois): JSX.Element => {
   const { created, updated, expires, nameservers } = whois;
   return (
     <Outer>
-      <Heading as="h3" size="small" align="left" color={colors.primary}>Who Is Info</Heading>
+      <Heading as="h3" align="left" color={colors.primary}>Who Is Info</Heading>
       { created && <DataRow lbl="Created" val={formatDate(created)} /> }
       { updated && <DataRow lbl="Updated" val={formatDate(updated)} /> }
       { expires && <DataRow lbl="Expires" val={formatDate(expires)} /> }