From 3f60d3a45f2e21072966c740344a5b5349e7d56d Mon Sep 17 00:00:00 2001 From: Zeeshan Ahmad Date: Fri, 2 Feb 2024 09:03:57 +0500 Subject: [PATCH 1/5] Fix post colors to match figma --- apps/builddao/widget/app.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/builddao/widget/app.jsx b/apps/builddao/widget/app.jsx index 6cf10cae..73c835b0 100644 --- a/apps/builddao/widget/app.jsx +++ b/apps/builddao/widget/app.jsx @@ -25,8 +25,8 @@ const Root = styled.div` --compose-bg: #23242b; - --post-bg: #0b0c14; - --post-bg-hover: #17181c; + --post-bg: #23242b; + --post-bg-hover: #1d1f25; --post-bg-transparent: rgba(23, 24, 28, 0); --button-primary-bg: #ffaf51; From fbc743019f4664e885d99405f31f79862130fa58 Mon Sep 17 00:00:00 2001 From: Zeeshan Ahmad Date: Fri, 2 Feb 2024 09:10:00 +0500 Subject: [PATCH 2/5] Add stroke to compose for more coherent UI --- apps/builddao/widget/Compose.jsx | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) diff --git a/apps/builddao/widget/Compose.jsx b/apps/builddao/widget/Compose.jsx index 6cf5406d..55c1d004 100644 --- a/apps/builddao/widget/Compose.jsx +++ b/apps/builddao/widget/Compose.jsx @@ -1,5 +1,5 @@ -const { Avatar, Button } = VM.require("buildhub.near/widget/components") || { - Avatar: () => <>, +const { User, Button } = VM.require("buildhub.near/widget/components") || { + User: () => <>, Button: () => <>, }; @@ -171,6 +171,7 @@ const PostCreator = styled.div` padding: 1rem; background: var(--compose-bg, #23242b); + border: 1px solid var(--stroke-color, rgba(255, 255, 255, 0.2)); border-radius: 12px; margin-bottom: 1rem; @@ -373,14 +374,7 @@ const MarkdownPreview = styled.div` `; const avatarComponent = useMemo(() => { - return ( -
- -
-

{context.accountId}

-
-
- ); + return ; }, [context.accountId]); return ( From 12e11ffbe02e2d384815cedee59d7a6d3afaa52e Mon Sep 17 00:00:00 2001 From: Zeeshan Ahmad Date: Fri, 2 Feb 2024 11:17:03 +0500 Subject: [PATCH 3/5] Profile in progress, some fixes --- apps/builddao/widget/Profile.jsx | 48 +++ apps/builddao/widget/components/Button.jsx | 5 +- .../widget/components/profile/FollowStats.jsx | 59 +++ .../widget/components/profile/ProfileInfo.jsx | 348 ++++++++++++++++++ .../widget/template/SidebarLayout.jsx | 3 +- 5 files changed, 461 insertions(+), 2 deletions(-) create mode 100644 apps/builddao/widget/Profile.jsx create mode 100644 apps/builddao/widget/components/profile/FollowStats.jsx create mode 100644 apps/builddao/widget/components/profile/ProfileInfo.jsx diff --git a/apps/builddao/widget/Profile.jsx b/apps/builddao/widget/Profile.jsx new file mode 100644 index 00000000..a19ab7a5 --- /dev/null +++ b/apps/builddao/widget/Profile.jsx @@ -0,0 +1,48 @@ +if (!context.accountId || !props.accountId) { + return "No Account ID"; +} + +const accountId = props.accountId || context.accountId; + +const profile = Social.getr(`${accountId}/profile`); +if (!profile) { + return ""; +} + +const ProfileContainer = styled.div` + display: grid; + grid-template-columns: repeat(6, minmax(0, 1fr)); + gap: 1rem; +`; + +const SideContainer = styled.div` + grid-column: span 2 / span 1; +`; + +const MainContainer = styled.div` + grid-column: span 4 / span 4; +`; + +return ( + + + + + + + + +); diff --git a/apps/builddao/widget/components/Button.jsx b/apps/builddao/widget/components/Button.jsx index f20a4e0b..a4f07955 100644 --- a/apps/builddao/widget/components/Button.jsx +++ b/apps/builddao/widget/components/Button.jsx @@ -6,7 +6,10 @@ const StyledButton = styled.button` align-items: center; gap: 4px; border-radius: 8px; - font: 500 14px / normal; + font-size: 14px; + font-weight: 500; + line-height: normal; + transition: all 300ms; ${(props) => diff --git a/apps/builddao/widget/components/profile/FollowStats.jsx b/apps/builddao/widget/components/profile/FollowStats.jsx new file mode 100644 index 00000000..aa4508b2 --- /dev/null +++ b/apps/builddao/widget/components/profile/FollowStats.jsx @@ -0,0 +1,59 @@ +const accountId = props.accountId; + +if (!accountId) { + return ""; +} + +const following = Social.keys(`${accountId}/graph/follow/*`, "final", { + return_type: "BlockHeight", + values_only: true, +}); + +const followers = Social.keys(`*/graph/follow/${accountId}`, "final", { + return_type: "BlockHeight", + values_only: true, +}); + +const numFollowing = following + ? Object.keys(following[accountId].graph.follow || {}).length + : null; +const numFollowers = followers ? Object.keys(followers || {}).length : null; + +return ( +
+
+
+ + {numFollowing !== null ? ( + + {numFollowing} + + ) : ( + "?" + )}{" "} + Following + +
+
+ + {numFollowers !== null ? ( + + {numFollowers} + + ) : ( + "?" + )}{" "} + + Follower{numFollowers !== 1 && "s"} + + +
+
+
+); diff --git a/apps/builddao/widget/components/profile/ProfileInfo.jsx b/apps/builddao/widget/components/profile/ProfileInfo.jsx new file mode 100644 index 00000000..26d4b69b --- /dev/null +++ b/apps/builddao/widget/components/profile/ProfileInfo.jsx @@ -0,0 +1,348 @@ +const { Button } = + VM.require("buildhub.near/widget/components") || (() => <>); + +if (!context.accountId || !props.accountId) { + return "No Account ID"; +} + +const accountId = props.accountId || context.accountId; + +const profile = Social.getr(`${accountId}/profile`); +if (!profile) { + return ""; +} + +const CopyIcon = () => ( + + + +); + +const Container = styled.div` + padding: 24px 16px; + display: flex; + flex-direction: column; + gap: 24px; + + .profile-image-section { + display: flex; + align-items: center; + justify-content: space-between; + + img { + width: 4rem !important; + height: 4rem !important; + border-radius: 100%; + image-rendering: pixelated; + object-fit: cover; + } + } + + .account-info-section { + h3 { + color: var(--White-100, #fff); + /* H3/Large */ + font-size: 24px; + font-style: normal; + font-weight: 500; + line-height: 140%; /* 33.6px */ + margin: 0; + } + + span { + display: flex; + align-items: center; + gap: 4px; + max-width: max-content; + + color: var(--White-50, #b0b0b0); + + /* Body/14px */ + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 170%; /* 23.8px */ + margin: 0; + + cursor: pointer; + } + } + + .bio-section { + display: flex; + flex-direction: column; + gap: 8px; + + h3 { + color: var(--White-100, #fff); + /* Body/10px */ + font-size: 10px; + font-style: normal; + font-weight: 400; + line-height: normal; + margin: 0; + } + + p { + color: var(--White-50, #b0b0b0); + + /* Body/14px */ + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 170%; /* 23.8px */ + margin: 0; + } + } + + .link-section { + display: flex; + flex-direction: column; + gap: 8px; + + h3 { + color: var(--White-100, #fff); + /* Body/10px */ + font-size: 10px; + font-style: normal; + font-weight: 400; + line-height: normal; + margin: 0; + } + } + .badge-section { + display: flex; + flex-direction: column; + gap: 8px; + + h3 { + color: var(--White-100, #fff); + /* Body/10px */ + font-size: 10px; + font-style: normal; + font-weight: 400; + line-height: normal; + margin: 0; + } + } + + .location-section { + span { + display: flex; + align-items: center; + gap: 4px; + + color: var(--White-50, #b0b0b0); + + /* Body/14px */ + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 170%; /* 23.8px */ + } + } +`; + +const TwitterIcon = () => ( + + + +); + +const MapIcon = () => ( + + + + + + + + + + +); + +const LinkTree = ({ profile }) => { + const { twitter, github, telegram, website } = profile.linktree; + + if (!twitter || !github || !telegram || !website) { + return null; + } + + return ( + <> +

LINKS

+
+ {twitter && ( + + + + )} + {github && ( + + + + )} + {telegram && ( + + + + )} + {website && ( + + + + )} +
+ + ); +}; + +const StyledHashtag = styled.span` + display: flex; + padding: 4px 8px; + justify-content: center; + align-items: center; + align-content: center; + gap: 4px; + flex-wrap: wrap; + + border-radius: 2px; + border: 1px solid var(--Yellow, #ffaf51); + + color: var(--White-100, #fff); + + /* Body/10px */ + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: normal; + + .tag { + color: var(--Yellow, #ffaf51); + } +`; +const Hashtag = ({ children }) => { + return ( + + # {children} + + ); +}; + +const Badges = ({ tags }) => { + if (!tags) { + return null; + } + + tags = Object.keys(tags); + + return ( + <> +

BADGE

+
+ {tags.map((it) => ( + {it} + ))} +
+ + ); +}; + +return ( + +
+ + {context.accountId === accountId && ( + + )} +
+
+

{profile.name}

+ clipboard.writeText(accountId)}> + {accountId} + +
+
+ +
+
+ +
+ {profile.description && ( +
+

BIO

+ +
+ )} + {profile.location && ( +
+ + {profile.location} + +
+ )} + {profile.linktree && ( +
+ +
+ )} + +); diff --git a/apps/builddao/widget/template/SidebarLayout.jsx b/apps/builddao/widget/template/SidebarLayout.jsx index 9b57130a..0cfec2fe 100644 --- a/apps/builddao/widget/template/SidebarLayout.jsx +++ b/apps/builddao/widget/template/SidebarLayout.jsx @@ -28,6 +28,7 @@ const SidebarContainer = styled.div` border: 0px; flex-direction: row; overflow-x: auto; + min-height: auto; } `; @@ -57,7 +58,7 @@ const Sidebar = ({ currentPath, page, routes }) => ( textDecoration: "none", cursor: "pointer", padding: "8px 12px", - gap: "10px" + gap: "10px", }} > {route.init.icon && } From 96d5dac129656906678fb3dc2d2e2bc0986cef2d Mon Sep 17 00:00:00 2001 From: Elliot Braem <16282460+elliotBraem@users.noreply.github.com> Date: Thu, 1 Feb 2024 23:20:53 -0700 Subject: [PATCH 4/5] rename --- apps/builddao/widget/app.jsx | 2 +- apps/builddao/widget/config/{routes.jsx => app.jsx} | 0 .../builddao/widget/config/{project-routes.jsx => projects.jsx} | 0 apps/builddao/widget/page/projects.jsx | 2 +- 4 files changed, 2 insertions(+), 2 deletions(-) rename apps/builddao/widget/config/{routes.jsx => app.jsx} (100%) rename apps/builddao/widget/config/{project-routes.jsx => projects.jsx} (100%) diff --git a/apps/builddao/widget/app.jsx b/apps/builddao/widget/app.jsx index 73c835b0..9cad4902 100644 --- a/apps/builddao/widget/app.jsx +++ b/apps/builddao/widget/app.jsx @@ -1,6 +1,6 @@ const { page, tab, ...passProps } = props; -const { routes } = VM.require("buildhub.near/widget/config.routes") ?? { +const { routes } = VM.require("buildhub.near/widget/config.app") ?? { routes: {}, }; diff --git a/apps/builddao/widget/config/routes.jsx b/apps/builddao/widget/config/app.jsx similarity index 100% rename from apps/builddao/widget/config/routes.jsx rename to apps/builddao/widget/config/app.jsx diff --git a/apps/builddao/widget/config/project-routes.jsx b/apps/builddao/widget/config/projects.jsx similarity index 100% rename from apps/builddao/widget/config/project-routes.jsx rename to apps/builddao/widget/config/projects.jsx diff --git a/apps/builddao/widget/page/projects.jsx b/apps/builddao/widget/page/projects.jsx index fc5a2f60..9401cb64 100644 --- a/apps/builddao/widget/page/projects.jsx +++ b/apps/builddao/widget/page/projects.jsx @@ -1,6 +1,6 @@ const { currentPath, page, ...passProps } = props; -const { routes } = VM.require("buildhub.near/widget/config.project-routes") ?? { +const { routes } = VM.require("buildhub.near/widget/config.project") ?? { routes: {} }; From 80fc57847f86a25a1e421270f126e50a20a0fb1b Mon Sep 17 00:00:00 2001 From: Elliot Braem <16282460+elliotBraem@users.noreply.github.com> Date: Thu, 1 Feb 2024 23:25:51 -0700 Subject: [PATCH 5/5] fix href --- apps/builddao/widget/components/User.jsx | 4 +++- apps/builddao/widget/components/buttons/Connect.jsx | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/apps/builddao/widget/components/User.jsx b/apps/builddao/widget/components/User.jsx index 9f5a99e4..935b9053 100644 --- a/apps/builddao/widget/components/User.jsx +++ b/apps/builddao/widget/components/User.jsx @@ -46,7 +46,9 @@ const Wrapper = styled.div` } `; -const { href } = VM.require("buildhub.near/widget/lib.url") || (() => {}); +const { href } = VM.require("buildhub.near/widget/lib.url") || { + href: () => {}, +}; const accountId = props.accountId; const name = props.name || Social.get(`${accountId}/profile/name`); diff --git a/apps/builddao/widget/components/buttons/Connect.jsx b/apps/builddao/widget/components/buttons/Connect.jsx index a76a244e..cf2565c3 100644 --- a/apps/builddao/widget/components/buttons/Connect.jsx +++ b/apps/builddao/widget/components/buttons/Connect.jsx @@ -127,7 +127,7 @@ const Container = styled.div` `; const { href: linkHref } = - VM.require("buildhub.near/widget/lib.url") || (() => {}); + VM.require("buildhub.near/widget/lib.url") || { href: () => {} }; const Component = () => { if (data.isDaoMember || isConnected) {