style improvements to BOS (#1485)

near · Sep 7, 2023 · ec946e1 · ec946e1
1 parent fc2568f
commit ec946e1
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 11 deletions.
diff --git a/docs/2.develop/integrate/welcome.md b/docs/2.develop/integrate/welcome.md
@@ -13,7 +13,7 @@ Welcome! Here you will find documentation on how to build Web3 applications usin
 <div class="container">
   <div class="row">
     <div class="col col--3">
-      <a href="/bos">
+      <a href="/bos/overview">
         <div class="card">
           <div class="card__image">
             <img src={require("@site/static/docs/assets/welcome-pages/bos-big.png").default} alt="Multichain" />

diff --git a/website/src/components/social-widget.js b/website/src/components/social-widget.js
@@ -1,18 +1,16 @@
 import React from "react";
 import BrowserOnly from '@docusaurus/BrowserOnly';
 
-export function WidgetEditor({ children, id=1, height="160px", properties  }) {
+export function WidgetEditor({ children, id = 1, height = "160px", properties }) {
   let props = "";
-  for(const prop in properties){
+  for (const prop in properties) {
     props += `${prop}=${properties[prop]}`
   }
 
-  const uri = "https://near.social/#/embed/zavodil.near/widget/remote-code?"+props;
+  const uri = "https://near.social/#/embed/zavodil.near/widget/remote-code?" + props;
 
   const code = children.props.children.props.children;
 
-
-
   return (
     <BrowserOnly fallback={<div>Loading...</div>}>
       {() => {
@@ -41,12 +39,11 @@ export function WidgetEditor({ children, id=1, height="160px", properties  }) {
               onChange={(newValue, event) => { document.getElementById(`ifm${id}`).src = `${uri}&code=${encodeURIComponent(newValue)}` }}
             />
           </div>
-          <em> You can edit the code! </em>
 
           <div class="code_iframe">
-            <h4>Preview</h4>
+            <h4 style={{ fontWeight: 0 }}> <b>Preview</b> <small> - Edit the code above! </small> </h4>
             <hr class="preview-border" />
-            <iframe id={`ifm${id}`} src={`${uri}&code=${encodeURIComponent(code)}`} style={{height}}></iframe>
+            <iframe id={`ifm${id}`} src={`${uri}&code=${encodeURIComponent(code)}`} style={{ height }}></iframe>
           </div>
         </>
 

diff --git a/website/src/css/customTheme.css b/website/src/css/customTheme.css
@@ -198,6 +198,16 @@ img+em,
     background-color: transparent;
 }
 
+/* Component Preview */
+
+.code_iframe h4 {
+    margin: 0 !important;
+}
+
+.preview-border {
+    margin: 0.4rem 0 1rem 0;
+}
+
 /* Language selection Tabs*/
 .file-tabs {
     margin: 0px 0 -1rem 0rem;
@@ -1108,7 +1118,6 @@ iframe+em {
     margin: 0.5em 0 0 0;
 }
 
-
 /* Widget Editor */
 .monaco {
     border-radius: 10px;
@@ -1120,7 +1129,7 @@ iframe+em {
     border-radius: 10px;
     border: 1px solid #e6e6e6;
     padding: 1rem;
-    margin-bottom: 3rem;
+    margin: 1rem 0 2rem 0;
     overflow: hidden;
 }