Added Team page

src/components/Team-Container/index.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import {connect} from 'react-redux';
+
+import Team from '../team';
+import './styles.css';
+
+class About extends React.Component {
+  componentDidMount() {
+    document.body.scrollTop = 0;
+  }
+  render() {
+    return <div className="uk-container">
+      <div className={'uk-margin-large-top'}>
+        <div className={'team-title'}>Team</div>
+        {this.props.team.map((team, idx) => <Team key={idx} team={team}/>)}
+      </div>
+    </div>
+  }
+}
+
+const mapStateToProps = state => {
+  return {
+    team: state.team.team
+  }
+};
+
+export default connect(mapStateToProps)(About);

src/components/Team-Container/styles.css

@@ -0,0 +1,6 @@
+.team-title {
+    padding-left: 8px;
+    font-size: 4rem;
+    font-style: italic;
+    font-weight: bolder;
+}

src/components/header/index.js

@@ -62,6 +62,8 @@ class Header extends React.Component {
               <Link className={'heading-text'} to={'/timeline'}><span>Timeline</span></Link></li>
             <li className={[this.props.location.pathname === '/about' ? 'uk-active' : ''].join(' ')}>
               <Link className={'heading-text'} to={'/about'}><span>About</span></Link></li>
+            <li className={[this.props.location.pathname === '/team' ? 'uk-active' : ''].join(' ')}>
+              <Link className={'heading-text'} to={'/team'}><span>Team</span></Link></li>
             <li className={[this.props.location.pathname === '/dashboard' ? 'uk-active' : ''].join(' ')}>
               {!this.props.signedIN ? <SignIn/> : <Link className={'heading-text'} to={'/dashboard'}>
                 <span>Dashboard</span></Link>}</li>

src/components/team/index.js

@@ -7,15 +7,15 @@ class Team extends React.Component {
     return <div className="team-section">
       <div uk-grid="true" className={'uk-grid-large uk-child-width-expand@s'}>
         {this.props.team.members.map((member, idx) => <div
-          className={'uk-width-1-3@s uk-width-1-4@m uk-width-1-5@l uk-margin-large-top uk-text-center'} key={idx}>
-          <img src={member.img ? member.img : '/fest-logo.png'} className={'uk-thumbnail uk-border-circle'}
+          className={'uk-width-1-3@s uk-width-1-4@m uk-width-1-5@l uk-margin-large-top'} key={idx}>
+          <img src={member.img ? member.img : '/fest-logo.png'} className={'uk-thumbnail'}
                alt={member.name}
                style={{width: '100%', overflow: 'hidden', backgroundSize: 'cover', backgroundPosition: 'center'}}/>
           <div className={'uk-margin-top'}>{member.name}</div>
           <div>
-            [ <span className={'primary-color'}>{this.props.team.name}</span> ]
+            <span className={'primary-color team-name'}>{this.props.team.name}</span>
           </div>
-          <div className={'uk-margin-left'}>
+          <div className="team-name">
             {member.links.github &&
             <a href={member.links.github} target={'_blank'} className={'uk-margin-right team-ext'}><FaGithub/></a>}
             {member.links.linkedin &&

src/components/team/team.css

@@ -9,3 +9,7 @@
 .team-section{
 	padding: 5px;
 }
+
+.team-name {
+	font-size: small;
+}

src/index.js

@@ -18,6 +18,8 @@ import About from './components/about';
 import Dashboard from './components/dashboard';
 import Event from './components/event';
 import Timeline from './components/timeline';
+import Team from './components/Team-Container';
+import TeamContainer from './components/Team-Container';
 
 // UIKit
 UIKit.use(Icons);
@@ -52,6 +54,7 @@ ReactDOM.render(
           <Route exact path={'/timeline'} component={Timeline}/>
           <Route exact path={'/events/:id'} component={Event}/>
           <Route exact path={'/about'} component={About}/>
+          <Route exact path={'/team'} component={TeamContainer}/>
         </Switch>
         <Footer/>
       </div>