fix: header front-end refactor code

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>
     );

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

@@ -1,4 +1,4 @@
-import React , { Component } from 'react';
+import React from 'react';
 
 import './style.css';
 

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} />

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;

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">