set embed iframe styles to look better while loading

itaditya · Apr 3, 2022 · aa32946 · aa32946
1 parent fdbcd24
commit aa32946
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/src/app/views/docs/docsUtils.module.css b/src/app/views/docs/docsUtils.module.css
@@ -9,3 +9,8 @@
   font-size: 1.125rem;
   line-height: 1.5;
 }
+
+.embedWrapper iframe {
+  border: none;
+  background-color: #202327;
+}
diff --git a/src/app/views/docs/introduction/Overview.view.tsx b/src/app/views/docs/introduction/Overview.view.tsx
@@ -7,6 +7,7 @@ const OverviewView: Component = () => {
 
   onMount(() => {
     sdk.embedProjectId(exampleElem, 'solid-command-palette-example-lite', {
+      view: 'editor',
       forceEmbedLayout: true,
       openFile: 'src/App.tsx',
       clickToLoad: true,
@@ -22,7 +23,9 @@ const OverviewView: Component = () => {
         mouse around. Users can fuzzy search to find the action. If the action has a keyboard
         shortcut then they can trigger it from anywhere. This increases their productivity by 10x.
       </p>
-      <div ref={exampleElem} />
+      <div class={docsStyles.embedWrapper}>
+        <div ref={exampleElem} />
+      </div>
     </section>
   );
 };