feat: notifications rework

new-lamassu-admin/src/components/fake-table/Table.js

@@ -5,103 +5,10 @@ import classnames from 'classnames'
 import React from 'react'
 
 import { Link } from 'src/components/buttons'
-import {
-  tableHeaderColor,
-  tableHeaderHeight,
-  tableErrorColor,
-  spacer,
-  white,
-  tableDoubleHeaderHeight,
-  offColor
-} from 'src/styling/variables'
-import typographyStyles from 'src/components/typography/styles'
 
-const { tl2, p, label1 } = typographyStyles
+import styles from './Table.styles'
 
-const useStyles = makeStyles({
-  body: {
-    borderSpacing: [[0, 4]]
-  },
-  header: {
-    extend: tl2,
-    backgroundColor: tableHeaderColor,
-    height: tableHeaderHeight,
-    textAlign: 'left',
-    color: white,
-    display: 'flex',
-    alignItems: 'center'
-  },
-  doubleHeader: {
-    extend: tl2,
-    backgroundColor: tableHeaderColor,
-    height: tableDoubleHeaderHeight,
-    color: white,
-    display: 'table-row'
-  },
-  thDoubleLevel: {
-    padding: [[0, spacer * 2]],
-    display: 'table-cell',
-    '& > :first-child': {
-      extend: label1,
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      backgroundColor: offColor,
-      color: white,
-      borderRadius: [[0, 0, 8, 8]],
-      height: 28
-    },
-    '& > :last-child': {
-      display: 'table-cell',
-      verticalAlign: 'middle',
-      height: tableDoubleHeaderHeight - 28,
-      '& > div': {
-        display: 'inline-block'
-      }
-    }
-  },
-  cellDoubleLevel: {
-    display: 'flex',
-    padding: [[0, spacer * 2]]
-  },
-  td: {
-    padding: [[0, spacer * 3]]
-  },
-  tdHeader: {
-    verticalAlign: 'middle',
-    display: 'table-cell',
-    padding: [[0, spacer * 3]]
-  },
-  trError: {
-    backgroundColor: tableErrorColor
-  },
-  mainContent: {
-    display: 'flex',
-    alignItems: 'center',
-    minHeight: 54
-  },
-  // mui-overrides
-  cardContentRoot: {
-    // display: 'flex',
-    margin: 0,
-    padding: 0,
-    '&:last-child': {
-      padding: 0
-    }
-  },
-  card: {
-    extend: p,
-    '&:before': {
-      height: 0
-    },
-    margin: [[4, 0]],
-    width: '100%',
-    boxShadow: [[0, 0, 4, 0, 'rgba(0, 0, 0, 0.08)']]
-  },
-  actionCol: {
-    marginLeft: 'auto'
-  }
-})
+const useStyles = makeStyles(styles)
 
 const Table = ({ children, className, ...props }) => (
   <div className={classnames(className)} {...props}>
@@ -129,21 +36,25 @@ const TBody = ({ children, className }) => {
   return <div className={classnames(className, classes.body)}>{children}</div>
 }
 
-const Td = ({ children, header, className, size = 100, textAlign, action }) => {
-  const classes = useStyles()
+const Td = ({
+  children,
+  header,
+  className,
+  width = 100,
+  size,
+  textAlign,
+  action
+}) => {
+  const classes = useStyles({ textAlign, width })
   const classNames = {
     [classes.td]: true,
     [classes.tdHeader]: header,
-    [classes.actionCol]: action
+    [classes.actionCol]: action,
+    [classes.large]: size === 'lg' && !header,
+    [classes.md]: size === 'md' && !header
   }
 
-  return (
-    <div
-      className={classnames(className, classNames)}
-      style={{ width: size, textAlign }}>
-      {children}
-    </div>
-  )
+  return <div className={classnames(className, classNames)}>{children}</div>
 }
 
 const Th = ({ children, ...props }) => {