TCO21 new site

.circleci/config.yml

@@ -231,21 +231,21 @@ workflows:
             branches:
               only:
                 - develop
+                - tco21
       # This is alternate dev env for parallel testing
       - "build-test":
           context : org-global      
           filters:
             branches:
-              only:
-                - develop
+              only:                
                 - feature-contentful
       # This is alternate dev env for parallel testing
       - "build-qa":
           context : org-global      
           filters:
             branches:
               only:
-                - develop-on-qa-env
+                - develop
       # This is beta env for production soft releases
       - "build-prod-beta":
           context : org-global

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

@@ -0,0 +1,20 @@
+{
+  "challengeFilter": {
+    "tags": ["TCO", "TCO21"]
+  },
+  "communityId": "tco21",
+  "communityName": "TCO21",
+  "groupIds": [],
+  "hideSearch": true,
+  "logos": [{
+    "img": "/community-app-assets/themes/tco/TCO21.svg",
+    "url": "https://tco21.topcoder.com"
+  }],
+  "menuItems": [{
+    "navigationMenu": "3UBKZJ0qMHAkqrobue73NB"
+  }],
+  "newsFeed": "http://www.topcoder.com/feed",
+  "subdomains": ["tco21"],
+  "description": "2021 Topcoder Open. The Ultimate Programming & Design Tournament",
+  "image": "tco21.jpg"
+}

src/shared/actions/contentful.js

