Center checkboxes and tidy up

uktrade · Feb 26, 2025 · b139c69 · b139c69
1 parent 2c7d85a
commit b139c69
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 8 deletions.
diff --git a/front_end/src/Components/EditPayroll/PayrollNewTable/helpers.js b/front_end/src/Components/EditPayroll/PayrollNewTable/helpers.js
@@ -0,0 +1,5 @@
+export const monthsWithActuals = (previousMonths) => {
+  return previousMonths
+    .filter((month) => month.is_actual)
+    .map((month) => month.short_name.toLowerCase());
+};
diff --git a/front_end/src/Components/EditPayroll/PayrollNewTable/index.jsx b/front_end/src/Components/EditPayroll/PayrollNewTable/index.jsx
@@ -5,11 +5,9 @@ import {
 } from "@tanstack/react-table";
 import { monthsToTitleCase } from "../../../Util";
 import { useState } from "react";
+import { monthsWithActuals } from "./helpers";
 
 function PayrollNewTable({ data, onTogglePayPeriods, previousMonths }) {
-  const monthsWithActuals = previousMonths
-    .filter((month) => month.is_actual)
-    .map((month) => month.short_name.toLowerCase());
   const monthColumns = monthsToTitleCase.map((header, index) => ({
     header: header,
     id: header.toLowerCase(),
@@ -22,6 +20,9 @@ function PayrollNewTable({ data, onTogglePayPeriods, previousMonths }) {
         onChange={() => onTogglePayPeriods(row.original.id, index, getValue())}
       />
     ),
+    meta: {
+      className: "payroll-checkbox",
+    },
   }));
   const employeeColumns = [
     {
@@ -62,7 +63,7 @@ function PayrollNewTable({ data, onTogglePayPeriods, previousMonths }) {
   const [showPreviousMonths, setShowPreviousMonths] = useState(false);
   const togglePreviousMonthsVisibility = () => {
     setShowPreviousMonths((prev) => !prev);
-    const monthColumnIds = monthsWithActuals;
+    const monthColumnIds = monthsWithActuals(previousMonths);
     monthColumnIds.forEach((columnId) => {
       const column = table.getColumn(columnId);
       if (column) {
@@ -106,7 +107,10 @@ function PayrollNewTable({ data, onTogglePayPeriods, previousMonths }) {
           {table.getRowModel().rows.map((row) => (
             <tr key={row.id}>
               {row.getVisibleCells().map((cell) => (
-                <td key={cell.id}>
+                <td
+                  key={cell.id}
+                  className={cell.column.columnDef.meta?.className ?? ""}
+                >
                   {flexRender(cell.column.columnDef.cell, cell.getContext())}
                 </td>
               ))}

diff --git a/front_end/styles/styles.scss b/front_end/styles/styles.scss
@@ -387,9 +387,8 @@ th {
 
 .new-table {
   table {
-    width: 100%;
-    border-collapse: collapse;
-    margin: 1rem 0;
+    @extend .govuk-table;
+    font-size: 16px;
   }
 
   th,
@@ -403,4 +402,8 @@ th {
     background-color: #f4f4f4;
     font-weight: bold;
   }
+
+  .payroll-checkbox {
+    text-align: center;
+  }
 }