Skip to content

Commit e2ffade

Browse files
alexander2001ialexander2001i
authored
Merge pull request #239 from daostack/common-detail-layout
Common details. Right sidebar logic added. Discussions and Proposals Api Calls added to common detail page.
2 parents 646e81f + 27303cf commit e2ffade

File tree

34 files changed

+866
-20
lines changed

34 files changed

+866
-20
lines changed

‎packages/web/public/icons/discussions.svg‎

Lines changed: 13 additions & 0 deletions
Loading

‎packages/web/public/icons/link.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎packages/web/public/icons/right-arrow-hover.svg‎

Lines changed: 15 additions & 0 deletions
Loading

‎packages/web/public/icons/right-arrow.svg‎

Lines changed: 15 additions & 0 deletions
Loading

‎packages/web/src/containers/Auth/store/reducer.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import produce from "immer";
22

33
import { AuthStateType } from "../interface";
4-
import { tokenHandler } from "../../../shared/utils";
4+
// import { tokenHandler } from "../../../shared/utils";
55
import * as actions from "./actions";
66
import { ActionType, createReducer } from "typesafe-actions";
77

88
type Action = ActionType<typeof actions>;
99

1010
const initialState: AuthStateType = {
11-
authentificated: !!tokenHandler.get(),
11+
authentificated: true,
1212
user: null,
1313
};
1414

‎packages/web/src/containers/Common/components/CommonDetailContainer/AboutTabComponent/AboutTabComponent.tsx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import React from "react";
2+
import { Common } from "../../../../../shared/models";
3+
import { formatPrice } from "../../../../../shared/utils";
4+
import "./index.scss";
5+
6+
interface AboutTabComponentProps {
7+
common: Common;
8+
}
9+
10+
export default function AboutTabComponent({ common }: AboutTabComponentProps) {
11+
return (
12+
<div className="about-name-wrapper">
13+
<div className="description">{common.metadata.description}</div>
14+
{common?.links?.length > 0 && (
15+
<div className="links">
16+
<div className="title">Links</div>
17+
{common.links.map((link) => (
18+
<a href={link.value} target="_blank" rel="noopener noreferrer">
19+
{link.title}
20+
</a>
21+
))}
22+
</div>
23+
)}
24+
<div className="line"></div>
25+
<div className="join-wrapper">
26+
<div className="title">Join this Common</div>
27+
<div className="contribution">
28+
Minimum contribution for new members:
29+
<br />
30+
{formatPrice(common.metadata.minFeeToJoin) + " " + common.metadata.contributionType + " contribution"}
31+
</div>
32+
<div className="button-blue">Join the effort</div>
33+
</div>
34+
</div>
35+
);
36+
}

‎packages/web/src/containers/Common/components/CommonDetailContainer/AboutTabComponent/index.scss‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
.about-name-wrapper {
2+
padding: 40px;
3+
border-radius: 14px;
4+
box-shadow: 0 3px 8px 0 #001a3614;
5+
background-color: #ffffff;
6+
.line {
7+
margin: 24px 0;
8+
}
9+
.title {
10+
font-family: NunitoSans;
11+
font-size: 18px;
12+
font-weight: bold;
13+
font-stretch: normal;
14+
font-style: normal;
15+
line-height: 1.22;
16+
letter-spacing: normal;
17+
color: #001a36;
18+
margin-top: 24px;
19+
margin-bottom: 20px;
20+
}
21+
.links {
22+
a {
23+
font-family: NunitoSans;
24+
font-size: 16px;
25+
font-weight: bold;
26+
font-stretch: normal;
27+
font-style: normal;
28+
line-height: 1.5;
29+
letter-spacing: normal;
30+
color: #001a36;
31+
margin-bottom: 16px;
32+
vertical-align: middle;
33+
&::before {
34+
background-image: url("/icons/link.svg");
35+
display: inline-block;
36+
content: " ";
37+
background-size: 15px 15px;
38+
height: 15px;
39+
width: 15px;
40+
margin-right: 8px;
41+
}
42+
}
43+
}
44+
.join-wrapper {
45+
.contribution {
46+
font-family: NunitoSans;
47+
font-size: 18px;
48+
font-weight: normal;
49+
font-stretch: normal;
50+
font-style: normal;
51+
line-height: 1.61;
52+
letter-spacing: normal;
53+
color: #051c3f;
54+
margin-bottom: 32px;
55+
}
56+
.button-blue {
57+
width: 140px;
58+
display: flex;
59+
justify-content: center;
60+
align-items: center;
61+
}
62+
}
63+
}

‎packages/web/src/containers/Common/components/CommonDetailContainer/AboutTabComponent/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as AboutTabComponent } from "./AboutTabComponent";

‎packages/web/src/containers/Common/components/CommonDetailContainer/DiscussionsComponent/DiscussionsComponent.tsx‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import React from "react";
2+
import "./index.scss";
3+
4+
export default function DiscussionsComponent() {
5+
return (
6+
<div className="discussions-component-wrapper">
7+
<div className="discussion-item-wrapper">
8+
<div className="discussion-top-bar">
9+
<div className="img-wrapper">
10+
<img src="https://picsum.photos/40/40" alt="kek" />
11+
</div>
12+
<div className="creator-information">
13+
<div className="name">Peter Parkey</div>
14+
<div className="days-ago">3 days ago</div>
15+
</div>
16+
</div>
17+
<div className="discussion-content">
18+
<div className="title">How about planting trees in india as well?</div>
19+
<div className="description">
20+
I was thinking we should do some work on this and expand to new forests. They need us and our trees. Mother
21+
Nature does a lot of tree planting ably aided by the wind, rain, and critters, both feathered and furry.
22+
However, she would probably appreciate some assistance from us, humans.
23+
</div>
24+
<div className="read-more">Read More</div>
25+
<div className="line"></div>
26+
</div>
27+
<div className="bottom-content">
28+
<div className="discussion-count">
29+
<img src="/icons/discussions.svg" alt="discussions" />
30+
<div className="count">123</div>
31+
</div>
32+
<div className="view-all-discussions">View discussions</div>
33+
</div>
34+
</div>
35+
<div className="discussion-item-wrapper">
36+
<div className="discussion-top-bar">
37+
<div className="img-wrapper">
38+
<img src="https://picsum.photos/40/40" alt="kek" />
39+
</div>
40+
<div className="creator-information">
41+
<div className="name">Peter Parkey</div>
42+
<div className="days-ago">3 days ago</div>
43+
</div>
44+
</div>
45+
<div className="discussion-content">
46+
<div className="title">How about planting trees in india as well?</div>
47+
<div className="description">
48+
I was thinking we should do some work on this and expand to new forests. They need us and our trees. Mother
49+
Nature does a lot of tree planting ably aided by the wind, rain, and critters, both feathered and furry.
50+
However, she would probably appreciate some assistance from us, humans.
51+
</div>
52+
<div className="read-more">Read More</div>
53+
<div className="line"></div>
54+
</div>
55+
<div className="bottom-content">
56+
<div className="discussion-count">
57+
<img src="/icons/discussions.svg" alt="discussions" />
58+
<div className="count">123</div>
59+
</div>
60+
<div className="view-all-discussions">View discussions</div>
61+
</div>
62+
</div>
63+
</div>
64+
);
65+
}

0 commit comments

Comments
 (0)