Resolving merge conflict and removing file alias

Author: Arpitkumar Chaudhari

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

@@ -10,9 +10,6 @@ import cn from "classnames";
 import PT from "prop-types";
 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,
@@ -22,44 +19,42 @@ function Progress({
   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) => (
-          <li
-            styleName={cn("list-item", {
-              active: stage.isCurrent,
-              done: stage.completed,
-            })}
-          >
-            {stage.name}
-          </li>
-        ))}
-      </ul>
-      {buttonLabel !== undefined ? (
+    <ProgressBar percentDone={percentage} />
+    <ul styleName="list">
+      {stages.map((stage, idx) => (
+        <li
+          styleName={cn("list-item", {
+            active: stage.isCurrent,
+            done: stage.completed,
+          })}
+          data-index={idx + 1}
+        >
+          {stage.name}
+        </li>
+      ))}
+    </ul>
+    {buttonLabel !== undefined ? (
+    <Button
+      styleName={cn({ searching: isSearching })}
+      size="medium"
+      type="secondary"
+      disabled={isDisabled}
+      onClick={onClick}
+    >
+      {isSearching ? (
         <>
-          <Button
-            size="medium"
-            type="secondary"
-            disabled={isDisabled}
-            onClick={onClick}
-          >
-            {buttonLabel}
-          </Button>
-          {backgroundIcon}
+          <div styleName="spinner">
+            <Spinner stype="Oval" width="16" height="16" />
+          </div>
+          Searching
         </>
-      ) : null}
-    </div>
+      ) : (
+        buttonLabel
+      )}
+    </Button>) : null}
+  </div>
   );
 }
 

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

@@ -9,26 +9,33 @@
   color: #fff;
   button {
     border: none;
+    &.searching {
+      pointer-events: none;
+    }
+    .spinner {
+      margin-top: 3px;
+      margin-right: 5px;
+    }
   }
 }
 
 .input-job-description {
-  background-image: linear-gradient(135deg, #2984bd 0%, #0ab88a 100%);
+  background-image: linear-gradient(135deg, #2984BD 0%, #0AB88A 100%);
 }
 
 .input-skills {
-  background-image: linear-gradient(221.5deg, #646cd0 0%, #9d41c9 100%);
+  background-image: linear-gradient(221.5deg, #646CD0 0%, #9d41c9 100%);
 }
 
 .role-selection {
-  background-image: linear-gradient(45deg, #8b41b0 0%, #ef476f 100%);
+  background-image: linear-gradient(45deg, #8B41B0 0%, #EF476F 100%);
 }
 
 .list {
   margin-bottom: 55px;
   & + button[disabled] {
-    background-color: #e9e9e9;
-    color: #fff;
+    background-color: #E9E9E9;
+    color: #FFF;
     opacity: 1;
     filter: none;
   }
@@ -39,51 +46,45 @@
   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;
-}
-
 .final-step {
   height: 230px;
 }