From 7e9ce95264e078b7de4ea33fb991cb22cd606a7f Mon Sep 17 00:00:00 2001
From: Cassie Tarakajian <ctarakajian@gmail.com>
Date: Thu, 2 Mar 2017 15:01:33 -0500
Subject: [PATCH] add header to preview frame

---
 client/modules/IDE/pages/IDEView.jsx         |  3 ++
 client/styles/components/_preview-frame.scss | 38 ++++++++++++++++++++
 client/styles/layout/_ide.scss               | 24 -------------
 client/styles/main.scss                      |  1 +
 4 files changed, 42 insertions(+), 24 deletions(-)
 create mode 100644 client/styles/components/_preview-frame.scss

diff --git a/client/modules/IDE/pages/IDEView.jsx b/client/modules/IDE/pages/IDEView.jsx
index a095f51d..bf6bbca3 100644
--- a/client/modules/IDE/pages/IDEView.jsx
+++ b/client/modules/IDE/pages/IDEView.jsx
@@ -320,6 +320,9 @@ class IDEView extends React.Component {
                 />
               </SplitPane>
               <div className="preview-frame-holder">
+                <header className="preview-frame__header">
+                  <h2 className="preview-frame__title">Preview</h2>
+                </header>
                 <div className="preview-frame-overlay" ref={(element) => { this.overlay = element; }}>
                 </div>
                 <div>
diff --git a/client/styles/components/_preview-frame.scss b/client/styles/components/_preview-frame.scss
new file mode 100644
index 00000000..789b4ad6
--- /dev/null
+++ b/client/styles/components/_preview-frame.scss
@@ -0,0 +1,38 @@
+.preview-frame {
+  min-height: 100%;
+  min-width: 100%;
+  position: absolute;
+}
+
+
+.preview-frame-overlay {
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  z-index: 10;
+  display: none;
+}
+
+.preview-frame-placeholder {
+  width: #{400 / $base-font-size}rem;
+  height: #{400 / $base-font-size}rem;
+  position: absolute;
+  @include themify() {
+    background: getThemifyVariable('preview-placeholder-color');
+  }
+}
+
+.preview-frame__header {
+  height: #{29 / $base-font-size}rem;
+}
+
+.preview-frame__title {
+  @include themify() {
+    color: getThemifyVariable('secondary-text-color');
+  }
+  height: #{29 / $base-font-size}rem;
+  padding-top: #{7 / $base-font-size}rem;
+  padding-left: #{5 / $base-font-size}rem;
+  font-size: #{12 / $base-font-size}rem;
+  font-weight: normal;
+}
diff --git a/client/styles/layout/_ide.scss b/client/styles/layout/_ide.scss
index 7a92fa7c..87e3724c 100644
--- a/client/styles/layout/_ide.scss
+++ b/client/styles/layout/_ide.scss
@@ -35,30 +35,6 @@
 	@extend %hidden-element;
 }
 
-.preview-frame {
-  min-height: 100%;
-  min-width: 100%;
-  position: absolute;
-}
-
-
-.preview-frame-overlay {
-  height: 100%;
-  width: 100%;
-  position: absolute;
-  z-index: 10;
-  display: none;
-}
-
-.preview-frame-placeholder {
-  width: #{400 / $base-font-size}rem;
-  height: #{400 / $base-font-size}rem;
-  position: absolute;
-  @include themify() {
-    background: getThemifyVariable('preview-placeholder-color');
-  }
-}
-
 .toolbar {
 	width: 100%;
 }
diff --git a/client/styles/main.scss b/client/styles/main.scss
index d5a507a6..4ba6dce3 100644
--- a/client/styles/main.scss
+++ b/client/styles/main.scss
@@ -32,6 +32,7 @@
 @import 'components/timer';
 @import 'components/form-container';
 @import 'components/error-modal';
+@import 'components/preview-frame';
 
 @import 'layout/ide';
 @import 'layout/fullscreen';