From 28cfb60b375c285d80aa91db7e6abaa7a402d2b2 Mon Sep 17 00:00:00 2001
From: Federico Madoery <fede.madoery@gmail.com>
Date: Wed, 9 Jan 2019 13:51:26 -0300
Subject: [PATCH] [WIP] Issue #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
---
 web/components/CommitBlock.jsx |  2 +-
 web/components/DayBlock.jsx    |  6 +++---
 web/components/SetBlock.jsx    |  4 ++--
 web/components/TeamLogo.jsx    | 24 ------------------------
 web/components/TeamMember.jsx  | 11 +++--------
 web/components/TeamPage.js     |  6 ++++--
 6 files changed, 13 insertions(+), 40 deletions(-)
 delete mode 100644 web/components/TeamLogo.jsx

diff --git a/web/components/CommitBlock.jsx b/web/components/CommitBlock.jsx
index fb95f90..0cf0e48 100644
--- a/web/components/CommitBlock.jsx
+++ b/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>
diff --git a/web/components/DayBlock.jsx b/web/components/DayBlock.jsx
index 5db3f7b..32c4aa2 100644
--- a/web/components/DayBlock.jsx
+++ b/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>
diff --git a/web/components/SetBlock.jsx b/web/components/SetBlock.jsx
index 80f6c8a..6ddc0d3 100644
--- a/web/components/SetBlock.jsx
+++ b/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'
             >
diff --git a/web/components/TeamLogo.jsx b/web/components/TeamLogo.jsx
deleted file mode 100644
index de68630..0000000
--- a/web/components/TeamLogo.jsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react';
-
-import Image from './Image';
-import Flex from './Flex';
-
-export default class TeamLogo extends React.Component {
-    render() {
-        return (
-
-            <Flex
-                alignItems='center'
-                mx='auto'
-                my='1rem'
-                width='375px'
-            >
-                <Image
-                    my='auto'
-                    mx='auto'
-                    src={require('../images/Set_Team.png')}
-                />
-            </Flex>
-        );
-    }
-}
diff --git a/web/components/TeamMember.jsx b/web/components/TeamMember.jsx
index c59ff4e..d38313f 100644
--- a/web/components/TeamMember.jsx
+++ b/web/components/TeamMember.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>
             </>
diff --git a/web/components/TeamPage.js b/web/components/TeamPage.js
index c0ea101..51f6e7b 100644
--- a/web/components/TeamPage.js
+++ b/web/components/TeamPage.js
@@ -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>