feat(app): fix styling of header

abedzantout · abedzantout · commit 5843924b20af · 2019-09-16T14:25:52.000+03:00
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -11,11 +11,11 @@ type Props = {
     url: any;
 }
 const IndexPage: NextPage = (props: Props) => {
-    console.log(props.entries);
+
     return (
+
         <Layout meta={defaultMetaTags}>
             <div>Latest posts</div>
-
         </Layout>
     )
 };
diff --git a/shared/components/header/index.tsx b/shared/components/header/index.tsx
@@ -3,7 +3,13 @@ import React, { FunctionComponent } from 'react';
 type Props = {}
 const Header: FunctionComponent<Props> = ({}) => {
     return (
-        <div>hello</div>
+        <div className="nav">
+            <img className="logo" src="/static/logo.png" alt="logo"/>
+            <style jsx>{`
+                .nav { background-color: #ffffff; border-bottom: 1px solid #ececec; box-shadow: 0 2px 50px 0 rgba(0,0,0,0.16);}
+                .logo { border-radius: 50%; width: 10rem; }
+            `}</style>
+        </div>
     );
 };
 
diff --git a/shared/components/layout/index.tsx b/shared/components/layout/index.tsx
@@ -1,5 +1,6 @@
 import React, { FunctionComponent, Fragment, ReactNode } from 'react';
 import Meta from '../meta';
+import Header from '../header';
 
 type Props = {
     meta: any;
@@ -10,11 +11,17 @@ const Layout: FunctionComponent<Props> = ({meta, children}) => {
     return (
         <Fragment>
             <Meta tag={meta}/>
+            <div className="header">
+                <Header/>
+            </div>
             <div className="layout">
                 <main>
                     {children}
                 </main>
             </div>
+            <style jsx global>{`
+                body { margin: 0; padding: 0}
+            `}</style>
         </Fragment>
     );
 };
diff --git a/static/logo.png b/static/logo.png

Original file line number	Diff line number	Diff line change
`@@ -11,11 +11,11 @@ type Props = {`
`11`	`11`	`url: any;`
`12`	`12`	`}`
`13`	`13`	`const IndexPage: NextPage = (props: Props) => {`
`14`		`- console.log(props.entries);`
	`14`	`+`
`15`	`15`	`return (`
	`16`	`+`
`16`	`17`	`<Layout meta={defaultMetaTags}>`
`17`	`18`	`<div>Latest posts</div>`
`18`		`-`
`19`	`19`	`</Layout>`
`20`	`20`	`)`
`21`	`21`	`};`