BOS Workspace Design Updates

NEARBuilders · May 15, 2024 · 0d10c72 · 0d10c72
1 parent 9b0d153
commit 0d10c72
Show file tree

Hide file tree

Showing 8 changed files with 293 additions and 144 deletions.
diff --git a/md/getting_started/migration_guide.md b/md/getting_started/migration_guide.md
@@ -1,14 +1,14 @@
-# Migration Guide
+## Migration Guide
 
-## 0.0.1-alpha.x to 1.0.0
+### 0.0.1-alpha.x to 1.0.0
 
 This upgrade introduces some name changes, a new replacements strategy, and a more modular approach with apps and workspaces.
 
 To use the latest version, you may maintain your current app's structure, but must make the following changes:
 
 1. In every app's `bos.config.json`, rename "appAccount" to "account"
 2. Any widget utilizing replacements with `/*__@appAccount__*/` should replace with `${config_account}`. Aliases should be replaced with `${alias_ALIASKEY}`.
-3. 
+3.
 
 ### `bos.config.json`
 
@@ -52,4 +52,4 @@ If you decide to maintain the structure of your workspace (e.g. `/apps`), add a
 }
 ```
 
-And modify the script in the package.json to include `ws` (e.g. `npm run bw ws dev`)
+And modify the script in the package.json to include `ws` (e.g. `npm run bw ws dev`)
diff --git a/widget/components/Content.jsx b/widget/components/Content.jsx
@@ -1 +1 @@
-const Container = styled.div``;
+
diff --git a/widget/components/Header.jsx b/widget/components/Header.jsx
@@ -7,6 +7,10 @@ const { NearIcon } = VM.require("${config_account}/widget/components.NearIcon")
   NearIcon: () => <></>,
 };
 
+const { SidebarLayout } = VM.require("buildhub.near/widget/template.SidebarLayout") || {
+  SidebarLayout: () => <></>,
+};
+
 const documents = get();
 
 // Preprocess documents to group paths by their parent sections
@@ -36,8 +40,9 @@ const Button = styled.div`
 
 const DesktopLinks = styled.div`
   display: flex;
-  align-items: center;
-  gap: 8px;
+  align-items: flex-start;
+  gap: 24px;
+  flex: 1 0 0;
   @media (max-width: 900px) {
     display: none;
   }
@@ -60,35 +65,55 @@ return (
   <>
     <div className="header  text-black">
       <div className="header-content">
-        <Button
-          type="button"
-          data-bs-toggle="offcanvas"
-          data-bs-target="#offcanvasExample"
-          aria-controls="offcanvasExample"
+        <div
+          style={{
+            display: "flex",
+            gap: "40px",
+          }}
         >
-          <i className="text-black bi bi-list"></i>
-        </Button>
-        <a href="https://near.org/" target="_blank">
-          <NearIcon />
-        </a>
-        <a href="everything.dev" className="fw-bold">
-          {docName ? docName : "BOS Workspace Docs"}
-        </a>
-        <DesktopLinks>
-          {props.headerRoutes.length > 0 &&
-            props.headerRoutes.map((item) => (
-              <a href={item.path} target="/blank">
-                {item.label}
-              </a>
-            ))}
-        </DesktopLinks>
+          <div>
+            <Button
+              type="button"
+              data-bs-toggle="offcanvas"
+              data-bs-target="#offcanvasExample"
+              aria-controls="offcanvasExample"
+            >
+              <i className="text-black bi bi-list"></i>
+            </Button>
+            <a href="https://near.org/" target="_blank">
+              <NearIcon />
+            </a>
+          </div>
+          <div>
+            <a href="" className="fw-bold">
+              {docName ? docName : "BOS Workspace Docs"}
+            </a>
+          </div>
+          <div>
+            <DesktopLinks>
+              {props.headerRoutes.length > 0 &&
+                props.headerRoutes.map((item) => (
+                  <a href={item.path} target="/blank">
+                    {item.label}
+                  </a>
+                ))}
+            </DesktopLinks>
+          </div>
+        </div>
+        <div
+          style={{
+            display: "flex",
+            alignItems: "flex-end",
+          }}
+        >
+          <Link
+            to={props[param] === "settings" ? `/${basePath}` : `/${basePath}?${param}=settings`}
+            className="icon text-white"
+          >
+            <i className="bi bi-gear"></i>
+          </Link>
+        </div>
       </div>
-      <Link
-        to={props[param] === "settings" ? `/${basePath}` : `/${basePath}?${param}=settings`}
-        className="icon text-black"
-      >
-        <i className="bi bi-gear"></i>
-      </Link>
     </div>
     <div
       className="offcanvas offcanvas-start"

diff --git a/widget/components/Sidebar.jsx b/widget/components/Sidebar.jsx
@@ -4,6 +4,10 @@ const { get } = VM.require("${config_account}/widget/utils.db") || {
   get: () => {},
 };
 
+const { Button } = VM.require("buildhub.near/widget/components") || {
+  Button: () => <></>,
+};
+
 const documents = get();
 
 // Preprocess documents to group paths by their parent sections
@@ -23,7 +27,18 @@ Object.keys(documents).forEach((path) => {
   }
 });
 
-const Sidebar = styled.div``;
+const Sidebar = styled.div`
+  margin-left: 24px;
+  margin-top: 42px;
+`;
+
+const [dropdown, setDropdown] = useState({});
+const toggleDropdown = (parentSection) => {
+  setDropdown((prevState) => ({
+    ...prevState,
+    [parentSection]: !prevState[parentSection] || false,
+  }));
+};
 
 return (
   <Sidebar className="sidebar">
@@ -33,26 +48,51 @@ return (
         <div className="parent-section">
           <Link to={`/${basePath}?${param}=${parentSection}`}>
             {/* <button>{documents[parentSection].title}</button> */}
-            <button className={props.page === parentSection ? "active" : ""}>
+            <Button
+              onClick={() => {
+                toggleDropdown(parentSection); // Toggle dropdown state for the clicked parent section
+              }}
+              variant="outline"
+              className={props.page === parentSection ? "active" : ""}
+            >
               {documents[parentSection].title}
-            </button>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+                fill="none"
+              >
+                <path
+                  d="M4 6L8 10L12 6"
+                  stroke="#171717"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+            </Button>
           </Link>
         </div>
 
         {/* Render child sections */}
-        <div className="nested-section">
-          {groupedSections[parentSection].map((childSection) => (
-            <div className="child-section" key={childSection}>
-              <Link to={`/${basePath}?${param}=${parentSection}/${childSection}`}>
-                <button
-                  className={props.page === `${parentSection}/${childSection}` ? "active" : ""}
-                >
-                  {documents[`${parentSection}/${childSection}`].title}
-                </button>
-              </Link>
-            </div>
-          ))}
-        </div>
+        {dropdown[parentSection] && (
+          <div className="nested-section">
+            {groupedSections[parentSection].map((childSection) => (
+              <div className="child-section" key={childSection}>
+                <Link to={`/${basePath}?${param}=${parentSection}/${childSection}`}>
+                  <a
+                    className={
+                      props.page === `${parentSection}/${childSection}` ? "active-child" : ""
+                    }
+                  >
+                    {documents[`${parentSection}/${childSection}`].title}
+                  </a>
+                </Link>
+              </div>
+            ))}
+          </div>
+        )}
       </div>
     ))}
   </Sidebar>

diff --git a/widget/document.jsx b/widget/document.jsx
@@ -22,7 +22,7 @@ const { MarkdownViewer } = VM.require("${config_account}/widget/MarkdownView") |
 };
 
 return (
-  <Template theme={{ "--main-bg-color": "white" }} style={{}}>
+  <Template theme={{ "--main-bg-color": "black" }} style={{}}>
     <div
       style={{ backgroundColor: "var(--main-bg-color)", width: "100%", height: "100%" }}
       className="content"

diff --git a/widget/home.jsx b/widget/home.jsx
@@ -2,37 +2,55 @@ const LandingPageContainer = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
-  font-family: Inter, sans-serif;
+  font-family: Poppins, sans-serif;
   margin: 2rem;
 `;
 
 const Title = styled.h1`
-  font-size: 30px;
-  font-family: Inter;
-  color: #333;
-  margin: 1rem;
+  color: var(--FFFFFF, #fff);
+  font-family: Poppins;
+  font-size: 40px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 120%; /* 48px */
+  letter-spacing: -1.6px;
+  align-self: stretch;
+  margin-bottom: 32px;
 `;
 