@@ -181,12 +181,13 @@ async function getMenuDone(menuProps) {
                   cR2.fields.childRoutes,
                   cR3 => service.getEntry(cR3.sys.id).then(
                     async (c3) => {
-                      const sI3 = menuItemBuilder(url2, c3);
+                      const url3 = urlTarget(url2, cR2);
+                      const sI3 = menuItemBuilder(url3, c3);
                       if (c3.fields.childRoutes) {
                         sI3.subMenu = await Promise.all(_.map(
                           c3.fields.childRoutes,
                           cR4 => service.getEntry(cR4.sys.id).then(
-                            c4 => menuItemBuilder(urlTarget(url2, c3), c4),
+                            c4 => menuItemBuilder(url3, c4),
                           ),
                         ));
                       }
@@ -239,9 +240,10 @@ async function getMenuDone(menuProps) {
   } else {
     menu = menuData;
   }
-  // add the preconfigured secondary menus
-  menu[0].secondaryMenuForLoggedInUser = config.SECONDARY_MENU_FOR_LOGGED_USER;
-  menu[0].secondaryMenuForGuest = config.SECONDARY_MENU_FOR_GUEST;
+  // add the preconfigured secondary menus?
+  if (fields.showSecondaryNaviMenu) {
+    menu[0].secondaryMenu = config.HEADER_MENU[1].secondaryMenu;
+  }
 
   return {
     id: menuProps.id,

src/shared/components/Contentful/ContentBlock/themes/TCO19.scss

@@ -78,13 +78,13 @@ strong a {
     th {
       @include roboto-regular;
 
-      color: #808080;
+      color: #2a2a2a;
       font-size: 15px;
       font-weight: bold;
-      line-height: 25px;
+      line-height: 18px;
       text-align: left;
       text-transform: uppercase;
-      padding: 7px 10px 7px 0;
+      padding: 18px 10px 14px 0;
 
       @include md-to-xl {
         white-space: nowrap;
@@ -102,8 +102,8 @@ strong a {
       line-height: 25px;
       text-align: left;
       color: $tc-gray-80;
-      border-top: 1px solid #ededf2;
-      border-bottom: 1px solid #ededf2;
+      border-top: 1px solid #d4d4d4;
+      border-bottom: 1px solid #d4d4d4;
       padding: 20px 50px 20px 0;
       min-height: 51px;
 

src/shared/components/Contentful/ContentBlock/themes/TCO20.scss

@@ -94,13 +94,13 @@ strong a {
     th {
       @include roboto-regular;
 
-      color: #808080;
+      color: #2a2a2a;
       font-size: 15px;
       font-weight: bold;
-      line-height: 25px;
+      line-height: 18px;
       text-align: left;
       text-transform: uppercase;
-      padding: 7px 10px 7px 0;
+      padding: 18px 10px 14px 0;
 
       @include md-to-xl {
         white-space: nowrap;
@@ -118,8 +118,8 @@ strong a {
       line-height: 25px;
       text-align: left;
       color: $tc-gray-80;
-      border-top: 1px solid #ededf2;
-      border-bottom: 1px solid #ededf2;
+      border-top: 1px solid #d4d4d4;
+      border-bottom: 1px solid #d4d4d4;
       padding: 20px 50px 20px 0;
       min-height: 51px;
 

src/shared/components/Contentful/ContentBlock/themes/general.scss

@@ -122,13 +122,13 @@ strong a {
     th {
       @include roboto-regular;
 
-      color: #808080;
+      color: #2a2a2a;
       font-size: 15px;
       font-weight: bold;
-      line-height: 25px;
+      line-height: 18px;
       text-align: left;
       text-transform: uppercase;
-      padding: 7px 10px 7px 0;
+      padding: 18px 10px 14px 0;
 
       @include md-to-xl {
         white-space: nowrap;
@@ -146,8 +146,8 @@ strong a {
       line-height: 25px;
       text-align: left;
       color: $tc-gray-80;
-      border-top: 1px solid #ededf2;
-      border-bottom: 1px solid #ededf2;
+      border-top: 1px solid #d4d4d4;
+      border-bottom: 1px solid #d4d4d4;
       padding: 20px 50px 20px 0;
       min-height: 51px;
 

src/shared/components/Contentful/Countdown/index.jsx

@@ -25,6 +25,7 @@ export default function CountdownLoader(props) {
           title={data.entries.items[id].fields.title}
           end={new Date(data.entries.items[id].fields.endDate)}
           extraStylesForContainer={data.entries.items[id].fields.extraStylesForContainer}
+          themeName={data.entries.items[id].fields.theme}
         />
       )}
       renderPlaceholder={LoadingIndicator}

src/shared/components/Countdown/index.jsx

@@ -8,7 +8,13 @@ import PT from 'prop-types';
 import React from 'react';
 import { fixStyle } from 'utils/contentful';
 
-import './style.scss';
+import defaultTheme from './themes/style.scss';
+import TCO21 from './themes/TCO21.scss';
+
+const THEMES = {
+  Default: defaultTheme,
+  TCO21,
+};
 
 /* We have to use state component, as we need to manipulate with DOM nodes to
  * access nuka-carousel state. */
@@ -34,6 +40,8 @@ export default class Countdown extends React.Component {
   }
 
   render() {
+    const { themeName } = this.props;
+    const theme = THEMES[themeName];
     let { elapsed } = this.state;
     const oneDay = 24 * 60 * 60;
     const oneHour = 60 * 60;
@@ -54,27 +62,26 @@ export default class Countdown extends React.Component {
     );
     return (
       <div
-        styleName="container"
+        className={theme.container}
         style={styles}
       >
-        <div styleName="title"> {title} </div>
-        <div styleName="title colon"> : </div>
-        <div styleName="time-container">
+        <div className={theme.title}> {title} </div>
+        <div className={theme['time-container']}>
           <div>
-            <div styleName="time-value"> {day} </div>
-            <div styleName="time-label"> days </div>
+            <div className={theme['time-value']}> {day} </div>
+            <div className={theme['time-label']}> days </div>
           </div>
           <div>
-            <div styleName="time-value"> {hour} </div>
-            <div styleName="time-label"> hours </div>
+            <div className={theme['time-value']}> {hour} </div>
+            <div className={theme['time-label']}> hours </div>
           </div>
           <div>
-            <div styleName="time-value"> {minute} </div>
-            <div styleName="time-label"> minutes </div>
+            <div className={theme['time-value']}> {minute} </div>
+            <div className={theme['time-label']}> minutes </div>
           </div>
-          <div styleName="time-second">
-            <div styleName="time-value"> {second} </div>
-            <div styleName="time-label"> seconds </div>
+          <div className={theme['time-second']}>
+            <div className={theme['time-value']}> {second} </div>
+            <div className={theme['time-label']}> seconds </div>
           </div>
         </div>
       </div>
@@ -85,10 +92,12 @@ export default class Countdown extends React.Component {
 Countdown.defaultProps = {
   title: 'Countdown to TCO19 Final',
   extraStylesForContainer: {},
+  themeName: 'Default',
 };
 
 Countdown.propTypes = {
   title: PT.string,
   end: PT.instanceOf(Date).isRequired,
   extraStylesForContainer: PT.shape(),
+  themeName: PT.string,
 };

src/shared/components/Countdown/themes/TCO21.scss

@@ -0,0 +1,77 @@
+@import "~styles/mixins";
+
+$text-color-gray: #37373b;
+$container-background-yello: #fce217;
+
+.container {
+  @include roboto-regular;
+
+  display: -webkit-flex; /* Safari */
+  display: flex;
+  -webkit-flex-direction: row; /* Safari */
+  flex-direction: row;
+  -webkit-justify-content: center; /* Safari */
+  justify-content: center;
+  padding: 40px;
+  background: $container-background-yello;
+
+  @media only screen and (max-width: 767px) {
+    -webkit-flex-direction: column; /* Safari */
+    flex-direction: column;
+  }
+
+  .title {
+    @include barlow-condensed-medium;
+
+    color: #2a2a2a;
+    font-size: 48px;
+    line-height: 50px;
+    text-align: center;
+    margin: auto 41px auto 0;
+    text-transform: uppercase;
+
+    @media only screen and (max-width: 767px) {
+      margin-bottom: 20px;
+    }
+  }
+
+  .time-container {
+    display: -webkit-flex; /* Safari */
+    display: flex;
+    -webkit-flex-direction: row; /* Safari */
+    flex-direction: row;
+    -webkit-justify-content: center; /* Safari */
+    justify-content: center;
+  }
+
+  .time-value {
+    @include barlow-condensed;
+
+    color: #9d41c9;
+    font-size: 80px;
+    line-height: 74px;
+    text-align: center;
+  }
+
+  .time-label {
+    color: #2a2a2a;
+    font-size: 14px;
+    letter-spacing: 0.5px;
+    line-height: 18px;
+    text-align: center;
+    width: 100px;
+    text-transform: uppercase;
+    margin-top: 4px;
+
+    @media only screen and (max-width: 767px) {
+      width: auto;
+      margin-left: 10px;
+      margin-right: 10px;
+      font-size: 18px;
+    }
+  }
+
+  .time-second {
+    display: block;
+  }
+}

src/shared/components/Countdown/style.scss → src/shared/components/Countdown/themes/style.scss

@@ -31,16 +31,8 @@ $container-background-yello: #fce217;
     margin-bottom: auto;
     text-transform: uppercase;
 
-    &.colon {
-      margin-right: 30px;
-    }
-
     @media only screen and (max-width: 767px) {
       margin-bottom: 20px;
-
-      &.colon {
-        display: none;
-      }
     }
   }
 

src/shared/components/Leaderboard/LeaderboardTable/themes/tco20.scss

@@ -191,7 +191,7 @@ $table-bg-hover: #f5f5f5;
   .col-fulfillment,
   .col-challenges,
   .col-points {
-    color: #7f7f7f;
+    color: #2a2a2a;
     font-family: Roboto, sans-serif;
     font-size: 14px;
     font-weight: 500;

src/shared/components/buttons/themed/tc.scss

@@ -6,6 +6,7 @@
   font-weight: 700 !important;
   text-decoration: none !important;
   text-transform: uppercase !important;
+  margin: 0 !important;
 }
 
 @mixin primary-green {
@@ -105,6 +106,7 @@
   font-weight: 700 !important;
   text-decoration: none !important;
   text-transform: uppercase !important;
+  margin: 0 !important;
 }
 
 @mixin secondary-gray {
@@ -130,6 +132,7 @@
 
   font-weight: 700 !important;
   text-transform: uppercase !important;
+  margin: 0 !important;
 }
 
 @mixin warn-red {