diff --git a/src/components/CustomerScroll/styles.module.scss b/src/components/CustomerScroll/styles.module.scss index 0aa7490e..235f4b01 100644 --- a/src/components/CustomerScroll/styles.module.scss +++ b/src/components/CustomerScroll/styles.module.scss @@ -7,13 +7,13 @@ 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%; } @@ -21,6 +21,5 @@ @media only screen and (max-height: 859px) { .title { font-size: 16px; - margin-bottom: 15px; } } diff --git a/src/routes/CreateNewTeam/components/InputContainer/styles.module.scss b/src/routes/CreateNewTeam/components/InputContainer/styles.module.scss index 99cec905..a06f1bff 100644 --- a/src/routes/CreateNewTeam/components/InputContainer/styles.module.scss +++ b/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; diff --git a/src/routes/CreateNewTeam/components/Progress/index.jsx b/src/routes/CreateNewTeam/components/Progress/index.jsx index 06c1cebe..e2ad9427 100644 --- a/src/routes/CreateNewTeam/components/Progress/index.jsx +++ b/src/routes/CreateNewTeam/components/Progress/index.jsx @@ -8,54 +8,52 @@ 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= - } else if (extraStyleName === "input-job-description") { - backgroundIcon= - } else { - backgroundIcon= - } - return (
    - {stages.map((stage) => ( + {stages.map((stage, idx) => (
  • {stage.name}
  • ))}
- {backgroundIcon}
); } @@ -63,6 +61,7 @@ function Progress({ Progress.propTypes = { extraStyleName: PT.string, isDisabled: PT.bool, + isSearching: PT.bool, onClick: PT.func, buttonLabel: PT.string, currentStageIdx: PT.number, diff --git a/src/routes/CreateNewTeam/components/Progress/styles.module.scss b/src/routes/CreateNewTeam/components/Progress/styles.module.scss index d429aea9..c31ccbe4 100644 --- a/src/routes/CreateNewTeam/components/Progress/styles.module.scss +++ b/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; -} diff --git a/src/routes/CreateNewTeam/components/ProgressBar/index.jsx b/src/routes/CreateNewTeam/components/ProgressBar/index.jsx index 4d84b403..4a96cdb0 100644 --- a/src/routes/CreateNewTeam/components/ProgressBar/index.jsx +++ b/src/routes/CreateNewTeam/components/ProgressBar/index.jsx @@ -17,7 +17,7 @@ function ProgressBar({ percentDone }) { return (
-

Progress

+

Completeness

{percentDone}%
diff --git a/src/routes/CreateNewTeam/components/SearchContainer/styles.module.scss b/src/routes/CreateNewTeam/components/SearchContainer/styles.module.scss index 99cec905..a06f1bff 100644 --- a/src/routes/CreateNewTeam/components/SearchContainer/styles.module.scss +++ b/src/routes/CreateNewTeam/components/SearchContainer/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; diff --git a/src/routes/CreateNewTeam/components/SubmitContainer/styles.module.scss b/src/routes/CreateNewTeam/components/SubmitContainer/styles.module.scss index 99cec905..a06f1bff 100644 --- a/src/routes/CreateNewTeam/components/SubmitContainer/styles.module.scss +++ b/src/routes/CreateNewTeam/components/SubmitContainer/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; diff --git a/src/routes/CreateNewTeam/components/progress/index.jsx b/src/routes/CreateNewTeam/components/progress/index.jsx deleted file mode 100644 index 06c1cebe..00000000 --- a/src/routes/CreateNewTeam/components/progress/index.jsx +++ /dev/null @@ -1,72 +0,0 @@ -/** - * Progress Sidebar - * Shows level of progress through skill - * input process and contains a button for - * searching for users or submitting the job. - */ -import Button from "components/Button"; -import React from "react"; -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, - isDisabled, - onClick, - buttonLabel, - stages, - percentage, -}) { - - let backgroundIcon - if (extraStyleName === "input-skills") { - backgroundIcon= - } else if (extraStyleName === "input-job-description") { - backgroundIcon= - } else { - backgroundIcon= - } - - return ( -
- -
    - {stages.map((stage) => ( -
  • - {stage.name} -
  • - ))} -
- - {backgroundIcon} -
- ); -} - -Progress.propTypes = { - extraStyleName: PT.string, - isDisabled: PT.bool, - onClick: PT.func, - buttonLabel: PT.string, - currentStageIdx: PT.number, - stages: PT.arrayOf(PT.string), -}; - -export default Progress; diff --git a/src/routes/CreateNewTeam/components/progress/styles.module.scss b/src/routes/CreateNewTeam/components/progress/styles.module.scss deleted file mode 100644 index d429aea9..00000000 --- a/src/routes/CreateNewTeam/components/progress/styles.module.scss +++ /dev/null @@ -1,85 +0,0 @@ -@import "styles/include"; - -.progress { - @include rounded-card; - overflow: hidden; - padding: 12px; - position: relative; - width: 250px; - color: #fff; - button { - border: none; - } -} - -.input-job-description { - background-image: linear-gradient(135deg, #2984BD 0%, #0AB88A 100%); -} - -.input-skills { - background-image: linear-gradient(221.5deg, #646CD0 0%, #9d41c9 100%); -} - -.role-selection { - background-image: linear-gradient(45deg, #8B41B0 0%, #EF476F 100%); -} - -.list { - margin-bottom: 55px; - & + button[disabled] { - background-color: #E9E9E9; - color: #FFF; - opacity: 1; - filter: none; - } -} - -.list-item { - margin-bottom: 14px; - font-size: 14px; - line-height: 16px; - font-weight: 400; - color: rgba(255, 255, 255, 0.6); - - &:before { - content: ""; - color: #fff; - border: 1px solid #ffffff; - 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; - background-color: #fff; - } - } - - &.done { - font-weight: 400; - &:before { - content: "✓"; - font-size: 9px; - line-height: 14px; - padding-left: 4px; - visibility: visible; - } - } -} - -.transparent-icon { - position: absolute; - right: -50px; - top: 85px; - opacity: 10%; - width: 144px; - height: 144px; -} diff --git a/src/routes/CreateNewTeam/styles.module.scss b/src/routes/CreateNewTeam/styles.module.scss index ffd6ec2f..2276b92f 100644 --- a/src/routes/CreateNewTeam/styles.module.scss +++ b/src/routes/CreateNewTeam/styles.module.scss @@ -1,4 +1,4 @@ .logos { - padding: 0 35px 15px; + padding: 0 35px 8px; width: 100%; }