move browserrouter to index.js, add Logo

hipstagram/src/App.js

@@ -4,34 +4,36 @@ import Header from "./Header/header";
 import Navigation from "./Content/Navigation/navigation";
 import Messages from "./Content/Messages/messages";
 import News from "./Content/News/news";
-import { BrowserRouter, Redirect, Route } from "react-router-dom";
+import { Redirect, Route } from "react-router-dom";
 import Music from "./Content/Music/music";
 import Profile from "./Content/Profile/profile";
 import Settings from "./Content/Settings/settings";
 
 function App(props) {
   return (
-    <BrowserRouter>
-      <div className="app-wrapper">
-        <Header />
+    <div className="app-wrapper">
+      <Header />
 
-        <div className="content-block">
-          <Navigation />
+      <div className="content-block">
+        <Navigation />
 
-          <div className="app-wrapper-content">
-            <Redirect exact from="/" to="/profile" />
-            <Route path="/profile" 
-              render={ () => <Profile state={ props.state.profilePage } />} />
-            <Route path="/messages" 
-              render={ () => <Messages state={ props.state.messagesPage }  /> } />
-            <Route path="/news" component={News} />
-            <Route path="/music" component={Music} />
-            <Route path="/settings" component={Settings} />
-          </div>
+        <div className="app-wrapper-content">
+          <Redirect exact from="/" to="/profile" />
+          <Route
+            path="/profile"
+            render={() => <Profile state={props.state.profilePage} />}
+          />
+          <Route
+            path="/messages"
+            render={() => <Messages state={props.state.messagesPage} />}
+          />
+          <Route path="/news" component={News} />
+          <Route path="/music" component={Music} />
+          <Route path="/settings" component={Settings} />
         </div>
       </div>
-    </BrowserRouter>
+    </div>
   );
 }
 
-export default App;
+export default App;

hipstagram/src/Header/header.css

@@ -10,6 +10,8 @@
 }
 
 .header img {
-    width: 120px;
+    /* width: 120px; */
     margin-left: 26px;
+    height: 80px;
+    border-radius: 5px;
 }

hipstagram/src/Header/header.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import './header.css';
-
+import logo from '../Images/Logo.svg'
 
 function Header() {
     return(
         <div>
             <header className='header'>
-                <img src='https://image.freepik.com/free-vector/abstract-logo-two-versions_23-2148455881.jpg' />
+                <img src={ logo } />
         
             </header>
         </div>

hipstagram/src/index.js

@@ -4,10 +4,13 @@ import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 import state from './Redux/state';
+import { BrowserRouter } from 'react-router-dom';
 
 ReactDOM.render(
   <React.StrictMode>
-    <App state={ state } />
+    <BrowserRouter>
+      <App state={ state } />
+    </BrowserRouter>
   </React.StrictMode>,
   document.getElementById('root')
 );