From dfa1a02514fc624ab64bf0efbac7e28f12880a74 Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Sun, 17 Nov 2019 20:54:54 +0700
Subject: [PATCH] Add shadow to cover and browser frame

---
 client/layouts/stepper-input/Cover.jsx | 2 +-
 client/placeholders/BrowserFrame.jsx   | 2 +-
 client/placeholders/Frame.jsx          | 1 +
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/client/layouts/stepper-input/Cover.jsx b/client/layouts/stepper-input/Cover.jsx
index 588b144..821ab96 100644
--- a/client/layouts/stepper-input/Cover.jsx
+++ b/client/layouts/stepper-input/Cover.jsx
@@ -8,7 +8,7 @@ const Cover = () => {
             <div className="h-100 flex items-center justify-center pa2">
                 <div className="b--black-30 ba br2 flex w-100 h1">
                     <div className="b--black-30 br flex items-center justify-center w1">-</div>
-                    <div className="flex-grow-1 bg-white"></div>
+                    <div className="flex-grow-1"></div>
                     <div className="b--black-30 bl flex items-center justify-center w1">+</div>
                 </div>
             </div>
diff --git a/client/placeholders/BrowserFrame.jsx b/client/placeholders/BrowserFrame.jsx
index 6114202..7eed83b 100644
--- a/client/placeholders/BrowserFrame.jsx
+++ b/client/placeholders/BrowserFrame.jsx
@@ -5,7 +5,7 @@ const BrowserFrame = ({ content, source }) => {
     const flip = () => setContentActive(isActive => !isActive);
 
     return (
-        <div className="br2 ba b--black-20">
+        <div className="br2 ba b--black-20" style={{ boxShadow: '0 24px 48px -8px rgba(0, 0, 0, .5)' }}>
             <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" />
diff --git a/client/placeholders/Frame.jsx b/client/placeholders/Frame.jsx
index fb1d17b..458f569 100644
--- a/client/placeholders/Frame.jsx
+++ b/client/placeholders/Frame.jsx
@@ -5,6 +5,7 @@ const Frame = ({ children }) => {
         <div
             className="ba b--black-30 br2"
             style={{
+                boxShadow: 'rgba(0, 0, 0, 0.2) 0px 16px 24px -4px, rgba(0, 0, 0, 0.05) 0px 8px 8px -4px',
                 height: '100px',
                 width: '100px',
             }}