@cdc/core 4.24.10 → 4.24.11

package/components/AdvancedEditor/AdvancedEditor.tsx

@@ -6,6 +6,7 @@ import { FilterFunction, JsonEditor, UpdateFunction } from 'json-edit-react'
 import { formatConfigBeforeSave as stripConfig } from '../../helpers/formatConfigBeforeSave'
 import './advanced-editor-styles.css'
 import _ from 'lodash'
+import Tooltip from '../ui/Tooltip'
 
 export const AdvancedEditor = ({ loadConfig, config, convertStateToConfig, onExpandCollapse = () => {} }) => {
   const [advancedToggle, _setAdvancedToggle] = useState(false)
@@ -37,7 +38,11 @@ export const AdvancedEditor = ({ loadConfig, config, convertStateToConfig, onExp
     chart: ['Charts', 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/bar-chart.html', <ChartIcon />],
     dashboard: ['Dashboard', 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/bar-chart.html', <ChartIcon />],
     map: ['Maps', 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/data-map.html', <MapIcon />],
-    'markup-include': ['Markup Include', 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/Markup-Include.html', <MarkupIncludeIcon />]
+    'markup-include': [
+      'Markup Include',
+      'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/Markup-Include.html',
+      <MarkupIncludeIcon />
+    ]
   }
 
   if (!config.type) return <></>
@@ -63,25 +68,24 @@ export const AdvancedEditor = ({ loadConfig, config, convertStateToConfig, onExp
               </div>
             </section>
             <p className='pb-2'>
-              This tool displays the actual <acronym title='JavaScript Object Notation'>JSON</acronym> configuration that is generated by this editor and allows you to edit properties directly and apply them.
+              This tool displays the actual <acronym title='JavaScript Object Notation'>JSON</acronym> configuration
+              that is generated by this editor and allows you to edit properties directly and apply them.
             </p>
+            <JsonEditor
+              className='advanced-json-editor'
+              data={configTextboxValue}
+              onUpdate={onUpdate}
+              rootName=''
+              collapse={collapseFields}
+            />
             <button
-              className='btn '
-              onClick={() => {
-                navigator.clipboard.writeText(JSON.stringify(configTextboxValue))
-              }}
-            >
-              Copy to Clipboard
-            </button>
-            <JsonEditor className='advanced-json-editor' data={configTextboxValue} onUpdate={onUpdate} rootName='' collapse={collapseFields} />
-            <button
-              className='btn full-width'
+              className='btn btn-success m-2 p-2'
               onClick={() => {
                 loadConfig(configTextboxValue)
                 setAdvancedToggle(!advancedToggle)
               }}
             >
-              Apply
+              Apply Configuration Changes
             </button>
           </React.Fragment>
         )}

package/components/Alert/components/Alert.tsx

@@ -1,7 +1,7 @@
 import Icon from '../../ui/Icon'
 
 import DOMPurify from 'dompurify'
-import React from 'react'
+import React, { useEffect } from 'react'
 
 import './Alert.styles.css'
 
@@ -14,10 +14,31 @@ type AlertProps = {
   iconSize?: number
   // heading for the alert box
   heading?: string
+  // dismiss function
+  onDismiss?: Function
+  // make the alert dismiss on it's own
+  autoDismiss?: boolean
+  // set seconds until autoDismiss, default is 5 seconds
+  secondsBeforeDismiss?: number
 }
 
-const Alert: React.FC<AlertProps> = ({ type = 'info', message = '', iconSize = 21, heading }) => {
+const Alert: React.FC<AlertProps> = ({
+  type = 'info',
+  message = '',
+  iconSize = 21,
+  heading,
+  onDismiss,
+  autoDismiss,
+  secondsBeforeDismiss = 5
+}) => {
   // sanitize the text for setting dangerouslySetInnerHTML
+
+  useEffect(() => {
+    if (autoDismiss) {
+      setTimeout(() => onDismiss(), secondsBeforeDismiss * 1000)
+    }
+  }, [])
+
   const sanitizedData = () => ({
     __html: DOMPurify.sanitize(message)
   })
@@ -26,12 +47,17 @@ const Alert: React.FC<AlertProps> = ({ type = 'info', message = '', iconSize = 2
   const styleResets = { width: 'unset', height: 'unset', paddingRight: '5px' }
 
   return (
-    <div className={`alert alert-${type} p-1`} role='alert'>
-      {heading && <h4 className='alert-heading'>{heading}</h4>}
-      {type === 'success' && <Icon display='check' size={iconSize} />}
-      {type === 'danger' && <Icon display='warningCircle' size={iconSize} />}
-      {type === 'info' && <Icon display='info' size={iconSize} />}
-      <span dangerouslySetInnerHTML={sanitizedData()} />
+    <div className={`alert alert-${type} p-1 d-flex justify-content-between`} role='alert'>
+      <div className='d-flex'>
+        {heading && <h4 className='alert-heading'>{heading}</h4>}
+        {type === 'success' && <Icon display='check' size={iconSize} />}
+        {type === 'danger' && <Icon display='warningCircle' size={iconSize} />}
+        {type === 'info' && <Icon display='info' size={iconSize} />}
+        <span dangerouslySetInnerHTML={sanitizedData()} />
+      </div>
+      <button type='button' className='close pl-5' aria-label='Close' onClick={() => onDismiss()}>
+        X
+      </button>
     </div>
   )
 }

package/components/DataTable/DataTable.tsx

@@ -22,6 +22,7 @@ import { Column } from '../../types/Column'
 import { pivotData } from '../../helpers/pivotData'
 import { isLegendWrapViewport } from '@cdc/core/helpers/viewports'
 import './data-table.css'
+import _ from 'lodash'
 
 export type DataTableProps = {
   applyLegendToRow?: Function
@@ -73,9 +74,14 @@ const DataTable = (props: DataTableProps) => {
   const runtimeData = useMemo(() => {
     const data = removeNullColumns(parentRuntimeData)
     if (config.table.pivot) {
+      const excludeColumns = Object.values(config.columns || {})
+        .filter(column => column.dataTable === false)
+        .map(col => col.name)
       const { columnName, valueColumns } = config.table.pivot
       if (columnName && valueColumns) {
-        return pivotData(data, columnName, valueColumns)
+        // remove excluded columns so that they aren't included in the pivot calculation
+        const _data = data.map(row => _.omit(row, excludeColumns))
+        return pivotData(_data, columnName, valueColumns)
       }
     }
     return data
@@ -84,7 +90,7 @@ const DataTable = (props: DataTableProps) => {
   const [expanded, setExpanded] = useState(expandDataTable)
 
   const [sortBy, setSortBy] = useState<any>({
-    column: config.type === 'map' ? 'geo' : 'date',
+    column: '',
     asc: false,
     colIndex: null
   })
@@ -200,6 +206,7 @@ const DataTable = (props: DataTableProps) => {
         : config.runtime?.seriesKeys),
     [config.runtime?.seriesKeys]) // eslint-disable-line
 
+  const hasNoData = runtimeData.length === 0
   if (config.visualizationType !== 'Box Plot') {
     const getDownloadData = () => {
       // only use fullGeoName on County maps and no other
@@ -263,6 +270,7 @@ const DataTable = (props: DataTableProps) => {
               preliminaryData={config.preliminaryData}
               viewport={viewport}
               wrapColumns={wrapColumns}
+              noData={hasNoData}
               childrenMatrix={
                 config.type === 'map'
                   ? mapCellMatrix({ rows, wrapColumns, ...props, runtimeData, viewport })
@@ -306,6 +314,7 @@ const DataTable = (props: DataTableProps) => {
                   viewport={viewport}
                   wrapColumns={wrapColumns}
                   childrenMatrix={regionCellMatrix({ config })}
+                  noData={hasNoData}
                   tableName={config.visualizationType}
                   caption='Table of the highlighted regions in the visualization'
                   headContent={
@@ -343,6 +352,7 @@ const DataTable = (props: DataTableProps) => {
               viewport={viewport}
               wrapColumns={wrapColumns}
               childrenMatrix={boxplotCellMatrix({ rows: tableData, config })}
+              noData={hasNoData}
               tableName={config.visualizationType}
               caption={caption}
               stickyHeader

package/components/DataTable/data-table.css

@@ -211,33 +211,15 @@ table.data-table {
     }
     button {
       background: var(--mediumGray);
-      padding: 0.6rem 0.8rem;
       &:hover {
         background: lighten(var(--mediumGray), 5%);
       }
     }
-    button.btn-next {
-      &::before {
-        content: ' ';
-        background-image: url(../assets/icon-caret-filled-up.svg);
-        background-size: 10px 5px;
-        width: 10px;
-        height: 5px;
-        display: block;
-        transform: rotate(90deg);
-      }
-    }
-    button.btn-prev {
-      &::before {
-        content: ' ';
-        background-image: url(../assets/icon-caret-filled-up.svg);
-        background-size: 10px 5px;
-        width: 10px;
-        height: 5px;
-        display: block;
-        transform: rotate(-90deg);
-      }
+
+    button.btn svg {
+      margin: 0px 0 3px 0;
     }
+
     button[disabled] {
       background: var(--mediumGray);
       opacity: 0.3;

package/components/DataTable/helpers/boxplotCellMatrix.tsx

@@ -16,7 +16,7 @@ const boxplotCellMatrix = ({ rows, config }): CellMatrix => {
       columnThirdQuartile: labels.q3,
       columnOutliers: labels.outliers,
       values: labels.values,
-      columnTotal: labels.total,
+      columnCount: labels.count,
       columnSd: 'Standard Deviation',
       nonOutlierValues: 'Non Outliers',
       columnLowerBounds: labels.lowerBounds,
@@ -28,30 +28,31 @@ const boxplotCellMatrix = ({ rows, config }): CellMatrix => {
     return resolvedName
   }
   let resolveCell = (rowid, plot) => {
-    if (Number(rowid) === 0) return true
-    if (Number(rowid) === 1) return plot.columnMax
-    if (Number(rowid) === 2) return plot.columnThirdQuartile
-    if (Number(rowid) === 3) return plot.columnMedian
-    if (Number(rowid) === 4) return plot.columnFirstQuartile
-    if (Number(rowid) === 5) return plot.columnMin
-    if (Number(rowid) === 6) return plot.columnTotal
-    if (Number(rowid) === 7) return plot.columnSd
-    if (Number(rowid) === 8) return plot.columnMean
-    if (Number(rowid) === 9) return plot.columnOutliers.length > 0 ? plot.columnOutliers.toString() : '-'
-    if (Number(rowid) === 10) return plot.values.length > 0 ? plot.values.toString() : '-'
+    if (Number(rowid) === 0) return plot.columnMax
+    if (Number(rowid) === 1) return plot.columnThirdQuartile
+    if (Number(rowid) === 2) return plot.columnMedian
+    if (Number(rowid) === 3) return plot.columnFirstQuartile
+    if (Number(rowid) === 4) return plot.columnMin
+    if (Number(rowid) === 5) return plot.columnCount
+    if (Number(rowid) === 6) return plot.columnSd
+    if (Number(rowid) === 7) return plot.columnMean
+    if (Number(rowid) === 8) return plot.columnOutliers.length > 0 ? plot.columnOutliers.toString() : '-'
+    if (Number(rowid) === 9) return plot.values.length > 0 ? plot.values.toString() : '-'
     return <p>-</p>
   }
   // get list of data keys for each row
   let dataKeys = rows.map(row => {
     return row[0]
   })
+
   let columns = ['Measures', ...config.boxplot.categories]
   dataKeys.shift() // remove index 0 // we did header column separately
+
   return dataKeys.map((rowkey, index) => {
     return columns.map((column, colnum) => {
       let cellValue
       if (column === 'Measures') {
-        let labelValue = index > 0 ? resolveName(rowkey) : ''
+        let labelValue = resolveName(rowkey)
         cellValue = <>{labelValue}</>
       } else {
         cellValue = resolveCell(index, config.boxplot.plots[colnum - 1])

package/components/DataTable/helpers/getChartCellValue.ts

@@ -1,5 +1,5 @@
 import { parseDate, formatDate } from '@cdc/core/helpers/cove/date'
-import { formatNumber } from '@cdc/core/helpers/cove/number'
+import { formatNumber } from '../../../helpers/cove/number'
 import { TableConfig } from '../types/TableConfig'
 
 // if its additional column, return formatting params
@@ -32,7 +32,15 @@ export const getChartCellValue = (row: string, column: string, config: TableConf
   let labelValue = rowObj[column] // just raw X axis string
   if (column === config.xAxis?.dataKey) {
     // not the prettiest, but helper functions work nicely here.
-    cellValue = config.xAxis?.type === 'date' ? formatDate(config.table?.dateDisplayFormat || config.xAxis?.dateDisplayFormat, parseDate(config.xAxis?.dateParseFormat, labelValue)) : labelValue
+    cellValue =
+      config.xAxis?.type === 'date'
+        ? formatDate(
+            config.table?.dateDisplayFormat || config.xAxis?.dateDisplayFormat,
+            parseDate(config.xAxis?.dateParseFormat, labelValue)
+          )
+        : labelValue
+    cellValue =
+      config.xAxis?.type === 'continuous' ? formatNumber(runtimeData[row][column], 'bottom', false, config) : labelValue
   } else {
     let resolvedAxis = 'left'
     let leftAxisItems = config.series ? config.series.filter(item => item?.axis === 'Left') : []
@@ -48,9 +56,13 @@ export const getChartCellValue = (row: string, column: string, config: TableConf
 
     let addColParams = isAdditionalColumn(column, config)
     if (addColParams) {
-      cellValue = config.dataFormat ? formatNumber(runtimeData[row][column], resolvedAxis, false, config, addColParams) : runtimeData[row][column]
+      cellValue = config.dataFormat
+        ? formatNumber(runtimeData[row][column], resolvedAxis, false, config, addColParams)
+        : runtimeData[row][column]
     } else {
-      cellValue = config.dataFormat ? formatNumber(runtimeData[row][column], resolvedAxis, false, config) : runtimeData[row][column]
+      cellValue = config.dataFormat
+        ? formatNumber(runtimeData[row][column], resolvedAxis, false, config)
+        : runtimeData[row][column]
     }
   }
 
@@ -63,7 +75,13 @@ export const getChartCellValue = (row: string, column: string, config: TableConf
     const barSeriesExist = config.runtime?.barSeriesKeys?.includes(column)
     const lineSeriesExist = config.runtime?.lineSeriesKeys?.includes(column)
     const showSymbol = config.general.showSuppressedSymbol
-    if (isValueMatch && isColumnMatch && pd.displayTable && pd.type === 'suppression' && config.visualizationSubType !== 'stacked') {
+    if (
+      isValueMatch &&
+      isColumnMatch &&
+      pd.displayTable &&
+      pd.type === 'suppression' &&
+      config.visualizationSubType !== 'stacked'
+    ) {
       switch (config.visualizationType) {
         case 'Combo':
           cellValue = barSeriesExist && showSymbol ? pd.iconCode : lineSeriesExist && showSymbol ? pd.lineCode : ''

package/components/EditorPanel/ColumnsEditor.tsx

@@ -1,6 +1,6 @@
 import Tooltip from '../ui/Tooltip'
 import Icon from '../ui/Icon'
-import { TextField } from './Inputs'
+import { Select, TextField } from './Inputs'
 import { Visualization } from '../../types/Visualization'
 import { UpdateFieldFunc } from '../../types/UpdateFieldFunc'
 import { Column } from '../../types/Column'
@@ -16,7 +16,13 @@ interface ColumnsEditorProps {
 
 type OpenControls = [Record<string, boolean>, Function] // useState type
 
-const FieldSet: React.FC<ColumnsEditorProps & { colKey: string; controls: OpenControls }> = ({ config, deleteColumn, updateField, colKey, controls }) => {
+const FieldSet: React.FC<ColumnsEditorProps & { colKey: string; controls: OpenControls }> = ({
+  config,
+  deleteColumn,
+  updateField,
+  colKey,
+  controls
+}) => {
   const [openControls, setOpenControls] = controls
 
   const editColumn = (key, value) => {
@@ -63,43 +69,69 @@ const FieldSet: React.FC<ColumnsEditorProps & { colKey: string; controls: OpenCo
   const colName = config.columns[colKey]?.name
 
   return (
-    <FieldSetWrapper fieldName={colName} fieldKey={colKey} fieldType='Column' controls={controls} deleteField={() => deleteColumn(colKey)}>
-      <label>
-        <span className='edit-label column-heading'>Column</span>
-        <select
-          value={config.columns[colKey] ? config.columns[colKey].name : undefined}
-          onChange={event => {
-            changeName(event.target.value)
-          }}
-        >
-          {['-Select-', ...getColumns()].map(option => (
-            <option key={option}>{option}</option>
-          ))}
-        </select>
-      </label>
+    <FieldSetWrapper
+      fieldName={colName}
+      fieldKey={colKey}
+      fieldType='Column'
+      controls={controls}
+      deleteField={() => deleteColumn(colKey)}
+    >
+      <Select
+        label='Column'
+        value={config.columns[colKey]?.name}
+        fieldName='name'
+        section={'columns'}
+        initial={'-Select-'}
+        options={getColumns()}
+        updateField={(_section, _subsection, _fieldName, value) => changeName(value)}
+      />
       {config.type !== 'table' && (
-        <label>
-          <span className='edit-label column-heading'>Associate to Series</span>
-          <select
-            value={config.columns[colKey] ? config.columns[colKey].series : ''}
-            onChange={event => {
-              editColumn('series', event.target.value)
-            }}
-          >
-            <option value=''>Select series</option>
-            {(config.series || []).map(series => (
-              <option key={series.dataKey}>{series.dataKey}</option>
-            ))}
-          </select>
-        </label>
+        <Select
+          label='Associate to Series'
+          value={config.columns[colKey]?.series}
+          fieldName={'series'}
+          section='columns'
+          initial={'Select series'}
+          options={config.series?.map(series => series.dataKey) || []}
+          updateField={(_section, _subsection, _fieldName, value) => editColumn('series', value)}
+        />
       )}
 
-      <TextField value={config.columns[colKey].label} section='columns' subsection={colKey} fieldName='label' label='Label' updateField={updateField} />
+      <TextField
+        value={config.columns[colKey].label}
+        section='columns'
+        subsection={colKey}
+        fieldName='label'
+        label='Label'
+        updateField={updateField}
+      />
       <ul className='column-edit'>
         <li className='three-col'>
-          <TextField value={config.columns[colKey].prefix} section='columns' subsection={colKey} fieldName='prefix' label='Prefix' updateField={updateField} />
-          <TextField value={config.columns[colKey].suffix} section='columns' subsection={colKey} fieldName='suffix' label='Suffix' updateField={updateField} />
-          <TextField type='number' value={config.columns[colKey].roundToPlace} section='columns' subsection={colKey} fieldName='roundToPlace' label='Round' updateField={updateField} />
+          <TextField
+            value={config.columns[colKey].prefix}
+            section='columns'
+            subsection={colKey}
+            fieldName='prefix'
+            label='Prefix'
+            updateField={updateField}
+          />
+          <TextField
+            value={config.columns[colKey].suffix}
+            section='columns'
+            subsection={colKey}
+            fieldName='suffix'
+            label='Suffix'
+            updateField={updateField}
+          />
+          <TextField
+            type='number'
+            value={config.columns[colKey].roundToPlace}
+            section='columns'
+            subsection={colKey}
+            fieldName='roundToPlace'
+            label='Round'
+            updateField={updateField}
+          />
         </li>
         <li>
           <label className='checkbox'>
@@ -202,7 +234,13 @@ const FieldSet: React.FC<ColumnsEditorProps & { colKey: string; controls: OpenCo
       </ul>
       <label>
         <span className='edit-label column-heading'>Order</span>
-        <input onWheel={e => e.currentTarget.blur()} type='number' min='1' value={config.columns[colKey].order} onChange={e => updateField('columns', colKey, 'order', parseInt(e.target.value))} />
+        <input
+          onWheel={e => e.currentTarget.blur()}
+          type='number'
+          min='1'
+          value={config.columns[colKey].order}
+          onChange={e => updateField('columns', colKey, 'order', parseInt(e.target.value))}
+        />
       </label>
     </FieldSetWrapper>
   )
@@ -252,7 +290,14 @@ const ColumnsEditor: React.FC<ColumnsEditorProps> = ({ config, updateField, dele
             </span>
           </label>
           {additionalColumns.map((val, i) => (
-            <FieldSet key={val + i} controls={openControls} config={config} deleteColumn={deleteColumn} updateField={updateField} colKey={val} />
+            <FieldSet
+              key={val + i}
+              controls={openControls}
+              config={config}
+              deleteColumn={deleteColumn}
+              updateField={updateField}
+              colKey={val}
+            />
           ))}
           <button
             className={'btn btn-primary'}

package/components/EditorPanel/DataTableEditor.tsx

@@ -83,7 +83,7 @@ const DataTableEditor: React.FC<DataTableProps> = ({ config, updateField, isDash
           </Tooltip>
         }
       />
-      {config.type !== 'table' && (
+      {config.type !== 'table' ? (
         <CheckBox
           value={config.table.show}
           fieldName='show'
@@ -108,6 +108,15 @@ const DataTableEditor: React.FC<DataTableProps> = ({ config, updateField, isDash
             </Tooltip>
           }
         />
+      ) : (
+        <CheckBox
+          value={config.general?.showDownloadButton}
+          fieldName='showDownloadButton'
+          label='Show Download CSV link'
+          section='general'
+          updateField={updateField}
+          className='column-heading'
+        />
       )}
 
       {config.visualizationType !== 'Box Plot' && config.type !== 'table' && (
@@ -249,15 +258,14 @@ const DataTableEditor: React.FC<DataTableProps> = ({ config, updateField, isDash
           updateField={updateField}
         />
       )}
-      {config.type !== 'table' && (
-        <CheckBox
-          value={config.table.showDownloadLinkBelow}
-          fieldName='showDownloadLinkBelow'
-          label='Show Download Link Below Table'
-          section='table'
-          updateField={updateField}
-        />
-      )}
+
+      <CheckBox
+        value={config.table.showDownloadLinkBelow}
+        fieldName='showDownloadLinkBelow'
+        label='Show Download Link Below Table'
+        section='table'
+        updateField={updateField}
+      />
       <label>
         <span className='edit-label column-heading'>Table Cell Min Width</span>
         <input
@@ -267,9 +275,17 @@ const DataTableEditor: React.FC<DataTableProps> = ({ config, updateField, isDash
         />
       </label>
       {config?.visualizationType !== 'Sankey' && (
-        <label>
-          <span className='edit-label column-heading'>
-            Group By{' '}
+        <Select
+          value={config.table.groupBy}
+          fieldName={'groupBy'}
+          section='table'
+          label='Group By'
+          updateField={(_section, _subSection, _fieldName, value) => changeGroupBy(value)}
+          initial={PLACEHOLDER}
+          options={groupPivotColumns.filter(
+            col => col !== config.table.pivot?.columnName && !(config.table.pivot?.valueColumns || []).includes(col)
+          )}
+          tooltip={
             <Tooltip style={{ textTransform: 'none' }}>
               <Tooltip.Target>
                 <Icon display='question' style={{ marginLeft: '0.5rem' }} />
@@ -281,27 +297,11 @@ const DataTableEditor: React.FC<DataTableProps> = ({ config, updateField, isDash
                 </p>
               </Tooltip.Content>
             </Tooltip>
-          </span>
-
-          <select
-            value={config.table.groupBy}
-            onChange={event => {
-              changeGroupBy(event.target.value)
-            }}
-          >
-            {[
-              PLACEHOLDER,
-              ...groupPivotColumns.filter(
-                col => col !== config.table.pivot?.columnName && col !== config.table.pivot?.valueColumn
-              )
-            ].map(option => (
-              <option key={option}>{option}</option>
-            ))}
-          </select>
-        </label>
+          }
+        />
       )}
       <Select
-        label='Pivot Column: '
+        label='Pivot Column'
         tooltip={
           <Tooltip style={{ textTransform: 'none' }}>
             <Tooltip.Target>
@@ -314,7 +314,7 @@ const DataTableEditor: React.FC<DataTableProps> = ({ config, updateField, isDash
         }
         value={config.table.pivot?.columnName}
         options={groupPivotColumns.filter(
-          col => col !== config.table.groupBy && col !== config.table.pivot?.valueColumn
+          col => col !== config.table.groupBy && !(config.table.pivot?.valueColumns || []).includes(col)
         )}
         initial='-Select-'
         section='table'

package/components/EditorPanel/FieldSetWrapper.tsx

@@ -21,7 +21,7 @@ const FieldSet: React.FC<FieldSetProps> = ({ fieldName, fieldKey, fieldType, con
   if (!show)
     return (
       <div className='mb-1'>
-        <button onClick={() => setShow(fieldKey, true)}>
+        <button className='btn btn-light' onClick={() => setShow(fieldKey, true)}>
           <Icon display='caretDown' />
         </button>
         <span> {fieldName ? `${fieldName}` : 'New ' + fieldType}</span>
@@ -30,7 +30,7 @@ const FieldSet: React.FC<FieldSetProps> = ({ fieldName, fieldKey, fieldType, con
   return (
     <fieldset className='edit-block mb-1' key={fieldKey}>
       <div className='d-flex justify-content-between'>
-        <button onClick={() => setShow(fieldKey, false)}>
+        <button className='btn btn-light' onClick={() => setShow(fieldKey, false)}>
           <Icon display='caretUp' />
         </button>
         <button