From 87b84cd5d6486805010443565a480dc5b739aeaf Mon Sep 17 00:00:00 2001 From: Cagdas U Date: Tue, 3 Aug 2021 20:42:25 +0300 Subject: [PATCH 1/3] fix(create-new-team): remove `progress` folder * Remove the `src/routes/CreateNewTeam/components/progress`, which is the same with `src/routes/CreateNewTeam/components/Progress` (capital P) * The actual component being used in the app. is `Progress`. `progress` has no use. * Having two folders (`progress` and `Progress`) causing troubles on case-insensitive OSs. --- .../components/progress/index.jsx | 72 ---------------- .../components/progress/styles.module.scss | 85 ------------------- 2 files changed, 157 deletions(-) delete mode 100644 src/routes/CreateNewTeam/components/progress/index.jsx delete mode 100644 src/routes/CreateNewTeam/components/progress/styles.module.scss 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; -} From ee594708a391a4f24efcd4af00a731972084e826 Mon Sep 17 00:00:00 2001 From: Cagdas U Date: Tue, 3 Aug 2021 20:49:19 +0300 Subject: [PATCH 2/3] 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 https://github.com/topcoder-platform/taas-app/issues/406 --- .../components/Progress/index.jsx | 33 ++++++++-------- .../components/Progress/styles.module.scss | 39 ++++++++++--------- .../components/ProgressBar/index.jsx | 2 +- 3 files changed, 37 insertions(+), 37 deletions(-) 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}%
From fae436c822ab5f2b04b1ce38b6d2965e726b7d62 Mon Sep 17 00:00:00 2001 From: Cagdas U Date: Tue, 3 Aug 2021 21:45:07 +0300 Subject: [PATCH 3/3] fix(create-new-team): center the customer logos * Center the image. * Decrease margins and paddings not to trigger scrollbar unnecessarily. Addresses https://github.com/topcoder-platform/taas-app/issues/402#issuecomment-890990481 --- src/components/CustomerScroll/styles.module.scss | 3 +-- .../CreateNewTeam/components/InputContainer/styles.module.scss | 2 +- .../components/SearchContainer/styles.module.scss | 2 +- .../components/SubmitContainer/styles.module.scss | 2 +- src/routes/CreateNewTeam/styles.module.scss | 2 +- 5 files changed, 5 insertions(+), 6 deletions(-) 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/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/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%; }