Finish navbar desktop + mobile

apps/homepage/widget/components/button/join-now.jsx

@@ -0,0 +1,73 @@
+const daoId = "build.sputnik-dao.near";
+const accountId = context.accountId;
+
+// get DAO policy, deposit, and group
+const policy = Near.view(daoId, "get_policy");
+
+if (policy === null) {
+  return "";
+}
+
+const deposit = policy.proposal_bond;
+const roleId = "community";
+const group = policy.roles
+  .filter((role) => role.name === roleId)
+  .map((role) => role.kind.Group);
+
+const proposalId = Near.view(daoId, "get_last_proposal_id") - 1;
+
+// get data from last proposal
+const proposal = Near.view(daoId, "get_proposal", {
+  id: proposalId,
+});
+
+if (proposal === null) {
+  return "";
+}
+
+// check if the potential member submitted last proposal
+const canJoin = accountId && accountId !== proposal.proposer;
+
+const Button = styled.a`
+  width: max-content;
+  all: unset;
+  display: flex;
+  padding: 10px 20px;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+
+  &:hover {
+    text-decoration: none;
+    color: #000 !important;
+    cursor: pointer;
+    background: var(--Yellow, #ffaf51);
+  }
+
+  border-radius: 8px;
+  background: var(--Yellow, #ffaf51);
+
+  color: var(--black-100, #000);
+
+  /* Other/Button_text */
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+`;
+
+const Container = styled.div`
+  width: max-content;
+  margin-left: auto;
+
+  @media screen and (max-width: 768px) {
+    margin: 0;
+    width: 100%;
+  }
+`;
+
+return (
+  <Container>
+    {canJoin ? <Button href={"/join"}>Join Now</Button> : props.children}
+  </Container>
+);

apps/homepage/widget/propose.jsx

@@ -157,7 +157,7 @@ return (
       {view === "selection" ? (
         <>
           <h1>What would you like to do?</h1>
-          <div className="d-flex gap-4">
+          <div className="d-flex flex-wrap align-items-center justify-content-center gap-4">
             <SelectionBox
               title={"Make changes to the existing page"}
               selected={selection === 1}

apps/homepage/widget/section/hero.jsx

@@ -25,6 +25,7 @@ const LeftBlur = styled.img`
   transform: translateY(-50%);
   object-fit: cover;
   width: 25%;
+  pointer-events: none;
 
   @media screen and (max-width: 768px) {
     width: 50%;
@@ -39,6 +40,7 @@ const RightBlur = styled.img`
   transform: translateY(-50%);
   object-fit: cover;
   width: 25%;
+  pointer-events: none;
 
   @media screen and (max-width: 768px) {
     width: 50%;
@@ -54,6 +56,7 @@ const Grid = styled.img`
   object-fit: cover;
   width: 100%;
   height: 100%;
+  pointer-events: none;
 `;
 
 const Logo = styled.img`

package.json

@@ -29,7 +29,7 @@
     "error-polyfill": "^0.1.2",
     "local-storage": "^2.0.0",
     "near-api-js": "^2.1.3",
-    "near-social-vm": "git+https://github.com/NearSocial/VM.git#2.5.1",
+    "near-social-vm": "git+https://github.com/NearSocial/VM.git#2.5.2",
     "near-social-vm-types": "^1.0.0",
     "prettier": "^2.7.1",
     "qrcode.react": "^3.1.0",

src/App.js

@@ -26,7 +26,6 @@ import "react-bootstrap-typeahead/css/Typeahead.bs5.css";
 import "react-bootstrap-typeahead/css/Typeahead.css";
 import { Link, Route, BrowserRouter as Router, Switch } from "react-router-dom";
 import { BosLoaderBanner } from "./components/BosLoaderBanner";
-import { NavigationWrapper } from "./components/navigation/NavigationWrapper";
 import { useEthersProviderContext } from "./data/web3";
 import { NetworkId, Widgets } from "./data/widgets";
 import { useBosLoaderInitializer } from "./hooks/useBosLoaderInitializer";
@@ -37,6 +36,7 @@ import SignInPage from "./pages/SignInPage";
 import ViewPage from "./pages/ViewPage";
 import JoinPage from "./pages/JoinPage";
 import ProposePage from "./pages/ProposePage";
+import { Navbar } from "./components/navigation/Navbar";
 
 export const refreshAllowanceObj = {};
 const documentationHref = "https://github.com/NearBuilders/docs";
@@ -176,7 +176,7 @@ function App() {
               <Flags {...passProps} />
             </Route>
             <Route path={"/signin"}>
-              <NavigationWrapper {...passProps} />
+              <Navbar {...passProps} />
               <SignInPage {...passProps} />
             </Route>
             <Route path={"/join"}>
@@ -189,12 +189,12 @@ function App() {
               <EmbedPage {...passProps} />
             </Route>
             <Route path={"/edit/:widgetSrc*"}>
-              <NavigationWrapper {...passProps} />
+              <Navbar {...passProps} />
               <EditorPage {...passProps} />
             </Route>
             <Route path={"/:widgetSrc*"}>
               <BosLoaderBanner />
-              <NavigationWrapper {...passProps} />
+              <Navbar {...passProps} />
               <ViewPage {...passProps} />
             </Route>
           </Switch>

src/App.scss

@@ -3,7 +3,6 @@
 body {
   overflow-y: scroll;
   background-color: #0b0c14;
-  color: #fff;
 }
 
 body, html {