Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enhance announcements UI #606

Merged
merged 2 commits into from
Dec 29, 2023
Merged

Enhance announcements UI #606

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1d9f903
updated announcements UI
Megha-Dev-19 Dec 27, 2023
f7818dd
Merge branch 'develop' into update-announcements-UI
elliotBraem Dec 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 35 additions & 18 deletions src/devhub/entity/community/Announcements.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,16 @@ const SidebarContainer = styled.div`
flex: 1;
`;

const Heading = styled.div`
font-size: 19px;
font-weight: 600;
`;

const SubHeading = styled.div`
font-size: 15px;
font-weight: 600;
`;

const Container = styled.div`
flex-wrap: no-wrap;
max-width: 100%;
Expand All @@ -35,6 +45,10 @@ const Container = styled.div`
@media screen and (max-width: 960px) {
flex-wrap: wrap;
}

.card {
border-radius: 1rem !important;
}
`;

const Tag = styled.div`
Expand All @@ -48,9 +62,9 @@ const Tag = styled.div`
gap: 0.5rem;
border-width: 1px;
border-style: solid;
font-size: 13px;
font-size: 14px;
color: rgba(0, 236, 151, 1);
font-weight: 700;
font-weight: 800;
`;

return (
Expand All @@ -60,7 +74,7 @@ return (
<div className="d-flex flex-column gap-4">
{context.accountId &&
(communityData?.admins ?? []).includes(context.accountId) && (
<div className="card p-3">
<div className="card p-4">
<Widget
src={"${REPL_DEVHUB}/widget/devhub.entity.community.Compose"}
props={{
Expand All @@ -73,7 +87,7 @@ return (
</div>
)}
<div className="d-flex flex-wrap justify-content-between">
<h5>Announcements</h5>
<Heading>Announcements</Heading>
<div className="d-flex align-items-center gap-2">
<select
name="sort"
Expand All @@ -89,7 +103,7 @@ return (
</select>
</div>
</div>
<div className="card p-3">
<div className="card p-4">
<Feed
index={[
{
Expand All @@ -105,15 +119,18 @@ return (
},
},
]}
Item={(p) => (
Item={(item) => (
<Widget
loading={
<div className="w-100" style={{ height: "200px" }} />
}
src="${REPL_MOB}/widget/MainPage.N.Post"
src="near/widget/Posts.Post"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since we want this to work in both mainnet and testnet, could you please use replacements?

${REPL_NEAR}

These replacements are applied on build during the dev script, you can find the value it is replaced with in replacements..json. This allows the code to work across regions

props={{
accountId: p.accountId,
blockHeight: p.blockHeight,
accountId: item.accountId,
blockHeight: item.blockHeight,
blockTimestamp: item.block_timestamp,
content: item.content,
comments: item.comments,
likes: item.accounts_liked,
verifications: item.verifications,
showFlagAccountFeature: false,
}}
/>
)}
Expand All @@ -123,14 +140,14 @@ return (
</MainContent>
<SidebarContainer>
<div className="d-flex flex-column gap-3">
<div className="card p-3">
<p>{communityData?.description}</p>
<p className="d-flex gap-2 flex-wrap">
<div className="card p-4">
<div className="mb-2">{communityData?.description}</div>
<div className="d-flex gap-2 flex-wrap">
<Tag>{communityData?.tag} </Tag>
</p>
</div>
</div>
<div className="card p-3 d-flex flex-column gap-2">
<h6>Community Admins</h6>
<div className="card p-4 d-flex flex-column gap-2">
<SubHeading>Community Admins</SubHeading>
{(communityData?.admins ?? []).map((accountId) => (
<div
key={accountId}
Expand Down
Loading