Feature/frontend search

src/constants/index.js

@@ -109,8 +109,8 @@ export const CANDIDATE_STATUS = {
   REJECTED_OTHER: "rejected - other",
   INTERVIEW: "interview",
   TOPCODER_REJECTED: "topcoder-rejected",
-  JOB_CLOSED:"job-closed",
-  OFFERED:"offered"
+  JOB_CLOSED: "job-closed",
+  OFFERED: "offered",
 };
 
 /**
@@ -146,7 +146,7 @@ export const CANDIDATE_STATUS_FILTERS = [
     buttonText: "Selected",
     title: "Selected",
     noCandidateMessage: "No Selected Candidates",
-    statuses: [CANDIDATE_STATUS.SELECTED,CANDIDATE_STATUS.OFFERED],
+    statuses: [CANDIDATE_STATUS.SELECTED, CANDIDATE_STATUS.OFFERED],
   },
   {
     key: CANDIDATE_STATUS_FILTER_KEY.NOT_INTERESTED,
@@ -347,3 +347,8 @@ export const INTERVIEW_POPUP_MEDIA_URL =
   "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4";
 
 export const MAX_ALLOWED_INTERVIEWS = 3;
+
+/**
+ * Matching rate to show in CreateNewTeam ResultCard
+ */
+export const MATCHING_RATE = "80";

src/root.component.jsx

