fix: table block header styling

ccontrols · Mar 13, 2020 · e1b8c87 · e1b8c87
1 parent 2711667
commit e1b8c87
Show file tree

Hide file tree

Showing 3 changed files with 118 additions and 118 deletions.
diff --git a/ui/blocks/src/PropsTable/PropsTable.tsx b/ui/blocks/src/PropsTable/PropsTable.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable react/display-name */
 /** @jsx jsx */
-import { jsx, Box, Text, Flex, Styled } from 'theme-ui';
+import { jsx, Text, Flex, Styled } from 'theme-ui';
 import { FC, useState } from 'react';
 import { PropType } from '@component-controls/specification';
 import {
@@ -30,133 +30,132 @@ export const PropsTable: FC<PropsTableProps> = ({ of, title, actions }) => {
   }
   return (
     <BlockContainer actions={allActions} title={title}>
-      <Box
-        sx={{
-          pt: 4,
-        }}
-      >
-        {info && (
-          <Table
-            filtering={filtering}
-            sorting={true}
-            columns={[
-              {
-                Header: 'Name',
-                accessor: 'name',
-                Cell: ({
-                  row: {
-                    original: {
-                      name,
-                      prop: {
-                        type: { required },
-                      },
+      {info && (
+        <Table
+          filtering={filtering}
+          sorting={true}
+          sx={{
+            '& :first-child': {
+              marginTop: 15,
+            },
+          }}
+          columns={[
+            {
+              Header: 'Name',
+              accessor: 'name',
+              Cell: ({
+                row: {
+                  original: {
+                    name,
+                    prop: {
+                      type: { required },
                     },
                   },
-                }: {
-                  row: { original: { name: string; prop: PropType } };
-                }) => (
-                  <Text
-                    sx={{
-                      fontWeight: 'bold',
-                      color: required ? 'red' : undefined,
-                      textOverflow: 'ellipsis',
-                    }}
-                  >
-                    {name}
-                    {required ? '*' : ''}
-                  </Text>
-                ),
-              },
-              {
-                Header: 'Description',
-                accessor: 'prop.description',
-                Cell: ({
-                  row: {
-                    original: {
-                      prop: {
-                        description,
-                        type: { raw },
-                      },
-                    },
-                  },
-                }: {
-                  row: { original: { name: string; prop: PropType } };
-                }) => (
-                  <Flex
-                    sx={{
-                      flexDirection: 'column',
-                    }}
-                  >
-                    {description && (
-                      <Text
-                        sx={{
-                          textOverflow: 'ellipsis',
-                        }}
-                      >
-                        {description}
-                      </Text>
-                    )}
-                    {raw && (
-                      <Styled.pre
-                        sx={{
-                          color: 'fadedText',
-                          mt: 2,
-                          letterSpacing: '0.10em',
-                          whiteSpace: 'pre-wrap',
-                        }}
-                      >
-                        {raw}
-                      </Styled.pre>
-                    )}
-                  </Flex>
-                ),
-              },
-              {
-                Header: 'Default',
-                accessor: 'prop.defaultValue',
-                width: '20%',
-                Cell: ({
-                  row: {
-                    original: {
-                      prop: { defaultValue },
+                },
+              }: {
+                row: { original: { name: string; prop: PropType } };
+              }) => (
+                <Text
+                  sx={{
+                    fontWeight: 'bold',
+                    color: required ? 'red' : undefined,
+                    textOverflow: 'ellipsis',
+                  }}
+                >
+                  {name}
+                  {required ? '*' : ''}
+                </Text>
+              ),
+            },
+            {
+              Header: 'Description',
+              accessor: 'prop.description',
+              Cell: ({
+                row: {
+                  original: {
+                    prop: {
+                      description,
+                      type: { raw },
                     },
                   },
-                }: {
-                  row: { original: { name: string; prop: PropType } };
-                }) => {
-                  let value = null;
-                  switch (typeof defaultValue) {
-                    case 'object':
-                      value = JSON.stringify(defaultValue, null, 2);
-                      break;
-                    case 'undefined':
-                      value = '-';
-                      break;
-                    default:
-                      value = defaultValue.toString();
-                  }
-                  return (
+                },
+              }: {
+                row: { original: { name: string; prop: PropType } };
+              }) => (
+                <Flex
+                  sx={{
+                    flexDirection: 'column',
+                  }}
+                >
+                  {description && (
+                    <Text
+                      sx={{
+                        textOverflow: 'ellipsis',
+                      }}
+                    >
+                      {description}
+                    </Text>
+                  )}
+                  {raw && (
                     <Styled.pre
                       sx={{
+                        color: 'fadedText',
+                        mt: 2,
+                        letterSpacing: '0.10em',
                         whiteSpace: 'pre-wrap',
                       }}
                     >
-                      {value}
+                      {raw}
                     </Styled.pre>
-                  );
+                  )}
+                </Flex>
+              ),
+            },
+            {
+              Header: 'Default',
+              accessor: 'prop.defaultValue',
+              width: '20%',
+              Cell: ({
+                row: {
+                  original: {
+                    prop: { defaultValue },
+                  },
                 },
+              }: {
+                row: { original: { name: string; prop: PropType } };
+              }) => {
+                let value = null;
+                switch (typeof defaultValue) {
+                  case 'object':
+                    value = JSON.stringify(defaultValue, null, 2);
+                    break;
+                  case 'undefined':
+                    value = '-';
+                    break;
+                  default:
+                    value = defaultValue.toString();
+                }
+                return (
+                  <Styled.pre
+                    sx={{
+                      whiteSpace: 'pre-wrap',
+                    }}
+                  >
+                    {value}
+                  </Styled.pre>
+                );
               },
-            ]}
-            data={Object.keys(info.props).map(key => {
-              const prop = info.props[key];
-              return {
-                name: key,
-                prop: prop,
-              };
-            })}
-          />
-        )}
-      </Box>
+            },
+          ]}
+          data={Object.keys(info.props).map(key => {
+            const prop = info.props[key];
+            return {
+              name: key,
+              prop: prop,
+            };
+          })}
+        />
+      )}
     </BlockContainer>
   );
 };
diff --git a/ui/components/src/Table/Table.tsx b/ui/components/src/Table/Table.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable react/jsx-key */
 /** @jsx jsx */
 import { FC } from 'react';
-import { Box, Flex, useThemeUI, jsx } from 'theme-ui';
+import { Box, BoxProps, Flex, useThemeUI, jsx } from 'theme-ui';
 import { get } from '@theme-ui/css';
 import memoize from 'fast-memoize';
 import {
@@ -32,7 +32,7 @@ interface TableOwnProps {
   itemsLabel?: string;
 }
 
-export type TableProps = TableOwnProps & JSX.IntrinsicElements['table'];
+export type TableProps = TableOwnProps & BoxProps;
 export const Table: FC<TableProps> = ({
   columns,
   data = [],

diff --git a/ui/components/src/ThemeContext/ThemeContext.tsx b/ui/components/src/ThemeContext/ThemeContext.tsx
@@ -39,6 +39,7 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({
       },
       thead: {
         borderBottom: '1px solid #999',
+        backgroundColor: '#F6F9FC',
       },
       td: {
         padding: '16px 20px',