forked from p15670423/monkey
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:
commit
d03c4ebb01
|
@ -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;
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue