From fae3e7f23771be15847e46f7d5eb3c7e88ea445f Mon Sep 17 00:00:00 2001
From: Vigneshkumar Chinnachamy M <thegardenerwhocodes@gmail.com>
Date: Sun, 19 Apr 2020 02:38:06 +0530
Subject: [PATCH 1/4] style talent picker

---
 .../PositiveNumberInput.jsx                   |  69 +++++++
 .../detail/components/Accordion/Accordion.jsx |   3 +-
 .../SkillsQuestion/SkillsQuestionBase.jsx     |  17 +-
 .../TalentPickerQuestion.jsx                  |  52 +++---
 .../TalentPickerQuestion.scss                 |  64 +++++--
 .../TalentPickerRow/TalentPickerRow.jsx       | 176 +++++++++++-------
 .../TalentPickerRow/TalentPickerRow.scss      | 139 +++++++++++++-
 7 files changed, 402 insertions(+), 118 deletions(-)
 create mode 100644 src/components/PositiveNumberInput/PositiveNumberInput.jsx

diff --git a/src/components/PositiveNumberInput/PositiveNumberInput.jsx b/src/components/PositiveNumberInput/PositiveNumberInput.jsx
new file mode 100644
index 000000000..357c31e13
--- /dev/null
+++ b/src/components/PositiveNumberInput/PositiveNumberInput.jsx
@@ -0,0 +1,69 @@
+import React from 'react'
+import PT from 'prop-types'
+import { noop, omit } from 'lodash'
+
+class PositiveNumberInput extends React.PureComponent {
+  constructor(props) {
+    super(props)
+
+    this.isInputValid = true
+
+    this.onKeyDown = this.onKeyDown.bind(this)
+    this.onPaste = this.onPaste.bind(this)
+    this.onKeyUp = this.onKeyUp.bind(this)
+  }
+
+  onKeyDown(evt) {
+    const isPrintableKey = evt.key.length === 1 && !evt.ctrlKey
+    const digitPattern = /\d/
+
+    // Don't allow typing non digit characters
+    if (isPrintableKey && !digitPattern.test(evt.key)) {
+      evt.preventDefault()
+    }
+    this.props.onKeyDown(evt)
+  }
+
+  onPaste(evt) {
+    const text = evt.clipboardData.getData('text')
+    const digitsPattern = /^\d+$/
+
+    // Don't allow pasting non digit text
+    if (!digitsPattern.test(text)) {
+      evt.preventDefault()
+    }
+    this.props.onPaste(evt)
+  }
+
+  onKeyUp(evt) {
+    const isValid = evt.target.validity.valid
+    if (isValid !== this.isInputValid) {
+      this.isInputValid = isValid
+      this.props.onValidityChange(isValid)
+    }
+    this.props.onKeyUp(evt)
+  }
+
+  render() {
+    const props = omit(this.props, ['onValidityChange'])
+    return <input type="number" min={0} {...props} onKeyDown={this.onKeyDown} onPaste={this.onPaste} onKeyUp={this.onKeyUp} />
+  }
+}
+
+PositiveNumberInput.defaultProps = {
+  onKeyDown: noop,
+  onPaste: noop,
+  onKeyUp: noop,
+  onValidityChange: noop
+
+}
+
+PositiveNumberInput.propTypes = {
+  onKeyDown: PT.func,
+  onPaste: PT.func,
+  onKeyUp: PT.func,
+  onValidityChange: PT.func
+}
+
+
+export default PositiveNumberInput
diff --git a/src/projects/detail/components/Accordion/Accordion.jsx b/src/projects/detail/components/Accordion/Accordion.jsx
index 3dad63d4b..f2cf2a905 100644
--- a/src/projects/detail/components/Accordion/Accordion.jsx
+++ b/src/projects/detail/components/Accordion/Accordion.jsx
@@ -171,7 +171,8 @@ class Accordion extends React.Component {
     case TYPE.SELECT_DROPDOWN: return mapValue(value)
     case TYPE.TALENT_PICKER: {
       const getRoleName = (role) => _.find(options, { role }).roleTitle
-      return _.filter(value, (v) => v.people !== '0').map((v) => `${getRoleName(v.role)}: ${v.people}`).join(', ')
+      const totalPeoplePerRole = _.mapValues(_.groupBy(value, v => v.role), valuesUnderGroup => _.sumBy(valuesUnderGroup, v => Number(v.people)))
+      return _.toPairs(totalPeoplePerRole).filter(([, people]) => people > 0).map(([role, people]) => `${getRoleName(role)} ${people}`).join(', ')
     }
     default: return value
     }
