Skip to content

Commit 77a9279

Browse files
kkartunovkkartunov
committed
TOP-1390 home refresh init
1 parent b9cacbf commit 77a9279

File tree

10 files changed

+245
-125
lines changed

10 files changed

+245
-125
lines changed

‎src/shared/components/Dashboard/BlogFeed/index.jsx

Lines changed: 21 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -2,57 +2,54 @@
22
* Blog Feed component
33
*/
44

5-
import LoadingIndicator from 'components/LoadingIndicator';
6-
import PT from 'prop-types';
7-
import React from 'react';
8-
import './styles.scss';
9-
import { config } from 'topcoder-react-utils';
10-
import BlogArticlesIcon from 'assets/images/icon-blog-articles.svg';
5+
import LoadingIndicator from "components/LoadingIndicator";
6+
import PT from "prop-types";
7+
import React from "react";
8+
import "./styles.scss";
9+
import { config } from "topcoder-react-utils";
1110

12-
export default function BlogFeed({
13-
blogs,
14-
loading,
15-
theme,
16-
}) {
11+
export default function BlogFeed({ blogs, loading, theme }) {
1712
return (
1813
<div styleName={`container ${theme}`}>
1914
<div styleName="header">
2015
<div styleName="title">
21-
<BlogArticlesIcon styleName="icon" />
22-
<span>BLOG ARTICLES</span>
16+
<span>Blog Articles</span>
2317
</div>
2418
<a
2519
styleName="allLink"
2620
href={`${config.URL.BASE}/blog/category/community-stories`}
2721
target="_blank"
2822
rel="noreferrer"
29-
>View all
23+
>
24+
View all
3025
</a>
3126
</div>
3227
<div styleName="blogs">
33-
{loading ? <div styleName="loading"><LoadingIndicator /></div>
34-
: blogs.map(blog => (
28+
{loading ? (
29+
<div styleName="loading">
30+
<LoadingIndicator />
31+
</div>
32+
) : (
33+
blogs.map((blog) => (
3534
<div styleName="row" key={`blog-feed-${blog.link}`}>
36-
<a
37-
href={`${blog.link}`}
38-
target="_blank"
39-
rel="noreferrer"
40-
>{blog.title}
35+
<a href={`${blog.link}`} target="_blank" rel="noreferrer">
36+
{blog.title}
4137
</a>
4238
</div>
43-
))}
39+
))
40+
)}
4441
</div>
4542
</div>
4643
);
4744
}
4845

4946
BlogFeed.defaultProps = {
5047
blogs: [],
51-
theme: 'light',
48+
theme: "light",
5249
};
5350

5451
BlogFeed.propTypes = {
5552
blogs: PT.arrayOf(PT.shape()),
5653
loading: PT.bool.isRequired,
57-
theme: PT.oneOf(['dark', 'light']),
54+
theme: PT.oneOf(["dark", "light"]),
5855
};

‎src/shared/components/Dashboard/BlogFeed/styles.scss

Lines changed: 27 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
color: $tc-gray-90;
1919
padding: 13px 12px 3px 12px;
2020
border-radius: 8px;
21-
margin-bottom: 20px;
21+
margin-bottom: 18px;
2222
}
2323

2424
.header {
@@ -28,18 +28,11 @@
2828
padding-bottom: 10px;
2929

3030
.title {
31-
@include barlow-semi-bold;
31+
@include roboto-bold;
3232

3333
display: flex;
3434
font-size: 16px;
3535
align-items: center;
36-
37-
.icon {
38-
fill: $tc-gray-90;
39-
width: 17px;
40-
height: 17px;
41-
margin-right: 9px;
42-
}
4336
}
4437

4538
.allLink {
@@ -102,3 +95,28 @@
10295
}
10396
}
10497
}
98+
99+
.container.light {
100+
color: #000;
101+
background: #fff;
102+
border: 1px solid #d4d4d4;
103+
border-radius: 4px;
104+
105+
.header {
106+
.icon {
107+
fill: $tc-white;
108+
}
109+
110+
.allLink {
111+
color: #0d61bf;
112+
font-size: 12px;
113+
line-height: 20px;
114+
}
115+
}
116+
117+
.blogs {
118+
.row:not(:first-child) {
119+
border-top: 1px solid $dashboard-dark-bg;
120+
}
121+
}
122+
}