-const Button = styled.button`
-  padding: 1rem 2rem;
-  font-size: 1.2rem;
-  background-color: #007bff;
+const SubTitle = styled.h1`
   color: #fff;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-  transition: background-color 0.3s ease;
-
-  &:hover {
-    background-color: #0056b3;
-  }
+  font-family: Poppins;
+  font-size: 28px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 120%; /* 33.6px */
+  letter-spacing: -1.12px;
+  margin-bottom: 24px;
 `;
 
+// const Button = styled.button`
+//   padding: 1rem 2rem;
+//   font-size: 1.2rem;
+//   background-color: #007bff;
+//   color: #fff;
+//   border: none;
+//   border-radius: 5px;
+//   cursor: pointer;
+//   transition: background-color 0.3s ease;
+
+//   &:hover {
+//     background-color: #0056b3;
+//   }
+// `;
+
 const BosWorkspaceInfo = styled.p`
-  font-size: 16px;
-  color: #444;
-  margin-left: 2rem;
-  margin-bottom: 0;
+  color: var(--E8E8E8, #e8e8e8);
+  font-family: Poppins;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
 `;
 
 const CodeSnippet = styled.div`
@@ -56,7 +74,7 @@ return (
       management, it caters to developers looking for an efficient and scalable developer
       environment.
     </BosWorkspaceInfo>
-    <Title>Quickstart</Title>
+    <SubTitle>Quickstart</SubTitle>
     <BosWorkspaceInfo>
       To begin, either use this template repository or install bos-workspace within an existing
       project: