TOP-1390 home refresh init

src/shared/components/Dashboard/BlogFeed/index.jsx

@@ -2,57 +2,54 @@
  * Blog Feed component
  */
 
-import LoadingIndicator from 'components/LoadingIndicator';
-import PT from 'prop-types';
-import React from 'react';
-import './styles.scss';
-import { config } from 'topcoder-react-utils';
-import BlogArticlesIcon from 'assets/images/icon-blog-articles.svg';
+import LoadingIndicator from "components/LoadingIndicator";
+import PT from "prop-types";
+import React from "react";
+import "./styles.scss";
+import { config } from "topcoder-react-utils";
 
-export default function BlogFeed({
-  blogs,
-  loading,
-  theme,
-}) {
+export default function BlogFeed({ blogs, loading, theme }) {
   return (
     <div styleName={`container ${theme}`}>
       <div styleName="header">
         <div styleName="title">
-          <BlogArticlesIcon styleName="icon" />
-          <span>BLOG ARTICLES</span>
+          <span>Blog Articles</span>
         </div>
         <a
           styleName="allLink"
           href={`${config.URL.BASE}/blog/category/community-stories`}
           target="_blank"
           rel="noreferrer"
-        >View all
+        >
+          View all
         </a>
       </div>
       <div styleName="blogs">
-        {loading ? <div styleName="loading"><LoadingIndicator /></div>
-          : blogs.map(blog => (
+        {loading ? (
+          <div styleName="loading">
+            <LoadingIndicator />
+          </div>
+        ) : (
+          blogs.map((blog) => (
             <div styleName="row" key={`blog-feed-${blog.link}`}>
-              <a
-                href={`${blog.link}`}
-                target="_blank"
-                rel="noreferrer"
-              >{blog.title}
+              <a href={`${blog.link}`} target="_blank" rel="noreferrer">
+                {blog.title}
               </a>
             </div>
-          ))}
+          ))
+        )}
       </div>
     </div>
   );
 }
 
 BlogFeed.defaultProps = {
   blogs: [],
-  theme: 'light',
+  theme: "light",
 };
 
 BlogFeed.propTypes = {
   blogs: PT.arrayOf(PT.shape()),
   loading: PT.bool.isRequired,
-  theme: PT.oneOf(['dark', 'light']),
+  theme: PT.oneOf(["dark", "light"]),
 };

src/shared/components/Dashboard/BlogFeed/styles.scss

@@ -18,7 +18,7 @@
   color: $tc-gray-90;
   padding: 13px 12px 3px 12px;
   border-radius: 8px;
-  margin-bottom: 20px;
+  margin-bottom: 18px;
 }
 
 .header {
@@ -28,18 +28,11 @@
   padding-bottom: 10px;
 
   .title {
-    @include barlow-semi-bold;
+    @include roboto-bold;
 
     display: flex;
     font-size: 16px;
     align-items: center;
-
-    .icon {
-      fill: $tc-gray-90;
-      width: 17px;
-      height: 17px;
-      margin-right: 9px;
-    }
   }
 
   .allLink {
@@ -102,3 +95,28 @@
     }
   }
 }
+
+.container.light {
+  color: #000;
+  background: #fff;
+  border: 1px solid #d4d4d4;
+  border-radius: 4px;
+
+  .header {
+    .icon {
+      fill: $tc-white;
+    }
+
+    .allLink {
+      color: #0d61bf;
+      font-size: 12px;
+      line-height: 20px;
+    }
+  }
+
+  .blogs {
+    .row:not(:first-child) {
+      border-top: 1px solid $dashboard-dark-bg;
+    }
+  }
+}

src/shared/components/Dashboard/Challenges/index.jsx

@@ -1,12 +1,12 @@
-import _ from 'lodash';
-import LoadingIndicator from 'components/LoadingIndicator';
-import PT from 'prop-types';
-import React from 'react';
-import qs from 'qs';
+import _ from "lodash";
+import LoadingIndicator from "components/LoadingIndicator";
+import PT from "prop-types";
+import React from "react";
+import qs from "qs";
 
-import { config } from 'topcoder-react-utils';
+import { config } from "topcoder-react-utils";
 
