fix: table ui (#29)

* fix: update hover and active color * fix: add td borders * fix: colors and lineheight for th * fix: check box and row actions alignments * fix: align row exapand icon * fix: rows per page text alignment * fix: add margin-top to pagination section * refactor: swap lines
PolymathNetwork · Jan 7, 2022 · c0d4bf0 · c0d4bf0
1 parent 4dd651f
commit c0d4bf0
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 11 deletions.
diff --git a/src/components/Table/Table.stories.tsx b/src/components/Table/Table.stories.tsx
@@ -85,7 +85,7 @@ export const Default = () => {
                 <Icon
                   variant="basic"
                   icon={polyIcons.MinusCircle}
-                  size="26px"
+                  size="22px"
                   color="gray3"
                   margin="0 0 0 -2px"
                 />

diff --git a/src/components/Table/TableCheckbox.tsx b/src/components/Table/TableCheckbox.tsx
@@ -25,7 +25,7 @@ export const TableCheckbox: FC<TableCheckboxProps> = ({
   };
 
   return (
-    <Box variant="raw" margin="s 0 0 0">
+    <Box variant="raw">
       <Checkbox
         onChange={handleChange}
         indeterminate={indeterminate}

diff --git a/src/components/Table/TablePagination.tsx b/src/components/Table/TablePagination.tsx
@@ -26,10 +26,10 @@ export const TablePagination: FC<TablePaginationProps> = ({
   // const buttonStyles = { minWidth: 50, padding: 0 };
 
   return (
-    <Flex variant="raw" justify="end">
+    <Flex variant="raw" justify="end" align="center" margin="m 0 0 0">
       {pageSizes && setPageSize && (
-        <Flex variant="raw" margin="0 xxl 0 0">
-          <Text as="span" variant="b2m" color="gray2">
+        <Flex variant="raw" margin="0 xxl 0 0" align="center">
+          <Text as="span" variant="b2m" color="gray2" margin="0 s 0 0">
             {label}
           </Text>
           <Select

diff --git a/src/components/Table/TableRowActions.tsx b/src/components/Table/TableRowActions.tsx
@@ -64,7 +64,7 @@ export const TableRowActions = ({
             id: 'action',
             width: 30,
             Cell: ({ row }: CellProps<Record<string, any>>) => (
-              <Flex variant="raw" justify="end">
+              <Flex variant="raw" justify="end" align="center">
                 {rowActions.map((rowAction: TableRowActionType) => {
                   const showTooltip = rowAction.showTooltip
                     ? rowAction?.showTooltip(row.original)
@@ -130,7 +130,11 @@ export const TableRowActions = ({
             id: 'expansion',
             width: 30,
             Cell: ({ row }: any) => (
-              <span {...row.getToggleRowExpandedProps()}>
+              <Box
+                variant="raw"
+                margin="xs 0 0 0"
+                {...row.getToggleRowExpandedProps()}
+              >
                 <Icon
                   variant="basic"
                   icon={
@@ -141,7 +145,7 @@ export const TableRowActions = ({
                   size="24px"
                   color="gray3"
                 />
-              </span>
+              </Box>
             ),
           },
         ]

diff --git a/src/components/Table/styles.ts b/src/components/Table/styles.ts
@@ -52,7 +52,7 @@ export const TableRow = styled.tr`
   &.selected,
   &:hover {
     td {
-      background-color: ${({ theme }) => theme.COLOR.gray4};
+      background-color: ${({ theme }) => theme.COLOR.gray6};
     }
   }
 
@@ -73,8 +73,8 @@ export const TableColumnHeader = styled.th(
   margin: 0;
   padding: ${props.padding || '10px 15px'};
   text-align: ${props.textAlign || 'left'};
-  color: ${({ theme }: any) => theme.COLOR.gray2};
-  line-height: ${({ theme }: any) => theme.lineHeights.lessTight};
+  color: ${props.theme.COLOR.gray2};
+  line-height: ${props.theme.GAP.s};
 `,
 );
 
@@ -85,6 +85,8 @@ export const TableColumn = styled.td(
   white-space: nowrap;
   line-height: ${props.lineHeight || 'initial'};
   text-align: ${props.textAlign || 'left'};
+  border-top: 2px solid ${props.theme.COLOR.gray5};
+  border-bottom: 2px solid ${props.theme.COLOR.gray5};
 
   .canEdit {
     cursor: pointer;