Merge pull request #473 from homotechsual/react

Styling/layout improvements

src/components/cipp/CippDatatable.js

@@ -87,6 +87,10 @@ export default function CippDatatable({
  sortFocus: {
  default: 'var(--cipp-table-sort-focus-bg)',
  },
+ highlightOnHover: {
+ default: 'var(--cipp-table-highlight-on-hover-bg)',
+ text: 'var(--cipp-table-highlight-on-hover-color)',
+ },
  striped: {
  default: 'var(--cipp-table-striped-bg)',
  text: 'var(--cipp-table-striped-color)',

src/components/cipp/PdfButton.js

@@ -3,6 +3,8 @@ import { CButton } from '@coreui/react'
 import jsPDF from 'jspdf'
 import 'jspdf-autotable'
 import PropTypes from 'prop-types'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faFilePdf } from '@fortawesome/free-solid-svg-icons'
 
 function ExportPDFButton(props) {
  const exportPDF = (pdfData, pdfHeaders, pdfSize = 'A4', reportName) => {
@@ -40,10 +42,10 @@ function ExportPDFButton(props) {
  return (
  <CButton
  size="sm"
- className="text-white m-1"
+ className="m-1"
  onClick={() => exportPDF(props.pdfData, props.pdfHeaders, props.pdfSize, props.reportName)}
  >
- PDF
+ <FontAwesomeIcon icon={faFilePdf} className='pe-1' size='lg' />PDF
  </CButton>
  )
 }

src/components/cipp/StatusIcon.js

@@ -14,20 +14,41 @@ const IconWarning = () => (
 )
 
 function StatusIcon(props) {
- const finalState = props.finalState
- if (finalState === 'Pass') {
- return <IconGreenCheck />
- } else if (finalState === 'Fail') {
- return <IconRedX />
- } else if (finalState === 'Warn') {
- return <IconWarning />
- } else {
- return ''
+ if (props.type === 'finalstate') {
+ const finalState = props.finalState
+ if (finalState === 'Pass') {
+ return <IconGreenCheck />
+ } else if (finalState === 'Fail') {
+ return <IconRedX />
+ } else if (finalState === 'Warn') {
+ return <IconWarning />
+ } else {
+ return ''
+ }
+ } else if (props.type === 'boolean') {
+ const status = props.status
+ if (status === true) {
+ return <IconGreenCheck />
+ } else if (status === false) {
+ return <IconRedX />
+ } else {
+ return ''
+ }
+ } else if (props.type === 'negatedboolean') {
+ const status = props.status
+ if (status === false) {
+ return <IconGreenCheck />
+ } else if (status === true) {
+ return <IconRedX />
+ } else {
+ return ''
+ }
  }
 }
 
 export default StatusIcon
 
 StatusIcon.propTypes = {
  finalState: PropTypes.string,
+ status: PropTypes.bool,
 }