From 6110c9397216951d97622c511b1432b7a43ba3fd Mon Sep 17 00:00:00 2001
From: Michael Baghel <31278895+mbaghel@users.noreply.github.com>
Date: Fri, 6 Aug 2021 11:38:41 +0400
Subject: [PATCH] Fix: Label copy updates

---
 .../NoMatchingProfilesResultCard/index.jsx    | 20 +++++++++----------
 .../styles.module.scss                        |  1 -
 .../components/ResultCard/index.jsx           |  8 +++++---
 .../components/ResultCard/styles.module.scss  | 11 ++++++++++
 .../components/TeamDetailsModal/index.jsx     |  4 ++--
 .../pages/InputJobDescription/index.jsx       |  6 +-----
 .../InputJobDescription/styles.module.scss    |  1 +
 .../components/SkillsList/index.jsx           |  6 +-----
 .../components/SkillsList/styles.module.scss  |  1 +
 .../SelectRole/components/RolesList/index.jsx |  2 ++
 .../components/RolesList/styles.module.scss   |  8 ++++++++
 11 files changed, 42 insertions(+), 26 deletions(-)
 create mode 100644 src/routes/CreateNewTeam/pages/SelectRole/components/RolesList/styles.module.scss

diff --git a/src/routes/CreateNewTeam/components/NoMatchingProfilesResultCard/index.jsx b/src/routes/CreateNewTeam/components/NoMatchingProfilesResultCard/index.jsx
index 7606b4b8..96b2ad3c 100644
--- a/src/routes/CreateNewTeam/components/NoMatchingProfilesResultCard/index.jsx
+++ b/src/routes/CreateNewTeam/components/NoMatchingProfilesResultCard/index.jsx
@@ -42,7 +42,7 @@ 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>
@@ -50,24 +50,24 @@ function NoMatchingProfilesResultCard({ role }) {
         <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>
diff --git a/src/routes/CreateNewTeam/components/NoMatchingProfilesResultCard/styles.module.scss b/src/routes/CreateNewTeam/components/NoMatchingProfilesResultCard/styles.module.scss
index d60db1e5..2ecbb4ae 100644
--- a/src/routes/CreateNewTeam/components/NoMatchingProfilesResultCard/styles.module.scss
+++ b/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;
diff --git a/src/routes/CreateNewTeam/components/ResultCard/index.jsx b/src/routes/CreateNewTeam/components/ResultCard/index.jsx
index 4f941285..50ebef44 100644
--- a/src/routes/CreateNewTeam/components/ResultCard/index.jsx
+++ b/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} />
diff --git a/src/routes/CreateNewTeam/components/ResultCard/styles.module.scss b/src/routes/CreateNewTeam/components/ResultCard/styles.module.scss
index 8a85931d..d4c0f6c0 100644
--- a/src/routes/CreateNewTeam/components/ResultCard/styles.module.scss
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/routes/CreateNewTeam/components/TeamDetailsModal/index.jsx b/src/routes/CreateNewTeam/components/TeamDetailsModal/index.jsx
index 2fd2b479..451b07a5 100644
--- a/src/routes/CreateNewTeam/components/TeamDetailsModal/index.jsx
+++ b/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"
diff --git a/src/routes/CreateNewTeam/pages/InputJobDescription/index.jsx b/src/routes/CreateNewTeam/pages/InputJobDescription/index.jsx
index 53244633..452b2218 100644
--- a/src/routes/CreateNewTeam/pages/InputJobDescription/index.jsx
+++ b/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
diff --git a/src/routes/CreateNewTeam/pages/InputJobDescription/styles.module.scss b/src/routes/CreateNewTeam/pages/InputJobDescription/styles.module.scss
index e24aa845..66e3b33f 100644
--- a/src/routes/CreateNewTeam/pages/InputJobDescription/styles.module.scss
+++ b/src/routes/CreateNewTeam/pages/InputJobDescription/styles.module.scss
@@ -13,6 +13,7 @@
   font-size: 12px;
   line-height: normal;
   top: -20px;
+  width: 100%;
 }
 
 .title {
diff --git a/src/routes/CreateNewTeam/pages/InputSkills/components/SkillsList/index.jsx b/src/routes/CreateNewTeam/pages/InputSkills/components/SkillsList/index.jsx
index a84548a7..058c6ce9 100644
--- a/src/routes/CreateNewTeam/pages/InputSkills/components/SkillsList/index.jsx
+++ b/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}
diff --git a/src/routes/CreateNewTeam/pages/InputSkills/components/SkillsList/styles.module.scss b/src/routes/CreateNewTeam/pages/InputSkills/components/SkillsList/styles.module.scss
index a036bda2..c5c65e44 100644
--- a/src/routes/CreateNewTeam/pages/InputSkills/components/SkillsList/styles.module.scss
+++ b/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%;
 }
diff --git a/src/routes/CreateNewTeam/pages/SelectRole/components/RolesList/index.jsx b/src/routes/CreateNewTeam/pages/SelectRole/components/RolesList/index.jsx
index 45226000..600401ec 100644
--- a/src/routes/CreateNewTeam/pages/SelectRole/components/RolesList/index.jsx
+++ b/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}
diff --git a/src/routes/CreateNewTeam/pages/SelectRole/components/RolesList/styles.module.scss b/src/routes/CreateNewTeam/pages/SelectRole/components/RolesList/styles.module.scss
new file mode 100644
index 00000000..c5c65e44
--- /dev/null
+++ b/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%;
+}