Merge pull request #27 from FACG4/header

fix: header front-end refactor code
FACG4 · Aug 2, 2018 · b99169d · b99169d
2 parents 4b73ab1 + 1e4433f
commit b99169d
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 7 deletions.
diff --git a/frontend/src/components/Header/HeaderTitle/HeaderTitle.js b/frontend/src/components/Header/HeaderTitle/HeaderTitle.js
@@ -1,11 +1,11 @@
-import React, { Component } from 'react';
+import React from 'react';
 import logo from './careandshare.png';
 
 import ('../style.css');
 
 const Title = ({ title }) => {
     return(
-      <a href="#">
+      <a>
         {title?<h1>{title}</h1>:<img className="App-header-title" src={logo} alt="logo"/>}
       </a>
     );

diff --git a/frontend/src/components/Header/Notifications/Notification/Notification.js b/frontend/src/components/Header/Notifications/Notification/Notification.js
@@ -1,4 +1,4 @@
-import React , { Component } from 'react';
+import React from 'react';
 
 import './style.css';
 

diff --git a/frontend/src/components/Header/Notifications/index.js b/frontend/src/components/Header/Notifications/index.js
@@ -8,6 +8,16 @@ import './style.css';
 class Notifications extends Component {
   state = {
     show: false,
+    connectReq: [ //should be fetched from db
+      { name: 'ahmed', id:1 },
+      { name: 'mohammed', id:2 },
+      { name: 'abdSamad', id:3 },
+      { name: 'Frah', id:4 },
+      { name: 'Ramy', id:5 },
+      { name: 'Inass', id:6 },
+      { name: 'Isaac', id:7 },
+      { name: 'Marwa', id:8 },
+    ]
   }
 
   toggleNotification = (e) => {
@@ -17,8 +27,7 @@ class Notifications extends Component {
   }
 
   render () {
-    const { connectReq } = this.props;
-    const { show } = this.state;
+    const { show, connectReq } = this.state;
 
     const notifications = connectReq.length? connectReq.map(element => {
       return <Notification name={element.name} key={element.id} />

diff --git a/frontend/src/components/Header/Notifications/style.css b/frontend/src/components/Header/Notifications/style.css
@@ -6,7 +6,9 @@
   background-color: #FC2E2E;
   color: #fff;
   text-align: center;
-  font-size: 19px;
+  padding: auto;
+  line-height: 20px;
+  font-size: 14px;
   position: absolute;
   right: 10px;
   top: 8px;

diff --git a/frontend/src/components/Header/index.js b/frontend/src/components/Header/index.js
@@ -8,10 +8,12 @@ import './style.css';
 
 class Header extends Component {
 
+  // the title should come from the selected nav
+
   render(){
     return(
       <header className="App-header">
-        <Notifications connectReq={this.props.connectReq}/>
+        <Notifications />
         <HeaderTitle title={this.props.title} />
 
         <a className="menu">