Merge pull request #18 from FACG4/header

Header "front-end"

frontend/src/components/Header/HeaderTitle/HeaderTitle.js

@@ -0,0 +1,14 @@
+import React, { Component } from 'react';
+import logo from './careandshare.png';
+
+import ('../style.css');
+
+const Title = ({ title }) => {
+    return(
+      <a href="#">
+        {title?<h1>{title}</h1>:<img className="App-header-title" src={logo} alt="logo"/>}
+      </a>
+    );
+}
+
+export default Title;

frontend/src/components/Header/Notifications/Notification/Notification.js

@@ -0,0 +1,17 @@
+import React , { Component } from 'react';
+
+import './style.css';
+
+const Notification = ({name}) => {
+    return (
+      <div className="notification-wrapper">
+        <p>{name} wants to connect with you!</p>
+        <div>
+          <button>Accept</button>
+          <button>Decline</button>
+        </div>
+      </div>
+    );
+}
+
+export default Notification;

frontend/src/components/Header/Notifications/Notification/style.css

@@ -0,0 +1,39 @@
+.notification-wrapper {
+  background-color: rgba(255, 255, 255, 0.8);
+  width: 300px;
+  height: 110px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  margin-top: 7px;
+}
+
+.notification-wrapper div {
+  display: flex;
+  width: 80%;
+  justify-content: space-evenly;
+}
+
+.notification-wrapper p {
+  width: 80%;
+  text-align: center;
+}
+
+.notification-wrapper button {
+  cursor: pointer;
+  width: 90px;
+  height: 35px;
+  text-align: center;
+  border-radius: 18px;
+  background-color: #48A1AF;
+  border: none;
+}
+
+.notification-wrapper button:hover {
+  box-shadow: 0 2px 5px -2px #000;
+}
+
+.notification-wrapper button:nth-child(2) {
+  background-color: #848484;
+}

frontend/src/components/Header/Notifications/index.js

@@ -0,0 +1,43 @@
+import React, { Component } from 'react';
+import FontAwesomeIcon from 'react-fontawesome'
+
+import Notification from './Notification/Notification';
+
+import './style.css';
+
+class Notifications extends Component {
+  state = {
+    show: false,
+  }
+
+  toggleNotification = (e) => {
+    this.setState(prevState => ({
+      show: !prevState.show
+    }));
+  }
+
+  render () {
+    const { connectReq } = this.props;
+    const { show } = this.state;
+
+    const notifications = connectReq.length? connectReq.map(element => {
+      return <Notification name={element.name} key={element.id} />
+    }):<p>You have no notifications</p>;
+
+    return(
+      <React.Fragment>
+        <a onClick={this.toggleNotification} className="notification">
+          <div>
+            {(connectReq.length && !show)?<span className="num">{connectReq.length}</span>:''}
+            <FontAwesomeIcon name="bell-o" />
+          </div>
+        </a>
+        <div className={`notifications ${show?'': "hidden"}`}>
+          {notifications}
+        </div>
+      </React.Fragment>
+    );
+  }
+}
+
+export default Notifications;

frontend/src/components/Header/Notifications/style.css

@@ -0,0 +1,33 @@
+.notification .num {
+  display: block;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background-color: #FC2E2E;
+  color: #fff;
+  text-align: center;
+  font-size: 19px;
+  position: absolute;
+  right: 10px;
+  top: 8px;
+}
+
+.notifications {
+  width: 320px;
+  min-height: 100px;
+  background-color: #DFE2DB;
+  padding: 10px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  top: 30px;
+  z-index: 1;
+  transition: all 0.5s ease;
+}
+
+.hidden {
+  transform: translate(50%, -50%) scale(0);
+  transition: all 0.5s ease;
+}

frontend/src/components/Header/index.js

@@ -0,0 +1,28 @@
+import React, { Component } from 'react';
+import FontAwesomeIcon from 'react-fontawesome'
+
+import HeaderTitle from './HeaderTitle/HeaderTitle';
+import Notifications from './Notifications';
+
+import './style.css';
+
+class Header extends Component {
+
+  render(){
+    return(
+      <header className="App-header">
+        <Notifications connectReq={this.props.connectReq}/>
+        <HeaderTitle title={this.props.title} />
+
+        <a className="menu">
+          <FontAwesomeIcon name="bars" />
+        </a>
+        <a className="angle-left">
+          <FontAwesomeIcon name="angle-left" />
+        </a>
+      </header>
+    );
+  }
+}
+
+export default Header;

frontend/src/components/Header/style.css

@@ -0,0 +1,57 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+#root {
+  width: 375px;
+  height: 667px;
+  max-width: 375px;
+  max-height: 667px;
+  margin: 0 auto;
+}
+
+.App-header {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 120px;
+  background-color: #48A1AF;
+  box-shadow: 0px 4px 10px -6px #000;
+}
+
+.App-header a {
+  position: absolute;
+  font-size: 24px;
+  margin: 5px;
+  cursor: pointer;
+  text-decoration: none;
+  color: #000;
+}
+
+.App-header h1 {
+  font-size: 30px;
+}
+
+.App-header .menu {
+  left: 0;  
+  top: 0;
+}
+
+.App-header .angle-left {
+  left: 0;  
+  bottom: 0;
+}
+
+.App-header .notification {
+  font-size: 18px;
+  right: 0;  
+  top: 0;
+}
+
+.App-header-title {
+  width: 200px;
+}