| Rank |
- Handle |
+ Handle |
+ |
{
isCopilot ? (
Fulfillment |
diff --git a/src/shared/components/Leaderboard/LeaderboardTable/styles.scss b/src/shared/components/Leaderboard/LeaderboardTable/styles.scss
index b4f1797ee8..fd2a4a801d 100644
--- a/src/shared/components/Leaderboard/LeaderboardTable/styles.scss
+++ b/src/shared/components/Leaderboard/LeaderboardTable/styles.scss
@@ -53,7 +53,8 @@ $table-bg-hover: #f5f5f5;
color: #888894;
font-size: 20px;
font-weight: 500;
- line-height: 55px;
+ line-height: 24px;
+ padding: 19px 8px;
}
// Hover effect
@@ -87,16 +88,24 @@ $table-bg-hover: #f5f5f5;
/* Column specific styling */
.col-rank {
text-align: center;
- width: 30px;
+ width: 80px;
+
+ @include sm {
+ width: 40px;
+ }
}
.col-avatar {
text-align: center;
- width: 44px;
+ width: 80px;
@include md-to-xl {
line-height: 0;
}
+
+ @include sm {
+ width: 40px;
+ }
}
.col-avatar .leaderboard-avatar {
@@ -111,11 +120,11 @@ $table-bg-hover: #f5f5f5;
.handle-link,
a {
- color: #006dea;
+ color: #0d61bf;
font-weight: 500;
&:hover {
- color: $tc-dark-blue-110;
+ color: #0d61bf;
cursor: pointer;
}
}
@@ -151,6 +160,8 @@ $table-bg-hover: #f5f5f5;
.col-fulfillment,
.col-challenges,
.col-points {
+ width: 33%;
+
@include sm {
display: none !important;
}
diff --git a/src/shared/components/Leaderboard/PodiumSpot/index.jsx b/src/shared/components/Leaderboard/PodiumSpot/index.jsx
index b699f2aa7a..acd2adcfb7 100644
--- a/src/shared/components/Leaderboard/PodiumSpot/index.jsx
+++ b/src/shared/components/Leaderboard/PodiumSpot/index.jsx
@@ -62,6 +62,12 @@ const DISPLAY_RANKING = {
3: '3',
};
+/**
+ * Format points number
+ * @param {Number} points points number
+ */
+const formatPoints = points => parseFloat(Math.round(points * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+
/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable jsx-a11y/no-static-element-interactions */
export default function PodiumSpot(props) {
@@ -119,11 +125,11 @@ export default function PodiumSpot(props) {
}
{competitor.challengecount}
- challenges
+ challenges
- {competitor.points}
- points
+ {formatPoints(competitor.points)}
+ points
{
isTopGear ? (
diff --git a/src/shared/components/Leaderboard/PodiumSpot/styles.scss b/src/shared/components/Leaderboard/PodiumSpot/styles.scss
index 69077387ec..8e7464a678 100644
--- a/src/shared/components/Leaderboard/PodiumSpot/styles.scss
+++ b/src/shared/components/Leaderboard/PodiumSpot/styles.scss
@@ -16,14 +16,15 @@ $podium-border-color: #ededf2;
}
.ranking {
- @include roboto-bold;
+ @include roboto-black;
border-radius: 20px;
- padding: 2px 10px;
+ padding: 3px 9px;
display: inline-block;
position: absolute;
right: 0;
bottom: 10px;
+ font-size: 15px;
}
.winnings-info {
@@ -41,6 +42,11 @@ $podium-border-color: #ededf2;
font-weight: 400;
line-height: 25px;
+ .value-title {
+ font-size: 20px;
+ line-height: 25px;
+ }
+
.value {
color: #47474f;
font-size: 20px;
@@ -62,29 +68,28 @@ $podium-border-color: #ededf2;
display: block;
}
- .handle-link {
- color: #006dea;
- font-weight: 500;
-
- &:hover {
- color: $tc-dark-blue-110;
- cursor: pointer;
- }
+ a.profile-link {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
+ .handle-link,
a.profile-link {
@include roboto-bold;
- display: block;
- overflow: hidden;
+ color: #0d61bf;
font-size: 20px;
- text-overflow: ellipsis;
- color: #006dea;
+ line-height: 30px;
&:hover {
- color: #006dea;
+ color: #0d61bf;
}
}
+
+ .handle-link:hover {
+ cursor: pointer;
+ }
}
.PodiumSpot--first .ranking {
diff --git a/src/shared/components/buttons/outline/tco/tco19-sec.scss b/src/shared/components/buttons/outline/tco/tco19-sec.scss
new file mode 100644
index 0000000000..cde7ac82ee
--- /dev/null
+++ b/src/shared/components/buttons/outline/tco/tco19-sec.scss
@@ -0,0 +1,24 @@
+@import "~styles/mixins";
+
+$tco-seconary: #229174;
+$tco-seconary-border: #0ab88a;
+$tco-disabled-background: #e9e9e9;
+
+.tcoButton {
+ @include roboto-bold;
+
+ color: $tco-seconary !important;
+ background: $tc-white !important;
+ font-weight: 700 !important;
+ border: 1px solid $tco-seconary-border !important;
+ border-radius: 20px !important;
+ font-size: 14px !important;
+ letter-spacing: 0.8px;
+ text-decoration: none !important;
+ min-height: 40px !important;
+}
+
+.tcoButtonDisabled {
+ background-color: $tco-disabled-background !important;
+ border-radius: 20px !important;
+}
diff --git a/src/shared/components/buttons/outline/tco/tco19.scss b/src/shared/components/buttons/outline/tco/tco19.scss
new file mode 100644
index 0000000000..f96e83153e
--- /dev/null
+++ b/src/shared/components/buttons/outline/tco/tco19.scss
@@ -0,0 +1,24 @@
+@import "~styles/mixins";
+
+$tco-primary: #137d60;
+$tco-disabled-background: #e9e9e9;
+
+.tcoButton {
+ @include roboto-bold;
+
+ color: $tc-white !important;
+ background: $tco-primary !important;
+ font-weight: 700 !important;
+ border: 1px solid $tco-primary !important;
+ border-radius: 15px !important;
+ font-size: 12px !important;
+ letter-spacing: 0.8px;
+ text-transform: uppercase;
+ text-decoration: none !important;
+ min-height: 30px !important;
+}
+
+.tcoButtonDisabled {
+ background-color: $tco-disabled-background !important;
+ border-radius: 20px !important;
+}
diff --git a/src/shared/containers/Contentful/MenuLoader/index.jsx b/src/shared/containers/Contentful/MenuLoader/index.jsx
index b894e430bb..4cbd6b4cd6 100644
--- a/src/shared/containers/Contentful/MenuLoader/index.jsx
+++ b/src/shared/containers/Contentful/MenuLoader/index.jsx
@@ -37,6 +37,7 @@ class MenuLoaderContainer extends React.Component {
preview,
spaceName,
environment,
+ baseUrl,
} = this.props;
// initiate loading the menu data
loadMenuData({
@@ -45,6 +46,7 @@ class MenuLoaderContainer extends React.Component {
preview,
spaceName,
environment,
+ baseUrl,
});
}
@@ -141,6 +143,7 @@ MenuLoaderContainer.defaultProps = {
spaceName: null,
environment: null,
menu: [],
+ baseUrl: '',
};
MenuLoaderContainer.propTypes = {
@@ -154,6 +157,7 @@ MenuLoaderContainer.propTypes = {
menu: PT.arrayOf(PT.shape()),
loading: PT.bool.isRequired,
menuLogo: PT.shape().isRequired,
+ baseUrl: PT.string,
};
function mapStateToProps(state, ownProps) {
diff --git a/src/shared/containers/tco/Leaderboard/styles.scss b/src/shared/containers/tco/Leaderboard/styles.scss
index cac139be60..5c82073974 100644
--- a/src/shared/containers/tco/Leaderboard/styles.scss
+++ b/src/shared/containers/tco/Leaderboard/styles.scss
@@ -7,11 +7,13 @@
}
.Leaderboard .section-title {
- @include roboto-light;
+ @include barlow-condensed-medium;
- font-size: 36px;
- line-height: 45px;
+ color: $tco-black;
+ font-size: 60px;
+ letter-spacing: 0.4px;
text-align: center;
- color: #4a4a4a;
- margin: 2em 0;
+ margin: 116px 0 79px 0;
+ line-height: 60px;
+ text-transform: uppercase;
}
diff --git a/src/shared/routes/Communities/Routes.jsx b/src/shared/routes/Communities/Routes.jsx
index 2c3e3dfddd..0d0eb04330 100644
--- a/src/shared/routes/Communities/Routes.jsx
+++ b/src/shared/routes/Communities/Routes.jsx
@@ -36,6 +36,7 @@ import tco16 from './TCO16';
import tco17 from './TCO17';
import tco18 from './TCO18';
import tco19 from './TCO19';
+import tco20 from './TCO20';
import Mobile from './Mobile';
import Zurich from './Zurich';
@@ -59,6 +60,7 @@ const TCOs = {
tco17,
tco18,
tco19,
+ tco20,
};
export default function Communities({
diff --git a/src/shared/routes/Communities/TCO20/Routes.jsx b/src/shared/routes/Communities/TCO20/Routes.jsx
new file mode 100644
index 0000000000..340653af6e
--- /dev/null
+++ b/src/shared/routes/Communities/TCO20/Routes.jsx
@@ -0,0 +1,45 @@
+/**
+ * Routing of TCO20 Community.
+ */
+
+import Error404 from 'components/Error404';
+import PT from 'prop-types';
+import React from 'react';
+import ContentfulRoute from 'components/Contentful/Route';
+import ContentfulMenu from 'components/Contentful/Menu';
+import Viewport from 'components/Contentful/Viewport';
+
+export default function TCO20({ base, meta }) {
+ return (
+
+ {
+ meta.menuItems ? (
+
+ ) : null
+ }
+ }
+ id="2Ls9DElilYWV3X2p8qN2EN"
+ />
+
+
+ );
+}
+
+TCO20.defaultProps = {
+ base: '',
+};
+
+TCO20.propTypes = {
+ base: PT.string,
+ meta: PT.shape().isRequired,
+};
diff --git a/src/shared/routes/Communities/TCO20/index.jsx b/src/shared/routes/Communities/TCO20/index.jsx
new file mode 100644
index 0000000000..bf488e427c
--- /dev/null
+++ b/src/shared/routes/Communities/TCO20/index.jsx
@@ -0,0 +1,32 @@
+/**
+ * Loader for the community's code chunks.
+ */
+
+import LoadingIndicator from 'components/LoadingIndicator';
+import path from 'path';
+import PT from 'prop-types';
+import React from 'react';
+import { AppChunk, webpack } from 'topcoder-react-utils';
+
+export default function ChunkLoader({ base, meta }) {
+ return (
+ import(/* webpackChunkName: "tco20-community/chunk" */ './Routes')
+ .then(({ default: Routes }) => (
+
+ ))
+ }
+ renderPlaceholder={() => }
+ renderServer={() => {
+ const Routes = webpack.requireWeak(path.resolve(__dirname, './Routes'));
+ return ;
+ }}
+ />
+ );
+}
+
+ChunkLoader.propTypes = {
+ base: PT.string.isRequired,
+ meta: PT.shape().isRequired,
+};
diff --git a/src/shared/routes/Examples/Contentful.jsx b/src/shared/routes/Examples/Contentful.jsx
index f9ab1d63f1..1961b3bf0b 100644
--- a/src/shared/routes/Examples/Contentful.jsx
+++ b/src/shared/routes/Examples/Contentful.jsx
@@ -12,6 +12,8 @@ import ContentSlider from 'components/Contentful/ContentSlider';
import Accordion from 'components/Contentful/Accordion';
import Menu from 'components/Contentful/Menu';
import Banner from 'components/Contentful/Banner';
+import AppComponent from 'components/Contentful/AppComponent';
+import Countdown from 'components/Contentful/Countdown';
import ContentBlock from 'components/Contentful/ContentBlock';
import BlogPostLoader, { HeroImageLoader } from 'components/Contentful/BlogPost';
import ContentfulRoute from 'components/Contentful/Route';
@@ -75,6 +77,26 @@ export default function Contentful({ location, match }) {
/>
)}
/>
+ (
+
+ )}
+ />
+ (
+
+ )}
+ />
(
diff --git a/src/shared/utils/markdown.js b/src/shared/utils/markdown.js
index 37c3513fcc..2b864720a6 100644
--- a/src/shared/utils/markdown.js
+++ b/src/shared/utils/markdown.js
@@ -24,6 +24,8 @@ import AnchorLink from 'react-anchor-link-smooth-scroll';
import Modal from 'components/Contentful/Modal';
import NewsletterArchive from 'containers/NewsletterArchive';
+import tco19Sec from 'components/buttons/outline/tco/tco19-sec.scss';
+import tco19 from 'components/buttons/outline/tco/tco19.scss';
import tco18 from 'components/buttons/outline/tco/tco18.scss';
import tco16 from 'components/buttons/outline/tco/tco16.scss';
import tco14 from 'components/buttons/outline/tco/tco14.scss';
@@ -40,6 +42,8 @@ import tco07 from 'components/buttons/outline/tco/tco07.scss';
* Should implement `.tcoButton` class
*/
const tcoButtonThemes = {
+ 'tco19-sec': tco19Sec,
+ tco19,
tco18, // default
tco17: tco18,
tco16,
@@ -85,6 +89,9 @@ const customComponents = {
button: tcoButtonThemes[attrs.theme]
? tcoButtonThemes[attrs.theme].tcoButton
: tcoButtonThemes.tco18.tcoButton,
+ disabled: (tcoButtonThemes[attrs.theme] && tcoButtonThemes[attrs.theme].tcoButtonDisabled)
+ ? tcoButtonThemes[attrs.theme].tcoButtonDisabled
+ : '',
},
},
}),
diff --git a/src/styles/_global/_fonts.scss b/src/styles/_global/_fonts.scss
index cbde364347..263f781ca9 100644
--- a/src/styles/_global/_fonts.scss
+++ b/src/styles/_global/_fonts.scss
@@ -42,7 +42,11 @@
@font-face {
font-family: '#{$font-name}';
src: url('#{$font-url}#{$font-file}.eot');
- src: url('#{$font-url}#{$font-file}.eot?#iefix') format('embedded-opentype'), url('#{$font-url}#{$font-file}.woff') format('woff'), url('#{$font-url}#{$font-file}.ttf') format('truetype'), url('#{$font-url}#{$font-file}.svg##{$font-name}') format('svg');
+ src:
+ url('#{$font-url}#{$font-file}.eot?#iefix') format('embedded-opentype'),
+ url('#{$font-url}#{$font-file}.woff') format('woff'),
+ url('#{$font-url}#{$font-file}.ttf') format('truetype'),
+ url('#{$font-url}#{$font-file}.svg##{$font-name}') format('svg');
font-weight: $font-weight;
font-style: $font-style;
}
@@ -110,3 +114,12 @@
@include font-family-ttf('Garamond', 400, normal, 'assets/fonts/garamond/GARA');
@include font-family-ttf('Garamond', 400, italic, 'assets/fonts/garamond/GARAIT');
@include font-family-ttf('Garamond', 600, italic, 'assets/fonts/garamond/GARABD');
+
+/* Barlow and BarlowCondensed is being used by TCO19 */
+@include font-family('Barlow', 400, normal, 'assets/fonts/Barlow/', 'Barlow-Regular');
+@include font-family('Barlow', 500, normal, 'assets/fonts/Barlow/', 'Barlow-Medium');
+@include font-family('Barlow', 700, normal, 'assets/fonts/Barlow/', 'Barlow-Bold');
+@include font-family('BarlowCondensed', 400, normal, 'assets/fonts/BarlowCondensed/', 'BarlowCondensed-Regular');
+@include font-family('BarlowCondensed', 500, normal, 'assets/fonts/BarlowCondensed/', 'BarlowCondensed-Medium');
+@include font-family('BarlowCondensed', 600, normal, 'assets/fonts/BarlowCondensed/', 'BarlowCondensed-SemiBold');
+@include font-family('BarlowCondensed', 700, normal, 'assets/fonts/BarlowCondensed/', 'BarlowCondensed-Bold');
diff --git a/src/styles/_mixins/_typography.scss b/src/styles/_mixins/_typography.scss
index 100c05071b..fa06945cda 100644
--- a/src/styles/_mixins/_typography.scss
+++ b/src/styles/_mixins/_typography.scss
@@ -112,3 +112,38 @@
font-family: "Garamond", Helvetica, Arial, sans-serif;
font-weight: 600;
}
+
+@mixin barlow {
+ font-family: "Barlow", Helvetica, Arial, sans-serif;
+ font-weight: 400;
+}
+
+@mixin barlow-medium {
+ font-family: "Barlow", Helvetica, Arial, sans-serif;
+ font-weight: 500;
+}
+
+@mixin barlow-bold {
+ font-family: "Barlow", Helvetica, Arial, sans-serif;
+ font-weight: 700;
+}
+
+@mixin barlow-condensed {
+ font-family: "BarlowCondensed", Helvetica, Arial, sans-serif;
+ font-weight: 400;
+}
+
+@mixin barlow-condensed-medium {
+ font-family: "BarlowCondensed", Helvetica, Arial, sans-serif;
+ font-weight: 500;
+}
+
+@mixin barlow-condensed-semi-bold {
+ font-family: "BarlowCondensed", Helvetica, Arial, sans-serif;
+ font-weight: 600;
+}
+
+@mixin barlow-condensed-bold {
+ font-family: "BarlowCondensed", Helvetica, Arial, sans-serif;
+ font-weight: 700;
+}
diff --git a/src/styles/_mixins/_variables.scss b/src/styles/_mixins/_variables.scss
new file mode 100644
index 0000000000..3b27227388
--- /dev/null
+++ b/src/styles/_mixins/_variables.scss
@@ -0,0 +1,2 @@
+/* colors. */
+$tco-black: #2a2a2a;
diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss
index bced6262d3..18fc22d531 100644
--- a/src/styles/mixins.scss
+++ b/src/styles/mixins.scss
@@ -7,3 +7,4 @@
@import "_mixins/utils";
@import "_mixins/buttons";
@import "_mixins/typography";
+@import "_mixins/variables";