topgear updates, srmx community, challenge details updates

__tests__/shared/components/examples/__snapshots__/Content.jsx.snap

@@ -264,6 +264,14 @@ exports[`Matches shallow shapshot 1`] = `
         QA Community
       </Link>
     </li>
+    <li>
+      <Link
+        replace={false}
+        to="/community/srmx/home"
+      >
+        SRMX Community
+      </Link>
+    </li>
     <li>
       <Link
         replace={false}

src/server/tc-communities/srmx/metadata.json

@@ -0,0 +1,30 @@
+{
+  "authorizedGroupIds": ["20000006"],
+  "communityId": "srmx",
+  "communityName": "SRMX Community",
+  "communitySelector": [{
+    "label": "SRMX Community",
+    "value": "1"
+  }, {
+    "label": "Topcoder Public Community",
+    "redirect": "https://www.topcoder.com",
+    "value": "2"
+  }],
+  "groupId": "20000006",
+  "logos": [{
+    "img": "/themes/srmx/logo_topcoder_with_name.svg",
+    "url": "https://www.topcoder.com"
+  }],
+  "menuItems": [
+    {
+      "title": "Home",
+      "url": "."
+    }, {
+      "title": "Learn",
+      "url": "learn"
+    }
+  ],
+  "newsFeed": "http://www.topcoder.com/feed",
+  "description": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore.",
+  "image":"1.jpg"
+}

src/shared/components/challenge-detail/Winners/index.jsx

@@ -64,7 +64,10 @@ export default function Winners(props) {
                 }
               </div>
               <div styleName="info">
-                <div styleName="handle">{w.handle}</div>
+                <a
+                  href={`${config.URL.BASE}/members/${w.handle}`}
+                  styleName="handle"
+                >{w.handle}</a>
                 <div styleName="prize">{`$${prizes[w.placement - 1].toLocaleString()}`}</div>
                 {
                   submissionId &&

src/shared/components/challenge-detail/Winners/style.scss

@@ -16,6 +16,7 @@
 
     .flag {
       background-color: $tc-gold;
+      color: $tc-black;
 
       &::after {
         border-top: solid 20px $tc-gold;
@@ -48,6 +49,8 @@
   }
 
   @include xxs-to-xs {
+    height: auto;
+    padding: 4 * $base-unit;
     width: 100%;
   }
 
@@ -78,10 +81,13 @@
       width: 46px;
       height: 58px;
       background-size: 100% 100%;
+      margin-bottom: $base-unit;
+      margin-left: -2px;
     }
 
     .text {
       color: $tc-gray-50;
+      font-size: 12px;
     }
   }
 
@@ -119,6 +125,7 @@
 .info {
   .handle {
     color: $tc-dark-blue;
+    display: block;
     font-size: 36px;
     margin-bottom: 8px;
     font-weight: 300;

src/shared/components/challenge-detail/themeFactory.js

@@ -10,9 +10,9 @@
 
 import { COMPETITION_TRACKS } from 'utils/tc';
 
-import primaryDesignButtonStyle from '../buttons/primaryDesign.scss';
-import primaryDevelopButtonStyle from '../buttons/primaryDevelop.scss';
-import primaryDataScienceButtonStyle from '../buttons/primaryDataScience.scss';
+// import primaryDesignButtonStyle from '../buttons/primaryDesign.scss';
+// import primaryDevelopButtonStyle from '../buttons/primaryDevelop.scss';
+// import primaryDataScienceButtonStyle from '../buttons/primaryDataScience.scss';
 
 export default function factory(track) {
   /* Currently track value can come either from Topcoder API v2, where it is
@@ -21,15 +21,15 @@ export default function factory(track) {
   switch (track.toLowerCase()) {
     case COMPETITION_TRACKS.DATA_SCIENCE:
       return {
-        PrimaryButton: primaryDataScienceButtonStyle,
+        // PrimaryButton: primaryDataScienceButtonStyle,
       };
     case COMPETITION_TRACKS.DESIGN:
       return {
-        PrimaryButton: primaryDesignButtonStyle,
+        // PrimaryButton: primaryDesignButtonStyle,
       };
     case COMPETITION_TRACKS.DEVELOP:
       return {
-        PrimaryButton: primaryDevelopButtonStyle,
+        // PrimaryButton: primaryDevelopButtonStyle,
       };
     default:
       throw new Error('Wrong competition track value!');

src/shared/components/examples/Content/index.jsx

@@ -105,6 +105,9 @@ export default function Content() {
         <li>
           <Link to="/community/qa/home">QA Community</Link>
         </li>
+        <li>
+          <Link to="/community/srmx/home">SRMX Community</Link>
+        </li>
         <li>
           <Link to="/community/taskforce/home">Taskforce community</Link>
         </li>

src/shared/components/tc-communities/communities/demo-expert/Home/index.jsx

@@ -54,7 +54,7 @@ export default function Home(props) {
               title: 'Start Learning',
               url: 'learn',
             }}
-            imageSrc="/themes/wipro/home/image-text-learn.jpg"
+            imageSrc="/themes/demo-expert/home/image-text-learn.jpg"
           />
           <ImageText
             title="Get Involved"
@@ -63,7 +63,7 @@ export default function Home(props) {
               title: 'Start Earning',
               url: 'challenges',
             }}
-            imageSrc="/themes/wipro/home/image-text-do.jpg"
+            imageSrc="/themes/demo-expert/home/image-text-do.jpg"
           />
         </div>
       </Section>

src/shared/components/tc-communities/communities/qa/Home/index.jsx

@@ -54,7 +54,7 @@ export default function Home(props) {
               title: 'Start Learning',
               url: 'learn',
             }}
-            imageSrc="/themes/wipro/home/image-text-learn.jpg"
+            imageSrc="/themes/qa/home/image-text-learn.jpg"
           />
           <ImageText
             title="Get Involved"
@@ -63,7 +63,7 @@ export default function Home(props) {
               title: 'Start Contributing',
               url: 'challenges',
             }}
-            imageSrc="/themes/wipro/home/image-text-do.jpg"
+            imageSrc="/themes/qa/home/image-text-do.jpg"
           />
         </div>
       </Section>

src/shared/components/tc-communities/communities/srmx/Home/index.jsx

@@ -0,0 +1,124 @@
+/**
+ * Static implementation of Home page for Wipro 2 community
+ *
+ * It hardcodes data which is passed to dummy components,
+ * thus we disable max-len eslint rule for this file
+ */
+/* eslint-disable max-len */
+
+import React from 'react';
+import Section from 'components/tc-communities/Section';
+import Banner from 'components/tc-communities/Banner';
+import ImageText from 'components/tc-communities/ImageText';
+import ResourceCard from 'components/tc-communities/ResourceCard';
+import NewsletterSignup from 'components/tc-communities/NewsletterSignup';
+import NewsSection from 'components/tc-communities/NewsSection';
+import PT from 'prop-types';
+
+import CommunityStats from 'containers/tc-communities/CommunityStats';
+import JoinCommunity from 'containers/tc-communities/JoinCommunity';
+
+import IconRocket from '../../../../../../assets/images/tc-communities/rocket.svg';
+import IconNetwork from '../../../../../../assets/images/tc-communities/network.svg';
+import IconMedal from '../../../../../../assets/images/tc-communities/medal.svg';
+
+import style from './style.scss';
+
+export default function Home(props) {
+  return (
+    <main>
+      <Banner
+        title="Topcoder SRMX Community"
+        text="This is the place where Topcoder members can come to focus on work that involves QA."
+        link={{
+          title: 'Compete Now',
+          url: 'challenges',
+        }}
+        imageSrc="/themes/srmx/community-hero.jpg"
+      />
+
+      <CommunityStats />
+
+      <JoinCommunity />
+
+      <Section
+        theme={{
+          container: style.linksContainer,
+        }}
+      >
+        <div>
+          <ImageText
+            title="Ramp Up"
+            text="Learn about what we're working on, our environments, procedures, etc. If you want to get involved in Topcoder projects, this is a good place to start. We run challenges and tasks constantly, so we're always looking for help."
+            link={{
+              title: 'Start Learning',
+              url: 'learn',
+            }}
+            imageSrc="/themes/srmx/home/image-text-learn.jpg"
+          />
+          <ImageText
+            title="Get Involved"
+            text="Whether you're a copilot, designer, developer, or data scientist...we want you involved. Topcoder is one of the biggest customers of our own platform, so there is never a shortage of interesting things to work on."
+            link={{
+              title: 'Start Contributing',
+              url: 'challenges',
+            }}
+            imageSrc="/themes/srmx/home/image-text-do.jpg"
+          />
+        </div>
+      </Section>
+
+      <Section
+        theme={{
+          container: style.resourcesContainer,
+        }}
+      >
+        <ResourceCard
+          icon={IconNetwork}
+          title="Learn about our platform"
+          text="There are many aspects to our platform...something for everyone."
+          link={{
+            title: 'Browse resources',
+            url: 'learn',
+          }}
+        />
+        <ResourceCard
+          icon={IconMedal}
+          title="What's in it for me?"
+          text="Topcoder rewards participants with cash. The more deliverables you produce, the more you can make."
+          link={{
+            title: 'Learn about rewards',
+            url: 'leaderboard',
+          }}
+        />
+        <ResourceCard
+          icon={IconRocket}
+          title="Participate in many ways"
+          text="We're always running challenges and tasks.  Check back every day to see what's new."
+          link={{
+            title: 'Browse challenges',
+            url: 'challenges',
+          }}
+        />
+      </Section>
+
+      <NewsSection news={props.news} />
+
+      <NewsletterSignup
+        title="Sign up for Topcoder Product Development Updates"
+        text="Don’t miss out opportunities to work on the Topcoder Platform!"
+        imageSrc="/themes/srmx/subscribe-bg.jpg"
+      />
+
+    </main>
+  );
+}
+
+Home.defaultProps = {
+  news: [],
+};
+
+Home.propTypes = {
+  news: PT.arrayOf(PT.shape()),
+};
+

src/shared/components/tc-communities/communities/srmx/Home/style.scss

@@ -0,0 +1,33 @@
+@import '~styles/tc-styles';
+
+.statsContainer {
+  padding: 0;
+}
+
+.statsContent {
+  border-bottom: 1px solid #ddd;
+  padding: 43px 38px 50px;
+
+  @include xxs-to-xs {
+    display: flex;
+    justify-content: space-around;
+    padding: 30px 12px 32px;
+  }
+}
+
+.resourcesContainer {
+  background-color: #fafafa;
+  padding: 70px 0;
+
+  @include xxs-to-xs {
+    padding: 40px 0;
+  }
+}
+
+.linksContainer {
+  padding: 24px 0 60px;
+
+  @include xxs-to-xs {
+    padding: 0;
+  }
+}