Use placeholder for centering

client/covers/SidebarCover.jsx

@@ -5,13 +5,13 @@ import Line from '../placeholders/Line';
 
 const SidebarCover = () => {
     return (
-        <Frame size="medium">
+        <Frame>
             <div className="h-100 flex">
                 <div className="b--black-30 br flex flex-column justify-end pa1 w-30">
                     <div className="mb1"><Line /></div>
                     <div className="w-80"><Line /></div>
                 </div>
-                <div className="flex-grow-1 pa2">
+                <div className="flex-grow-1 pa2 b--black-30 br bw2">
                     <div className="mb2"><Line /></div>
                     <div className="mb2"><Line /></div>
                     <div className="mb2"><Line /></div>

client/covers/StickyFooterCover.jsx

@@ -5,7 +5,7 @@ import Line from '../placeholders/Line';
 
 const StickyFooterCover = () => {
     return (
-        <Frame size="medium">
+        <Frame>
             <div className="h-100 flex flex-column">
                 <div className="flex-shrink-0 b--black-30 br bw2">
                     <div className="w-100 flex items-center pa2">
@@ -13,7 +13,7 @@ const StickyFooterCover = () => {
                         <div className="w1 ml-auto"><Line /></div>
                         <div className="w1 ml1"><Line /></div>
                     </div>
-                    <Line size="medium" />
+                    <Line />
                 </div>
                 <div className="flex-grow-1 b--black-30 br bw2">
                     <div className="pa2">
@@ -23,7 +23,7 @@ const StickyFooterCover = () => {
                     </div>
                 </div>
                 <div className="flex-shrink-0">
-                    <Line size="medium" />
+                    <Line />
                     <div className="w-100 flex items-center pa2">
                         <div className="w1"><Line /></div>
                         <div className="w1 ml1"><Line /></div>

client/covers/StickyHeaderCover.jsx

@@ -5,7 +5,7 @@ import Line from '../placeholders/Line';
 
 const StickyHeaderCover = () => {
     return (
-        <Frame size="medium">
+        <Frame>
             <div className="h-100 flex flex-column">
                 <div className="flex-shrink-0">
                     <div className="w-100 flex items-center pa2">
@@ -13,7 +13,7 @@ const StickyHeaderCover = () => {
                         <div className="w1 ml-auto"><Line /></div>
                         <div className="w1 ml1"><Line /></div>
                     </div>
-                    <Line size="medium" />
+                    <Line />
                 </div>
                 <div className="flex-grow-1 b--black-30 br bw2">
                     <div className="pa2">

client/layouts/Centering.jsx

@@ -2,6 +2,8 @@ import React from 'react';
 
 import DetailsLayout from '../DetailsLayout';
 import BrowserFrame from '../placeholders/BrowserFrame';
+import Dot from '../placeholders/Dot';
+import Rectangle from '../placeholders/Rectangle';
 import SampleCode from '../SampleCode';
 import useDocumentTitle from '../useDocumentTitle';
 
@@ -14,7 +16,10 @@ const Centering = () => {
             <BrowserFrame
                 content={
                     <div className="h-100 flex flex-column items-center justify-center">
-                        <div className="f1 b">CENTER</div>
+                        <Dot size={64} />
+                        <div className="w-40 mt3"><Rectangle /></div>
+                        <div className="w-30 mt2"><Rectangle /></div>
+                        <div className="w-20 mt2"><Rectangle /></div>
                     </div>
                 }
                 source={
@@ -24,10 +29,9 @@ code={`
 <div style="
     align-items: center;
     display: flex;
-    flex-direction: column;
     justify-content: center;
 ">
-    CENTER
+    ...
 </div>
 `}
 />

client/layouts/Sidebar.jsx

@@ -12,6 +12,7 @@ const Sidebar = () => {
     return (
         <DetailsLayout>
             <h1 className="f1 tc">Sidebar</h1>
+            <div className="lh-copy mb3">Try to scroll the main content!</div>
             <BrowserFrame
                 content={
                     <div className="h-100 flex">

client/layouts/StickyHeader.jsx

@@ -13,6 +13,7 @@ const StickyHeader = () => {
     return (
         <DetailsLayout>
             <h1 className="f1 tc">Sticky header</h1>
+            <div className="lh-copy mb3">Try to scroll the main content to see the header sticks to the top of page.</div>
             <BrowserFrame
                 content={
                     <div>

client/placeholders/Dot.jsx

@@ -1,8 +1,14 @@
 import React from 'react';
 
-const Dot = () => {
+const Dot = ({ size = 16 }) => {
     return (
-        <div className="bg-black-30 br-pill w1 h1" />
+        <div
+            className="bg-black-30 br-pill"
+            style={{
+                height: `${size}px`,
+                width: `${size}px`,
+            }}
+        />
     );
 };
 

client/placeholders/Frame.jsx

@@ -1,13 +1,10 @@
 import React from 'react';
 
-const Frame = ({ children, size }) => {
+const Frame = ({ children }) => {
-    const bw = (size === 'medium' ? '2px' : '1px');
-
     return (
         <div
             className="ba b--black-30 br2"
             style={{
-                borderWidth: bw,
                 height: '100px',
                 width: '100px',
             }}