code review fixes

kobotoolbox · Dec 23, 2024 · c4e9f27 · c4e9f27
1 parent 2c89090
commit c4e9f27
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 43 deletions.
diff --git a/jsapp/js/components/common/SimpleTable.module.scss b/jsapp/js/components/common/SimpleTable.module.scss
@@ -0,0 +1,25 @@
+// We need bigger specificity in each selector to ensure we do overwrite default
+// styles
+
+table.SimpleTableRoot {
+  background-color: var(--mantine-color-gray-9);
+  border-collapse: separate;
+  border-radius: var(--mantine-radius-md);
+}
+
+thead.SimpleTableThead {
+  background-color: var(--mantine-color-gray-8);
+}
+
+th.SimpleTableTh {
+  font-size: var(--mantine-font-size-sm);
+  color: var(--mantine-color-gray-2);
+  font-weight: 400;
+}
+
+td.SimpleTableTd {
+  font-size: var(--mantine-font-size-md);
+  border-top-width: 1px;
+  border-top-color: var(--mantine-color-gray-7);
+  border-top-style: solid;
+}
diff --git a/jsapp/js/components/common/SimpleTable.tsx b/jsapp/js/components/common/SimpleTable.tsx
@@ -1,6 +1,7 @@
-import {Table, type TableData} from '@mantine/core';
+import {Table, type MantineStyleProps, type TableData} from '@mantine/core';
+import styles from './SimpleTable.module.scss';
 
-interface SimpleTableProps {
+interface SimpleTableProps extends MantineStyleProps {
   head: TableData['head'];
   body: TableData['body'];
   /**
@@ -13,20 +14,30 @@ interface SimpleTableProps {
 
 /**
  * A wrapper component for `Table` from `@mantine/core`. It requires column
- * headings, column data, and has optional minimum width.
+ * headings, column data, and has optional minimum width. You can pass all
+ * standard Mantine style props down to the inner `Table`.
  */
-export default function SimpleTable(props: SimpleTableProps) {
+export default function SimpleTable(
+  {head, body, minWidth, ...styleProps}: SimpleTableProps
+) {
   const table = (
     <Table
-      data={{head: props.head, body: props.body}}
+      {...styleProps}
+      classNames={{
+        table: styles.SimpleTableRoot,
+        thead: styles.SimpleTableThead,
+        th: styles.SimpleTableTh,
+        td: styles.SimpleTableTd,
+      }}
+      data={{head: head, body: body}}
       horizontalSpacing='sm'
       verticalSpacing='sm'
     />
   );
 
-  if (props.minWidth) {
+  if (minWidth) {
     return (
-      <Table.ScrollContainer minWidth={props.minWidth} type='native'>
+      <Table.ScrollContainer minWidth={minWidth} type='native'>
         {table}
       </Table.ScrollContainer>
     );

diff --git a/jsapp/js/components/modalForms/bulkEditSubmissionsForm.es6 b/jsapp/js/components/modalForms/bulkEditSubmissionsForm.es6
@@ -16,7 +16,7 @@ import {actions} from 'js/actions';
 import TextBox from 'js/components/common/textBox';
 import Button from 'js/components/common/button';
 import SimpleTable from 'js/components/common/SimpleTable';
-import {Text, Box} from '@mantine/core';
+import {Text} from '@mantine/core';
 import envStore from 'js/envStore';
 
 // we need a text to display when we need to say "this question has no answer"
@@ -550,18 +550,17 @@ class BulkEditRowForm extends React.Component {
           </bem.FormView__cell>
         </bem.FormView__cell>
 
-        <Box mt='lg'>
-          <SimpleTable
-            head={[
-              t('Response value'),
-              t('Frequency'),
-              t('Percentage'),
-              <Text key='action-button' ta='right'>{t('Action')}</Text>,
-            ]}
-            body={this.getRows()}
-            minWidth={600}
-          />
-        </Box>
+        <SimpleTable
+          mt='lg'
+          head={[
+            t('Response value'),
+            t('Frequency'),
+            t('Percentage'),
+            <Text key='action-button' ta='right'>{t('Action')}</Text>,
+          ]}
+          body={this.getRows()}
+          minWidth={600}
+        />
       </React.Fragment>
     );
   }

diff --git a/jsapp/js/theme/kobo/Table.ts b/jsapp/js/theme/kobo/Table.ts
@@ -8,29 +8,6 @@ export const TableThemeKobo = Table.extend({
     withRowBorders: false,
     captionSide: 'top',
   },
-  styles: (theme) => {
-    return {
-      table: {
-        backgroundColor: theme.colors.gray[9],
-        borderCollapse: 'separate',
-        borderRadius: theme.radius.md,
-      },
-      thead: {
-        backgroundColor: theme.colors.gray[8],
-      },
-      th: {
-        fontSize: theme.fontSizes.sm,
-        color: theme.colors.gray[2],
-        fontWeight: '400',
-      },
-      td: {
-        fontSize: theme.fontSizes.md,
-        borderTopWidth: '1px',
-        borderTopColor: theme.colors.gray[7],
-        borderTopStyle: 'solid',
-      },
-    };
-  },
   vars: (theme) => {
     return {
       table: {