fix: change style header

nexxtway · Aug 1, 2020 · 765648a · 765648a
1 parent 82b0868
commit 765648a
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 24 deletions.
diff --git a/src/components/Table/body/styled/cell.js b/src/components/Table/body/styled/cell.js
@@ -15,6 +15,7 @@ const StyledCell = attachThemeAttrs(styled.th)`
         `
         background-color: ${props.palette.background.main};
         border: none;
+        text-align: center;
         border-top: 1px solid ${props.palette.border.divider};
         border-right: 1px solid ${props.palette.border.divider};
 
@@ -40,6 +41,10 @@ const StyledCell = attachThemeAttrs(styled.th)`
             border-bottom-right-radius: 12px; 
             border-top-right-radius: 12px; 
         }
+
+        :first-child > div {
+            padding-left: 0;
+        }
     `}
 
     

diff --git a/src/components/Table/body/styled/cellContainer.js b/src/components/Table/body/styled/cellContainer.js
@@ -9,6 +9,7 @@ const StyledCellContainer = attachThemeAttrs(styled.td)`
     ${props =>
         props.variant === 'listview' &&
         `
+        background-color: ${props.palette.background.main};
         border: none;
         border-top: 1px solid ${props.palette.border.divider};
         border-right: 1px solid ${props.palette.border.divider};

diff --git a/src/components/Table/head/header.js b/src/components/Table/head/header.js
@@ -106,6 +106,7 @@ export default class Header extends Component {
                         className="rainbow-table_header-container"
                         role="presentation"
                         onClick={this.handleSort}
+                        variant={variant}
                     >
                         <StyledContent
                             title={this.getHeaderContent()}

diff --git a/src/components/Table/head/styled/headerContainer.js b/src/components/Table/head/styled/headerContainer.js
@@ -7,6 +7,12 @@ const StyledHeaderContainer = styled.div`
     align-items: center;
     height: 44px;
     padding: 0 ${PADDING_X_SMALL};
+    ${props =>
+        props.variant === 'listview' &&
+        `
+            justify-content: center;
+            text-transform: capitalize;
+        `};
 `;
 
 export default StyledHeaderContainer;
diff --git a/src/components/Table/readme.md b/src/components/Table/readme.md
@@ -1069,11 +1069,7 @@ import React, { useState } from 'react';
 import styled from 'styled-components';
 import { Table, Column, ButtonGroup, ButtonIcon, Avatar } from 'react-rainbow-components';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import {
-    faCog,
-    faEllipsisV,
-    faCoins,
-} from '@fortawesome/free-solid-svg-icons';
+import { faCog, faEllipsisV } from '@fortawesome/free-solid-svg-icons';
 
 const initialData = [
     {
@@ -1124,15 +1120,13 @@ const Container = styled.div`
     padding: 0 2rem;
 `;
 
-const StyledHeader = styled.div`
-    text-transform: capitalize;
-    text-align: center;
+const StyledTaskHeader = styled.span`
+    text-transform: uppercase;
 `;
 
 const StyledPriority = styled.div`
     text-transform: capitalize;
     color: #ffffff;
-    text-align: center;
     ${props =>
         props.priority === 'hight' &&
         `
@@ -1157,8 +1151,9 @@ const StyledConstributor = styled.div`
     height: 40px;
 `;
 
-const StyledCoins = styled.div`
-    text-align: center;
+const StyledTask = styled.div`
+    text-align: left;
+    padding-left: 15px;
 `;
 
 const StyleCoin = styled(Coin)`
@@ -1167,11 +1162,13 @@ const StyleCoin = styled(Coin)`
     height: 20px;
 `;
 
+const Task = ({ value }) => <StyledTask>{value}</StyledTask>;
+
 const Coins = ({ value }) => (
-    <StyledCoins>
+    <>
         <StyleCoin />
         {value} coins
-    </StyledCoins>
+    </>
 );
 
 const Constributor = () => (
@@ -1183,8 +1180,8 @@ const Constributor = () => (
 const priorityMap = ['low', 'medium', 'hight'];
 const Priority = ({ value }) => {
     const priority = priorityMap[value];
-    return (<StyledPriority priority={priority}>{priority}</StyledPriority>);
-}; 
+    return <StyledPriority priority={priority}>{priority}</StyledPriority>;
+};
 
 function TableListView() {
     const [data, setData] = useState(initialData);
@@ -1211,7 +1208,11 @@ function TableListView() {
         <div className="rainbow-p-bottom_xx-large">
             <GlobalHeader className="rainbow-m-bottom_xx-large" src="images/user/user3.jpg">
                 <ButtonGroup className="rainbow-m-right_medium">
-                    <ButtonIcon variant="border-filled" disabled icon={<FontAwesomeIcon icon={faCog} />} />
+                    <ButtonIcon
+                        variant="border-filled"
+                        disabled
+                        icon={<FontAwesomeIcon icon={faCog} />}
+                    />
                     <ButtonIcon
                         variant="border-filled"
                         disabled
@@ -1228,22 +1229,21 @@ function TableListView() {
                     sortDirection={sortDirection}
                     sortedBy={sortedBy}
                 >
-                    <Column header="Task" field="task" />
                     <Column
-                        header={<StyledHeader>Coins</StyledHeader>}
-                        field="coins"
-                        component={Coins}
-                        defaultWidth={120}
+                        header={<StyledTaskHeader>Task</StyledTaskHeader>}
+                        field="task"
+                        component={Task}
                     />
+                    <Column header="Coins" field="coins" component={Coins} defaultWidth={120} />
                     <Column
-                        header={<StyledHeader>Constributor</StyledHeader>}
+                        header="Constributor"
                         field="constributor"
                         component={Constributor}
                         defaultWidth={180}
                         sortable
                     />
                     <Column
-                        header={<StyledHeader>Priority</StyledHeader>}
+                        header="Priority"
                         field="priority"
                         component={Priority}
                         defaultWidth={200}
@@ -1255,5 +1255,5 @@ function TableListView() {
     );
 }
 
-<TableListView/>;
+<TableListView />;
 ```