Merge pull request #33 from FAC7/styleHC

add top padding for collapse box (host/candidate) #21 #23 #6
FAC7 · Apr 17, 2016 · c49fdeb · c49fdeb
2 parents fed3588 + 99e01e4
commit c49fdeb
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 56 deletions.
diff --git a/frontend/src/js/components/CollapsibleItem/index.js b/frontend/src/js/components/CollapsibleItem/index.js
@@ -4,7 +4,7 @@ import {Well, Collapse} from 'react-bootstrap'
 
 const liStyle = {
   listStyleType: 'none',
-  color: 'dark-blue',
+  color: 'white',
   fontSize: '1.7em',
   textDecoration: 'none',
   cursor: 'pointer'

diff --git a/frontend/src/js/components/List/index.js b/frontend/src/js/components/List/index.js
@@ -17,7 +17,6 @@ export default (props) => {
 }
 
 const ulStyle = {
-  backgroundColor: '#03A9F4',
   padding: '2em',
   borderRadius: '10px',
   color: 'white',
@@ -26,7 +25,7 @@ const ulStyle = {
 
 const liStyle = {
   listStyleType: 'none',
-  color: 'white',
+  color: 'black',
   fontSize: '1.7em',
   textDecoration: 'none',
   cursor: 'pointer'

diff --git a/frontend/src/js/views/Candidate/index.js b/frontend/src/js/views/Candidate/index.js
@@ -7,7 +7,7 @@ import {Grid, Row, Col} from 'react-bootstrap'
 const loggedInCandidateID = 'candidateUUID1'
 
 const ulStyle = {
-  backgroundColor: '#03A9F4',
+  backgroundColor: '#0075B2',
   padding: '2em',
   borderRadius: '10px'
 }
@@ -31,27 +31,29 @@ export default class CandidateView extends Component {
     return (
       <Grid>
         <Row>
-          <Col md={12}>
-            <ul style={ulStyle}>
-              <CollapsibleItem
-                text={'Open Roles'}
-                roles={this.state.roles}
-                changeState={this.changeState}
-                filterFunction={(role) => !this.checkIfAppliedTo(role)}
-              />
-              <CollapsibleItem
-                text={'Applied To'}
-                roles={this.state.roles}
-                changeState={this.changeState}
-                filterFunction={(role) => this.checkIfAppliedTo(role)}
-              />
-              <RoleModal
-                changeState={this.changeState}
-                showModal={this.state.showModal}
-                currentRole={this.state.currentRole}
-              />
-            </ul>
-          </Col>
+          <div className='collapseBox'>
+            <Col md={12}>
+              <ul style={ulStyle}>
+                <CollapsibleItem
+                  text={'Open Roles'}
+                  roles={this.state.roles}
+                  changeState={this.changeState}
+                  filterFunction={(role) => !this.checkIfAppliedTo(role)}
+                />
+                <CollapsibleItem
+                  text={'Applied To'}
+                  roles={this.state.roles}
+                  changeState={this.changeState}
+                  filterFunction={(role) => this.checkIfAppliedTo(role)}
+                />
+                <RoleModal
+                  changeState={this.changeState}
+                  showModal={this.state.showModal}
+                  currentRole={this.state.currentRole}
+                />
+              </ul>
+            </Col>
+          </div>
         </Row>
       </Grid>
     )

diff --git a/frontend/src/js/views/Home/index.js b/frontend/src/js/views/Home/index.js
@@ -2,16 +2,20 @@ import React from 'react'
 import {Link} from 'react-router'
 import { Jumbotron, Button } from 'react-bootstrap'
 
+const width = {
+  width: '400px'
+}
+
 export default (props) => {
   return (
     <Jumbotron className='home'>
       <div>
         <h1>Welcome to Worthwhile portal</h1>
         <div className='CLogin'>
-          <Link to={'/candidate'}><Button bsStyle='primary' bsSize='large'>Candidate login</Button></Link>
+          <Link to={'/candidate'}><Button style={width} bsStyle='primary' bsSize='large'>Candidate login</Button></Link>
         </div>
-        <div className='hLgin'>
-          <Link to={'/host'}><Button bsStyle='primary' bsSize='large'>Host login</Button></Link>
+        <div className='HLgin'>
+          <Link to={'/host'}><Button style={width} bsStyle='primary' bsSize='large'>Host login</Button></Link>
         </div>
       </div>
     </Jumbotron>

diff --git a/frontend/src/js/views/Host/index.js b/frontend/src/js/views/Host/index.js
@@ -5,7 +5,7 @@ import CandidateProfileModal from '../../components/CandidateProfile/CandidatePr
 import {Grid, Row, Col} from 'react-bootstrap'
 
 const ulStyle = {
-  backgroundColor: '#03A9F4',
+  backgroundColor: '#0075B2',
   padding: '2em',
   borderRadius: '10px'
 }
@@ -23,33 +23,35 @@ export default class HostView extends Component {
     return (
       <Grid>
         <Row>
-          <Col md={12}>
-            <ul style={ulStyle}>
-              <CollapsibleItem
-                text={'Applied'}
-                candidates={this.state.candidates}
-                changeState={this.changeState}
-                filterFunction={(candidate) => candidate}
-              />
-              <CollapsibleItem
-                text={'Interviewed'}
-                candidates={this.state.candidates}
-                changeState={this.changeState}
-                filterFunction={(candidate) => candidate}
-              />
-              <CollapsibleItem
-                text={'Accepted'}
-                candidates={this.state.candidates}
-                changeState={this.changeState}
-                filterFunction={(candidate) => candidate}
-              />
-              <CandidateProfileModal
-                changeState={this.changeState}
-                showModal={this.state.showModal}
-                currCandidate={this.state.currCandidate}
-              />
-            </ul>
-          </Col>
+          <div className='collapseBox'>
+            <Col md={12}>
+              <ul style={ulStyle}>
+                <CollapsibleItem
+                  text={'Applied'}
+                  candidates={this.state.candidates}
+                  changeState={this.changeState}
+                  filterFunction={(candidate) => candidate}
+                />
+                <CollapsibleItem
+                  text={'Interviewed'}
+                  candidates={this.state.candidates}
+                  changeState={this.changeState}
+                  filterFunction={(candidate) => candidate}
+                />
+                <CollapsibleItem
+                  text={'Accepted'}
+                  candidates={this.state.candidates}
+                  changeState={this.changeState}
+                  filterFunction={(candidate) => candidate}
+                />
+                <CandidateProfileModal
+                  changeState={this.changeState}
+                  showModal={this.state.showModal}
+                  currCandidate={this.state.currCandidate}
+                />
+              </ul>
+            </Col>
+          </div>
         </Row>
       </Grid>
     )

diff --git a/frontend/src/scss/style.scss b/frontend/src/scss/style.scss
@@ -11,3 +11,17 @@ body {
   margin-bottom: $footer-height;
 }
 
+.collapseBox {
+  padding-top: 48px;
+}
+
+.CLogin {
+  padding-top: 20px;
+  padding-bottom: 14px;
+}
+
+.HLgin {
+  padding-top: 14px;
+  padding-bottom: 14px;
+}
+