diff --git a/apps/homepage/widget/components/button/join-now.jsx b/apps/homepage/widget/components/button/join-now.jsx new file mode 100644 index 00000000..bd702768 --- /dev/null +++ b/apps/homepage/widget/components/button/join-now.jsx @@ -0,0 +1,80 @@ +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; + + @media screen and (max-width: 768px) { + flex: 1 1 0; + } +`; + +const Container = styled.div` + width: max-content; + margin-left: auto; + + @media screen and (max-width: 768px) { + margin: 0; + width: 100%; + + display: flex; + justify-content: center; + } +`; + +return ( + + {canJoin ? : props.children} + +); diff --git a/apps/homepage/widget/propose.jsx b/apps/homepage/widget/propose.jsx index 7c1eda86..8d0af761 100644 --- a/apps/homepage/widget/propose.jsx +++ b/apps/homepage/widget/propose.jsx @@ -157,7 +157,7 @@ return ( {view === "selection" ? ( <>

What would you like to do?

-
+

Together, we can build a better future.

- Join Now + Join Now diff --git a/apps/homepage/widget/section/footer.jsx b/apps/homepage/widget/section/footer.jsx index 3c6e89c4..f9acd3dc 100644 --- a/apps/homepage/widget/section/footer.jsx +++ b/apps/homepage/widget/section/footer.jsx @@ -27,21 +27,6 @@ const Footer = styled.div` } `; -const InstagramIcon = ( - - - -); - const XIcon = ( ); -const YoutubeIcon = ( - - - -); - const SocialContainer = styled.div` display: flex; gap: 1.25rem; @@ -83,9 +53,9 @@ const date = new Date(); return (

{date.getFullYear()} BuildDAO all rights reserved

diff --git a/apps/homepage/widget/section/hero.jsx b/apps/homepage/widget/section/hero.jsx index ed91a2c7..27580280 100644 --- a/apps/homepage/widget/section/hero.jsx +++ b/apps/homepage/widget/section/hero.jsx @@ -11,10 +11,10 @@ const HeroContainer = styled.div` width: 100%; position: relative; - padding: 6.25rem 3rem; + padding: 9.375rem 3rem; @media screen and (max-width: 768px) { - padding: 6.25rem 1.5rem; + padding: 9.375rem 1.5rem; } `; @@ -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` diff --git a/package.json b/package.json index 46920728..5296afe7 100644 --- a/package.json +++ b/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", diff --git a/src/App.js b/src/App.js index 5ae0bb56..7d5baa6e 100644 --- a/src/App.js +++ b/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() { - + @@ -189,12 +189,12 @@ function App() { - + - + diff --git a/src/App.scss b/src/App.scss index 9d5bd7c4..89d79485 100644 --- a/src/App.scss +++ b/src/App.scss @@ -2,6 +2,7 @@ body { overflow-y: scroll; + background-color: #0b0c14; } body, html { diff --git a/src/components/navigation/Navbar.js b/src/components/navigation/Navbar.js new file mode 100644 index 00000000..bbb8b75b --- /dev/null +++ b/src/components/navigation/Navbar.js @@ -0,0 +1,253 @@ +import React, { useCallback, useState } from "react"; +import styled from "styled-components"; +import { UserDropdown } from "./desktop/UserDropdown"; +import { Widget } from "near-social-vm"; +import { useBosLoaderStore } from "../../stores/bos-loader"; + +const StyledNavbar = styled.nav` + display: flex; + width: 100%; + padding: 24px 48px; + align-items: center; + justify-content: space-between; + + .logo { + flex-grow: 1; + flex-basis: 0; + + img { + width: auto; + height: 32px; + flex-shrink: 0; + object-fit: cover; + } + } + + .active { + border-radius: 8px; + background: var(--Yellow, #ffaf51) !important; + color: var(--black-100, #000) !important; + + /* Other/Button_text */ + font-size: 14px; + font-style: normal; + font-weight: 500; + line-height: normal; + } + + .sign-in { + all: unset; + + display: flex; + padding: 10px 20px; + justify-content: center; + align-items: center; + gap: 4px; + + border-radius: 8px; + border: 1px solid var(--white-100, #fff); + + color: var(--white-100, #fff); + transition: all 300ms; + + &:hover { + text-decoration: none; + background: #fff; + color: #000; + } + + cursor: pointer; + + /* Other/Button_text */ + font-size: 14px; + font-style: normal; + font-weight: 500; + line-height: normal; + } +`; + +const NavLink = styled.a` + all: unset; + + display: flex; + padding: 10px 20px; + justify-content: center; + align-items: center; + gap: 10px; + + border-radius: 8px; + background: var(--bg-2, #23242b) !important; + color: var(--white-100, #fff) !important; + + /* Other/Button_text */ + font-size: 14px; + font-style: normal; + font-weight: 500; + line-height: normal; + + cursor: pointer; + transition: all 300ms; + + &:hover { + text-decoration: none; + background: #ffaf51 !important; + color: #000 !important; + } +`; + +const MobileDropdownButton = styled.button` + all: unset; + + color: #fff; + padding: 0.5rem; + font-size: 2rem; +`; + +const MobileLink = styled.a` + all: unset; + + display: flex; + padding: 10px 20px; + justify-content: center; + align-items: center; + gap: 4px; + + border-radius: 8px; + border: 1px solid var(--white-100, #fff); + + color: var(--white-100, #fff); + transition: all 300ms; + + &:hover { + text-decoration: none; + background: #fff; + color: #000; + } + + cursor: pointer; + + /* Other/Button_text */ + font-size: 14px; + font-style: normal; + font-weight: 500; + line-height: normal; +`; + +const logoLink = + "https://ipfs.near.social/ipfs/bafkreihbwho3qfvnu4yss3eh5jrx6uxhrlzdgtdjyzyjrpa6odro6wdxya"; + +export function Navbar(props) { + const redirectStore = useBosLoaderStore(); + const [dropdown, setDropdown] = useState(false); + + const toggleDropdown = useCallback(() => { + setDropdown((prev) => !prev); + }, []); + + return ( + +
+ + + +
+
+ + Home + + + Editor + + Docs +
+
+ {!props.signedIn && ( + + )} + {props.signedIn && ( +
+ , + }} + /> +
+ )} +
+
+ + + +
+
+ + Home + + + Editor + + Docs + {!props.signedIn && ( + + )} + {props.signedIn && ( +
+ , + }} + /> +
+ )} +
+ + ); +} diff --git a/src/pages/Flags.js b/src/pages/Flags.js index dff988dc..5cee992f 100644 --- a/src/pages/Flags.js +++ b/src/pages/Flags.js @@ -9,6 +9,7 @@ const Container = styled.div` flex-direction: column; gap: 1rem; padding: 2rem 1rem; + color: #fff; `; const Form = styled.div` @@ -36,15 +37,11 @@ export default function Flags() { return ( -

- Flags -

+

Flags

-

- BOS Loader Url -

+

BOS Loader Url

setFlags({ bosLoaderUrl: url })} style={{ marginLeft: "auto" }} - >Save + > + Save +
); -}; +} -{/* */} \ No newline at end of file +/> */ +} diff --git a/src/pages/SignInPage.js b/src/pages/SignInPage.js index a3175ec7..7b0f1597 100644 --- a/src/pages/SignInPage.js +++ b/src/pages/SignInPage.js @@ -48,7 +48,7 @@ export default function SignInPage(props) { }, [params.accountId, params.privateKey]); return ( -
+