extern/web-check
1
0
Fork 0
mirror of https://github.com/Lissy93/web-check.git synced 2025-01-10 08:19:28 +01:00
Code Issues Packages Projects Releases Wiki Activity

Updates title sizes

Browse Source
This commit is contained in:
Alicia Sykes 2023-06-24 16:42:43 +01:00
parent bc15c94315
commit e0ffc8e418
14 changed files with 73 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/Form/Heading.tsx
View File

@ -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 'small': return `font-size: ${TextSizes.medium};`;
case 'xSmall': return `font-size: ${TextSizes.xSmall};`;
case 'small': return `font-size: ${TextSizes.small};`;
case 'medium': return `font-size: ${TextSizes.large};`;
case 'large': return `font-size: ${TextSizes.xLarge};`;
}

22
src/components/Form/Row.tsx
View File

@ -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>

4
src/components/Results/BuiltWith.tsx
View File

@ -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} />

2
src/components/Results/Cookies.tsx
View File

@ -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>
}

34
src/components/Results/DnsRecords.tsx Normal file
View File

@ -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;

2
src/components/Results/Headers.tsx
View File

@ -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 (

4
src/components/Results/HostNames.tsx
View File

@ -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>

2
src/components/Results/Lighthouse.tsx
View File

@ -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) => {

4
src/components/Results/RobotsTxt.tsx
View File

@ -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>

3
src/components/Results/Screenshot.tsx
View File

@ -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>
);

2
src/components/Results/ServerInfo.tsx
View File

@ -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} /> }

2
src/components/Results/ServerLocation.tsx
View File

@ -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>

4
src/components/Results/SslCert.tsx
View File

@ -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} /> }

2
src/components/Results/WhoIs.tsx
View File

@ -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)} /> }