Label updates and simple UI style fixes

Resolves: topcoder-archive#363, topcoder-archive#366, topcoder-archive#367, topcoder-archive#368, topcoder-archive#369, topcoder-archive#371, topcoder-archive#372

Author: mbaghel

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

@@ -42,7 +42,7 @@ function NoMatchingProfilesResultCard({ role }) {
     <div styleName="result-card">
       <div styleName="heading">
         <IconEarthX />
-        <h3>No Matching Profiles</h3>
+        <h3>Additional Evaluation Needed</h3>
         <Curve styleName="curve" />
         <IconEarthX styleName="transparent-icon" />
       </div>
@@ -53,8 +53,11 @@ function NoMatchingProfilesResultCard({ role }) {
             : "Custom Role"}
         </h4>
         <p styleName="info-txt">
-          We will be looking internally for members matching your requirements
-          and be back at them in about 2 weeks.
+          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.
         </p>
         {role.rates && role.name ? (
           <div styleName="niche-rate-box">

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

@@ -56,7 +56,7 @@
     @include font-roboto;
     font-size: 14px;
     line-height: 22px;
-    width: 357px;
+    width: 80%;
     text-align: center;
   }
   .niche-rate-box {

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

@@ -245,20 +245,7 @@ function ResultCard({ role }) {
               <p>Members matched</p>
             </div>
           </div>
-          <div styleName="footer">
-            <p>
-              <span>60%</span> of members are available 20 hours / week (part
-              time)
-            </p>
-            <p>
-              <span>20%</span> of members are available 30 hours / week (part
-              time)
-            </p>
-            <p>
-              <span>10%</span> of members are available 40 hours / week (full
-              time)
-            </p>
-          </div>
+          <div styleName="footer" />
         </div>
       )}
     </div>

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

@@ -59,7 +59,7 @@ function SearchContainer({
           }
           onClick={() => setAddAnotherOpen(true)}
           extraStyleName={completenessStyle}
-          buttonLabel="Submit Request"
+          buttonLabel="Continue"
           stages={stages}
           percentage={getPercentage()}
         />

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

@@ -119,7 +119,7 @@ function SubmitContainer({
         <Completeness
           onClick={() => setAddAnotherOpen(true)}
           extraStyleName={completenessStyle}
-          buttonLabel="Submit Request"
+          buttonLabel="Continue"
           stages={stages}
           percentage="98"
         />

src/routes/CreateNewTeam/index.jsx

@@ -32,22 +32,22 @@ function CreateNewTeam() {
         Please select how you want to find members that match your requirements.
       </p>
       <LandingBox
-        title="Select a Role"
-        description="You know you want a front end developer, or a full stack developer, mobile one or others."
+        title="Choose a Role"
+        description="Select from a list of pre-defined roles which Topcoder develops talent for. Standardized Job Descriptions and baseline skills are available for review."
         icon={<IconMultipleActionsCheck />}
         backgroundImage="linear-gradient(101.95deg, #8B41B0 0%, #EF476F 100%)"
         onClick={() => goToRoute("/taas/createnewteam/role")}
       />
       <LandingBox
         title="Input Skills"
-        description="You know your developer has specific skills, such as for example: Java, Python, Oracle, etc."
+        description="Select one or more technical skills which you need. Topcoder will match your requirements to our talent."
         icon={<IconListQuill />}
         backgroundImage="linear-gradient(221.5deg, #2C95D7 0%, #9D41C9 100%)"
         onClick={() => goToRoute("/taas/createnewteam/skills")}
       />
       <LandingBox
         title="Input Job Description"
-        description="You would like to use a description to explain what you need."
+        description="Input a Job Description and Topcoder will extract the required skills from it, then find the best matching talent for the job duties."
         icon={<IconOfficeFileText />}
         backgroundImage="linear-gradient(135deg, #2984BD 0%, #0AB88A 100%)"
         onClick={() => goToRoute("/taas/createnewteam/jd")}

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

@@ -32,22 +32,22 @@ function SkillListPopup({ open, skills, isLoading, onClose, onContinueClick }) {
       open={open}
       onClose={onClose}
       headerIcon={<IconSingleManAdd />}
-      title="Skills"
+      title="Identified Skills"
       subtitle={
         skills.length
-          ? "These skills are found in your Job Description"
+          ? "Topcoder has identified the following skills referenced in your Job Description."
           : "No skills are found in your Job Description"
       }
       isLoading={isLoading}
       loadingMessage="Loading skills..."
       maxWidth="460px"
       buttons={Buttons}
     >
-      <div>
+      <ul styleName="list">
         {_.map(skills, (s) => {
-          return <div>{s.tag}</div>;
+          return <li>{s.tag}</li>;
         })}
-      </div>
+      </ul>
     </BaseCreateModal>
   );
 }

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

@@ -1,48 +1,9 @@
 @import "styles/include";
 
-.button-group {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: flex-end;
-  :first-child {
-    margin-right: 8px;
-  }
-}
-
-.modal-body {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: center;
+.list {
+  @include font-roboto;
+  font-size: 18px;
+  line-height: normal;
+  color: #2a2a2a;
   text-align: center;
-  margin-bottom: 80px;
-
-  svg {
-    width: 48px;
-    height: 48px;
-    margin-bottom: 16px;
-  }
-
-  h5 {
-    @include font-barlow-condensed;
-    font-size: 34px;
-    color: #1e94a3;
-    text-transform: uppercase;
-    font-weight: 500;
-    margin-bottom: 10px;
-  }
-
-  p {
-    @include font-roboto;
-    font-size: 16px;
-    color: #555555;
-    line-height: 26px;
-  }
-}
-
-.cross {
-  g {
-    stroke: #000;
-  }
-}
+}

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

@@ -67,6 +67,13 @@ function InputJobDescription() {
             title={<div styleName="title">Input Job Description</div>}
             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.
+          </p>
           <div styleName="job-title">
             <TextInput
               placeholder="Job title"

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

@@ -8,6 +8,13 @@
   flex: 1;
 }
 
+.subtitle {
+  position: relative;
+  font-size: 12px;
+  line-height: normal;
+  top: -20px;
+}
+
 .title {
   font-weight: 500;
 }

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

@@ -46,7 +46,7 @@ function RoleItem({
           onDescriptionClick(id);
         }}
       >
-        Description
+        View Description & Skills
       </button>
     </div>
   );