[O2B-1136] Unify LHC Periods view styling (#1369)

* refactor

* amend test

* amend test

Author: xsalonx

lib/public/views/lhcPeriods/ActiveColumns/lhcPeriodsActiveColumns.js

@@ -28,12 +28,12 @@ export const lhcPeriodsActiveColumns = {
             h('.ph1.mh1.w-10', name),
             h('.mh4'),
             frontLink(
-                ['Runs', h('sub', `[${runsCount}]`)],
+                ['Runs', h('.badge', `(${runsCount})`)],
                 'runs-per-lhc-period',
                 { lhcPeriodName: name },
-                { class: `btn mh1 ${runsCount > 0 ? 'bg-light-blue' : ''}` },
+                { class: `mh1 ${runsCount === 0 ? 'gray-darker' : ''}` },
             ),
-            frontLink('Data Passes', 'data-passes-per-lhc-period-overview', { lhcPeriodId: id }, { class: 'btn mh1' }),
+            frontLink('Data Passes', 'data-passes-per-lhc-period-overview', { lhcPeriodId: id }, { class: 'mh1' }),
         ]),
         sortable: true,
         filter: ({ namesFilterModel }) => textFilter(

lib/public/views/lhcPeriods/Overview/LhcPeriodsOverviewPage.js

@@ -19,7 +19,7 @@ import { paginationComponent } from '../../../components/Pagination/paginationCo
 import { filtersPanelPopover } from '../../../components/Filters/common/filtersPanelPopover.js';
 import { estimateDisplayableRowsCount } from '../../../utilities/estimateDisplayableRowsCount.js';
 
-const TABLEROW_HEIGHT = 42;
+const TABLEROW_HEIGHT = 35;
 // Estimate of the navbar and pagination elements height total; Needs to be updated in case of changes;
 const PAGE_USED_HEIGHT = 215;
 

test/public/lhcPeriods/overview.test.js

@@ -100,7 +100,7 @@ module.exports = () => {
         const amountSelectorButton = await page.$('.dropup button');
         const amountSelectorButtonText = await amountSelectorButton.evaluate((element) => element.innerText);
         await page.waitForTimeout(300);
-        expect(amountSelectorButtonText.trim().endsWith('9')).to.be.true;
+        expect(amountSelectorButtonText.trim().endsWith('11')).to.be.true;
 
         // Expect the dropdown options to be visible when it is selected
         await amountSelectorButton.evaluate((button) => button.click());
@@ -203,7 +203,7 @@ module.exports = () => {
          * @param {string[]} periodNames list of names
          * @return {string[]} cells content
          */
-        const appendButtonsText = (periodNames) => periodNames.map((name) => `${name}\nRuns[${countsPerLhcPeriod[name]}]\nData Passes`);
+        const appendButtonsText = (periodNames) => periodNames.map((name) => `${name}\nRuns(${countsPerLhcPeriod[name]})\nData Passes`);
 
         let allLhcPeriodNameCellsContent = await getAllDataFields(page, 'name');
         expect(allLhcPeriodNameCellsContent).to.has.all.deep.members(appendButtonsText(['LHC22a']));