fix(create-new-team): enhance the design of the progress card

* Enhances the design of `Progress` and `ProgressBar` components,
  as per the https://marvelapp.com/prototype/89c7i66/screen/81081387.

Addresses #406

Author: cagdas001

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

@@ -8,61 +8,60 @@ import Button from "components/Button";
 import React from "react";
 import cn from "classnames";
 import PT from "prop-types";
+import Spinner from "components/CenteredSpinner";
 import ProgressBar from "../ProgressBar";
 import "./styles.module.scss";
-import IconMultipleActionsCheck from "../../../../assets/images/icon-multiple-actions-check-2.svg";
-import IconListQuill from "../../../../assets/images/icon-list-quill.svg";
-import IconOfficeFileText from "../../../../assets/images/icon-office-file-text.svg";
-
 function Progress({
   extraStyleName,
   isDisabled,
+  isSearching,
   onClick,
   buttonLabel,
   stages,
   percentage,
 }) {
-
-  let backgroundIcon
-  if (extraStyleName === "input-skills") {
-     backgroundIcon= <IconListQuill styleName="transparent-icon" />
-  } else if (extraStyleName === "input-job-description") {
-     backgroundIcon= <IconOfficeFileText styleName="transparent-icon" />
-  } else {
-     backgroundIcon= <IconMultipleActionsCheck styleName="transparent-icon" />
-  }
-
   return (
     <div styleName={cn("progress", extraStyleName)}>
       <ProgressBar percentDone={percentage} />
       <ul styleName="list">
-        {stages.map((stage) => (
+        {stages.map((stage, idx) => (
           <li
             styleName={cn("list-item", {
               active: stage.isCurrent,
               done: stage.completed,
             })}
+            data-index={idx + 1}
           >
             {stage.name}
           </li>
         ))}
       </ul>
       <Button
+        styleName={cn({ searching: isSearching })}
         size="medium"
         type="secondary"
         disabled={isDisabled}
         onClick={onClick}
       >
-        {buttonLabel}
+        {isSearching ? (
+          <>
+            <div styleName="spinner">
+              <Spinner stype="Oval" width="16" height="16" />
+            </div>
+            Searching
+          </>
+        ) : (
+          buttonLabel
+        )}
       </Button>
-      {backgroundIcon}
     </div>
   );
 }
 
 Progress.propTypes = {
   extraStyleName: PT.string,
   isDisabled: PT.bool,
+  isSearching: PT.bool,
   onClick: PT.func,
   buttonLabel: PT.string,
   currentStageIdx: PT.number,

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

@@ -9,6 +9,13 @@
   color: #fff;
   button {
     border: none;
+    &.searching {
+      pointer-events: none;
+    }
+    .spinner {
+      margin-top: 3px;
+      margin-right: 5px;
+    }
   }
 }
 
@@ -39,47 +46,41 @@
   font-size: 14px;
   line-height: 16px;
   font-weight: 400;
-  color: rgba(255, 255, 255, 0.6);
+  color: rgba(#fff, 0.6);
 
   &:before {
-    content: "";
-    color: #fff;
-    border: 1px solid #ffffff;
+    content: attr(data-index);
+    font-size: 10px;
+    line-height: 14px;
+    font-weight: 600;
+    padding-left: 4px;
+    color: rgba(#fff, 0.6);
+    border: 1px solid rgba(#fff, 0.6);
     border-radius: 100%;
     width: 16px;
     height: 16px;
     margin-right: 10px;
     display: block;
     float: left;
-    visibility: hidden;
   }
 
   &.active {
     font-weight: 500;
     color: #fff;
     &:before {
-      visibility: visible;
+      color: #555555;
       background-color: #fff;
     }
   }
 
   &.done {
-    font-weight: 400;
+    font-weight: 500;
     &:before {
       content: "✓";
+      padding-left: 3px;
       font-size: 9px;
-      line-height: 14px;
-      padding-left: 4px;
-      visibility: visible;
+      font-weight: 900;
+      background-color: #0AB88A;
     }
   }
 }
-
-.transparent-icon {
-  position: absolute;
-  right: -50px;
-  top: 85px;
-  opacity: 10%;
-  width: 144px;
-  height: 144px;
-}

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

@@ -17,7 +17,7 @@ function ProgressBar({ percentDone }) {
   return (
     <div styleName="progress">
       <div styleName="heading">
-        <p>Progress</p>
+        <p>Completeness</p>
         <h6>{percentDone}%</h6>
       </div>
       <div styleName="progress-bar">