Merge pull request #429 from mbaghel/dev

Fix: Label copy updates as per https://docs.google.com/document/d/1BhPNfCXxJVheLYPWLc--uQ3zEQo5dzhHMKWOopjH2K4/edit

Author: nikolay83

src/routes/CreateNewTeam/components/NoMatchingProfilesResultCard/index.jsx

@@ -42,32 +42,32 @@ function NoMatchingProfilesResultCard({ role }) {
     <div styleName="result-card">
       <div styleName="heading">
         <IconEarthX />
-        <h3>Additional Evaluation Needed</h3>
+        <h3>Dang. No matching talent (yet)</h3>
         <Curve styleName="curve" />
         <IconEarthX styleName="transparent-icon" />
       </div>
       <div styleName="content">
         <h4 styleName="job-title">
           {role.jobTitle && role.jobTitle.length
             ? role.jobTitle
-            : "Custom Role"}
+            : "What happens next"}
         </h4>
         <p styleName="info-txt">
-          We did not get a perfect match to your requirements on the first pass,
-          but we are confident they are out there. We'd like to dig a little
-          deeper into our community to find someone who can fit your needs. This
-          may take up to two weeks. Please continue to submit your request, and
-          a Topcoder representative will reach out to you soon with next steps.
+          We did not find a perfect match to your requirements, but we'd like to
+          dig a little deeper into our community. We’ll start right away, and
+          this may take up to two weeks. You can modify your criteria, or
+          continue this search. If you choose to continue, we will reach out
+          soon with next steps.
         </p>
         {role.rates && role.name ? (
           <div styleName="niche-rate-box">
-            <p>{role.name} Rate</p>
+            <p>Estimate for this role</p>
             <p styleName="cost">{formatMoney(role.rates[0].global)}</p>
             <p>/Week</p>
           </div>
         ) : (
           <div styleName="niche-rate-box">
-            <p>Custom Rate</p>
+            <p>Estimate for this role</p>
             <p styleName="cost">$1,200</p>
             <p>/Week</p>
           </div>
@@ -83,7 +83,7 @@ function NoMatchingProfilesResultCard({ role }) {
             disabled={!role.roleSearchRequestId || alreadyAdded}
             type="primary"
           >
-            {alreadyAdded ? "Added" : "Add Custom Role"}
+            {alreadyAdded ? "Added" : "Continue this search"}
           </Button>
         </div>
       </div>

src/routes/CreateNewTeam/components/NoMatchingProfilesResultCard/styles.module.scss

@@ -66,7 +66,6 @@
     border: 1px solid #F4F4F4;
     border-radius: 6px;
     width: 196px;
-    height: 164px;
     p:first-child {
       @include font-barlow;
       margin-top: 4px;

src/routes/CreateNewTeam/components/ResultCard/index.jsx

@@ -59,10 +59,11 @@ function ResultCard({
     <div styleName="result-card">
       <div styleName="heading">
         <IconEarthCheck />
-        <h3>We have matching profiles</h3>
+        <h3>You've Got Matches</h3>
         <p>
-          We have qualified candidates who match {formatPercent(skillsMatch)}
-          {skillsMatch < 1 ? " or more " : " "} of your job requirements.
+          You’re one step closer to hiring great talent. Please provide details
+          about how many people you need, how long you need them, and when you’d
+          like to start.
         </p>
         <Curve styleName="curve" />
         <IconEarthCheck styleName="transparent-icon" />
@@ -257,6 +258,7 @@ function ResultCard({
         <div styleName="content">
           <div styleName="matching-info">
             <div styleName="matching-info-left">
+              <h5 styleName="skills-head">Matched Skills</h5>
               {matchedSkills.length
                 ? _.map(matchedSkills, (s) => (
                     <SkillTag name={s.name} id={s.id} />

src/routes/CreateNewTeam/components/ResultCard/styles.module.scss

@@ -37,6 +37,7 @@
 
   p {
     font-size: 14px;
+    width: 80%;
   }
 }
 
@@ -342,3 +343,13 @@
   justify-content: space-between;
   height: 100%;
 }
+
+.skills-head {
+  @include font-barlow;
+  font-weight: 600;
+  font-size: 16px;
+  min-width: 124px;
+  text-transform: uppercase;
+  text-align: center;
+  margin-bottom: 8px;
+}

src/routes/CreateNewTeam/components/TeamDetailsModal/index.jsx

@@ -80,8 +80,8 @@ function TeamDetailsModal({ open, onClose, submitForm, addedRoles }) {
             open={open}
             onClose={onClose}
             maxWidth="830px"
-            title="Team Details"
-            subtitle="Please provide a name for your Team. This could be the name of the project they will work on, the name of the team they are joining, or whatever else will make this talent request meaningful for you."
+            title="Customize Your Team"
+            subtitle="Give your new team a name. This could be the name of the project they will work on or the team they will be joining."
             buttons={
               <Button
                 type="primary"

src/routes/CreateNewTeam/pages/InputJobDescription/index.jsx

@@ -72,11 +72,7 @@ function InputJobDescription() {
             backTo="/taas/createnewteam"
           />
           <p styleName="subtitle">
-            Input a Job Description for your opening and the Topcoder Platform
-            will identify the skills required to perform the job duties and find
-            the best matching freelancers for your job opening. After inputting
-            the Job Description click on the "Search" button to see the skills
-            identified.
+            Copy and paste in a job description, or enter it manually.
           </p>
           <div styleName="job-title">
             <TextInput

src/routes/CreateNewTeam/pages/InputJobDescription/styles.module.scss

@@ -13,6 +13,7 @@
   font-size: 12px;
   line-height: normal;
   top: -20px;
+  width: 100%;
 }
 
 .title {

src/routes/CreateNewTeam/pages/InputSkills/components/SkillsList/index.jsx

@@ -39,11 +39,7 @@ function SkillsList({ skills, selectedSkills, toggleSkill }) {
           : null
       }
     >
-      <p styleName="subtitle">
-        Please select one or more essential skills you require your talent to
-        have. Topcoder will match to profiles which contain most or all of these
-        skills.
-      </p>
+      <p styleName="subtitle">Select one or more skills.</p>
       {filteredSkills.map(({ id, name }) => (
         <SkillItem
           key={id}

src/routes/CreateNewTeam/pages/InputSkills/components/SkillsList/styles.module.scss

@@ -4,4 +4,5 @@
   line-height: normal;
   margin: 10px 24px 0px;
   top: -15px;
+  width: 100%;
 }

src/routes/CreateNewTeam/pages/SelectRole/components/RolesList/index.jsx

@@ -9,6 +9,7 @@ import PT from "prop-types";
 import RoleItem from "../RoleItem";
 import RoleStaticCard from "../RoleStaticCard";
 import ItemList from "../../../../components/ItemList";
+import "./styles.module.scss";
 
 function RolesList({ roles, selectedRoleId, onDescriptionClick, toggleRole }) {
   const [filteredRoles, setFilteredRoles] = useState(roles);
@@ -33,6 +34,7 @@ function RolesList({ roles, selectedRoleId, onDescriptionClick, toggleRole }) {
       filterPlaceholder="Find a role.."
       filterItems={filterRoles}
     >
+      <p styleName="subtitle">Choose the role you want to fill</p>
       {filteredRoles.map(({ id, name, imageUrl }) => (
         <RoleItem
           key={id}

src/routes/CreateNewTeam/pages/SelectRole/components/RolesList/styles.module.scss

@@ -0,0 +1,8 @@
+.subtitle {
+  position: relative;
+  font-size: 12px;
+  line-height: normal;
+  margin: 10px 24px 0px;
+  top: -15px;
+  width: 100%;
+}