Merge pull request #1356 from guardicore/numbered-report-section-component

UI: Use CSS instead of style for FontAwesomeIcon in Reports
This commit is contained in:
VakarisZ 2021-07-23 08:54:16 +03:00 committed by GitHub
commit d03c4ebb01
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 58 additions and 0 deletions

View File

@ -0,0 +1,41 @@
import React, {ReactFragment, ReactElement} from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {faInfoCircle} from '@fortawesome/free-solid-svg-icons';
type Props = {
index: number,
title: string,
description: string,
body: ReactFragment
}
function NumberedReportSection(props: Props): ReactElement {
return (
<div className='numbered-report-section'>
<Header index={props.index} title={props.title} />
<div className='indented'>
<Description text={props.description} />
{props.body}
</div>
</div>
)
}
function Header({index, title}: {index: number, title: string}): ReactElement {
return (
<h2>{index}. {title}</h2>
)
}
function Description({text}: {text: string}): ReactElement {
return (
<div className='alert alert-secondary description'>
<FontAwesomeIcon icon={faInfoCircle} className='alert-icon'/>
<span>
{text}
</span>
</div>
)
}
export default NumberedReportSection;

View File

@ -1,3 +1,20 @@
.ransomware-report .report-section-header {
margin-top: 40px;
}
.numbered-report-section {
margin-top: 2.5em;
margin-bottom: 2.5em;
}
.numbered-report-section .indented {
padding-left: 2em;
}
.numbered-report-section .description {
display: flex
}
.numbered-report-section .alert-icon {
margin-top: .28em;
margin-right: .5em;
}