diff --git a/.circleci/config.yml b/.circleci/config.yml index 7d107a6dc6..21613be979 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -283,21 +283,21 @@ workflows: filters: branches: only: - - gig-application-update + - FAQ-theme # This is alternate dev env for parallel testing - "build-qa": context : org-global filters: branches: only: - - free + - bug-bash # This is beta env for production soft releases - "build-prod-beta": context : org-global filters: branches: only: - - develop + - bug-bash # This is stage env for production QA releases - "build-prod-staging": context : org-global diff --git a/config/default.js b/config/default.js index ec2de811b4..161136e9e2 100644 --- a/config/default.js +++ b/config/default.js @@ -140,6 +140,7 @@ module.exports = { HOWTOCOMPETEINMARATHON: 'https://www.topcoder.com/thrive/articles/How%20To%20Compete%20in%20a%20Marathon%20Match', USABLECODEDEV: 'https://www.topcoder.com/thrive/articles/Usable%20Code%20in%20Dev%20Challenges', EXTENSIONVSCODE: 'https://marketplace.visualstudio.com/items?itemName=Topcoder.topcoder-workflow&ssr=false#overview', + TEMPLATES_REPO: 'https://github.com/topcoder-platform-templates', }, IOS: 'https://ios.topcoder-dev.com', diff --git a/src/assets/images/minimal-down-white.svg b/src/assets/images/minimal-down-white.svg new file mode 100644 index 0000000000..fa93bcd8db --- /dev/null +++ b/src/assets/images/minimal-down-white.svg @@ -0,0 +1,19 @@ + + + E3888766-86CD-43A6-A78B-A268A3840C86 + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/shared/components/Contentful/Dropdown/DropdownItem.jsx b/src/shared/components/Contentful/Dropdown/DropdownItem.jsx index 1c7d36cee9..2b8835e766 100644 --- a/src/shared/components/Contentful/Dropdown/DropdownItem.jsx +++ b/src/shared/components/Contentful/Dropdown/DropdownItem.jsx @@ -5,9 +5,14 @@ import React from 'react'; import PT from 'prop-types'; import MarkdownRenderer from 'components/MarkdownRenderer'; +import { themr } from 'react-css-super-themr'; +import defaultTheme from './themes/item.scss'; +import darkTheme from './themes/item-dark.scss'; -import './item.scss'; - +const THEMES = { + Default: defaultTheme, + 'Dark mode': darkTheme, +}; class DropdownItem extends React.Component { constructor(props) { super(props); @@ -24,24 +29,24 @@ class DropdownItem extends React.Component { } render() { - const { data } = this.props; + const { data, baseTheme } = this.props; const { isActive } = this.state; return ( -
+
(e.key === 'Enter' ? null : null)} - styleName={isActive ? 'question active' : 'question'} + className={isActive ? THEMES[baseTheme]['question-active'] : THEMES[baseTheme].question} onClick={() => this.toggleActive()} > -
+
{data.fields.title}
-
+
@@ -55,6 +60,7 @@ DropdownItem.defaultProps = { spaceName: null, environment: null, isActive: false, + baseTheme: 'Default', }; DropdownItem.propTypes = { @@ -63,6 +69,7 @@ DropdownItem.propTypes = { preview: PT.bool, spaceName: PT.string, environment: PT.string, + baseTheme: PT.string, }; -export default DropdownItem; +export default themr('DropdownItem', defaultTheme)(DropdownItem); diff --git a/src/shared/components/Contentful/Dropdown/index.jsx b/src/shared/components/Contentful/Dropdown/index.jsx index 92d6505fec..02de1f8863 100644 --- a/src/shared/components/Contentful/Dropdown/index.jsx +++ b/src/shared/components/Contentful/Dropdown/index.jsx @@ -10,7 +10,13 @@ import React from 'react'; import { fixStyle } from 'utils/contentful'; import DropdownItem from './DropdownItem'; -import defaultTheme from './default.scss'; +import defaultTheme from './themes/default.scss'; +import darkTheme from './themes/dark.scss'; + +const THEMES = { + Default: defaultTheme, + 'Dark mode': darkTheme, +}; function DropdownItemsLoader(props) { const { @@ -18,6 +24,7 @@ function DropdownItemsLoader(props) { preview, spaceName, environment, + baseTheme, } = props; return ( @@ -34,6 +41,7 @@ function DropdownItemsLoader(props) { spaceName={spaceName} environment={environment} key={item.sys.id} + baseTheme={baseTheme} /> )) )} @@ -53,6 +61,7 @@ DropdownItemsLoader.propTypes = { preview: PT.bool, spaceName: PT.string, environment: PT.string, + baseTheme: PT.string.isRequired, }; /* Loads the dropdown entry. */ @@ -69,13 +78,15 @@ export default function DropdownLoader(props) { render={(data) => { const { fields } = Object.values(data.entries.items)[0]; if (!fields) return null; + let { theme } = fields; + theme = theme || 'Default'; return (
diff --git a/src/shared/components/Contentful/Dropdown/themes/dark.scss b/src/shared/components/Contentful/Dropdown/themes/dark.scss new file mode 100644 index 0000000000..f055fe1816 --- /dev/null +++ b/src/shared/components/Contentful/Dropdown/themes/dark.scss @@ -0,0 +1,18 @@ +@import "~styles/mixins"; + +.container { + padding: 0; + + @include xs-to-sm { + padding: 0 15px; + } +} + +.contentWrapper { + display: flex; + margin: 0 auto; + max-width: $screen-md; + color: #fff; + flex-direction: column; + border-top: 1px solid rgba(212, 212, 212, 0.4); +} diff --git a/src/shared/components/Contentful/Dropdown/default.scss b/src/shared/components/Contentful/Dropdown/themes/default.scss similarity index 93% rename from src/shared/components/Contentful/Dropdown/default.scss rename to src/shared/components/Contentful/Dropdown/themes/default.scss index 9022565a91..f5b53818fc 100644 --- a/src/shared/components/Contentful/Dropdown/default.scss +++ b/src/shared/components/Contentful/Dropdown/themes/default.scss @@ -12,7 +12,7 @@ display: flex; margin: 0 auto; max-width: $screen-md; - color: black; + color: #2a2a2a; flex-direction: column; border-top: 1px solid #d4d4d4; } diff --git a/src/shared/components/Contentful/Dropdown/themes/item-dark.scss b/src/shared/components/Contentful/Dropdown/themes/item-dark.scss new file mode 100644 index 0000000000..f01fbb6373 --- /dev/null +++ b/src/shared/components/Contentful/Dropdown/themes/item-dark.scss @@ -0,0 +1,74 @@ +@import "~styles/mixins"; +@import "~components/Contentful/default"; + +.container { + width: 100%; +} + +.question, +.question-active { + display: flex; + align-items: center; + justify-content: space-between; + height: 82px; + outline: none; + cursor: pointer; + border-bottom: 1px solid rgba(212, 212, 212, 0.4); +} + +.question-active { + border-bottom: none; + height: 81px; +} + +.answer, +.answer-active { + @include gui-kit-content; + @include gui-kit-headers; + + display: none; + padding: 5px 70px 24px 0; + color: #fff; + + @include xs-to-sm { + padding-right: 0; + } + + p { + color: #fff; + } +} + +.answer-active { + display: block; + border-bottom: 1px solid rgba(212, 212, 212, 0.4); +} + +.text { + color: #fff; + font-family: BarlowCondensed, sans-serif; + font-size: 31px; + letter-spacing: 0.2px; + text-transform: uppercase; + font-weight: 500; + + @include xs-to-sm { + max-width: 350px; + flex: 1; + margin-right: 20px; + font-size: 21px; + } +} + +.toggle-arrow, +.toggle-arrow-active { + background-image: url(assets/images/minimal-down-white.svg); + background-repeat: no-repeat; + align-self: right; + width: 24px; + height: 15px; +} + +.toggle-arrow-active { + transform: scale(1, -1); +} diff --git a/src/shared/components/Contentful/Dropdown/item.scss b/src/shared/components/Contentful/Dropdown/themes/item.scss similarity index 66% rename from src/shared/components/Contentful/Dropdown/item.scss rename to src/shared/components/Contentful/Dropdown/themes/item.scss index 7cd898b901..a702b40acd 100644 --- a/src/shared/components/Contentful/Dropdown/item.scss +++ b/src/shared/components/Contentful/Dropdown/themes/item.scss @@ -5,7 +5,8 @@ width: 100%; } -.question { +.question, +.question-active { display: flex; align-items: center; justify-content: space-between; @@ -13,13 +14,15 @@ outline: none; cursor: pointer; border-bottom: 1px solid #d4d4d4; +} - &.active { - border-bottom: none; - } +.question-active { + border-bottom: none; + height: 81px; } -.answer { +.answer, +.answer-active { @include gui-kit-content; @include gui-kit-headers; @@ -27,12 +30,16 @@ padding: 5px 70px 24px 0; color: #2a2a2a; - &.active { - display: block; - border-bottom: 1px solid #d4d4d4; + @include xs-to-sm { + padding-right: 0; } } +.answer-active { + display: block; + border-bottom: 1px solid #d4d4d4; +} + .text { color: #2a2a2a; font-family: BarlowCondensed, sans-serif; @@ -43,17 +50,21 @@ @include xs-to-sm { max-width: 350px; + flex: 1; + margin-right: 20px; + font-size: 21px; } } -.toggle-arrow { +.toggle-arrow, +.toggle-arrow-active { background-image: url(assets/images/minimal-down.svg); background-repeat: no-repeat; align-self: right; width: 24px; height: 13px; +} - &.active { - transform: scale(1, -1); - } +.toggle-arrow-active { + transform: scale(1, -1); } diff --git a/src/shared/components/Settings/Preferences/index.jsx b/src/shared/components/Settings/Preferences/index.jsx index 5db18e1be9..ed7c3456d7 100644 --- a/src/shared/components/Settings/Preferences/index.jsx +++ b/src/shared/components/Settings/Preferences/index.jsx @@ -88,7 +88,7 @@ export default class Preferences extends React.Component { case 'e-mail': return ; case 'forum': - return (window.location.href = `${config.URL.FORUMS}/?module=Settings`) && ; + return (window.location.href = `${config.URL.FORUMS_VANILLA}/profile/preferences`) && ; case 'payment': return (window.location.href = `${config.URL.COMMUNITY}/tc?module=EditPaymentPreferences`) && ; default: diff --git a/src/shared/components/challenge-detail/Specification/SideBar/index.jsx b/src/shared/components/challenge-detail/Specification/SideBar/index.jsx index 793278de7d..7c5465c066 100644 --- a/src/shared/components/challenge-detail/Specification/SideBar/index.jsx +++ b/src/shared/components/challenge-detail/Specification/SideBar/index.jsx @@ -432,6 +432,16 @@ export default function SideBar({
+ + + Topcoder Templates
repository + +
{ shareable && (
diff --git a/src/shared/components/challenge-detail/Winners/Winner/index.jsx b/src/shared/components/challenge-detail/Winners/Winner/index.jsx index 1a28490688..bd545f7808 100644 --- a/src/shared/components/challenge-detail/Winners/Winner/index.jsx +++ b/src/shared/components/challenge-detail/Winners/Winner/index.jsx @@ -1,6 +1,6 @@ import { Avatar } from 'topcoder-react-ui-kit'; import PT from 'prop-types'; -import React from 'react'; +import React, { useEffect, useState } from 'react'; import _ from 'lodash'; import { config } from 'topcoder-react-utils'; @@ -20,6 +20,11 @@ export default function Winner({ viewable, winner, }) { + const [windowOrigin, setWindowOrigin] = useState(); + useEffect(() => { + setWindowOrigin(window.origin); + }, []); + const submissionId = viewable && getId(submissions, winner.placement); let placeStyle = winner.placement < 4 ? `place-${winner.placement}` : ''; @@ -69,9 +74,9 @@ export default function Winner({ />
{winner.handle}