andrea.morten/web-check-2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update homepage and about page

Browse Source
This commit is contained in:
Alicia Sykes
2023-07-29 19:42:20 +01:00
parent d6da8e123e
commit db3322856b
5 changed files with 32 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Form/Card.tsx
View File

@@ -30,7 +30,7 @@ export const Card = (props: CardProps): JSX.Element => {
<ErrorBoundary title={heading}>
<StyledCard styles={styles}>
{ actionButtons && actionButtons }
{ heading && <Heading as="h3" align="left" color={colors.primary}>{heading}</Heading> }
{ heading && <Heading className="inner-heading" as="h3" align="left" color={colors.primary}>{heading}</Heading> }
{children}
</StyledCard>
</ErrorBoundary>

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

@@ -10,6 +10,7 @@ interface HeadingProps {
inline?: boolean;
children: React.ReactNode;
id?: string;
className?: string;
};
const StyledHeading = styled.h1<HeadingProps>`
@@ -47,10 +48,14 @@ const StyledHeading = styled.h1<HeadingProps>`
${props => props.inline ? 'display: inline;' : '' }
`;
const makeAnchor = (title: string): string => {
return title.toLowerCase().replace(/[^\w\s]|_/g, "").replace(/\s+/g, "-");
};
const Heading = (props: HeadingProps): JSX.Element => {
const { children, as, size, align, color, inline, id } = props;
const { children, as, size, align, color, inline, id, className } = props;
return (
<StyledHeading as={as} size={size} align={align} color={color} inline={inline} id={id}>
<StyledHeading as={as} size={size} align={align} color={color} inline={inline} className={className} id={id || makeAnchor((children || '')?.toString())}>
{children}
</StyledHeading>
);

4
src/components/misc/AdditionalResources.tsx
View File

@@ -8,7 +8,7 @@ margin: 0;
padding: 1rem;
display: grid;
gap: 0.5rem;
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
li a.resource-wrap {
display: flex;
align-items: start;
@@ -192,7 +192,7 @@ const resources = [
];
const makeLink = (resource: any, scanUrl: string | undefined): string => {
return (scanUrl && resource.searchLink) ? resource.searchLink.replaceAll('{URL}', scanUrl.replace('https://', '')) : '#';
return (scanUrl && resource.searchLink) ? resource.searchLink.replaceAll('{URL}', scanUrl.replace('https://', '')) : resource.link;
};
const AdditionalResources = (props: { url?: string }): JSX.Element => {