diff --git a/build.sh b/build.sh
index 56bd78bb06..725701d465 100755
--- a/build.sh
+++ b/build.sh
@@ -33,6 +33,7 @@ docker build -t $TAG \
--build-arg OPEN_EXCHANGE_RATES_KEY=$OPEN_EXCHANGE_RATES_KEY \
--build-arg SEGMENT_IO_API_KEY=$SEGMENT_IO_API_KEY \
--build-arg CHAMELEON_VERIFICATION_SECRET=$CHAMELEON_VERIFICATION_SECRET \
+ --build-arg PLATFORM_SITE_URL=$PLATFORM_SITE_URL \
--build-arg SERVER_API_KEY=$SERVER_API_KEY \
--build-arg TC_M2M_CLIENT_ID=$TC_M2M_CLIENT_ID \
--build-arg TC_M2M_CLIENT_SECRET=$TC_M2M_CLIENT_SECRET \
diff --git a/config/default.js b/config/default.js
index ec258f40b2..e2946ddf77 100644
--- a/config/default.js
+++ b/config/default.js
@@ -429,4 +429,5 @@ module.exports = {
OPTIMIZELY: {
SDK_KEY: '7V4CJhurXT3Y3bnzv1hv1',
},
+ PLATFORM_SITE_URL: 'https://platform.topcoder.com',
};
diff --git a/config/development.js b/config/development.js
index 709cbaa413..7991e1a4c9 100644
--- a/config/development.js
+++ b/config/development.js
@@ -4,4 +4,5 @@ module.exports = {
URL: {
USER_SETTINGS: '', /* No dev server is available for saved searches */
},
+ PLATFORM_SITE_URL: 'https://platform.topcoder-dev.com',
};
diff --git a/src/assets/images/banner-close.svg b/src/assets/images/banner-close.svg
new file mode 100644
index 0000000000..6ea1423dcc
--- /dev/null
+++ b/src/assets/images/banner-close.svg
@@ -0,0 +1,8 @@
+
+
\ No newline at end of file
diff --git a/src/assets/images/banner-info.svg b/src/assets/images/banner-info.svg
new file mode 100644
index 0000000000..b06a8ac52c
--- /dev/null
+++ b/src/assets/images/banner-info.svg
@@ -0,0 +1,13 @@
+
+
\ No newline at end of file
diff --git a/src/shared/components/challenge-listing/Banner/index.jsx b/src/shared/components/challenge-listing/Banner/index.jsx
new file mode 100644
index 0000000000..cf1c30fa5e
--- /dev/null
+++ b/src/shared/components/challenge-listing/Banner/index.jsx
@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+import { config } from 'topcoder-react-utils';
+
+import BannerCloseIcon from 'assets/images/banner-close.svg';
+import BannerInfoIcon from 'assets/images/banner-info.svg';
+import './style.scss';
+
+const Banner = () => {
+ const [isDisplayed, setIsDisplayed] = useState(true);
+
+ return isDisplayed && (
+
+
+
+
+
+
+ Click here if you'd like to visit the new Beta Challenge Listings site
+
+
{
+ e.preventDefault();
+ setIsDisplayed(false);
+ }}
+ aria-hidden="true"
+ role="button"
+ >
+
+
+
+ );
+};
+
+export default Banner;
diff --git a/src/shared/components/challenge-listing/Banner/style.scss b/src/shared/components/challenge-listing/Banner/style.scss
new file mode 100644
index 0000000000..9dc037bb56
--- /dev/null
+++ b/src/shared/components/challenge-listing/Banner/style.scss
@@ -0,0 +1,59 @@
+@import "~styles/mixins";
+
+.banner {
+ @include roboto-medium;
+
+ @include xs-to-sm {
+ height: 81px;
+ line-height: 22px;
+ padding-left: 20px;
+ }
+
+ display: flex;
+ justify-content: space-between;
+ flex-direction: row;
+ align-items: center;
+ margin: 10px 15px 0 15px;
+ height: 50px;
+ background: linear-gradient(90deg, #2c95d7 0%, #06d6a0 100%);
+ border-radius: 10px;
+ color: #fff;
+ font-size: 16px;
+
+ .content {
+ display: flex;
+ justify-content: space-between;
+ flex-direction: row;
+ align-items: center;
+ color: #fff;
+
+ .banner-info {
+ width: 24px;
+ height: 24px;
+ margin-left: 20px;
+ margin-right: 10px;
+
+ @include xs-to-sm {
+ display: none;
+ }
+ }
+
+ @include xs-to-sm {
+ width: 80%;
+ }
+ }
+
+ .banner-close {
+ width: 14px;
+ height: 14px;
+ margin-right: 30px;
+
+ &:hover {
+ cursor: pointer;
+ }
+
+ @include xs-to-sm {
+ margin-bottom: 20px;
+ }
+ }
+}
diff --git a/src/shared/components/challenge-listing/index.jsx b/src/shared/components/challenge-listing/index.jsx
index 3eacd7ecdc..c05b8ab9fe 100644
--- a/src/shared/components/challenge-listing/index.jsx
+++ b/src/shared/components/challenge-listing/index.jsx
@@ -18,6 +18,7 @@ import { useMediaQuery } from 'react-responsive';
import NoChallengeCard from './NoChallengeCard';
import Listing from './Listing';
// import ChallengeCardPlaceholder from './placeholders/ChallengeCard';
+import Banner from './Banner';
import './style.scss';
@@ -167,6 +168,8 @@ export default function ChallengeListing(props) {
)
}
+
+