Merge branch 'dev' into dev

Author: mbaghel

src/components/CustomerScroll/styles.module.scss

@@ -7,20 +7,19 @@
   color: #7f7f7f;
   text-align: center;
   text-transform: uppercase;
-  margin-bottom: 30px;
 }
 
 .customer-logos {
   background-image: url("../../assets/images/customer-logos.svg");
   background-size: contain;
   background-repeat: no-repeat;
+  background-position: center;
   height: 56px;
   width: 100%;
 }
 
 @media only screen and (max-height: 859px) {
   .title {
     font-size: 16px;
-    margin-bottom: 15px;
   }
 }

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

@@ -3,7 +3,7 @@
   flex-direction: row;
   justify-content: center;
   align-items: flex-start;
-  margin: 42px 35px;
+  margin: 42px 35px 30px;
   .right-side {
     display: flex;
     flex-direction: column;

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

@@ -9,6 +9,7 @@ import "./styles.module.scss";
 import Button from "components/Button";
 
 function LandingBox({
+  showGap,
   icon,
   title,
   description,
@@ -23,24 +24,20 @@ function LandingBox({
         backgroundImage,
       }}
     >
+      {showGap && <div styleName='gap'>OR</div>}
       <div styleName="flex-container">
-        <div styleName="icon-and-text">
           <div styleName="icon">{icon}</div>
-          <div>
-            <h3 styleName="title">{title}</h3>
-            <p>{description}</p>
-          </div>
-        </div>
-        <Button
-          size="large"
-          type="secondary"
-          onClick={onClick}
-          disabled={isDisabled}
-        >
-          Select
-        </Button>
+          <h3 styleName="title">{title}</h3>
+          <p styleName="description">{description}</p>
+          <Button
+            size="large"
+            type="secondary"
+            onClick={onClick}
+            disabled={isDisabled}
+          >
+            Select
+          </Button>
       </div>
-      <div styleName="bg-icon">{icon}</div>
     </div>
   );
 }
@@ -51,6 +48,7 @@ LandingBox.propTypes = {
   description: PT.string,
   onClick: PT.func,
   isDisabled: PT.bool,
+  showGap: PT.bool,
   backgroundImage: PT.string,
 };
 

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

@@ -2,20 +2,29 @@
 
 .landing-box {
   @include rounded-card;
-  padding: 44px 50px;
+  flex: 1;
   color: #fff;
+  padding-bottom: 30px;
+  height: 324px;
+  margin: 20px 10px;
   position: relative;
-  overflow: hidden;
-  margin-top: 20px;
 }
 
 .flex-container {
   display: flex;
-  flex-direction: row;
-  justify-content: space-between;
+  height: 100%;
+  flex-direction: column;
   align-items: center;
-  position: relative;
-  z-index: 10;
+
+  .icon {
+    margin: 30px 0 20px;
+    width: 50px;
+    height: 50px;
+    > svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
   button {
     border: none;
   }
@@ -29,27 +38,30 @@
   margin-bottom: 10px;
 }
 
-.bg-icon {
-  position: absolute;
-  right: 0;
-  top: 60px;
-  opacity: 10%;
-  svg {
-    width: 144px;
-    height: 144px;
-  }
+.description {
+  flex:1;
+  white-space: pre-line;
+  font-size: 16px;
+  line-height: 26px;
+  width: 268px;
+  text-align: center;
 }
 
-.icon-and-text {
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  align-items: stretch;
-  margin-right: 40px;
-}
 
-.icon {
-  width: 72px;
-  height: 72px;
-  margin-right: 40px;
+.gap {
+  font-family: Roboto;
+  position: absolute;
+  background-color: #D4D4D4;
+  border: 3px solid #F4F5F6;
+  border-radius: 100%;
+  width: 42px;
+  height: 42px;
+  line-height: 42px;
+  box-sizing: content-box;
+  color: #7F7F7F;
+  font-size: 16px;
+  text-align: center;
+  right: -32.5px;
+  z-index: 2;
+  top: 130px;
 }

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">