4001 - Add initial header styles

src/client/pages/Section/DataTable/Table/GridRow/GridRow.tsx

@@ -12,15 +12,15 @@ const Components: Record<string, React.FC<Props>> = {
 }
 
 const GridRow: React.FC<Props> = (props) => {
-  const { data, assessmentName, sectionName, table, row, disabled } = props
+  const { assessmentName, data, disabled, lastRow, row, sectionName, table } = props
 
   const { type } = row.props
 
   const Component = Components[type]
 
   if (!Component) return null // TODO: Remove
 
-  return React.createElement(Component, { data, assessmentName, sectionName, table, row, disabled })
+  return React.createElement(Component, { assessmentName, data, disabled, lastRow, row, sectionName, table })
 }
 
 export default GridRow

src/client/pages/Section/DataTable/Table/GridRow/RowData/Cell/Cell.scss

@@ -1,3 +1,5 @@
+@import 'src/client/style/partials';
+
 //TODO: Investigate
 //.fra-table__select-container {
 //  &.multiple {
@@ -14,3 +16,8 @@
 //    text-align: right;
 //  }
 //}
+
+.table-grid__data-cell {
+  padding: 10px;
+  text-align: right;
+}

src/client/pages/Section/DataTable/Table/GridRow/RowData/Cell/Cell.tsx

@@ -80,6 +80,7 @@ const Cell: React.FC<Props> = (props) => {
   return (
     <DataCell
       // className={className}
+      className='table-grid__data-cell'
       data-tooltip-html={errorMessages}
       data-tooltip-id={TooltipId.error}
       gridColumn={gridColumn}

src/client/pages/Section/DataTable/Table/GridRow/RowData/CellHeader/CellHeader.scss

@@ -0,0 +1,30 @@
+@import 'src/client/style/partials';
+
+.table-grid__data-cell.header {
+  text-align: center;
+
+  &.left {
+    text-align: left;
+  }
+
+  &.category {
+    .link {
+      font-weight: 600;
+    }
+  }
+
+  &.subcategory1 {
+    padding-left: 20px;
+  }
+
+  &.subcategory2 {
+    padding-left: $spacing-m;
+  }
+
+  &.category,
+  &.subcategory1,
+  &.subcategory2 {
+    font-weight: 400;
+    text-align: left;
+  }
+}

src/client/pages/Section/DataTable/Table/GridRow/RowData/CellHeader/CellHeader.tsx

@@ -1,3 +1,5 @@
+import './CellHeader.scss'
+
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { Link } from 'react-router-dom'
@@ -11,8 +13,15 @@ import { useCycle } from 'client/store/assessment'
 import { useCountryIso } from 'client/hooks'
 import { DataCell } from 'client/components/DataGrid'
 
-const CellHeader: React.FC<{ assessmentName: AssessmentName; col: Col; row: Row }> = (props) => {
-  const { assessmentName, col, row } = props
+type Props = {
+  assessmentName: AssessmentName
+  col: Col
+  lastRow?: boolean
+  row: Row
+}
+
+const CellHeader: React.FC<Props> = (props) => {
+  const { assessmentName, col, lastRow, row } = props
 
   const { t } = useTranslation()
   const cycle = useCycle()
@@ -31,17 +40,18 @@ const CellHeader: React.FC<{ assessmentName: AssessmentName; col: Col; row: Row
   return (
     <DataCell
       className={classNames(
+        'table-grid__data-cell',
         {
-          // [`fra-table__subcategory${row.props.categoryLevel}-cell`]: subcategory,
-          // 'fra-table__category-cell': !subcategory && !headerCell,
-          // 'fra-table__header-cell-left': !subcategory && headerCell,
+          [`subcategory${row.props.categoryLevel}`]: subcategory,
+          category: !subcategory && !headerCell,
+          left: !subcategory && headerCell,
         },
         classes
       )}
       gridColumn={gridColumn}
       gridRow={gridRow}
-      // colSpan={colSpan}
-      // rowSpan={rowSpan}
+      header
+      lastRow={lastRow}
       style={colHeaderStyle}
     >
       {row.props.linkToSection?.[cycle.uuid] ? (

src/client/pages/Section/DataTable/Table/GridRow/RowData/RowData.tsx

@@ -34,7 +34,7 @@ const RowData: React.FC<Props> = (props) => {
 
   return (
     <DataRow>
-      {colHeader && <CellHeader assessmentName={assessmentName} col={colHeader} row={row} />}
+      {colHeader && <CellHeader assessmentName={assessmentName} col={colHeader} lastRow={lastRow} row={row} />}
 
       {colsData.map((col, index) => (
         <Cell

src/client/pages/Section/DataTable/Table/Table.scss

@@ -1,7 +1,6 @@
 @import 'src/client/style/partials';
 
-
-.table__grid {
+.table-grid {
   font-size: $font-s;
   line-height: 19px;
   overflow-x: auto;

src/client/pages/Section/DataTable/Table/Table.tsx

@@ -63,22 +63,22 @@ const Table: React.FC<Props> = (props) => {
           {canClearData && <ButtonTableClear disabled={disabled} sectionName={sectionName} table={table} />}
         </div>
 
-        <DataGrid className="table__grid" gridTemplateColumns={`minmax(auto, 400px) repeat(${headers.length},1fr)`}>
+        <DataGrid className="table-grid" gridTemplateColumns={`minmax(auto, 400px) repeat(${headers.length},1fr)`}>
           {rowsData.map((row, index) => (
             <GridRow
               key={row.uuid}
               assessmentName={assessmentName}
               data={data}
               disabled={disabled}
-              lastRow={index === rowsData.length - 1}
+              lastRow={index === rowsData.length - 1} // TODO: Fix this for the case when the last row is type "noticeMessage"
               row={row}
               sectionName={sectionName}
               table={table}
             />
           ))}
         </DataGrid>
-
         {/* TODO: remove at the end */}
+        <br />
         <table ref={tableRef} className="fra-table data-table" id={table.props.name}>
           <TableHead assessmentName={assessmentName} data={data} headers={headers} table={table} />