‎src/shared/components/Dashboard/Challenges/index.jsx

Lines changed: 32 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
import _ from 'lodash';
2-
import LoadingIndicator from 'components/LoadingIndicator';
3-
import PT from 'prop-types';
4-
import React from 'react';
5-
import qs from 'qs';
1+
import _ from "lodash";
2+
import LoadingIndicator from "components/LoadingIndicator";
3+
import PT from "prop-types";
4+
import React from "react";
5+
import qs from "qs";
66

7-
import { config } from 'topcoder-react-utils';
7+
import { config } from "topcoder-react-utils";
88

9-
import './styles.scss';
9+
import "./styles.scss";
1010

1111
export default function ChallengesFeed({
1212
challenges,
@@ -21,15 +21,24 @@ export default function ChallengesFeed({
2121
<span styleName="title">{title}</span>
2222
<a
2323
styleName="allLink"
24-
href={`${config.URL.CHALLENGES_URL}${challengeListingQuery ? `?${qs.stringify(challengeListingQuery)}` : ''}`}
24+
href={`${config.URL.CHALLENGES_URL}${
25+
challengeListingQuery
26+
? `?${qs.stringify(challengeListingQuery)}`
27+
: ""
28+
}`}
2529
target="_blank"
2630
rel="noreferrer"
27-
>View all <span>challenges</span>
31+
>
32+
View all <span>challenges</span>
2833
</a>
2934
</div>
3035
<div styleName="challenges">
31-
{loading ? <div styleName="loading"><LoadingIndicator /></div>
32-
: (challenges || []).map(challenge => (
36+
{loading ? (
37+
<div styleName="loading">
38+
<LoadingIndicator />
39+
</div>
40+
) : (
41+
(challenges || []).map((challenge) => (
3342
<div styleName="row" key={challenge.id}>
3443
<a
3544
href={`/challenges/${challenge.id}`}
@@ -40,29 +49,34 @@ export default function ChallengesFeed({
4049
</a>
4150
<div styleName="prize">
4251
<span styleName="amount">
43-
{`$${_.sum(challenge.prizeSets
44-
.filter(set => set.type === 'placement')
45-
.map(item => _.sum(item.prizes.map(prize => prize.value)))).toLocaleString()}`}
52+
{`$${_.sum(
53+
challenge.prizeSets
54+
.filter((set) => set.type === "placement")
55+
.map((item) =>
56+
_.sum(item.prizes.map((prize) => prize.value))
57+
)
58+
).toLocaleString()}`}
4659
</span>
4760
</div>
4861
</div>
49-
))}
62+
))
63+
)}
5064
</div>
5165
</div>
5266
) : null;
5367
}
5468

5569
ChallengesFeed.defaultProps = {
5670
challenges: [],
57-
theme: 'light',
58-
title: 'CHALLENGES',
71+
theme: "light",
72+
title: "Opportunities",
5973
challengeListingQuery: undefined,
6074
};
6175

6276
ChallengesFeed.propTypes = {
6377
challenges: PT.arrayOf(PT.shape()),
6478
loading: PT.bool.isRequired,
65-
theme: PT.oneOf(['dark', 'light']),
79+
theme: PT.oneOf(["dark", "light"]),
6680
title: PT.string,
6781
challengeListingQuery: PT.shape(),
6882
};

‎src/shared/components/Dashboard/Challenges/styles.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,9 +31,9 @@ $dashboard-dark-bg: #2a2a2a;
3131
padding: 12px 0;
3232

3333
.title {
34-
@include barlow-semi-bold;
34+
@include roboto-bold;
3535

36-
font-size: 16px;
36+
font-size: 20px;
3737
}
3838

3939
.allLink {

‎src/shared/components/Dashboard/TCTime/index.jsx

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,20 @@
11
/**
22
* Topcoder Time Component
33
*/
4-
import React, { useState, useEffect } from 'react';
5-
import moment from 'moment-timezone';
6-
import darkTheme from './dark.scss';
4+
import React, { useState, useEffect } from "react";
5+
import moment from "moment-timezone";
6+
import darkTheme from "./dark.scss";
7+
import lightTheme from "./light.scss";
78

89
const THEMES = {
910
dark: darkTheme,
11+
light: lightTheme,
1012
};
1113

1214
function TopcoderTime() {
13-
const theme = THEMES.dark; // for v1 only dark theme
14-
let FORMAT = 'MMM Do, HH:mm UTC';
15-
const TIMEZONE = 'America/New_York';
15+
const theme = THEMES.light;
16+
let FORMAT = "MMM Do, HH:mm UTC";
17+
const TIMEZONE = "America/New_York";
1618
const now = moment.tz(new Date(), TIMEZONE);
1719
FORMAT += now.utcOffset() / 60;
1820
const [tcTime, setTCTime] = useState(`${now.format(FORMAT)}`);

‎src/shared/components/Dashboard/TCTime/light.scss

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
@import "~styles/mixins";
2+
3+
.container {
4+
display: flex;
5+
flex-direction: column;
6+
padding: 12px;
7+
margin-bottom: 18px;
8+
9+
@media screen and (max-width: 425px) {
10+
flex-direction: row;
11+
justify-content: space-between;
12+
align-items: center;
13+
}
14+
15+
.title {
16+
color: #000;
17+
font-size: 16px;
18+
font-family: Roboto, sans-serif;
19+
font-weight: bold;
20+
line-height: 24px;
21+
}
22+
23+
.time {
24+
color: #000;
25+
font-size: 16px;
26+
font-family: Roboto, sans-serif;
27+
line-height: 24px;
28+
}
29+
}

‎src/shared/components/Dashboard/ThriveArticlesFeed/index.jsx

Lines changed: 27 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -2,56 +2,57 @@
22
* Thrive Articles Feed component
33
*/
44

5-
import LoadingIndicator from 'components/LoadingIndicator';
6-
import PT from 'prop-types';
7-
import React from 'react';
8-
import './styles.scss';
9-
import ThriveArticlesIcon from 'assets/images/thrive-articles.svg';
5+
import LoadingIndicator from "components/LoadingIndicator";
6+
import PT from "prop-types";
7+
import React from "react";
8+
import "./styles.scss";
109

11-
export default function ThriveArticlesFeed({
12-
articles,
13-
loading,
14-
theme,
15-
}) {
10+
export default function ThriveArticlesFeed({ articles, loading, theme }) {
1611
return (
1712
<div styleName={`container ${theme}`}>
1813
<div styleName="header">
1914
<div styleName="title">
20-
<ThriveArticlesIcon styleName="icon" />
21-
<span>THRIVE ARTICLES</span>
15+
<span>Thrive Articles</span>
2216
</div>
23-
<a
24-
styleName="allLink"
25-
href="/thrive"
26-
target="_blank"
27-
rel="noreferrer"
28-
>View all
17+
<a styleName="allLink" href="/thrive" target="_blank" rel="noreferrer">
18+
View all
2919
</a>
3020
</div>
3121
<div styleName="articles">
32-
{loading ? <div styleName="loading"><LoadingIndicator /></div>
33-
: articles.map(article => (
34-
<div styleName="row" key={`thrive-articles-feed-${article.fields.slug}`}>
22+
{loading ? (
23+
<div styleName="loading">
24+
<LoadingIndicator />
25+
</div>
26+
) : (
27+
articles.map((article) => (
28+
<div
29+
styleName="row"
30+
key={`thrive-articles-feed-${article.fields.slug}`}
31+
>
3532
<a
36-
href={`/thrive/articles/${article.fields.slug || article.fields.title}`}
33+
href={`/thrive/articles/${
34+
article.fields.slug || article.fields.title
35+
}`}
3736
target="_blank"
3837
rel="noreferrer"
39-
>{article.fields.title}
38+
>
39+
{article.fields.title}
4040
</a>
4141
</div>
42-
))}
42+
))
43+
)}
4344
</div>
4445
</div>
4546
);
4647
}
4748

4849
ThriveArticlesFeed.defaultProps = {
4950
articles: [],
50-
theme: 'light',
51+
theme: "light",
5152
};
5253

5354
ThriveArticlesFeed.propTypes = {
5455
articles: PT.arrayOf(PT.shape()),
5556
loading: PT.bool.isRequired,
56-
theme: PT.oneOf(['dark', 'light']),
57+
theme: PT.oneOf(["dark", "light"]),
5758
};

0 commit comments

Comments
 (0)