From b86bcaa3b06040540d6be142d48ec063270fea89 Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Tue, 3 May 2022 17:19:21 +0300 Subject: [PATCH 01/10] discord for Thrive articles --- .../images/tc-edu/discord-icon-white.svg | 19 ++++++++++++++++++ .../components/Contentful/Article/Article.jsx | 5 +++++ .../Contentful/Article/themes/default.scss | 20 +++++++++++++++++++ 3 files changed, 44 insertions(+) create mode 100644 src/assets/images/tc-edu/discord-icon-white.svg diff --git a/src/assets/images/tc-edu/discord-icon-white.svg b/src/assets/images/tc-edu/discord-icon-white.svg new file mode 100644 index 0000000000..d844b3b4ce --- /dev/null +++ b/src/assets/images/tc-edu/discord-icon-white.svg @@ -0,0 +1,19 @@ + + + D0A3FC91-EEC2-4529-BF7D-3B777D79E185 + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/shared/components/Contentful/Article/Article.jsx b/src/shared/components/Contentful/Article/Article.jsx index 61abb934d3..3776fed260 100644 --- a/src/shared/components/Contentful/Article/Article.jsx +++ b/src/shared/components/Contentful/Article/Article.jsx @@ -31,6 +31,7 @@ import ReadMoreArrow from 'assets/images/read-more-arrow.svg'; import IconFacebook from 'assets/images/icon-facebook.svg'; import IconTwitter from 'assets/images/icon-twitter.svg'; import IconLinkedIn from 'assets/images/icon-linkedIn.svg'; +import DiscordIconWhite from 'assets/images/tc-edu/discord-icon-white.svg'; const htmlToText = require('html-to-text'); @@ -335,6 +336,10 @@ class Article extends React.Component { {downvotes} + {/* Discord */} +
+ Chat on Discord +
{/* Recommended */} diff --git a/src/shared/components/Contentful/Article/themes/default.scss b/src/shared/components/Contentful/Article/themes/default.scss index af7ba08979..e6973b331e 100644 --- a/src/shared/components/Contentful/Article/themes/default.scss +++ b/src/shared/components/Contentful/Article/themes/default.scss @@ -6,6 +6,26 @@ flex-direction: column; } +a.primary-green-md { + outline: none; + + @include primary-green; + @include md; + + &:hover { + @include primary-green; + } + + &:disabled, + &:hover:disabled { + background-color: #e9e9e9 !important; + border: none !important; + text-decoration: none !important; + color: #fafafb !important; + box-shadow: none !important; + } +} + .shareButtons { margin-top: 10px; From 36d1b54e9763598007a3432d79b654adbb2d181f Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Tue, 3 May 2022 17:20:37 +0300 Subject: [PATCH 02/10] ci: on beta --- .circleci/config.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index 349c4c5d3c..a7be3f8455 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -363,7 +363,7 @@ workflows: filters: branches: only: - - free + - thrive-discord-button # This is stage env for production QA releases - "build-prod-staging": context : org-global From b33909dd8ef8c3c8a768b2c117597ecec31d0b5c Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Tue, 3 May 2022 17:32:43 +0300 Subject: [PATCH 03/10] fixed lint error --- src/shared/components/Contentful/Article/Article.jsx | 2 +- src/shared/components/Contentful/Article/themes/default.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/shared/components/Contentful/Article/Article.jsx b/src/shared/components/Contentful/Article/Article.jsx index 3776fed260..13297970de 100644 --- a/src/shared/components/Contentful/Article/Article.jsx +++ b/src/shared/components/Contentful/Article/Article.jsx @@ -338,7 +338,7 @@ class Article extends React.Component { {/* Discord */}
- Chat on Discord + Chat on Discord
diff --git a/src/shared/components/Contentful/Article/themes/default.scss b/src/shared/components/Contentful/Article/themes/default.scss index e6973b331e..5e46586a74 100644 --- a/src/shared/components/Contentful/Article/themes/default.scss +++ b/src/shared/components/Contentful/Article/themes/default.scss @@ -6,7 +6,7 @@ flex-direction: column; } -a.primary-green-md { +.primary-green-md { outline: none; @include primary-green; From 6cbf7fe0b264f92c25e331e16e88fc50fa9d30f0 Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Wed, 4 May 2022 11:13:25 +0300 Subject: [PATCH 04/10] add missing css for buttons --- src/shared/components/Contentful/Article/themes/default.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/shared/components/Contentful/Article/themes/default.scss b/src/shared/components/Contentful/Article/themes/default.scss index 5e46586a74..51aa65e0af 100644 --- a/src/shared/components/Contentful/Article/themes/default.scss +++ b/src/shared/components/Contentful/Article/themes/default.scss @@ -1,5 +1,6 @@ @import "~styles/mixins"; @import "~components/Contentful/default"; +@import "~components/buttons/themed/tc.scss"; .wrapper { overflow-x: hidden; From 720f821cbf248cb85259207d695a5905555f37a0 Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Wed, 4 May 2022 11:56:55 +0300 Subject: [PATCH 05/10] fix mixin bug --- src/shared/components/Contentful/Article/Article.jsx | 2 +- src/shared/components/Contentful/Article/themes/default.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/shared/components/Contentful/Article/Article.jsx b/src/shared/components/Contentful/Article/Article.jsx index 13297970de..cd146c85bc 100644 --- a/src/shared/components/Contentful/Article/Article.jsx +++ b/src/shared/components/Contentful/Article/Article.jsx @@ -338,7 +338,7 @@ class Article extends React.Component { {/* Discord */} diff --git a/src/shared/components/Contentful/Article/themes/default.scss b/src/shared/components/Contentful/Article/themes/default.scss index 51aa65e0af..db2f82733c 100644 --- a/src/shared/components/Contentful/Article/themes/default.scss +++ b/src/shared/components/Contentful/Article/themes/default.scss @@ -7,7 +7,7 @@ flex-direction: column; } -.primary-green-md { +.primaryGreenMd { outline: none; @include primary-green; From aad2110cd8021f5ca9a43ef31e4853a628bab015 Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Wed, 4 May 2022 12:23:39 +0300 Subject: [PATCH 06/10] try no classes --- .../components/Contentful/Article/Article.jsx | 2 +- .../Contentful/Article/themes/default.scss | 21 ------------------- 2 files changed, 1 insertion(+), 22 deletions(-) diff --git a/src/shared/components/Contentful/Article/Article.jsx b/src/shared/components/Contentful/Article/Article.jsx index cd146c85bc..d562b868a5 100644 --- a/src/shared/components/Contentful/Article/Article.jsx +++ b/src/shared/components/Contentful/Article/Article.jsx @@ -338,7 +338,7 @@ class Article extends React.Component { {/* Discord */} diff --git a/src/shared/components/Contentful/Article/themes/default.scss b/src/shared/components/Contentful/Article/themes/default.scss index db2f82733c..af7ba08979 100644 --- a/src/shared/components/Contentful/Article/themes/default.scss +++ b/src/shared/components/Contentful/Article/themes/default.scss @@ -1,32 +1,11 @@ @import "~styles/mixins"; @import "~components/Contentful/default"; -@import "~components/buttons/themed/tc.scss"; .wrapper { overflow-x: hidden; flex-direction: column; } -.primaryGreenMd { - outline: none; - - @include primary-green; - @include md; - - &:hover { - @include primary-green; - } - - &:disabled, - &:hover:disabled { - background-color: #e9e9e9 !important; - border: none !important; - text-decoration: none !important; - color: #fafafb !important; - box-shadow: none !important; - } -} - .shareButtons { margin-top: 10px; From 2d2b8a3b8612b11cfb6e9241b5abd5068dee9e92 Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Thu, 5 May 2022 10:41:02 +0300 Subject: [PATCH 07/10] use btn with theme --- .../components/Contentful/Article/Article.jsx | 248 +++++++++--------- 1 file changed, 129 insertions(+), 119 deletions(-) diff --git a/src/shared/components/Contentful/Article/Article.jsx b/src/shared/components/Contentful/Article/Article.jsx index d562b868a5..88fa0ad5c6 100644 --- a/src/shared/components/Contentful/Article/Article.jsx +++ b/src/shared/components/Contentful/Article/Article.jsx @@ -25,6 +25,8 @@ import { import qs from 'qs'; import LoginModal from 'components/LoginModal'; import modalStyle from 'components/LoginModal/modal.scss'; +import { PrimaryButton } from 'topcoder-react-ui-kit'; +import tc from 'components/buttons/themed/tc.scss'; // SVGs and assets import GestureIcon from 'assets/images/icon-gesture.svg'; import ReadMoreArrow from 'assets/images/read-more-arrow.svg'; @@ -184,19 +186,19 @@ class Article extends React.Component {
{ - fields.featuredImage ? ( -
- - - - - -
-
- ) : ( - Thrive - default banner - ) - } + fields.featuredImage ? ( +
+ + + + + +
+
+ ) : ( + Thrive - default banner + ) + }
Thrive banner shape @@ -210,37 +212,37 @@ class Article extends React.Component { {/* Authors */}
{ - _.map(fields.contentAuthor, author => ( -
- { - subData.entries.items[author.sys.id].fields.avatar ? ( - ( - article author avatar - )} - renderPlaceholder={LoadingIndicator} - /> - ) : null - } -
- - {subData.entries.items[author.sys.id].fields.name} - + _.map(fields.contentAuthor, author => ( +
{ - subData.entries.items[author.sys.id].fields.tcHandle ? ( - - {subData.entries.items[author.sys.id].fields.tcHandle} - + subData.entries.items[author.sys.id].fields.avatar ? ( + ( + article author avatar + )} + renderPlaceholder={LoadingIndicator} + /> ) : null } +
+ + {subData.entries.items[author.sys.id].fields.name} + + { + subData.entries.items[author.sys.id].fields.tcHandle ? ( + + {subData.entries.items[author.sys.id].fields.tcHandle} + + ) : null + } +
-
- )) - } + )) + }

DURATION

@@ -273,12 +275,12 @@ class Article extends React.Component { {/* Tags */}
{ - _.map(fields.tags, tag => ( -
- {tag} -
- )) - } + _.map(fields.tags, tag => ( +
+ {tag} +
+ )) + }

share

@@ -313,10 +315,10 @@ class Article extends React.Component { > { - fields.type === 'Video' && fields.contentUrl ? ( - - ) : null - } + fields.type === 'Video' && fields.contentUrl ? ( + + ) : null + } {/* Voting */}
@@ -325,8 +327,8 @@ class Article extends React.Component {
{ - upvotes - } + upvotes + }
@@ -338,44 +340,52 @@ class Article extends React.Component {
{/* Discord */}
- Chat on Discord + + Chat on Discord +
{/* Recommended */} { - fields.recommended ? ( -
-
-

Recommended for you

-
- { - _.map(fields.recommended, rec => ( -
- { - subData.entries.items[rec.sys.id].fields.featuredImage ? ( - ( - -
-
- - )} - renderPlaceholder={LoadingIndicator} - /> - ) : null - } -

+ fields.recommended ? ( +
+
+

Recommended for you

+
+ { + _.map(fields.recommended, rec => ( +
{ - subData.entries.items[rec.sys.id].fields.externalArticle - && subData.entries.items[rec.sys.id].fields.contentUrl ? ( + subData.entries.items[rec.sys.id].fields.featuredImage ? ( + ( + +
+
+ + )} + renderPlaceholder={LoadingIndicator} + /> + ) : null + } +

+ { + subData.entries.items[rec.sys.id].fields.externalArticle + && subData.entries.items[rec.sys.id].fields.contentUrl ? ( {subData.entries.items[rec.sys.id].fields.title} @@ -384,26 +394,26 @@ class Article extends React.Component { {subData.entries.items[rec.sys.id].fields.title} ) - } -

-
+ } +

+
+ { + `${htmlToText.fromString( + ReactDOMServer.renderToString(markdown( + subData.entries.items[rec.sys.id].fields.content, + )), + { + ignoreHref: true, + ignoreImage: true, + singleNewLineParagraphs: true, + uppercaseHeadings: false, + }, + ).substring(0, CONTENT_PREVIEW_LENGTH)}...` + } +
{ - `${htmlToText.fromString( - ReactDOMServer.renderToString(markdown( - subData.entries.items[rec.sys.id].fields.content, - )), - { - ignoreHref: true, - ignoreImage: true, - singleNewLineParagraphs: true, - uppercaseHeadings: false, - }, - ).substring(0, CONTENT_PREVIEW_LENGTH)}...` - } -
- { - subData.entries.items[rec.sys.id].fields.externalArticle - && subData.entries.items[rec.sys.id].fields.contentUrl ? ( + subData.entries.items[rec.sys.id].fields.externalArticle + && subData.entries.items[rec.sys.id].fields.contentUrl ? ( Read More @@ -412,26 +422,26 @@ class Article extends React.Component { Read More ) - } -
- )) - } + } +
+ )) + } +
-
- ) : null - } + ) : null + }
{ showLogin && ( - this.setState({ showLogin: false })} - modalTitle="Want to vote?" - modalText="You must be a Topcoder member to do that." - utmSource="thrive_article" - infoNode={

Discover other features you can access by becoming a member.

} - /> + this.setState({ showLogin: false })} + modalTitle="Want to vote?" + modalText="You must be a Topcoder member to do that." + utmSource="thrive_article" + infoNode={

Discover other features you can access by becoming a member.

} + /> ) } From 93141afb2c18fd7c0c1e4b76bbb98a34795f1837 Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Thu, 5 May 2022 11:04:37 +0300 Subject: [PATCH 08/10] fixed lint bug --- .../components/Contentful/Article/Article.jsx | 236 +++++++++--------- 1 file changed, 118 insertions(+), 118 deletions(-) diff --git a/src/shared/components/Contentful/Article/Article.jsx b/src/shared/components/Contentful/Article/Article.jsx index 88fa0ad5c6..c02bddeaf4 100644 --- a/src/shared/components/Contentful/Article/Article.jsx +++ b/src/shared/components/Contentful/Article/Article.jsx @@ -186,19 +186,19 @@ class Article extends React.Component {
{ - fields.featuredImage ? ( -
- - - - - -
-
- ) : ( - Thrive - default banner - ) - } + fields.featuredImage ? ( +
+ + + + + +
+
+ ) : ( + Thrive - default banner + ) + }
Thrive banner shape @@ -212,37 +212,37 @@ class Article extends React.Component { {/* Authors */}
{ - _.map(fields.contentAuthor, author => ( -
+ _.map(fields.contentAuthor, author => ( +
+ { + subData.entries.items[author.sys.id].fields.avatar ? ( + ( + article author avatar + )} + renderPlaceholder={LoadingIndicator} + /> + ) : null + } +
+ + {subData.entries.items[author.sys.id].fields.name} + { - subData.entries.items[author.sys.id].fields.avatar ? ( - ( - article author avatar - )} - renderPlaceholder={LoadingIndicator} - /> + subData.entries.items[author.sys.id].fields.tcHandle ? ( + + {subData.entries.items[author.sys.id].fields.tcHandle} + ) : null } -
- - {subData.entries.items[author.sys.id].fields.name} - - { - subData.entries.items[author.sys.id].fields.tcHandle ? ( - - {subData.entries.items[author.sys.id].fields.tcHandle} - - ) : null - } -
- )) - } +
+ )) + }

DURATION

@@ -275,12 +275,12 @@ class Article extends React.Component { {/* Tags */}
{ - _.map(fields.tags, tag => ( -
- {tag} -
- )) - } + _.map(fields.tags, tag => ( +
+ {tag} +
+ )) + }

share

@@ -315,10 +315,10 @@ class Article extends React.Component { > { - fields.type === 'Video' && fields.contentUrl ? ( - - ) : null - } + fields.type === 'Video' && fields.contentUrl ? ( + + ) : null + } {/* Voting */}
@@ -327,8 +327,8 @@ class Article extends React.Component {
{ - upvotes - } + upvotes + }
@@ -354,38 +354,38 @@ class Article extends React.Component {
{/* Recommended */} { - fields.recommended ? ( -
-
-

Recommended for you

-
- { - _.map(fields.recommended, rec => ( -
+ fields.recommended ? ( +
+
+

Recommended for you

+
+ { + _.map(fields.recommended, rec => ( +
+ { + subData.entries.items[rec.sys.id].fields.featuredImage ? ( + ( + +
+
+ + )} + renderPlaceholder={LoadingIndicator} + /> + ) : null + } +

{ - subData.entries.items[rec.sys.id].fields.featuredImage ? ( - ( - -
-
- - )} - renderPlaceholder={LoadingIndicator} - /> - ) : null - } -

- { - subData.entries.items[rec.sys.id].fields.externalArticle - && subData.entries.items[rec.sys.id].fields.contentUrl ? ( + subData.entries.items[rec.sys.id].fields.externalArticle + && subData.entries.items[rec.sys.id].fields.contentUrl ? ( {subData.entries.items[rec.sys.id].fields.title} @@ -394,26 +394,26 @@ class Article extends React.Component { {subData.entries.items[rec.sys.id].fields.title} ) - } -

-
- { - `${htmlToText.fromString( - ReactDOMServer.renderToString(markdown( - subData.entries.items[rec.sys.id].fields.content, - )), - { - ignoreHref: true, - ignoreImage: true, - singleNewLineParagraphs: true, - uppercaseHeadings: false, - }, - ).substring(0, CONTENT_PREVIEW_LENGTH)}...` - } -
+ } +

+
{ - subData.entries.items[rec.sys.id].fields.externalArticle - && subData.entries.items[rec.sys.id].fields.contentUrl ? ( + `${htmlToText.fromString( + ReactDOMServer.renderToString(markdown( + subData.entries.items[rec.sys.id].fields.content, + )), + { + ignoreHref: true, + ignoreImage: true, + singleNewLineParagraphs: true, + uppercaseHeadings: false, + }, + ).substring(0, CONTENT_PREVIEW_LENGTH)}...` + } +
+ { + subData.entries.items[rec.sys.id].fields.externalArticle + && subData.entries.items[rec.sys.id].fields.contentUrl ? ( Read More @@ -422,26 +422,26 @@ class Article extends React.Component { Read More ) - } -
- )) - } -
+ } +
+ )) + }
- ) : null - } +
+ ) : null + }
{ showLogin && ( - this.setState({ showLogin: false })} - modalTitle="Want to vote?" - modalText="You must be a Topcoder member to do that." - utmSource="thrive_article" - infoNode={

Discover other features you can access by becoming a member.

} - /> + this.setState({ showLogin: false })} + modalTitle="Want to vote?" + modalText="You must be a Topcoder member to do that." + utmSource="thrive_article" + infoNode={

Discover other features you can access by becoming a member.

} + /> ) } From 5dd2d2fa40b30870deea60c88ff6c0e3060e29e6 Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Thu, 5 May 2022 11:51:05 +0300 Subject: [PATCH 09/10] add margin right to button --- src/shared/components/Contentful/Article/Article.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/shared/components/Contentful/Article/Article.jsx b/src/shared/components/Contentful/Article/Article.jsx index c02bddeaf4..35ad74915f 100644 --- a/src/shared/components/Contentful/Article/Article.jsx +++ b/src/shared/components/Contentful/Article/Article.jsx @@ -347,7 +347,7 @@ class Article extends React.Component { button: tc['primary-green-md'], }} > - Chat on Discord + Chat on Discord
From 20a9e8ec43f5f8e5b82b1e329cac0ab00f45fe1f Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Thu, 5 May 2022 12:01:53 +0300 Subject: [PATCH 10/10] fixed lint error --- src/shared/components/Contentful/Article/Article.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/shared/components/Contentful/Article/Article.jsx b/src/shared/components/Contentful/Article/Article.jsx index 35ad74915f..d15b08c260 100644 --- a/src/shared/components/Contentful/Article/Article.jsx +++ b/src/shared/components/Contentful/Article/Article.jsx @@ -347,7 +347,7 @@ class Article extends React.Component { button: tc['primary-green-md'], }} > - Chat on Discord + Chat on Discord