Adds nav component, intrgrates about page, improved error handling, removed unused features

src/components/Form/Heading.tsx

@@ -9,6 +9,7 @@ interface HeadingProps {
   size?: 'xSmall' | 'small' | 'medium' | 'large';
   inline?: boolean;
   children: React.ReactNode;
+  id?: string;
 };
 
 const StyledHeading = styled.h1<HeadingProps>`
@@ -46,9 +47,9 @@ const StyledHeading = styled.h1<HeadingProps>`
 `;
 
 const Heading = (props: HeadingProps): JSX.Element => {
-  const { children, as, size, align, color, inline } = props;
+  const { children, as, size, align, color, inline, id } = props;
   return (
-    <StyledHeading as={as} size={size} align={align} color={color} inline={inline}>
+    <StyledHeading as={as} size={size} align={align} color={color} inline={inline} id={id}>
       {children}
     </StyledHeading>
   );

src/components/Form/Modal.tsx

@@ -43,6 +43,9 @@ const ModalWindow = styled.div`
     0% {opacity: 0; transform: scale(0.9);}
     100% {opacity: 1; transform: scale(1);}
   }
+  pre {
+    white-space: break-spaces;
+  }
 `;
 
 const Modal: React.FC<ModalProps> = ({ children, isOpen, closeModal }) => {

src/components/Form/Nav.tsx

@@ -0,0 +1,30 @@
+import styled from 'styled-components';
+
+import { StyledCard } from 'components/Form/Card';
+import Heading from 'components/Form/Heading';
+import colors from 'styles/colors';
+import { ReactNode } from 'react';
+
+const Header = styled(StyledCard)`
+  margin: 1rem;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: space-between;
+  padding: 0.5rem 1rem;
+  align-items: center;
+`;
+
+const Nav = (props: { children?: ReactNode}) => {
+  return (
+    <Header as="header">
+    <Heading color={colors.primary} size="large">
+      <img width="64" src="/web-check.png" alt="Web Check Icon" />
+      <a href="/">Web Check</a>
+    </Heading>
+      {props.children && props.children}
+  </Header>
+  );
+};
+
+export default Nav;

src/components/Results/DnsRecords.tsx

@@ -2,8 +2,10 @@ import { Card } from 'components/Form/Card';
 import Row, { ListRow }  from 'components/Form/Row';
 
 const styles = `
+  grid-row: span 2;
   .content {
-    max-height: 32rem;
+    max-height: 50rem;
+    overflow-x: hidden;
     overflow-y: auto;
   }
 `;

src/components/Results/Screenshot.tsx

@@ -2,7 +2,8 @@ import { Card } from 'components/Form/Card';
 
 const cardStyles = `
   overflow: auto;
-  max-height: 32rem;
+  max-height: 40rem;
+  grid-row: span 2;
   img {
     border-radius: 6px;
     width: 100%;

src/components/Results/ServerLocation.tsx

@@ -7,7 +7,7 @@ import Flag from 'components/misc/Flag';
 import { TextSizes } from 'styles/typography';
 import Row, { StyledRow } from 'components/Form/Row';
 
-const cardStyles = 'grid-row: span 2';
+const cardStyles = '';
 
 const SmallText = styled.span`
   opacity: 0.5;

src/components/Results/SiteFeatures.tsx

@@ -1,6 +1,6 @@
 import { Card } from 'components/Form/Card';
 import colors from 'styles/colors';
-import Row, { ListRow }  from 'components/Form/Row';
+import Row from 'components/Form/Row';
 import Heading  from 'components/Form/Heading';
 
 const styles = `
@@ -17,7 +17,12 @@ const styles = `
 `;
 
 const formatDate = (timestamp: number): string => {
+  if (isNaN(timestamp) || timestamp <= 0) return 'No Date';
+
   const date = new Date(timestamp * 1000);
+
+  if (isNaN(date.getTime())) return 'Unknown';
+
   const formatter = new Intl.DateTimeFormat('en-GB', {
     day: 'numeric',
     month: 'long',
@@ -26,16 +31,18 @@ const formatDate = (timestamp: number): string => {
     minute: '2-digit',
     hour12: true
   });
+
   return formatter.format(date);
 }
 
 
+
 const SiteFeaturesCard = (props: { data: any, title: string, actionButtons: any }): JSX.Element => {
   const features = props.data;
   return (
     <Card heading={props.title} actionButtons={props.actionButtons} styles={styles}>
       <div className="content">
-        { features.groups.filter((group: any) => group.categories.length > 0).map((group: any, index: number) => (
+        { (features?.groups || []).filter((group: any) => group.categories.length > 0).map((group: any, index: number) => (
           <div key={`${group.name}-${index}`}>
           <Heading as="h4" size="small" color={colors.primary}>{group.name}</Heading>
           { group.categories.map((category: any, subIndex: number) => (

src/components/misc/ProgressBar.tsx

@@ -83,6 +83,10 @@ const StatusInfoWrapper = styled.div`
   }
 `;
 
+const AboutPageLink = styled.a`
+  color: ${colors.primary};
+`;
+
 const SummaryContainer = styled.div`
   margin: 0.5rem 0;
   b {
@@ -178,24 +182,24 @@ export interface LoadingJob {
 
 const jobNames = [
   'get-ip',
+  'location',
   'ssl',
   'dns',
-  'cookies',
-  'robots-txt',
-  'headers',
-  'lighthouse',
-  'location',
+  'whois',
   'hosts',
+  'lighthouse',
+  'cookies',
+  'trace-route',
+  'server-info',
   'redirects',
-  'txt-records',
+  'robots-txt',
+  'dnssec',
   'status',
   'ports',
-  'trace-route',
-  'carbon',
-  'server-info',
-  'whois',
+  'txt-records',
   'features',
-  'dnssec',
+  'carbon',
+  'headers',
 ] as const;
 
 export const initialJobs = jobNames.map((job: string) => {
@@ -283,7 +287,7 @@ const SummaryText = (props: { state: LoadingJob[], count: number }): JSX.Element
   if (loadingTasksCount > 0) {
     return (
       <SummaryContainer className="loading-info">
-        <b>Loading {loadingTasksCount} / {totalJobs} Jobs</b>
+        <b>Loading {totalJobs - loadingTasksCount} / {totalJobs} Jobs</b>
         {skippedInfo}
       </SummaryContainer>
     );
@@ -409,6 +413,7 @@ const ProgressLoader = (props: { loadStatus: LoadingJob[], showModal: (err: Reac
           It's normal for some jobs to fail, either because the host doesn't return the required info,
           or restrictions in the lambda function, or hitting an API limit.
         </p>}
+        <AboutPageLink href="/about" target="_blank" rel="noreferer" >Learn More about Web-Check</AboutPageLink>
     </Details>
     <DismissButton onClick={() => setHideLoader(true)}>Dismiss</DismissButton>
   </LoadCard>