diff --git a/src/projects/detail/components/SkillsQuestion/SkillsQuestionBase.jsx b/src/projects/detail/components/SkillsQuestion/SkillsQuestionBase.jsx
index 0bb34e060..8896234d4 100644
--- a/src/projects/detail/components/SkillsQuestion/SkillsQuestionBase.jsx
+++ b/src/projects/detail/components/SkillsQuestion/SkillsQuestionBase.jsx
@@ -165,6 +165,7 @@ class SkillsQuestion extends React.PureComponent {
       skillsCategories,
       currentProjectData,
       categoriesField,
+      selectWrapperClass,
     } = this.props
     const { availableOptions, customOptionValue } = this.state
 
@@ -189,13 +190,14 @@ class SkillsQuestion extends React.PureComponent {
 
     return (
       <div>
-        <SkillsCheckboxGroup
-          disabled={questionDisabled}
-          options={checkboxGroupOptions}
-          getValue={() => checkboxGroupValues}
-          setValue={(val) => { this.handleChange(_.union(val, selectGroupValues)) }}
-        />
-        <div styleName="select-wrapper">
+        {checkboxGroupOptions.length > 0 ? (
+          <SkillsCheckboxGroup
+            disabled={questionDisabled}
+            options={checkboxGroupOptions}
+            getValue={() => checkboxGroupValues}
+            setValue={(val) => { this.handleChange(_.union(val, selectGroupValues)) }}
+          />) : null}
+        <div styleName="select-wrapper" className={selectWrapperClass}>
           <Select
             createOption
             isMulti
@@ -232,6 +234,7 @@ SkillsQuestion.defaultProps = {
 
 SkillsQuestion.PropTypes = {
   skillsCategories: PropTypes.arrayOf(PropTypes.string),
+  selectWrapperClass: PropTypes.string
 }
 
 
diff --git a/src/projects/detail/components/TalentPickerQuestion/TalentPickerQuestion.jsx b/src/projects/detail/components/TalentPickerQuestion/TalentPickerQuestion.jsx
index d4fb8328f..98c13c7fc 100644
--- a/src/projects/detail/components/TalentPickerQuestion/TalentPickerQuestion.jsx
+++ b/src/projects/detail/components/TalentPickerQuestion/TalentPickerQuestion.jsx
@@ -118,34 +118,30 @@ class TalentPickerQuestion extends Component {
     return (
       <div className={cn(wrapperClass)}>
         <div styleName="container">
-          <table styleName="table">
-            <thead>
-              <tr>
-                <th>Role</th>
-                <th>Number of People Required</th>
-                <th>Engagement Duration</th>
-                <th>Skill Required</th>
-                <th />
-              </tr>
-            </thead>
-            <tbody>
-              {options.length > 0 ? values.map((v, roleIndex) => {
-                const roleSetting = _.find(options, { role: v.role })
-                return (
-                  <TalentPickerRow
-                    key={roleIndex}
-                    rowIndex={roleIndex}
-                    value={v}
-                    canBeDeleted={this.canDeleteRole}
-                    roleSetting={roleSetting}
-                    onChange={this.handleValueChange}
-                    onDeleteRow={this.removeRole}
-                    onAddRow={this.insertRole}
-                  />
-                )
-              }) : null}
-            </tbody>
-          </table>
+          <div styleName="header-row">
+            <div styleName="col-title col-role">Role</div>
+            <div styleName="col-title col-people">People</div>
+            <div styleName="col-title col-duration">Duration (months)</div>
+            <div styleName="col-title col-skill-selection">Skills</div>
+            <div styleName="col-title col-actions"/>
+          </div>
+          <div styleName="body">
+            {options.length > 0 ? values.map((v, roleIndex) => {
+              const roleSetting = _.find(options, { role: v.role })
+              return (
+                <TalentPickerRow
+                  key={roleIndex}
+                  rowIndex={roleIndex}
+                  value={v}
+                  canBeDeleted={this.canDeleteRole}
+                  roleSetting={roleSetting}
+                  onChange={this.handleValueChange}
+                  onDeleteRow={this.removeRole}
+                  onAddRow={this.insertRole}
+                />
+              )
+            }) : null}
+          </div>
         </div>
         {hasError ? <p className="error-message">{errorMessage}</p> : null}
       </div>
diff --git a/src/projects/detail/components/TalentPickerQuestion/TalentPickerQuestion.scss b/src/projects/detail/components/TalentPickerQuestion/TalentPickerQuestion.scss
index a2da9f944..9642b2832 100644
--- a/src/projects/detail/components/TalentPickerQuestion/TalentPickerQuestion.scss
+++ b/src/projects/detail/components/TalentPickerQuestion/TalentPickerQuestion.scss
@@ -2,29 +2,67 @@
 
 .container {
   font-size: 15px;
-  overflow-x: auto;
+  text-align: left;
+  margin-top: 5px;
 }
 
-.table {
-  text-align: left;
+.header-row {
+  @include roboto;
+
+  white-space: nowrap;
+  padding: 0 4px;
+  color: $tc-silver-110;
+  font-size: 13px;
+  line-height: 15px;
+  background-color: $tc-gray-neutral-light;
+  border: 1px solid $tc-gray-neutral-dark;
+  display: flex;
+
+  .body {
+    @include roboto;
+
+    color: $tc-gray-100;
+  }
+}
+
+
+.col-title {
+  padding: 15px 7.5px;
+  flex-grow: 0;
+  flex-shrink: 0;
 
-  td,
-  th {
-    white-space: nowrap;
-    padding: 10px;
+  &.col-duration {
+    width: 120px;
   }
 
-  thead {
-    @include roboto-bold;
+  &.col-people {
+    width: 78px;
   }
 
-  tbody {
-    tr {
-      border: 1px solid $tc-gray-80;
-    }
+  &.col-skill-selection {
+    flex-grow: 1;
+    flex-shrink: 1;
+
+    // Prevents the column from expanding beyond parent due to flex-grow:1
+    min-width: 0;
+  }
+
+  &.col-role {
+    width: 168px;
+  }
+
+  &.col-actions {
+    width: 76px;
   }
 }
 
 .hide {
   display: none;
 }
+
+
+@media screen and (max-width: 959px) {
+  .header-row {
+    display: none;
+  }
+}
diff --git a/src/projects/detail/components/TalentPickerRow/TalentPickerRow.jsx b/src/projects/detail/components/TalentPickerRow/TalentPickerRow.jsx
index 4cfb8a89e..f0974e1ff 100644
--- a/src/projects/detail/components/TalentPickerRow/TalentPickerRow.jsx
+++ b/src/projects/detail/components/TalentPickerRow/TalentPickerRow.jsx
@@ -1,12 +1,14 @@
 import React from 'react'
 import PT from 'prop-types'
+import MediaQuery from 'react-responsive'
 
-import SelectDropdown from '../../../../components/SelectDropdown/SelectDropdownBase'
-import IconX from '../../../../assets/icons/icon-x-mark.svg'
-import IconAdd from '../../../../assets/icons/icon-ui-bold-add.svg'
+import IconX from '../../../../assets/icons/ui-16px-1_bold-remove.svg'
+import IconAdd from '../../../../assets/icons/ui-16px-1_bold-add.svg'
 import SkillsQuestion from '../SkillsQuestion/SkillsQuestionBase'
+import PositiveNumberInput from '../../../../components/PositiveNumberInput/PositiveNumberInput'
+import ProductTypeIcon from '../../../../components/ProductTypeIcon'
 
-import './TalentPickerRow.scss'
+import styles from './TalentPickerRow.scss'
 
 const always = () => true
 const never = () => false
@@ -16,9 +18,6 @@ class TalentPickerRow extends React.PureComponent {
   constructor(props) {
     super(props)
 
-    this.peopleOptions = this.getPeopleOptions()
-    this.durationOptions = this.getDurationOptions()
-
     this.handlePeopleChange = this.handlePeopleChange.bind(this)
     this.handleDurationChange = this.handleDurationChange.bind(this)
     this.handleSkillChange = this.handleSkillChange.bind(this)
@@ -27,12 +26,12 @@ class TalentPickerRow extends React.PureComponent {
     this.onDeleteRow = this.onDeleteRow.bind(this)
   }
 
-  handlePeopleChange(value) {
-    this.props.onChange(this.props.rowIndex, 'people', value)
+  handlePeopleChange(evt) {
+    this.props.onChange(this.props.rowIndex, 'people', evt.target.value)
   }
 
-  handleDurationChange(value) {
-    this.props.onChange(this.props.rowIndex, 'duration', value)
+  handleDurationChange(evt) {
+    this.props.onChange(this.props.rowIndex, 'duration', evt.target.value)
   }
 
   handleSkillChange(value) {
@@ -49,65 +48,114 @@ class TalentPickerRow extends React.PureComponent {
     deleteRowHandler(rowIndex)
   }
 
-  getPeopleOptions() {
-    return ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '10+'].map((v) => ({
-      value: v,
-      title: v,
-    }))
-  }
-
-  getDurationOptions() {
-    return ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'].map((v) => ({
-      value: v,
-      title: v,
-      hide: v === '0',
-    }))
-  }
-
   render() {
     const { value, canBeDeleted, roleSetting, rowIndex } = this.props
+    const customBreakpoint = 960
+
+    /* Different columns are defined here and used in componsing mobile/desktop views below */
+    const roleColumn = (
+      <div styleName="col col-role">
+        <div styleName="col-role-container">
+          <ProductTypeIcon type={roleSetting.icon} />
+          <div styleName="role-text">{roleSetting.roleTitle}</div>
+        </div>
+      </div>
+    )
+
+    const actionsColumn = (
+      <div styleName="col col-actions">
+        <div styleName="d-flex col-actions-container">
+          <div onClick={this.onAddRow} styleName="action-btn">
+            <IconAdd />
+          </div>
+          {canBeDeleted(value.role, rowIndex) && (
+            <div onClick={this.onDeleteRow} styleName="action-btn action-btn-remove">
+              <IconX />
+            </div>
+          )}
+        </div>
+      </div>
+    )
+
+    const peopleColumn = (
+      <div styleName="col col-people">
+        <label className="tc-label" styleName="label">People</label>
+        <PositiveNumberInput
+          type="number"
+          styleName="noMargin"
+          className="tc-file-field__inputs"
+          value={value.people || ''}
+          onChange={this.handlePeopleChange}
+        />
+      </div>
+    )
+
+    const durationColumn = (
+      <div styleName="col col-duration">
+        <label className="tc-label" styleName="label">Duration</label>
+        <PositiveNumberInput
+          type="number"
+          styleName="noMargin"
+          className="tc-file-field__inputs"
+          value={value.duration || ''}
+          onChange={this.handleDurationChange}
+        />
+      </div>
+    )
+
+    const skillSelectionColumn = (
+      <div styleName="col col-skill-selection">
+        <label className="tc-label" styleName="label">Skills</label>
+        {/*
+          Please do not refactor getValue prop's value to a binded function with constant reference.
+          SkillsQuestion is a pure component. If all the props are constant across renders, SkillsQuestion cannot detect the change in value.skills.
+          So, it'll break the functionality of the component.
+          "getValue" prop is left as inline arrow function to trigger re rendering of the SkillsQuestion component whenever the parent rerenders.
+        */}
+        <SkillsQuestion
+          disabled={false}
+          isFormDisabled={never}
+          skillsCategories={roleSetting.skillsCategories}
+          isPristine={always}
+          isValid={always}
+          getErrorMessage={emptyError}
+          setValue={this.handleSkillChange}
+          getValue={() => value.skills}
+          onChange={_.noop}
+          selectWrapperClass={styles.noMargin}
+        />
+      </div>
+    )
 
     return (
-      <tr>
-        <td>{roleSetting.roleTitle}</td>
-        <td>
-          <SelectDropdown options={this.peopleOptions} value={value.people} setValue={this.handlePeopleChange} theme="default" />
-        </td>
-        <td>
-          <SelectDropdown options={this.durationOptions} value={value.duration} setValue={this.handleDurationChange} theme="default" />
-        </td>
-        <td styleName="skill-selection">
-          {/*
-            Please do not refactor getValue prop's value to a binded function with constant reference.
-            SkillsQuestion is a pure component. If all the props are constant across renders, SkillsQuestion cannot detect the change in value.skills.
-            So, it'll break the functionality of the component.
-            "getValue" prop is left as inline arrow function to trigger re rendering of the SkillsQuestion component whenever the parent rerenders.
-          */}
-          <SkillsQuestion
-            disabled={false}
-            isFormDisabled={never}
-            skillsCategories={roleSetting.skillsCategories}
-            isPristine={always}
-            isValid={always}
-            getErrorMessage={emptyError}
-            setValue={this.handleSkillChange}
-            getValue={() => value.skills}
-            onChange={_.noop}
-          />
-        </td>
-        <td>
-          <div styleName="d-flex">
-            <div onClick={this.onAddRow} styleName="btn">
-              <IconAdd />
+      <MediaQuery minWidth={customBreakpoint}>
+        {(matches) => {
+          return matches ? (
+            // Desktop Layout (960px+)
+            <div styleName="row">
+              {roleColumn}
+              {peopleColumn}
+              {durationColumn}
+              {skillSelectionColumn}
+              {actionsColumn}
             </div>
-            {canBeDeleted(value.role, rowIndex) && (
-              <div onClick={this.onDeleteRow} styleName="btn">
-                <IconX />
+          ) : (
+            // Mobile Layout (till 959px)
+            <div styleName="row">
+              <div styleName="inner-row">
+                {roleColumn}
+                {actionsColumn}
               </div>
-            )}
-          </div>
-        </td>
-      </tr>
+
+              <div styleName="inner-row">
+                {peopleColumn}
+                {durationColumn}
+                {skillSelectionColumn}
+              </div>
+            </div>
+          )
+        }}
+      </MediaQuery>
     )
   }
 }
diff --git a/src/projects/detail/components/TalentPickerRow/TalentPickerRow.scss b/src/projects/detail/components/TalentPickerRow/TalentPickerRow.scss
index 35c08da95..f7f4a53e6 100644
--- a/src/projects/detail/components/TalentPickerRow/TalentPickerRow.scss
+++ b/src/projects/detail/components/TalentPickerRow/TalentPickerRow.scss
@@ -1,12 +1,141 @@
-.skill-selection {
-  min-width: 200px;
-}
+@import "~tc-ui/src/styles/tc-includes";
 
-.btn {
+.action-btn {
   cursor: pointer;
   margin: 0 2px;
+  background-color: $tc-gray-neutral-dark;
+  height: 23px;
+  width: 23px;
+  text-align: center;
+  line-height: 25px;
+  border-radius: 12px;
+
+  svg {
+    fill: $tc-gray-50;
+    height: 10px;
+  }
+}
+
+.action-btn-remove {
+  margin-left: 8px;
 }
 
 .d-flex {
   display: flex;
-}
\ No newline at end of file
+}
+
+.row {
+  border: 1px solid $tc-gray-neutral-dark;
+  border-top-width: 0;
+  display: flex;
+  white-space: nowrap;
+  padding: 0 4px;
+  line-height: 20px;
+  font-size: 13px;
+  vertical-align: top;
+}
+
+.col {
+  padding: 13px 7.5px;
+  flex-grow: 0;
+  flex-shrink: 0;
+
+  &.col-duration {
+    width: 120px;
+  }
+
+  &.col-people {
+    width: 78px;
+  }
+
+  &.col-skill-selection {
+    flex-grow: 1;
+    flex-shrink: 1;
+
+    // Prevents the column from expanding beyond parent due to flex-grow:1
+    min-width: 0;
+  }
+
+  &.col-role {
+    width: 168px;
+  }
+
+  &.col-actions {
+    width: 76px;
+  }
+
+  // Resets standard margins applied by tc-file-field__inputs elements
+  .noMargin {
+    margin-top: 0;
+    margin-bottom: 0;
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  .label {
+    display: none;
+  }
+}
+
+.col-role-container {
+  display: flex;
+  align-items: center;
+  margin-top: 4px;
+}
+
+.col-actions-container {
+  margin-top: 6px;
+}
+
+.col-role {
+  svg {
+    width: 22.5px;
+    margin-right: 11px;
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
+}
+
+.role-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+@media screen and (max-width: 959px) {
+  .row {
+    flex-wrap: wrap;
+    padding: 4px;
+
+    &:first-child {
+      border-top-width: 1px;
+    }
+  }
+
+  .col {
+    padding: 8px 7.5px;
+
+    &.col-role {
+      flex-grow: 1;
+
+      // Prevents the column from expanding beyond parent due to flex-grow:1
+      min-width: 0;
+    }
+
+    &.col-duration {
+      width: 78px;
+    }
+
+    .label {
+      display: block;
+    }
+  }
+
+  .inner-row {
+    display: flex;
+    width: 100%;
+  }
+
+  .col-actions-container {
+    justify-content: flex-end;
+  }
+}

From 86e4a8665cbbb75a82ba3a5baef98cbd34cdbe55 Mon Sep 17 00:00:00 2001
From: Vigneshkumar Chinnachamy M <thegardenerwhocodes@gmail.com>
Date: Tue, 21 Apr 2020 01:42:15 +0530
Subject: [PATCH 2/4] modify talent picker row styling

---
 .../TalentPickerQuestion.jsx                  |  1 -
 .../TalentPickerQuestion.scss                 | 12 +--
 .../TalentPickerRow/TalentPickerRow.jsx       | 73 +++++++++++-----
 .../TalentPickerRow/TalentPickerRow.scss      | 87 +++++++++++--------
 4 files changed, 104 insertions(+), 69 deletions(-)

diff --git a/src/projects/detail/components/TalentPickerQuestion/TalentPickerQuestion.jsx b/src/projects/detail/components/TalentPickerQuestion/TalentPickerQuestion.jsx
index 98c13c7fc..56336c761 100644
--- a/src/projects/detail/components/TalentPickerQuestion/TalentPickerQuestion.jsx
+++ b/src/projects/detail/components/TalentPickerQuestion/TalentPickerQuestion.jsx
@@ -122,7 +122,6 @@ class TalentPickerQuestion extends Component {
             <div styleName="col-title col-role">Role</div>
             <div styleName="col-title col-people">People</div>
             <div styleName="col-title col-duration">Duration (months)</div>
-            <div styleName="col-title col-skill-selection">Skills</div>
             <div styleName="col-title col-actions"/>
           </div>
           <div styleName="body">
diff --git a/src/projects/detail/components/TalentPickerQuestion/TalentPickerQuestion.scss b/src/projects/detail/components/TalentPickerQuestion/TalentPickerQuestion.scss
index 9642b2832..af78d1e33 100644
--- a/src/projects/detail/components/TalentPickerQuestion/TalentPickerQuestion.scss
+++ b/src/projects/detail/components/TalentPickerQuestion/TalentPickerQuestion.scss
@@ -31,19 +31,11 @@
   flex-grow: 0;
   flex-shrink: 0;
 
-  &.col-duration {
-    width: 120px;
-  }
-
+  &.col-duration,
   &.col-people {
-    width: 78px;
-  }
-
-  &.col-skill-selection {
+    width: 50%;
     flex-grow: 1;
     flex-shrink: 1;
-
-    // Prevents the column from expanding beyond parent due to flex-grow:1
     min-width: 0;
   }
 
diff --git a/src/projects/detail/components/TalentPickerRow/TalentPickerRow.jsx b/src/projects/detail/components/TalentPickerRow/TalentPickerRow.jsx
index f0974e1ff..1bb77eb36 100644
--- a/src/projects/detail/components/TalentPickerRow/TalentPickerRow.jsx
+++ b/src/projects/detail/components/TalentPickerRow/TalentPickerRow.jsx
@@ -9,6 +9,7 @@ import PositiveNumberInput from '../../../../components/PositiveNumberInput/Posi
 import ProductTypeIcon from '../../../../components/ProductTypeIcon'
 
 import styles from './TalentPickerRow.scss'
+import { SCREEN_BREAKPOINT_MD, SCREEN_BREAKPOINT_RG } from '../../../../config/constants'
 
 const always = () => true
 const never = () => false
@@ -50,7 +51,6 @@ class TalentPickerRow extends React.PureComponent {
 
   render() {
     const { value, canBeDeleted, roleSetting, rowIndex } = this.props
-    const customBreakpoint = 960
 
     /* Different columns are defined here and used in componsing mobile/desktop views below */
     const roleColumn = (
@@ -79,7 +79,9 @@ class TalentPickerRow extends React.PureComponent {
 
     const peopleColumn = (
       <div styleName="col col-people">
-        <label className="tc-label" styleName="label">People</label>
+        <label className="tc-label" styleName="label">
+          People
+        </label>
         <PositiveNumberInput
           type="number"
           styleName="noMargin"
@@ -92,7 +94,9 @@ class TalentPickerRow extends React.PureComponent {
 
     const durationColumn = (
       <div styleName="col col-duration">
-        <label className="tc-label" styleName="label">Duration</label>
+        <label className="tc-label" styleName="label">
+          Duration (months)
+        </label>
         <PositiveNumberInput
           type="number"
           styleName="noMargin"
@@ -105,7 +109,9 @@ class TalentPickerRow extends React.PureComponent {
 
     const skillSelectionColumn = (
       <div styleName="col col-skill-selection">
-        <label className="tc-label" styleName="label">Skills</label>
+        <label className="tc-label" styleName="label">
+          Skills
+        </label>
         {/*
           Please do not refactor getValue prop's value to a binded function with constant reference.
           SkillsQuestion is a pure component. If all the props are constant across renders, SkillsQuestion cannot detect the change in value.skills.
@@ -128,31 +134,54 @@ class TalentPickerRow extends React.PureComponent {
     )
 
     return (
-      <MediaQuery minWidth={customBreakpoint}>
+      <MediaQuery minWidth={SCREEN_BREAKPOINT_RG}>
         {(matches) => {
           return matches ? (
-            // Desktop Layout (960px+)
-            <div styleName="row">
-              {roleColumn}
-              {peopleColumn}
-              {durationColumn}
-              {skillSelectionColumn}
-              {actionsColumn}
-            </div>
-          ) : (
-            // Mobile Layout (till 959px)
+            // Desktop Layout (992px+)
             <div styleName="row">
               <div styleName="inner-row">
                 {roleColumn}
-                {actionsColumn}
-              </div>
-
-              <div styleName="inner-row">
                 {peopleColumn}
                 {durationColumn}
-                {skillSelectionColumn}
+                {actionsColumn}
               </div>
+              <div styleName="inner-row">{skillSelectionColumn}</div>
             </div>
+          ) : (
+            <MediaQuery minWidth={SCREEN_BREAKPOINT_MD}>
+              {(matches) => {
+                return matches ? (
+                  // Tablet Layout (768px to 991px)
+                  <div styleName="row">
+                    <div styleName="inner-row">
+                      {roleColumn}
+                      {actionsColumn}
+                    </div>
+
+                    <div styleName="inner-row">
+                      {peopleColumn}
+                      {durationColumn}
+                      {skillSelectionColumn}
+                    </div>
+                  </div>
+                ) : (
+                  // Mobile Layout (till 767px)
+                  <div styleName="row">
+                    <div styleName="inner-row">
+                      {roleColumn}
+                      {actionsColumn}
+                    </div>
+
+                    <div styleName="inner-row">
+                      {peopleColumn}
+                      {durationColumn}
+                    </div>
+
+                    <div styleName="inner-row">{skillSelectionColumn}</div>
+                  </div>
+                )
+              }}
+            </MediaQuery>
           )
         }}
       </MediaQuery>
@@ -168,13 +197,13 @@ TalentPickerRow.propTypes = {
   onDeleteRow: PT.func.isRequired,
   roleSetting: PT.shape({
     roleTitle: PT.string.isRequired,
-    skillsCategories: PT.arrayOf(PT.string)
+    skillsCategories: PT.arrayOf(PT.string),
   }).isRequired,
   value: PT.shape({
     role: PT.string.isRequired,
     people: PT.string.isRequired,
     duration: PT.string.isRequired,
-    skills: PT.array
+    skills: PT.array,
   }),
 }
 
diff --git a/src/projects/detail/components/TalentPickerRow/TalentPickerRow.scss b/src/projects/detail/components/TalentPickerRow/TalentPickerRow.scss
index f7f4a53e6..8f8ab7ca9 100644
--- a/src/projects/detail/components/TalentPickerRow/TalentPickerRow.scss
+++ b/src/projects/detail/components/TalentPickerRow/TalentPickerRow.scss
@@ -1,4 +1,5 @@
 @import "~tc-ui/src/styles/tc-includes";
+@import "../../../../styles/includes";
 
 .action-btn {
   cursor: pointer;
@@ -27,37 +28,46 @@
 .row {
   border: 1px solid $tc-gray-neutral-dark;
   border-top-width: 0;
-  display: flex;
   white-space: nowrap;
-  padding: 0 4px;
+  padding: 4px;
   line-height: 20px;
   font-size: 13px;
   vertical-align: top;
+
+  &:first-child {
+    border-top-width: 1px;
+  }
+}
+
+.inner-row {
+  width: 100%;
+  display: flex;
 }
 
 .col {
-  padding: 13px 7.5px;
+  padding: 4px 7.5px;
   flex-grow: 0;
   flex-shrink: 0;
 
-  &.col-duration {
-    width: 120px;
-  }
-
+  &.col-duration,
   &.col-people {
-    width: 78px;
+    width: 50%;
   }
 
   &.col-skill-selection {
     flex-grow: 1;
     flex-shrink: 1;
+    margin-bottom: 4px;
 
     // Prevents the column from expanding beyond parent due to flex-grow:1
     min-width: 0;
   }
 
   &.col-role {
-    width: 168px;
+    flex-grow: 1;
+
+    // Prevents the column from expanding beyond parent due to flex-grow:1
+    min-width: 0;
   }
 
   &.col-actions {
@@ -73,18 +83,18 @@
   }
 
   .label {
-    display: none;
+    display: block;
   }
 }
 
 .col-role-container {
   display: flex;
   align-items: center;
-  margin-top: 4px;
 }
 
 .col-actions-container {
-  margin-top: 6px;
+  justify-content: flex-end;
+  margin-top: 5px;
 }
 
 .col-role {
@@ -101,41 +111,46 @@
   text-overflow: ellipsis;
 }
 
-@media screen and (max-width: 959px) {
-  .row {
-    flex-wrap: wrap;
-    padding: 4px;
+// Tablet Layout (768px+)
+@media screen and (min-width: $screen-md) {
+  .col {
+    &.col-duration {
+      width: 138px;
+    }
 
-    &:first-child {
-      border-top-width: 1px;
+    &.col-people {
+      width: 78px;
     }
   }
+}
 
-  .col {
-    padding: 8px 7.5px;
+// Desktop Layout (992px+)
+@media screen and (min-width: $screen-rg) {
+  .row {
+    padding: 8px 4px;
+  }
 
+  .col {
     &.col-role {
-      flex-grow: 1;
+      width: 168px;
+      flex-grow: 0;
+    }
 
-      // Prevents the column from expanding beyond parent due to flex-grow:1
+    &.col-duration,
+    &.col-people {
+      width: 50%;
+      flex-grow: 1;
+      flex-shrink: 1;
       min-width: 0;
-    }
 
-    &.col-duration {
-      width: 78px;
+      .label {
+        display: none;
+      }
     }
 
-    .label {
-      display: block;
+    &.col-skill-selection {
+      margin-left: 168px;
+      margin-right: 76px;
     }
   }
-
-  .inner-row {
-    display: flex;
-    width: 100%;
-  }
-
-  .col-actions-container {
-    justify-content: flex-end;
-  }
 }

From 5af30169fe5952d4d615901abd0fdcc0fd3bd477 Mon Sep 17 00:00:00 2001
From: Vigneshkumar Chinnachamy M <thegardenerwhocodes@gmail.com>
Date: Tue, 21 Apr 2020 22:26:29 +0530
Subject: [PATCH 3/4] hide talent picker header row when showing field labels

---
 .../components/TalentPickerQuestion/TalentPickerQuestion.scss  | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/projects/detail/components/TalentPickerQuestion/TalentPickerQuestion.scss b/src/projects/detail/components/TalentPickerQuestion/TalentPickerQuestion.scss
index af78d1e33..9f0bbe9ac 100644
--- a/src/projects/detail/components/TalentPickerQuestion/TalentPickerQuestion.scss
+++ b/src/projects/detail/components/TalentPickerQuestion/TalentPickerQuestion.scss
@@ -1,4 +1,5 @@
 @import '~tc-ui/src/styles/tc-includes';
+@import '../../../../styles/includes';
 
 .container {
   font-size: 15px;
@@ -53,7 +54,7 @@
 }
 
 
-@media screen and (max-width: 959px) {
+@media screen and (max-width: $screen-rg - 1px) {
   .header-row {
     display: none;
   }

From c0d9107408c532baa73936b1912813a1637c01d2 Mon Sep 17 00:00:00 2001
From: Vigneshkumar Chinnachamy M <thegardenerwhocodes@gmail.com>
Date: Tue, 21 Apr 2020 22:49:52 +0530
Subject: [PATCH 4/4] fix copy pasting in positive number input component

---
 src/components/PositiveNumberInput/PositiveNumberInput.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/PositiveNumberInput/PositiveNumberInput.jsx b/src/components/PositiveNumberInput/PositiveNumberInput.jsx
index 357c31e13..7f01cf7ff 100644
--- a/src/components/PositiveNumberInput/PositiveNumberInput.jsx
+++ b/src/components/PositiveNumberInput/PositiveNumberInput.jsx
@@ -14,7 +14,7 @@ class PositiveNumberInput extends React.PureComponent {
   }
 
   onKeyDown(evt) {
-    const isPrintableKey = evt.key.length === 1 && !evt.ctrlKey
+    const isPrintableKey = evt.key.length === 1 && !(evt.ctrlKey || evt.metaKey)
     const digitPattern = /\d/
 
     // Don't allow typing non digit characters