Numerous updates of dashboard styles according to new feedback from Dara

Author: birdofpreyru

.exchange-rates.cache

@@ -1 +1 @@
-{"disclaimer":"Usage subject to terms: https://openexchangerates.org/terms","license":"https://openexchangerates.org/license","timestamp":1519995600,"base":"USD","rates":{"AED":3.672973,"AFN":69.3625,"ALL":107.18,"AMD":480.870377,"ANG":1.78469,"AOA":214.868,"ARS":20.1494,"AUD":1.290642,"AWG":1.784998,"AZN":1.68825,"BAM":1.589199,"BBD":2,"BDT":83.006132,"BGN":1.589458,"BHD":0.377087,"BIF":1759.65,"BMD":1,"BND":1.319898,"BOB":6.933781,"BRL":3.26489,"BSD":1,"BTC":0.000090891719,"BTN":65.19905,"BWP":9.581646,"BYN":1.966043,"BZD":2.009645,"CAD":1.28744,"CDF":1626.123744,"CHF":0.935395,"CLF":0.0225,"CLP":598.425,"CNH":6.348752,"CNY":6.3451,"COP":2899.159664,"CRC":569.953642,"CUC":1,"CUP":25.5,"CVE":90.73,"CZK":20.646227,"DJF":177,"DKK":6.051132,"DOP":49.344373,"DZD":113.9785,"EGP":17.6465,"ERN":14.996667,"ETB":27.406634,"EUR":0.812454,"FJD":2.021904,"FKP":0.725301,"GBP":0.725301,"GEL":2.465148,"GGP":0.725301,"GHS":4.4624,"GIP":0.725301,"GMD":47.21,"GNF":9025.85,"GTQ":7.37607,"GYD":206.503743,"HKD":7.8294,"HNL":23.651203,"HRK":6.048004,"HTG":64.317911,"HUF":254.868,"IDR":13730.326709,"ILS":3.45192,"IMP":0.725301,"INR":65.26,"IQD":1191.475723,"IRR":37302.484098,"ISK":100.685,"JEP":0.725301,"JMD":127.103211,"JOD":0.709001,"JPY":105.378,"KES":101.3035,"KGS":68.035298,"KHR":4044.291667,"KMF":403.471027,"KPW":900,"KRW":1083.6325,"KWD":0.2999,"KYD":0.832996,"KZT":322.79,"LAK":8286.95,"LBP":1515.349713,"LKR":155.208454,"LRD":130.376991,"LSL":11.887879,"LYD":1.337696,"MAD":9.203417,"MDL":16.701559,"MGA":3194.45,"MKD":50.025,"MMK":1340.25,"MNT":2391.281976,"MOP":8.063195,"MRO":356,"MRU":35.325,"MUR":33.049,"MVR":15.460011,"MWK":725.715,"MXN":18.970085,"MYR":3.919802,"MZN":61.855,"NAD":11.887879,"NGN":360.390593,"NIO":31.109504,"NOK":7.807153,"NPR":104.338714,"NZD":1.382447,"OMR":0.38499,"PAB":1,"PEN":3.262106,"PGK":3.242796,"PHP":52.018,"PKR":110.5905,"PLN":3.40783,"PYG":5551.95,"QAR":3.640999,"RON":3.785803,"RSD":95.903,"RUB":57.215,"RWF":864.913459,"SAR":3.750619,"SBD":7.79699,"SCR":13.455149,"SDG":18.094114,"SEK":8.251749,"SGD":1.321207,"SHP":0.725301,"SLL":7668.450022,"SOS":578.201395,"SRD":7.468,"SSP":130.2634,"STD":19935.790523,"STN":20.175,"SVC":8.748533,"SYP":514.98999,"SZL":11.889751,"THB":31.48,"TJS":8.823181,"TMT":3.50998,"TND":2.389455,"TOP":2.217721,"TRY":3.823294,"TTD":6.728722,"TWD":29.3256,"TZS":2254.05,"UAH":26.534012,"UGX":3649.35,"USD":1,"UYU":28.365637,"UZS":8170.15,"VEF":28960,"VND":22757.110027,"VUV":105.255077,"WST":2.526233,"XAF":532.935214,"XAG":0.06088104,"XAU":0.00075683,"XCD":2.70255,"XDR":0.692714,"XOF":532.935214,"XPD":0.00100937,"XPF":96.951611,"XPT":0.00103681,"YER":250.294142,"ZAR":11.967003,"ZMW":9.756,"ZWL":322.355011}}
+{"disclaimer":"Usage subject to terms: https://openexchangerates.org/terms","license":"https://openexchangerates.org/license","timestamp":1520038805,"base":"USD","rates":{"AED":3.673014,"AFN":69.475,"ALL":107.5,"AMD":480.77,"ANG":1.784194,"AOA":215.1155,"ARS":20.264,"AUD":1.2889,"AWG":1.786505,"AZN":1.68825,"BAM":1.58875,"BBD":2,"BDT":82.977763,"BGN":1.58816,"BHD":0.377075,"BIF":1775,"BMD":1,"BND":1.321966,"BOB":6.910011,"BRL":3.2528,"BSD":1,"BTC":0.00009030383,"BTN":65.19905,"BWP":9.578914,"BYN":1.965596,"BZD":2.009098,"CAD":1.288544,"CDF":1615,"CHF":0.938145,"CLF":0.0225,"CLP":598.8,"CNH":6.330917,"CNY":6.3484,"COP":2867,"CRC":569.71,"CUC":1,"CUP":25.5,"CVE":89.7375,"CZK":20.5919,"DJF":177.075,"DKK":6.04549,"DOP":49.13,"DZD":114.04071,"EGP":17.641,"ERN":14.996667,"ETB":27.56,"EUR":0.81179,"FJD":2.021996,"FKP":0.7246,"GBP":0.7246,"GEL":2.463723,"GGP":0.7246,"GHS":4.46,"GIP":0.7246,"GMD":47.2,"GNF":9000,"GTQ":7.373907,"GYD":206.445,"HKD":7.830598,"HNL":23.601015,"HRK":6.038184,"HTG":64.297808,"HUF":254.66,"IDR":13730.326709,"ILS":3.442442,"IMP":0.7246,"INR":65.1967,"IQD":1183,"IRR":37302.484098,"ISK":100.59,"JEP":0.7246,"JMD":127.1499,"JOD":0.709001,"JPY":105.75296581,"KES":101.3855,"KGS":68.035298,"KHR":4002,"KMF":399.45,"KPW":900,"KRW":1079.65,"KWD":0.299888,"KYD":0.832789,"KZT":322.647036,"LAK":8305,"LBP":1512.5,"LKR":155.13,"LRD":130.5,"LSL":11.91,"LYD":1.33,"MAD":9.2,"MDL":16.695982,"MGA":3117.5,"MKD":49.983876,"MMK":1339.7,"MNT":2390.948643,"MOP":8.06072,"MRO":356,"MRU":35.3,"MUR":33.04,"MVR":15.460011,"MWK":725.725,"MXN":18.812575,"MYR":3.930279,"MZN":61.855,"NAD":11.915,"NGN":360.5,"NIO":31.085,"NOK":7.796875,"NPR":104.297226,"NZD":1.382,"OMR":0.384918,"PAB":1,"PEN":3.2565,"PGK":3.195,"PHP":51.939,"PKR":110.65,"PLN":3.4003,"PYG":5550.4,"QAR":3.641996,"RON":3.782471,"RSD":95.696456,"RUB":56.815,"RWF":856,"SAR":3.75015,"SBD":7.76394,"SCR":13.699823,"SDG":18.01,"SEK":8.2507,"SGD":1.319653,"SHP":0.7246,"SLL":7668.450022,"SOS":582,"SRD":7.468,"SSP":130.2634,"STD":19933.390132,"STN":19.985,"SVC":8.745727,"SYP":514.98999,"SZL":11.91,"THB":31.4455,"TJS":8.820764,"TMT":3.499986,"TND":2.4212,"TOP":2.217721,"TRY":3.806784,"TTD":6.73915,"TWD":29.283,"TZS":2254.1,"UAH":26.5275,"UGX":3648.3,"USD":1,"UYU":28.40176,"UZS":8180,"VEF":28960,"VND":22757.110027,"VUV":105.255077,"WST":2.5271,"XAF":532.499333,"XAG":0.06061195,"XAU":0.00075614,"XCD":2.70255,"XDR":0.689644,"XOF":532.499333,"XPD":0.00100706,"XPF":96.872315,"XPT":0.00103467,"YER":250.325,"ZAR":11.923195,"ZMW":9.74,"ZWL":322.355011}}

