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 {
/>
+
{ this.overlay = element; }}>
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';