diff --git a/apps/potlock/widget/Buttons/ActionButton.jsx b/apps/potlock/widget/Buttons/ActionButton.jsx index 7c223777..7ea803b4 100644 --- a/apps/potlock/widget/Buttons/ActionButton.jsx +++ b/apps/potlock/widget/Buttons/ActionButton.jsx @@ -22,7 +22,7 @@ const getButtonColor = () => { const Button = styled.button` // width: 100%; - height: 100%; + // height: 100%; flex-direction: row; justify-content: center; align-items: center; diff --git a/apps/potlock/widget/Project/CreateForm.jsx b/apps/potlock/widget/Project/CreateForm.jsx index ba54ac02..eabe4b6d 100644 --- a/apps/potlock/widget/Project/CreateForm.jsx +++ b/apps/potlock/widget/Project/CreateForm.jsx @@ -13,6 +13,8 @@ const CLOSE_ICON_URL = const NEAR_ACCOUNT_ID_REGEX = /^(?=.{2,64}$)(?!.*\.\.)(?!.*-$)(?!.*_$)[a-z\d._-]+$/i; +const MAX_TEAM_MEMBERS_DISPLAY_COUNT = 5; + if (!context.accountId) { return ( props.width}px; height: ${(props) => props.height}px; border-radius: 50%; - border: 5px solid white; + border: ${(props) => props.borderWidth ?? 5}px solid white; + margin: ${(props) => props.margin ?? "0px"}; + z-index: ${(props) => props.zIndex ?? 0}; + position: relative; // position: absolute; // bottom: -60px; // left: 113px; @@ -201,6 +209,7 @@ const ModalOverlay = styled.div` display: flex; justify-content: center; align-items: center; + // padding-top: 30vh; `; const ModalContent = styled.div` @@ -210,6 +219,7 @@ const ModalContent = styled.div` background: white; border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); + // z-index: 1000; `; const ModalHeader = styled.div` @@ -323,6 +333,7 @@ if (context.accountId && !state.socialDataFetched) { Near.asyncView("social.near", "get", { keys: [`${context.accountId}/profile/**`] }) .then((socialData) => { if (!socialData) return; + console.log("social data for current user: ", socialData); const profileData = socialData[context.accountId].profile; if (!profileData) return; // get profile image URL @@ -345,6 +356,8 @@ if (context.accountId && !state.socialDataFetched) { const telegram = linktree.telegram || ""; const github = linktree.github || ""; const website = linktree.website || ""; + // team + const team = profileData.team || {}; // update state State.update({ name: profileData?.name || "", @@ -356,6 +369,10 @@ if (context.accountId && !state.socialDataFetched) { profileImageUrl, bannerImageUrl, socialDataFetched: true, + teamMembers: Object.keys(team).map((accountId) => ({ + accountId, + imageUrl: DEFAULT_PROFILE_IMAGE_URL, // TODO: fetch actual image from near social. or better, move ProfileImage to its own component that handles the social data fetching + })), // socialDataIsFetching: false, }); }) @@ -454,6 +471,7 @@ const handleCreateProject = (e) => { telegram: state.telegram, github: state.github, }, + team: state.teamMembers.reduce((acc, tm) => ({ ...acc, [tm.accountId]: "" }), {}), }, }, }, @@ -529,6 +547,28 @@ const MembersListItemText = styled.div` color: #2e2e2e; `; +const MoreTeamMembersContainer = styled.div` + width: 28px; + height: 28px; + border: 2px solid white; + border-radius: 50%; + background: #dd3345; + position: relative; + display: flex; + justify-content: center; + align-items: center; + z-index: ${(props) => props.zIndex}; + margin-right: -8px; +`; + +const MoreTeamMembersText = styled.div` + color: white; + font-size: 12px; + font-weight: 600; + text-align: center; + // font-family: Mona-Sans; +`; + const handleAddTeamMember = () => { let isValid = NEAR_ACCOUNT_ID_REGEX.test(state.teamMember); // Additional ".near" check for IDs less than 64 characters @@ -618,7 +658,28 @@ return ( - Hi + + {state.teamMembers.length > MAX_TEAM_MEMBERS_DISPLAY_COUNT && ( + + {MAX_TEAM_MEMBERS_DISPLAY_COUNT}+ + + )} + {state.teamMembers + .slice(0, MAX_TEAM_MEMBERS_DISPLAY_COUNT) + .map((teamMember, idx) => { + return ( + + ); + })} + @@ -700,7 +761,7 @@ return ( placeholder: "Choose category", options: [ // Social Impact, NonProfit, Climate, Public Good - { text: "Social Impact", value: "nft" }, + { text: "Social Impact", value: "social-impact" }, { text: "NonProfit", value: "non-profit" }, { text: "Climate", value: "climate" }, { text: "Public Good", value: "public-good" }, @@ -827,10 +888,6 @@ return ( handleAddTeamMember(); } }, - // validate: () => { - - // State.update({ nearAccountIdError: "" }); - // }, error: state.nearAccountIdError, }} /> @@ -840,11 +897,10 @@ return ( {state.teamMembers.length == 1 ? "member" : "members"} {state.teamMembers.map((teamMember) => { - console.log("team member line 841: ", teamMember); return ( - + @{teamMember.accountId} { const Button = styled.button` // width: 100%; - height: 100%; + // height: 100%; flex-direction: row; justify-content: center; align-items: center; diff --git a/build/potlock/src/Project/CreateForm.jsx b/build/potlock/src/Project/CreateForm.jsx index ba54ac02..eabe4b6d 100644 --- a/build/potlock/src/Project/CreateForm.jsx +++ b/build/potlock/src/Project/CreateForm.jsx @@ -13,6 +13,8 @@ const CLOSE_ICON_URL = const NEAR_ACCOUNT_ID_REGEX = /^(?=.{2,64}$)(?!.*\.\.)(?!.*-$)(?!.*_$)[a-z\d._-]+$/i; +const MAX_TEAM_MEMBERS_DISPLAY_COUNT = 5; + if (!context.accountId) { return ( props.width}px; height: ${(props) => props.height}px; border-radius: 50%; - border: 5px solid white; + border: ${(props) => props.borderWidth ?? 5}px solid white; + margin: ${(props) => props.margin ?? "0px"}; + z-index: ${(props) => props.zIndex ?? 0}; + position: relative; // position: absolute; // bottom: -60px; // left: 113px; @@ -201,6 +209,7 @@ const ModalOverlay = styled.div` display: flex; justify-content: center; align-items: center; + // padding-top: 30vh; `; const ModalContent = styled.div` @@ -210,6 +219,7 @@ const ModalContent = styled.div` background: white; border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); + // z-index: 1000; `; const ModalHeader = styled.div` @@ -323,6 +333,7 @@ if (context.accountId && !state.socialDataFetched) { Near.asyncView("social.near", "get", { keys: [`${context.accountId}/profile/**`] }) .then((socialData) => { if (!socialData) return; + console.log("social data for current user: ", socialData); const profileData = socialData[context.accountId].profile; if (!profileData) return; // get profile image URL @@ -345,6 +356,8 @@ if (context.accountId && !state.socialDataFetched) { const telegram = linktree.telegram || ""; const github = linktree.github || ""; const website = linktree.website || ""; + // team + const team = profileData.team || {}; // update state State.update({ name: profileData?.name || "", @@ -356,6 +369,10 @@ if (context.accountId && !state.socialDataFetched) { profileImageUrl, bannerImageUrl, socialDataFetched: true, + teamMembers: Object.keys(team).map((accountId) => ({ + accountId, + imageUrl: DEFAULT_PROFILE_IMAGE_URL, // TODO: fetch actual image from near social. or better, move ProfileImage to its own component that handles the social data fetching + })), // socialDataIsFetching: false, }); }) @@ -454,6 +471,7 @@ const handleCreateProject = (e) => { telegram: state.telegram, github: state.github, }, + team: state.teamMembers.reduce((acc, tm) => ({ ...acc, [tm.accountId]: "" }), {}), }, }, }, @@ -529,6 +547,28 @@ const MembersListItemText = styled.div` color: #2e2e2e; `; +const MoreTeamMembersContainer = styled.div` + width: 28px; + height: 28px; + border: 2px solid white; + border-radius: 50%; + background: #dd3345; + position: relative; + display: flex; + justify-content: center; + align-items: center; + z-index: ${(props) => props.zIndex}; + margin-right: -8px; +`; + +const MoreTeamMembersText = styled.div` + color: white; + font-size: 12px; + font-weight: 600; + text-align: center; + // font-family: Mona-Sans; +`; + const handleAddTeamMember = () => { let isValid = NEAR_ACCOUNT_ID_REGEX.test(state.teamMember); // Additional ".near" check for IDs less than 64 characters @@ -618,7 +658,28 @@ return ( - Hi + + {state.teamMembers.length > MAX_TEAM_MEMBERS_DISPLAY_COUNT && ( + + {MAX_TEAM_MEMBERS_DISPLAY_COUNT}+ + + )} + {state.teamMembers + .slice(0, MAX_TEAM_MEMBERS_DISPLAY_COUNT) + .map((teamMember, idx) => { + return ( + + ); + })} + @@ -700,7 +761,7 @@ return ( placeholder: "Choose category", options: [ // Social Impact, NonProfit, Climate, Public Good - { text: "Social Impact", value: "nft" }, + { text: "Social Impact", value: "social-impact" }, { text: "NonProfit", value: "non-profit" }, { text: "Climate", value: "climate" }, { text: "Public Good", value: "public-good" }, @@ -827,10 +888,6 @@ return ( handleAddTeamMember(); } }, - // validate: () => { - - // State.update({ nearAccountIdError: "" }); - // }, error: state.nearAccountIdError, }} /> @@ -840,11 +897,10 @@ return ( {state.teamMembers.length == 1 ? "member" : "members"} {state.teamMembers.map((teamMember) => { - console.log("team member line 841: ", teamMember); return ( - + @{teamMember.accountId}