From 478297f11a28130fa960486b5785a2ebdebe144b Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Fri, 15 Nov 2019 16:37:08 +0700
Subject: [PATCH] Highlight centering sample code

---
 client/index.html                    |  1 -
 client/layouts/Centering.jsx         | 15 ++++++++++++++-
 client/placeholders/BrowserFrame.jsx |  4 ++--
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/client/index.html b/client/index.html
index 6ff7e3b..a72b7a4 100644
--- a/client/index.html
+++ b/client/index.html
@@ -11,7 +11,6 @@
         -webkit-font-smoothing: antialiased;
     }
     code {
-        border-radius: 4px;
         font-family: 'Source Code Pro', monospace;
         font-size: 14px;
     }
diff --git a/client/layouts/Centering.jsx b/client/layouts/Centering.jsx
index 958a723..db6ff1c 100644
--- a/client/layouts/Centering.jsx
+++ b/client/layouts/Centering.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 
 import DetailsLayout from '../DetailsLayout';
 import BrowserFrame from '../placeholders/BrowserFrame';
+import SampleCode from '../SampleCode';
 
 const Centering = () => {
     return (
@@ -13,7 +14,19 @@ const Centering = () => {
                     </div>
                 }
                 source={
-                    <div>source</div>
+<SampleCode
+lang="html"
+code={`
+<div style="
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+">
+    CENTER
+</div>
+`}
+/>
                 }
             />
         </DetailsLayout>
diff --git a/client/placeholders/BrowserFrame.jsx b/client/placeholders/BrowserFrame.jsx
index f3c6e70..398cd86 100644
--- a/client/placeholders/BrowserFrame.jsx
+++ b/client/placeholders/BrowserFrame.jsx
@@ -6,12 +6,12 @@ const BrowserFrame = ({ content, source }) => {
 
     return (
         <div className="br2 ba b--black-20">
-            <div className="flex pa3 bb b--black-20 items-center">
+            <div className="flex pa3 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" />
                 <div className="ml-auto">
-                    <button className="pointer bg-dark-blue br2 ph2 pv1 white" onClick={flip}>
+                    <button className="bn pointer bg-dark-blue br2 ph2 pv1 white" onClick={flip}>
                         {isContentActive ? 'Source' : 'Demo'}
                     </button>
                 </div>