eLifePathways · vukilelanga · May 26, 2026
diff --git a/packages/client/app/components/component-manuscripts-table/src/FilterSortHeader.jsx b/packages/client/app/components/component-manuscripts-table/src/FilterSortHeader.jsx
@@ -86,7 +86,11 @@ const FilterSortHeader = ({
     }
 
     return (
-      <HeadingCell $centered={columnInfo.centered} onClick={changeSort}>
+      <HeadingCell
+        $centered={columnInfo.centered}
+        $flex={columnInfo.flex}
+        onClick={changeSort}
+      >
         {
           '\u200B' /* zero-width space so the layout engine understands where the baseline is */
         }
@@ -129,7 +133,7 @@ const FilterSortHeader = ({
     ].concat(columnInfo.filterOptions)
 
     return (
-      <Cell $centered={columnInfo.centered}>
+      <Cell $centered={columnInfo.centered} $flex={columnInfo.flex}>
         <Select
           aria-label={columnInfo.title}
           customStyles={{
@@ -187,15 +191,23 @@ const FilterSortHeader = ({
     }
 
     return (
-      <Cell $centered={columnInfo.centered} onClick={changeSort}>
+      <Cell
+        $centered={columnInfo.centered}
+        $flex={columnInfo.flex}
+        onClick={changeSort}
+      >
         {columnInfo.title}
         {columnInfo.sortDirection === 'ASC' && <SortDown />}
         {columnInfo.sortDirection === 'DESC' && <SortUp />}
       </Cell>
     )
   }
 
-  return <Cell $centered={columnInfo.centered}>{columnInfo.title}</Cell>
+  return (
+    <Cell $centered={columnInfo.centered} $flex={columnInfo.flex}>
+      {columnInfo.title}
+    </Cell>
+  )
 }
 
 export default FilterSortHeader
diff --git a/packages/client/app/components/component-manuscripts-table/src/ManuscriptRow.jsx b/packages/client/app/components/component-manuscripts-table/src/ManuscriptRow.jsx
@@ -28,6 +28,7 @@ const ManuscriptRow = ({
     return (
       <Cell
         $centered={column.centered}
+        $flex={column.flex}
         data-testid={column.name}
         key={column.name}
       >

diff --git a/...nt/app/components/component-manuscripts-table/src/cell-components/ReviewerStatusBadge.jsx b/...nt/app/components/component-manuscripts-table/src/cell-components/ReviewerStatusBadge.jsx
@@ -24,8 +24,8 @@ const ReviewerStatusBadge = ({ manuscript, currentUser }) => {
 
   return (
     <ConfigurableStatus
+      $lightText={statusConfig.lightText}
       color={statusConfig.color}
-      lightText={statusConfig.lightText}
     >
       {statusConfig.label}
     </ConfigurableStatus>

diff --git a/packages/client/app/components/component-manuscripts-table/src/style.jsx b/packages/client/app/components/component-manuscripts-table/src/style.jsx
@@ -104,7 +104,7 @@ export const ManuscriptsHeaderRow = styled(ManuscriptsRow)`
 
 export const Cell = styled.div`
   display: flex;
-  flex: ${({ flex }) => flex ?? '0 1 12em'};
+  flex: ${({ $flex }) => $flex ?? '0 1 12em'};
   flex-direction: row;
   ${props =>
     props.onClick &&

diff --git a/packages/client/app/components/component-review/src/components/KanbanBoard.jsx b/packages/client/app/components/component-review/src/components/KanbanBoard.jsx
@@ -29,20 +29,20 @@ const Kanban = styled.div.attrs({
   min-height: 300px;
 `
 
-const Column = styled.div(({ columns }) => ({
+const Column = styled.div(({ $columns }) => ({
   alignItems: 'flex-start',
   display: 'flex',
   flexDirection: 'column',
   flexGrow: 1,
   marginInline: '7.5px',
   /* stylelint-disable-next-line scss/operator-no-unspaced */
-  width: `calc(${100 / columns ?? 4}% - 15px)`,
+  width: `calc(${100 / $columns ?? 4}% - 15px)`,
 }))
 
 const StatusLabel = styled.div`
-  background-color: ${props => props.statusColor || '#ffffff'};
+  background-color: ${props => props.$statusColor || '#ffffff'};
   border-radius: 12px;
-  color: ${props => (props.lightText ? '#ffffff' : '#000000')};
+  color: ${props => (props.$lightText ? '#ffffff' : '#000000')};
   display: inline-block;
   font-weight: bold;
   margin-block: 4px;
@@ -253,10 +253,10 @@ const KanbanBoard = ({
             {LocalizedStatusOptions.filter(
               status => !filterOptions.includes(status.value.toLowerCase()),
             ).map(status => (
-              <Column columns={isAuthorBoard ? 2 : 4} key={status.value}>
+              <Column $columns={isAuthorBoard ? 2 : 4} key={status.value}>
                 <StatusLabel
-                  lightText={status.lightText}
-                  statusColor={status.color}
+                  $lightText={status.lightText}
+                  $statusColor={status.color}
                 >
                   {statusLabel(status)}
                 </StatusLabel>

diff --git a/packages/client/app/components/component-review/src/components/review/Review.jsx b/packages/client/app/components/component-review/src/components/review/Review.jsx
@@ -106,11 +106,7 @@ const Review = ({
     )
 
   const renderAnonymousReviewer = () => (
-    <div>
-      <Heading>
-        <Title>{t('reviewPage.Anonymous Reviewer')}</Title>
-      </Heading>
-    </div>
+    <Title>{t('reviewPage.Anonymous Reviewer')}</Title>
   )
 
   if (isOldUnsubmitted)

diff --git a/packages/client/app/components/component-review/src/components/reviewers/KanbanCard.jsx b/packages/client/app/components/component-review/src/components/reviewers/KanbanCard.jsx
@@ -160,10 +160,7 @@ const KanbanCard = ({
             </DateDisplay>
             {showEmailInvitation && (
               <EmailDisplay>
-                <MailIcon
-                  invitationStatus={reviewer.status} // TODO why are we setting an arbitrary 'invitationStatus' attribute on this svg element?
-                />{' '}
-                {t('common.kanban.Invited via email')}
+                <MailIcon /> {t('common.kanban.Invited via email')}
               </EmailDisplay>
             )}
           </InfoGrid>

diff --git a/packages/client/app/components/component-review/src/components/reviewers/ReviewerForm.jsx b/packages/client/app/components/component-review/src/components/reviewers/ReviewerForm.jsx
@@ -7,7 +7,7 @@ import styled from 'styled-components'
 import { useTranslation } from 'react-i18next'
 
 import { required } from '../../../../xpub-validators/src'
-import { Button, Checkbox, TextField } from '../../../../pubsweet'
+import { Checkbox, TextField } from '../../../../pubsweet'
 import { ActionButton, Select } from '../../../../shared'
 import { EmailErrorMessageWrapper } from '../emailNotifications'
 
@@ -70,6 +70,7 @@ const ReviewerForm = ({
   setExternalEmail,
 }) => {
   const { t } = useTranslation()
+
   return (
     <form onSubmit={handleSubmit}>
       <RowGridStyled>
@@ -124,14 +125,14 @@ const ReviewerForm = ({
               reviewerUsers={reviewerUsers}
               validate={required}
             />
-            <Button
-              $primary
+            <ActionButton
               data-testid="invite-reviewer"
               disabled={!isValid}
+              primary
               type="submit"
             >
               {t('decisionPage.Invite reviewer')}
-            </Button>
+            </ActionButton>
           </>
         )}
       </RowGridStyled>

diff --git a/packages/client/app/components/component-submit/src/style.jsx b/packages/client/app/components/component-submit/src/style.jsx
@@ -17,8 +17,7 @@ export const Section = styled.section`
       ? $cssOverrides['flex-direction']
       : 'column'};
   /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
-  flex-wrap: ${({ $cssOverrides }) =>
-    $cssOverrides && $cssOverrides.wrap ? $cssOverrides.wrap : 'nowrap'};
+  flex-wrap: ${({ $cssOverrides }) => $cssOverrides?.wrap ?? 'nowrap'};
   justify-content: space-between;
   margin: ${grid(3)} 0;
 `

diff --git a/packages/client/app/components/shared/ActionButton.jsx b/packages/client/app/components/shared/ActionButton.jsx
@@ -67,9 +67,9 @@ const Spinner = styled.div`
 
   &::after {
     animation: ${rotate360} 1s linear infinite;
-    border: 2.5px solid ${props => props.fgColor};
-    border-color: ${props => props.fgColor} transparent
-      ${props => props.fgColor} transparent;
+    border: 2.5px solid ${props => props.$fgColor};
+    border-color: ${props => props.$fgColor} transparent
+      ${props => props.$fgColor} transparent;
     border-radius: 50%;
     box-sizing: border-box;
     /* stylelint-disable-next-line string-quotes */
@@ -125,7 +125,7 @@ const ActionButton = ({
   const fgColor = isLight ? color.text : color.textReverse
 
   let statusIndicator = null
-  if (status === 'pending') statusIndicator = <Spinner fgColor={fgColor} />
+  if (status === 'pending') statusIndicator = <Spinner $fgColor={fgColor} />
 
   if (status === 'success')
     statusIndicator = (

diff --git a/packages/client/app/components/shared/Badge.jsx b/packages/client/app/components/shared/Badge.jsx
@@ -36,7 +36,7 @@ export const Status = styled.span`
 
 export const ConfigurableStatus = styled(Status)`
   background-color: ${p => p.color};
-  color: ${p => (p.lightText ? color.textReverse : color.text)};
+  color: ${p => (p.$lightText ? color.textReverse : color.text)};
 `
 
 export const safeLabel = status => {

diff --git a/packages/client/app/components/shared/RadioGroup.jsx b/packages/client/app/components/shared/RadioGroup.jsx
@@ -5,8 +5,8 @@ import { Radio } from './Radio'
 
 const Flexbox = styled.div`
   display: flex;
-  flex-direction: ${props => (props.column ? 'column' : 'row')};
-  justify-content: ${props => (props.center ? 'center' : 'left')};
+  flex-direction: ${props => (props.$column ? 'column' : 'row')};
+  justify-content: ${props => (props.$center ? 'center' : 'left')};
 `
 
 export const RadioGroup = ({
@@ -25,7 +25,7 @@ export const RadioGroup = ({
   }
 
   return (
-    <Flexbox column={!inline} data-testid={dataTestid}>
+    <Flexbox $column={!inline} data-testid={dataTestid}>
       {options.map(option => (
         <Radio
           checked={option.value === radioValue}

diff --git a/packages/client/app/components/wax-collab/src/layout/AuthorProofingWaxEditorLayout.jsx b/packages/client/app/components/wax-collab/src/layout/AuthorProofingWaxEditorLayout.jsx
@@ -103,7 +103,7 @@ const AuthorProofingWaxEditorLayout = readOnly => props => {
 
   return (
     <div style={fullScreenStyles}>
-      <Grid production readonly={readOnly}>
+      <Grid $production $readonly={readOnly}>
         {readOnly ? (
           <ProductionEditorDiv>
             <SideMenu />

diff --git a/packages/client/app/components/wax-collab/src/layout/EditorStyles.jsx b/packages/client/app/components/wax-collab/src/layout/EditorStyles.jsx
@@ -13,10 +13,10 @@ export const Grid = styled.div`
   /* stylelint-disable selector-class-pattern */
   display: grid;
   grid-template:
-    'menu' ${props => (props.readonly ? '0' : 'minmax(40px, auto)')}
+    'menu' ${props => (props.$readonly ? '0' : 'minmax(40px, auto)')}
     'editor' 1fr
     / 100%;
-  ${props => props.production && 'min-height: calc(100vh - 142px);'}
+  ${props => props.$production && 'min-height: calc(100vh - 142px);'}
   position: relative;
   /* :focus-within {
     z-index: 10000;

diff --git a/packages/client/app/components/wax-collab/src/layout/FullWaxEditorCommentsLayout.jsx b/packages/client/app/components/wax-collab/src/layout/FullWaxEditorCommentsLayout.jsx
@@ -100,7 +100,7 @@ const FullWaxEditorCommentsLayout = (readOnly, authorComments) => props => {
       id="wax-container"
     >
       {readOnly ? (
-        <Grid readonly>
+        <Grid $readonly>
           <FullWaxEditorGrid noScroll useComments>
             <ReadOnlyEditorWithCommentsEditor className="panelWrapper">
               <WaxView {...props} />

diff --git a/packages/client/app/components/wax-collab/src/layout/FullWaxEditorLayout.jsx b/packages/client/app/components/wax-collab/src/layout/FullWaxEditorLayout.jsx
@@ -76,7 +76,7 @@ const FullWaxEditorLayout = (readOnly, getActiveViewDom) => props => {
 
   return (
     <div id="wax-container" style={fullScreenStyles}>
-      <Grid readonly={readOnly} readOnlyComments>
+      <Grid $readonly={readOnly}>
         {readOnly ? (
           <FullWaxEditorGrid useComments={false}>
             <ReadOnlyEditorDiv className="wax-surface-scroll panelWrapper">

diff --git a/packages/client/app/components/wax-collab/src/layout/ProductionWaxEditorLayout.jsx b/packages/client/app/components/wax-collab/src/layout/ProductionWaxEditorLayout.jsx
@@ -142,7 +142,7 @@ const ProductionWaxEditorLayout =
       return useMemo(
         () => (
           <div id="main-wax-editor" style={fullScreenStyles}>
-            <Grid production readonly={readOnly}>
+            <Grid $production $readonly={readOnly}>
               <>
                 <Menu className="waxmenu">
                   <TopBar />

diff --git a/packages/client/app/components/wax-collab/src/layout/ProductionWaxEditorNoCommentsLayout.jsx b/packages/client/app/components/wax-collab/src/layout/ProductionWaxEditorNoCommentsLayout.jsx
@@ -89,7 +89,7 @@ const ProductionWaxEditorNoCommentsLayout = readOnly => props => {
 
   return (
     <div style={fullScreenStyles}>
-      <Grid production readonly={readOnly}>
+      <Grid $production $readonly={readOnly}>
         {readOnly ? (
           <ReadOnlyEditorDiv className="wax-surface-scroll">
             <WaxView {...props} />