fix(Table): 💄 Adapt styling to new design

nordnet · Jun 9, 2017 · 38c3d7d · 38c3d7d
1 parent 04b024c
commit 38c3d7d
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 15 deletions.
diff --git a/documentation/template.html b/documentation/template.html
@@ -3,7 +3,7 @@
 	<head>
 		<meta charset="utf-8">
 		<title><%=htmlWebpackPlugin.options.title%></title>
-    <link href="https://fonts.googleapis.com/css?family=Bitter|Open+Sans" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Bitter:400,700|Open+Sans:300,400,600,700,800" rel="stylesheet">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	</head>
 	<body>

diff --git a/src/components/table/table-styles.jsx b/src/components/table/table-styles.jsx
@@ -2,7 +2,7 @@ import { createStyleSheet } from 'jss-theme-reactor';
 import styleUtils from './style-utilities';
 
 export default createStyleSheet('Table', theme => {
-  const { palette, mixins } = theme;
+  const { palette, mixins, typography } = theme;
 
   return {
     root: {
@@ -20,7 +20,8 @@ export default createStyleSheet('Table', theme => {
       display: 'block',
       textAlign: 'left',
       borderCollapse: 'collapse',
-      fontWeight: 'normal',
+      fontWeight: typography.fontWeightRegular,
+      fontFamily: typography.primary.fontFamily,
       borderColor: palette.background.muted,
       ...styleUtils.sizes(),
     },

diff --git a/src/components/table/table.md b/src/components/table/table.md
@@ -43,6 +43,19 @@ Sticky header table:
           </Tr>
         )) }
       </Tbody>
+      <Tfoot>
+        <Tr>
+        <Td width={"50px"}></Td>
+          <Td width={40}></Td>
+          <Td mono width="80px" align="center"></Td>
+          <Td mono highlight="warning">
+            Total price
+          </Td>
+          <Td mono align="right">
+            Total perf
+          </Td>
+        </Tr>
+      </Tfoot>
     </Table>
 
 Scrollable table:

diff --git a/src/components/tfoot/tfoot-styles.jsx b/src/components/tfoot/tfoot-styles.jsx
@@ -2,17 +2,15 @@ import { createStyleSheet } from 'jss-theme-reactor';
 import styleUtils from '../table/style-utilities';
 
 export default createStyleSheet('Tfoot', theme => {
-  const { palette, mixins } = theme;
+  const { palette, mixins, typography } = theme;
 
   return {
     tfoot: {
       ...mixins.basicBoxSizing,
       display: 'block',
+      fontWeight: typography.fontWeightSemiBold,
       ...styleUtils.sizes(),
       borderTop: `2px solid ${palette.shades.dark.text.muted}`,
-      paddingTop: '20px',
-      paddingBottom: '10px',
-      letterSpacing: '1px',
     },
   };
 });
diff --git a/src/components/thead/thead-styles.jsx b/src/components/thead/thead-styles.jsx
@@ -3,24 +3,18 @@ import styleUtils from '../table/style-utilities';
 import color from '../../styles/color';
 
 export default createStyleSheet('Thead', theme => {
-  const { palette, mixins } = theme;
+  const { palette, mixins, typography } = theme;
 
   return {
     thead: {
       ...mixins.basicBoxSizing,
       display: 'block',
-      fontWeight: 'bold',
+      fontWeight: typography.fontWeightSemiBold,
       borderColor: color.gray,
       borderBottom: `2px solid ${palette.shades.dark.text.muted}`,
-      letterSpacing: '1px',
       ...styleUtils.sizes(),
       width: '100%',
       fontSize: 12,
-      paddingBottom: 4,
-
-      [mixins.media('md')]: {
-        paddingBottom: 10,
-      },
 
       '&.primary': {
         background: color.gray,