src/assets/images/filter-icon.svg

@@ -59,7 +59,7 @@
 }
 
 .text {
-  @include tc-body-md;
+  @include tc-body-lg;
 }
 
 .title {
@@ -93,20 +93,21 @@
   width: 100%;
 
   .text {
-    @include tc-heading-lg;
+    @include tc-heading-md;
 
     color: $tc-white;
+    font-weight: 100;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
 
   .title {
-    @include tc-heading-lg;
+    @include tc-heading-md;
 
     color: $tc-white;
-    font-weight: 900;
-    margin: 0 30px 0 0;
+    font-weight: 400;
+    margin: 0 15px 0 0;
     white-space: nowrap;
   }
 

src/shared/components/Dashboard/Announcement/style.scss

@@ -8,11 +8,14 @@ export default function Card({
   text,
   title,
 }) {
+  const normalizedLink =
+    link.replace(/^https:\/\/wwwtc\.staging\.wpengine\.com/,
+      'https://www.topcoder.com');
   return (
     <div styleName="container">
       <h1 styleName="title">
         <a
-          href={link}
+          href={normalizedLink}
           rel="noopener noreferrer"
           target="_blank"
         >{title}</a>
@@ -25,7 +28,7 @@ export default function Card({
       />
       <div styleName="fade" />
       <a
-        href={link}
+        href={normalizedLink}
         rel="noopener noreferrer"
         styleName="readMore"
         target="_blank"

src/shared/components/Dashboard/CommunityBlog/Card/index.jsx

@@ -77,16 +77,10 @@
   position: absolute;
 
   &,
-  &:active {
-    color: $tc-dark-blue-110;
-  }
-
-  &:hover {
-    color: $tc-dark-blue-70;
-  }
-
+  &:active,
+  &:hover,
   &:visited {
-    color: $tc-purple-110;
+    color: $tc-dark-blue-110;
   }
 }
 
@@ -95,5 +89,7 @@
 
   background: $tc-gray-neutral-light;
   color: $tc-dark-blue-110;
+  font-weight: 300;
+  min-height: 100px;
   padding: 20px 30px;
 }

src/shared/components/Dashboard/CommunityBlog/Card/style.scss

@@ -1,7 +1,7 @@
 @import "~styles/mixins";
 
 .container {
-  padding: 40px 0 30px;
+  padding: 60px 0 30px;
 }
 
 .content {

src/shared/components/Dashboard/CommunityBlog/style.scss

@@ -4,6 +4,8 @@ import LoadingIndicator from 'components/LoadingIndicator';
 import React from 'react';
 import PT from 'prop-types';
 
+import FilterIcon from '../../../../../assets/images/filter-icon.svg';
+
 import './style.scss';
 
 export default function ChallengeFilter({
@@ -19,7 +21,7 @@ export default function ChallengeFilter({
       <div
         onMouseEnter={() => expand(true)}
         styleName="button"
-      >F</div>
+      ><FilterIcon /></div>
     );
   }
 

src/shared/components/Dashboard/CurrentActivity/ChallengeFilter/index.jsx

@@ -9,6 +9,7 @@
   cursor: pointer;
   height: 45px;
   margin: 10px;
+  padding: 5px 10px;
   min-width: 45px;
   text-align: center;
 }

src/shared/components/Dashboard/CurrentActivity/ChallengeFilter/style.scss

@@ -29,6 +29,15 @@ const DAY_MS = 24 * HOUR_MS;
 
 const ALERT_TIME = 24 * HOUR_MS;
 
+function normalizeSubTrackTagForRendering(subTrack) {
+  let x;
+  switch (subTrack) {
+    case 'WEB_DESIGNS': x = 'Web Design'; break;
+    default: x = subTrack;
+  }
+  return _.startCase(_.toLower(x));
+}
+
 export default function ChallengeCard({
   challenge,
   selectChallengeDetailsTab,
@@ -78,19 +87,28 @@ export default function ChallengeCard({
     'Copilot',
   ]).length;
 
-  const showOrLink = _.intersection(roles, [
+  let showOrLink = _.intersection(roles, [
     'Approver',
     'Copilot',
     'Reviewer',
   ]).length;
 
   const submitter = roles.includes('Submitter');
-  // const submitted = userDetails.hasUserSubmittedForReview;
+  const submitted = userDetails.hasUserSubmittedForReview;
   let nextPhase = currentPhases && currentPhases[0];
   if (submitter && nextPhase && nextPhase.phaseType === 'Registration') {
     nextPhase = currentPhases[1];
   }
 
+  const nextPhaseType = _.get(nextPhase, 'phaseType');
+
+  if (submitted && _.intersection(nextPhaseType, [
+    'Appeals',
+    'Appeal Response',
+  ]).length) showOrLink = true;
+
+  const submissionOpen = nextPhaseType === 'Submission';
+
   let statusMsg;
   let deadlineMsg;
   let msgStyleModifier = '';
@@ -138,7 +156,7 @@ export default function ChallengeCard({
               theme={{ button: style.tag }}
               to={`/challenges?filter[subtracks][0]=${
                 encodeURIComponent(subTrack)}`}
-            >{_.startCase(_.toLower(challenge.subTrack))}</EventTag>
+            >{normalizeSubTrackTagForRendering(challenge.subTrack)}</EventTag>
             {
               isTco ? (
                 <EventTag
@@ -199,7 +217,7 @@ export default function ChallengeCard({
             ) : null
           }
           {
-            submitter ? (
+            submitter && submissionOpen ? (
               <Button
                 size="sm"
                 theme={{ button: style.button }}

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

@@ -72,15 +72,15 @@
 
   &.alert {
     color: $tc-red-110;
-    font-weight: bold;
+    font-weight: 300;
   }
 }
 
 .statusPanel {
   align-items: center;
   display: flex;
   flex-direction: column;
-  padding: 30px 20px 40px;
+  padding: 20px;
 }
 
 .tag {

src/shared/components/Dashboard/CurrentActivity/Challenges/ChallengeCard/style.scss

@@ -3,11 +3,13 @@ import LoadingIndicator from 'components/LoadingIndicator';
 import PT from 'prop-types';
 import React from 'react';
 import Sticky from 'react-stickynode';
+import { Link } from 'topcoder-react-utils';
 
 import * as Filter from 'utils/challenge-listing/filter';
 
 import ChallengeCard from './ChallengeCard';
 import ChallengeFilter from '../ChallengeFilter';
+
 import style from './style.scss';
 
 export default function Challenges({
@@ -57,9 +59,33 @@ export default function Challenges({
               ))
             ) : (
               <div styleName="msg">
-                No active challenges found
                 {
-                  challengeFilter ? ' in the selected community' : null
+                  challengeFilter ? (
+                    'You have no active challenges in the selected community'
+                  ) : (
+                    <div>
+                      <p>
+                        You have no active challenges at this moment. What are
+                        you interested&nbsp;in?
+                        &zwnj;<Link
+                          openNewTab
+                          to={config.URL.ARENA}
+                        >Competitive Programming</Link>?
+                        &zwnj;<Link
+                          openNewTab
+                          to="/challenges?filter[tracks][datasci]=true"
+                        >Data Science</Link>?
+                        &zwnj;<Link
+                          openNewTab
+                          to="/challenges?filter[tracks][design]=true"
+                        >Design</Link>?
+                        &zwnj;<Link
+                          openNewTab
+                          to="/challenges?filter[tracks][develop]=true"
+                        >Software Development</Link>?
+                      </p>
+                    </div>
+                  )
                 }
               </div>
             )

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

@@ -43,7 +43,16 @@
 .msg {
   @include tc-heading-md;
 
+  max-width: 640px;
   padding: 20px 0 0;
+
+  a,
+  a:active,
+  a:focus,
+  a:hover,
+  a:visited {
+    color: $tc-dark-blue-110;
+  }
 }
 
 .sticky {

src/shared/components/Dashboard/CurrentActivity/Challenges/style.scss

@@ -15,6 +15,9 @@ export default function Option({ select, selected, title }) {
         role="button"
         tabIndex={0}
       >{title}</div>
+      {
+        selected ? <div styleName="selectedUnderline" /> : null
+      }
     </div>
   );
 }

src/shared/components/Dashboard/CurrentActivity/Header/Option/index.jsx

@@ -1,16 +1,25 @@
 @import "~styles/mixins";
 
 .container {
-  @include tc-heading-lg;
+  @include tc-heading-md;
 
-  color: $tc-dark-blue-110;
+  color: $tc-dark-blue-70;
   cursor: pointer;
-  padding: 0 10px 20px;
+  padding: 0 10px;
   margin: 0 10px;
+  text-transform: uppercase;
 }
 
 .selected {
+  color: $tc-black;
+  cursor: default;
+  font-weight: 500;
+}
+
+.selectedUnderline {
   border-bottom: 2px solid $tc-black;
   color: $tc-black;
   cursor: default;
+  margin: 10px auto;
+  width: 70%;
 }