-import './styles.scss';
+import "./styles.scss";
 
 export default function ChallengesFeed({
   challenges,
@@ -21,15 +21,24 @@ export default function ChallengesFeed({
         <span styleName="title">{title}</span>
         <a
           styleName="allLink"
-          href={`${config.URL.CHALLENGES_URL}${challengeListingQuery ? `?${qs.stringify(challengeListingQuery)}` : ''}`}
+          href={`${config.URL.CHALLENGES_URL}${
+            challengeListingQuery
+              ? `?${qs.stringify(challengeListingQuery)}`
+              : ""
+          }`}
           target="_blank"
           rel="noreferrer"
-        >View all <span>challenges</span>
+        >
+          View all <span>challenges</span>
         </a>
       </div>
       <div styleName="challenges">
-        {loading ? <div styleName="loading"><LoadingIndicator /></div>
-          : (challenges || []).map(challenge => (
+        {loading ? (
+          <div styleName="loading">
+            <LoadingIndicator />
+          </div>
+        ) : (
+          (challenges || []).map((challenge) => (
             <div styleName="row" key={challenge.id}>
               <a
                 href={`/challenges/${challenge.id}`}
@@ -40,29 +49,34 @@ export default function ChallengesFeed({
               </a>
               <div styleName="prize">
                 <span styleName="amount">
-                  {`$${_.sum(challenge.prizeSets
-                    .filter(set => set.type === 'placement')
-                    .map(item => _.sum(item.prizes.map(prize => prize.value)))).toLocaleString()}`}
+                  {`$${_.sum(
+                    challenge.prizeSets
+                      .filter((set) => set.type === "placement")
+                      .map((item) =>
+                        _.sum(item.prizes.map((prize) => prize.value))
+                      )
+                  ).toLocaleString()}`}
                 </span>
               </div>
             </div>
-          ))}
+          ))
+        )}
       </div>
     </div>
   ) : null;
 }
 
 ChallengesFeed.defaultProps = {
   challenges: [],
-  theme: 'light',
-  title: 'CHALLENGES',
+  theme: "light",
+  title: "Opportunities",
   challengeListingQuery: undefined,
 };
 
 ChallengesFeed.propTypes = {
   challenges: PT.arrayOf(PT.shape()),
   loading: PT.bool.isRequired,
-  theme: PT.oneOf(['dark', 'light']),
+  theme: PT.oneOf(["dark", "light"]),
   title: PT.string,
   challengeListingQuery: PT.shape(),
 };

src/shared/components/Dashboard/Challenges/styles.scss

@@ -31,9 +31,9 @@ $dashboard-dark-bg: #2a2a2a;
   padding: 12px 0;
 
   .title {
-    @include barlow-semi-bold;
+    @include roboto-bold;
 
-    font-size: 16px;
+    font-size: 20px;
   }
 
   .allLink {

src/shared/components/Dashboard/TCTime/index.jsx

@@ -1,18 +1,20 @@
 /**
  * Topcoder Time Component
  */
-import React, { useState, useEffect } from 'react';
-import moment from 'moment-timezone';
-import darkTheme from './dark.scss';
+import React, { useState, useEffect } from "react";
+import moment from "moment-timezone";
+import darkTheme from "./dark.scss";
+import lightTheme from "./light.scss";
 
 const THEMES = {
   dark: darkTheme,
+  light: lightTheme,
 };
 
 function TopcoderTime() {
-  const theme = THEMES.dark; // for v1 only dark theme
-  let FORMAT = 'MMM Do, HH:mm UTC';
-  const TIMEZONE = 'America/New_York';
+  const theme = THEMES.light;
+  let FORMAT = "MMM Do, HH:mm UTC";
+  const TIMEZONE = "America/New_York";
   const now = moment.tz(new Date(), TIMEZONE);
   FORMAT += now.utcOffset() / 60;
   const [tcTime, setTCTime] = useState(`${now.format(FORMAT)}`);

src/shared/components/Dashboard/TCTime/light.scss

@@ -0,0 +1,29 @@
+@import "~styles/mixins";
+
+.container {
+  display: flex;
+  flex-direction: column;
+  padding: 12px;
+  margin-bottom: 18px;
+
+  @media screen and (max-width: 425px) {
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .title {
+    color: #000;
+    font-size: 16px;
+    font-family: Roboto, sans-serif;
+    font-weight: bold;
+    line-height: 24px;
+  }
+
+  .time {
+    color: #000;
+    font-size: 16px;
+    font-family: Roboto, sans-serif;
+    line-height: 24px;
+  }
+}

src/shared/components/Dashboard/ThriveArticlesFeed/index.jsx

@@ -2,56 +2,57 @@
  * Thrive Articles Feed component
  */
 
-import LoadingIndicator from 'components/LoadingIndicator';
-import PT from 'prop-types';
-import React from 'react';
-import './styles.scss';
-import ThriveArticlesIcon from 'assets/images/thrive-articles.svg';
+import LoadingIndicator from "components/LoadingIndicator";
+import PT from "prop-types";
+import React from "react";
+import "./styles.scss";
 
-export default function ThriveArticlesFeed({
-  articles,
-  loading,
-  theme,
-}) {
+export default function ThriveArticlesFeed({ articles, loading, theme }) {
   return (
     <div styleName={`container ${theme}`}>
       <div styleName="header">
         <div styleName="title">
-          <ThriveArticlesIcon styleName="icon" />
-          <span>THRIVE ARTICLES</span>
+          <span>Thrive Articles</span>
         </div>
-        <a
-          styleName="allLink"
-          href="/thrive"
-          target="_blank"
-          rel="noreferrer"
-        >View all
+        <a styleName="allLink" href="/thrive" target="_blank" rel="noreferrer">
+          View all
         </a>
       </div>
       <div styleName="articles">
-        {loading ? <div styleName="loading"><LoadingIndicator /></div>
-          : articles.map(article => (
-            <div styleName="row" key={`thrive-articles-feed-${article.fields.slug}`}>
+        {loading ? (
+          <div styleName="loading">
+            <LoadingIndicator />
+          </div>
+        ) : (
+          articles.map((article) => (
+            <div
+              styleName="row"
+              key={`thrive-articles-feed-${article.fields.slug}`}
+            >
               <a
-                href={`/thrive/articles/${article.fields.slug || article.fields.title}`}
+                href={`/thrive/articles/${
+                  article.fields.slug || article.fields.title
+                }`}
                 target="_blank"
                 rel="noreferrer"
-              >{article.fields.title}
+              >
+                {article.fields.title}
               </a>
             </div>
-          ))}
+          ))
+        )}
       </div>
     </div>
   );
 }
 
 ThriveArticlesFeed.defaultProps = {
   articles: [],
-  theme: 'light',
+  theme: "light",
 };
 
 ThriveArticlesFeed.propTypes = {
   articles: PT.arrayOf(PT.shape()),
   loading: PT.bool.isRequired,
-  theme: PT.oneOf(['dark', 'light']),
+  theme: PT.oneOf(["dark", "light"]),
 };