fix: adjust column sizes for table color

ccontrols · Oct 5, 2020 · 1f044fa · 1f044fa
1 parent 709b97d
commit 1f044fa
Show file tree

Hide file tree

Showing 3 changed files with 533 additions and 6 deletions.
diff --git a/ui/design-tokens/src/Colors/TableColor/TableColor.stories.tsx b/ui/design-tokens/src/Colors/TableColor/TableColor.stories.tsx
@@ -26,6 +26,21 @@ overview.controls = {
 export const legend = () => <ColorAALegend />;
 
 export const palette = () => (
+  <TableColorPalette
+    palette={{
+      background: '#FAFAF9',
+      blue: '#B6DEE2',
+      blueDark: '#247BA0',
+      green: '#B2E4DC',
+      greenDark: '#2D5948',
+      muted: 'RGBA(0,0,0,.1)',
+      primary: '#F25F5C',
+      primaryDark: '#B51916',
+      primaryLight: '#FCBAB1',
+    }}
+  />
+);
+export const paletteDark = () => (
   <TableColorPalette
     palette={{
       text: { value: '#454f5b', dark: '#d3d4db' },

diff --git a/ui/design-tokens/src/Colors/TableColor/TableColor.tsx b/ui/design-tokens/src/Colors/TableColor/TableColor.tsx
@@ -124,7 +124,11 @@ const BaseTableColor: FC<ColorBlockProps & { hasDark?: boolean }> = ({
     <tr>
       <td>
         <div
-          sx={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}
+          sx={{
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+          }}
         >
           <ColorBox color={colorValue} name={colorName} />
           {darkColor && (
@@ -329,8 +333,8 @@ export const TableColorPalette: FC<ThemeColorProps &
   });
   const columns: TableColumn[] = [
     {
-      title: hasDark ? 'color / dark' : 'Color',
-      sx: { pl: hasDark ? 4 : 2 },
+      title: hasDark ? 'color / dark' : 'color',
+      sx: { pl: hasDark ? 4 : 2, width: hasDark ? 200 : 140 },
     },
     {
       title: 'name',
@@ -363,7 +367,7 @@ export const TableColorPalette: FC<ThemeColorProps &
         borderLeft: (t: Theme) => `1px solid  ${t.colors?.shadow}`,
         borderRight: (t: Theme) => `1px solid  ${t.colors?.shadow}`,
         '& > tbody > tr > td': {
-          p: 2,
+          py: 2,
         },
       }}
       header={