@@ -35,8 +35,8 @@ export default function Root() {
           <PositionDetails path="/taas/myteams/:teamId/positions/:positionId/candidates" />
           <TeamAccess path="/taas/myteams/:teamId/access" />
           <InputJobDescription path="/taas/myteams/createnewteam/jd" />
-          <InputSkills path="/taas/myteams/createnewteam/:projectId/skills" />
-          <SelectRole path="/taas/myteams/createnewteam/:projectId/role" />
+          <InputSkills path="/taas/myteams/createnewteam/skills" />
+          <SelectRole path="/taas/myteams/createnewteam/role" />
         </Router>
 
         {/* Global config for Toastr popups */}

src/routes/CreateNewTeam/pages/SelectRole/components/AddedRolesAccordion/index.jsx → src/routes/CreateNewTeam/components/AddedRolesAccordion/index.jsx

@@ -13,7 +13,7 @@ import "./styles.module.scss";
 function AddedRolesAccordion({ addedRoles }) {
   const [isOpen, setIsOpen] = useState(false);
 
-  return (
+  return addedRoles.length ? (
     <div styleName="accordion">
       <button onClick={() => setIsOpen(!isOpen)} styleName="button">
         <div styleName="heading">
@@ -32,7 +32,7 @@ function AddedRolesAccordion({ addedRoles }) {
         </div>
       )}
     </div>
-  );
+  ) : null;
 }
 
 AddedRolesAccordion.propTypes = {

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

@@ -0,0 +1,92 @@
+import React from "react";
+import PT from "prop-types";
+import Modal from "react-responsive-modal";
+import IconCrossLight from "../../../../assets/images/icon-cross-light.svg";
+import CenteredSpinner from "components/CenteredSpinner";
+import "./styles.module.scss";
+import cn from "classnames";
+
+const modalStyle = {
+  borderRadius: "8px",
+  padding: "72px 0 60px 0",
+  width: "100%",
+  margin: 0,
+  "overflow-x": "hidden",
+};
+
+const containerStyle = {
+  padding: "10px",
+};
+
+const closeButtonStyle = {
+  top: "31px",
+  right: "31px",
+};
+
+function BaseCreateModal({
+  open,
+  onClose,
+  hideCloseIcon,
+  headerIcon,
+  title,
+  subtitle,
+  buttons,
+  isLoading,
+  loadingMessage,
+  maxWidth = "680px",
+  darkHeader,
+  children,
+}) {
+  return (
+    <Modal
+      open={open}
+      center
+      onClose={onClose}
+      showCloseIcon={!hideCloseIcon}
+      closeIcon={
+        <IconCrossLight height="20px" width="20px" styleName="cross" />
+      }
+      styles={{
+        modal: { ...modalStyle, maxWidth },
+        modalContainer: containerStyle,
+        closeButton: closeButtonStyle,
+      }}
+    >
+      <div styleName="modal-body">
+        {isLoading ? (
+          <div styleName={cn("modal-header", { "dark-header": darkHeader })}>
+            <CenteredSpinner />
+            {loadingMessage && <h5>{loadingMessage}</h5>}
+          </div>
+        ) : (
+          <>
+            <div styleName={cn("modal-header", { "dark-header": darkHeader })}>
+              <div styleName="header-icon">{headerIcon}</div>
+              <h5>{title}</h5>
+              {subtitle && <p>{subtitle}</p>}
+            </div>
+            {children}
+          </>
+        )}
+      </div>
+      <div styleName="button-group">{buttons}</div>
+    </Modal>
+  );
+}
+
+BaseCreateModal.propTypes = {
+  open: PT.bool,
+  onClose: PT.func,
+  hideCloseIcon: PT.bool,
+  headerIcon: PT.node,
+  title: PT.string,
+  subtitle: PT.string,
+  buttons: PT.node,
+  isLoading: PT.bool,
+  loadingMessage: PT.string,
+  maxWidth: PT.string,
+  darkHeader: PT.bool,
+  children: PT.node,
+};
+
+export default BaseCreateModal;

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

@@ -0,0 +1,65 @@
+@import "styles/include";
+
+.button-group {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: flex-end;
+  :first-child {
+    margin-right: 8px;
+  }
+}
+
+.modal-body {
+  margin: 0 80px 40px 80px;
+}
+
+.modal-header {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  text-align: center;
+  margin-bottom: 24px;
+
+  .header-icon {
+    margin-bottom: 16px;
+    width: 42px;
+    height: 42px;
+
+    img,
+    svg {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+
+  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;
+  }
+
+  &.dark-header {
+    h5 {
+      color: #2a2a2a;
+    }
+  }
+}
+
+.cross {
+  g {
+    stroke: #000;
+  }
+}

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

@@ -16,7 +16,7 @@
 }
 
 .input-skills {
-  background-image: linear-gradient(221.5deg, #2c95d7 0%, #9d41c9 100%);
+  background-image: linear-gradient(221.5deg, #646CD0 0%, #9d41c9 100%);
 }
 
 .role-selection {
@@ -34,6 +34,7 @@
 
   &:before {
     content: "";
+    color: #fff;
     border: 1px solid #ffffff;
     border-radius: 100%;
     width: 16px;
@@ -57,7 +58,7 @@
       content: "✓";
       font-size: 9px;
       line-height: 14px;
-      padding-left: 3px;
+      padding-left: 2px;
     }
   }
 }

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

@@ -3,13 +3,13 @@
  * Card that appears when there are no matching profiles after searching.
  */
 import React from "react";
-import { navigate } from "@reach/router";
+import { Link } from "@reach/router";
 import "./styles.module.scss";
 import IconEarthX from "../../../../assets/images/icon-earth-x.svg";
 import Curve from "../../../../assets/images/curve.svg";
 import Button from "components/Button";
 
-function NoMatchingProfilesResultCard() {
+function NoMatchingProfilesResultCard({ prevSearchId, addedRoles }) {
   return (
     <div styleName="result-card">
       <div styleName="heading">
@@ -28,13 +28,14 @@ function NoMatchingProfilesResultCard() {
           <p styleName="cost">$1,200</p>
           <p>/Week</p>
         </div>
-        <Button
-          onClick={() => navigate("/taas/myteams/createnewteam")}
-          type="secondary"
-          styleName="button"
+        <Link
+          to="/taas/myteams/createnewteam"
+          state={{ prevSearchId, addedRoles }}
         >
-          Modify Search Criteria
-        </Button>
+          <Button type="secondary" styleName="button">
+            Modify Search Criteria
+          </Button>
+        </Link>
       </div>
     </div>
   );