From 254ba0b4b6d65af09ba747e5fae38af6ac929aac Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Fri, 15 Nov 2019 21:43:47 +0700
Subject: [PATCH] Move header from layout

---
 client/DetailsLayout.jsx             | 3 +--
 client/layouts/Centering.jsx         | 3 ++-
 client/layouts/StickyFooter.jsx      | 3 ++-
 client/layouts/StickyHeader.jsx      | 3 ++-
 client/placeholders/BrowserFrame.jsx | 2 +-
 5 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/client/DetailsLayout.jsx b/client/DetailsLayout.jsx
index 2c34b60..f59d31a 100644
--- a/client/DetailsLayout.jsx
+++ b/client/DetailsLayout.jsx
@@ -3,14 +3,13 @@ import { Link } from 'react-router-dom';
 
 import Layout from './Layout';
 
-const DetailsLayout = ({ name, children }) => {
+const DetailsLayout = ({ children }) => {
     return (
         <Layout>
             <div className="mw8 center">
                 <div className="mv4">
                     <Link to="/" className="link black pa1 ba b--black-60">CSS Layout</Link>
                 </div>
-                <h1 className="f1 tc">{name}</h1>
                 <div className="mb5">
                     {children}
                 </div>
diff --git a/client/layouts/Centering.jsx b/client/layouts/Centering.jsx
index 1714990..17304a0 100644
--- a/client/layouts/Centering.jsx
+++ b/client/layouts/Centering.jsx
@@ -9,7 +9,8 @@ const Centering = () => {
     useDocumentTitle('CSS Layout ∙ Centering');
 
     return (
-        <DetailsLayout name="Centering">
+        <DetailsLayout>
+            <h1 className="f1 tc">Centering</h1>
             <BrowserFrame
                 content={
                     <div className="h-100 flex flex-column items-center justify-center">
diff --git a/client/layouts/StickyFooter.jsx b/client/layouts/StickyFooter.jsx
index 2ea0791..eb6e565 100644
--- a/client/layouts/StickyFooter.jsx
+++ b/client/layouts/StickyFooter.jsx
@@ -9,7 +9,8 @@ const StickyFooter = () => {
     useDocumentTitle('CSS Layout ∙ Sticky footer');
 
     return (
-        <DetailsLayout name="Sticky footer">
+        <DetailsLayout>
+            <h1 className="f1 tc">Sticky footer</h1>
             <div className="lh-copy mb3">
                 The footer always sticks to the bottom if the main content is short.
             </div>
diff --git a/client/layouts/StickyHeader.jsx b/client/layouts/StickyHeader.jsx
index 36f5ad5..48d054a 100644
--- a/client/layouts/StickyHeader.jsx
+++ b/client/layouts/StickyHeader.jsx
@@ -9,7 +9,8 @@ const StickyHeader = () => {
     useDocumentTitle('CSS Layout ∙ Sticky header');
 
     return (
-        <DetailsLayout name="Sticky header">
+        <DetailsLayout>
+            <h1 className="f1 tc">Sticky header</h1>
             <BrowserFrame
                 content={
                     <div>
diff --git a/client/placeholders/BrowserFrame.jsx b/client/placeholders/BrowserFrame.jsx
index afd086b..6114202 100644
--- a/client/placeholders/BrowserFrame.jsx
+++ b/client/placeholders/BrowserFrame.jsx
@@ -6,7 +6,7 @@ const BrowserFrame = ({ content, source }) => {
 
     return (
         <div className="br2 ba b--black-20">
-            <div className="flex pa3 bb b--black-20 items-center bg-black-05">
+            <div className="flex ph3 pv2 bb b--black-20 items-center bg-black-05">
                 <div className="br-100 mr1 w1 h1 bg-red" />
                 <div className="br-100 mr1 w1 h1 bg-gold" />
                 <div className="br-100 mr1 w1 h1 bg-red" />