[WIP] Issue setlife-network#22

UI Polish

  Remove "Set Team" component from Team Page and add a simple "Team" header
  On the TeamPage, make sure the color bubbles are vertically center-aligned
  On the TeamPage, make sure the team member names are vertically left-aligned
  On the TeamPage, remove the filter/sliders icon on the right
  On the SchedulePage, change "Hours Counter: X" text to "X work hours scheduled"
  On the SideBar, the small setblocks should be vertically left/center-aligned

Author: Federico Madoery

web/components/CommitBlock.jsx

@@ -82,7 +82,7 @@ class CommitBlock extends React.Component {
                     size='10px'
                     ml='-10rem'
                 >
-                    {' Hours Counter: ' + this.countHours()}
+                    {this.countHours() + ' work hours scheduled'}
                 </Text>
 
                 <Flex row center>

web/components/DayBlock.jsx

@@ -18,7 +18,7 @@ class DayBlock extends React.Component {
             <Card
                 key={setBlock.id}
                 height='8px'
-                width='5px'
+                width='8px'
                 borderBottom={setBlock.blockFraction === 1.0 ? '4px #F93B6A solid' : (setBlock.blockFraction === 0.5 ? '4px #F93B6A solid' : '')}
                 borderTop={setBlock.blockFraction === 1.0 ? '4px #F93B6A solid' : (setBlock.blockFraction === -0.5 ? '4px #F93B6A solid' : '')}
                 bg='lightGrey'
@@ -48,12 +48,12 @@ class DayBlock extends React.Component {
                     onClick={() => onClick(day)}
                 >
                     <Flex row center>
-                        <Flex column>
+                        <Flex column mx='auto'>
                             { // If you are waiting for the API to respond, it does not render
                                 !fetchingData && this.renderTinySetBlocks(currentWeeklySetblocks, day)
                             }
                         </Flex>
-                        <Flex column>
+                        <Flex column mr='auto'>
                             <Text align='center' mb='0rem' color={selected ? 'red' : 'textSecondary'}>
                                 {day.getDate()}
                             </Text>

web/components/SetBlock.jsx

@@ -283,8 +283,8 @@ class SetBlock extends React.Component {
             <Card
                 height='16px'
                 width='16px'
-                borderRight={data.blockFraction === 1.0 ? '8px #F93B6A solid' : (data.blockFraction === 0.5 ? '8px #F93B6A solid' : '')}
-                borderLeft={data.blockFraction === 1.0 ? '8px #F93B6A solid' : (data.blockFraction === -0.5 ? '8px #F93B6A solid' : '')}
+                borderBottom={data.blockFraction === 1.0 ? '8px #F93B6A solid' : (data.blockFraction === 0.5 ? '8px #F93B6A solid' : '')}
+                borderTop={data.blockFraction === 1.0 ? '8px #F93B6A solid' : (data.blockFraction === -0.5 ? '8px #F93B6A solid' : '')}
                 bg='lightGrey'
                 mx='1rem'
             >

web/components/TeamLogo.jsx

@@ -23,10 +23,9 @@ export default class TeamMember extends React.Component {
                 >
                     <Flex
                         direction='row'
-                        justifyContent='space-evenly'
                         mb='2rem'
                         width='100%'
-                        height='50px'
+                        height='60px'
                         onClick={goToPage}
                     >
                         <Card
@@ -35,20 +34,16 @@ export default class TeamMember extends React.Component {
                             bg={color}
                             borderRadius={50}
                             my='auto'
+                            ml='20%'
                         />
                         <Text
                             color='textSecondary'
                             size='1rem'
                             weight='600'
+                            ml='15%'
                         >
                             {name}
                         </Text>
-
-                        <Image
-                            my='auto'
-                            height='20px'
-                            src={require('../images/SettingsIcon.png')}
-                        />
                     </Flex>
                 </Card>
             </>

web/components/TeamMember.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
 import TeamList from './TeamList';
-import TeamLogo from './TeamLogo';
 import Header from './Header';
 import Flex from './Flex';
+import Text from './Text';
 
 
 export default class TeamPage extends React.Component {
@@ -24,7 +24,9 @@ export default class TeamPage extends React.Component {
             >
                 <Header />
 
-                <TeamLogo />
+                <Text align='center' size='2rem' my='0.5rem' weight='900'>
+                    {'Team'}
+                </Text>
 
                 <TeamList goToPage={this.goToPage} />
             </Flex>