From 8cc67c0736cc6aecd0cd80688453faee97c9b71c Mon Sep 17 00:00:00 2001
From: C Dharmateja <dharmateja@protonmail.com>
Date: Tue, 26 Jan 2021 12:11:26 +0530
Subject: [PATCH 1/3] add default terms and refractor nda input

---
 .../ChallengeEditor/ChallengeView/index.js    |  33 +++-
 .../NDAField/NDAField.module.scss             | 159 ++++++++++++++++++
 .../ChallengeEditor/NDAField/index.js         |  43 +++--
 .../ChallengeEditor/Terms-Field/index.js      |  16 +-
 src/components/ChallengeEditor/index.js       |  20 ++-
 5 files changed, 237 insertions(+), 34 deletions(-)

diff --git a/src/components/ChallengeEditor/ChallengeView/index.js b/src/components/ChallengeEditor/ChallengeView/index.js
index b8d1d266..8d2348e3 100644
--- a/src/components/ChallengeEditor/ChallengeView/index.js
+++ b/src/components/ChallengeEditor/ChallengeView/index.js
@@ -37,7 +37,9 @@ const ChallengeView = ({
   assignedMemberDetails,
   enableEdit,
   onLaunchChallenge,
-  onCloseTask }) => {
+  onCloseTask,
+  location }) => {
+  const params = new URLSearchParams(location.search)
   const selectedType = _.find(metadata.challengeTypes, { id: challenge.typeId })
   const challengeTrack = _.find(metadata.challengeTracks, { id: challenge.trackId })
 
@@ -148,7 +150,6 @@ const ChallengeView = ({
                 <span><span className={styles.fieldTitle}>Challenge Name:</span> {challenge.name}</span>
               </div>
             </div>
-            <NDAField challenge={challenge} readOnly />
             {isTask && <AssignedMemberField challenge={challenge} assignedMemberDetails={assignedMemberDetails} readOnly /> }
             <CopilotField challenge={{
               copilot
@@ -179,11 +180,26 @@ const ChallengeView = ({
                 </label>
               </div>
             </div>
-            {openAdvanceSettings && (<div className={cn(styles.row, styles.topRow)}>
-              <div className={styles.col}>
-                <span><span className={styles.fieldTitle}>Groups:</span> {groups}</span>
-              </div>
-            </div>)}
+            {openAdvanceSettings && (
+              <>
+                <NDAField beta challenge={challenge} readOnly />
+                {params.get('beta') === 'true' && (
+                  <div className={styles.row}>
+                    <div className={styles.col}>
+                      <span>
+                        <span className={styles.fieldTitle}>Terms:</span>
+                        {challenge.terms.map(term => term.id).join(', ')}
+                      </span>
+                    </div>
+                  </div>
+                )}
+                <div className={cn(styles.row, styles.topRow)}>
+                  <div className={styles.col}>
+                    <span><span className={styles.fieldTitle}>Groups:</span> {groups}</span>
+                  </div>
+                </div>
+              </>
+            )}
             {
               <div className={styles.PhaseRow}>
                 <PhaseInput
@@ -267,7 +283,8 @@ ChallengeView.propTypes = {
   assignedMemberDetails: PropTypes.shape(),
   enableEdit: PropTypes.bool,
   onLaunchChallenge: PropTypes.func,
-  onCloseTask: PropTypes.func
+  onCloseTask: PropTypes.func,
+  location: PropTypes.object
 }
 
 export default withRouter(ChallengeView)
diff --git a/src/components/ChallengeEditor/NDAField/NDAField.module.scss b/src/components/ChallengeEditor/NDAField/NDAField.module.scss
index e656d519..30ee09ae 100644
--- a/src/components/ChallengeEditor/NDAField/NDAField.module.scss
+++ b/src/components/ChallengeEditor/NDAField/NDAField.module.scss
@@ -81,4 +81,163 @@
       border-color: $white;
     }
   }
+
+  .field {
+    @include upto-sm {
+      display: block;
+      padding-bottom: 10px;
+    }
+
+    label {
+      @include roboto-bold();
+
+      font-size: 16px;
+      line-height: 19px;
+      font-weight: 500;
+      color: $tc-gray-80;
+    }
+
+    &.col1 {
+      max-width: 185px;
+      min-width: 185px;
+      margin-right: 14px;
+      margin-bottom: auto;
+      margin-top: auto;
+      padding-top: 10px;
+      white-space: nowrap;
+      display: flex;
+      align-items: center;
+
+      span {
+        color: $tc-red;
+      }
+    }
+
+    &.col2 {
+      align-self: flex-end;
+      width: 80%;
+      margin-bottom: auto;
+      margin-top: auto;
+      display: flex;
+      flex-direction: row;
+      max-width: 600px;
+      min-width: 600px;
+    }
+  }
+
+  .col1 {
+    display: flex;
+    flex-grow: 1;
+    align-items: center;
+    max-width: 0;
+    min-width: 0;
+    margin-right: 0;
+    width: auto;
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+    padding-top: 0 !important;
+  }
+
+  .col2 {
+    width: auto;
+
+    .subGroup {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+
+      .subRow {
+        display: flex;
+        align-items: center;
+        margin-bottom: 18px;
+      }
+
+      .subRow:last-of-type {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  .tcRadioButton {
+    .tc-radioButton-label {
+      @include roboto-light();
+
+      line-height: 17px;
+      font-weight: 300;
+      margin-left: 21px;
+      user-select: none;
+      cursor: pointer;
+      width: 195px;
+      font-size: 14px;
+      color: #3d3d3d;
+    }
+
+    height: 18px;
+    width: 210px;
+    margin: 0;
+    padding: 0;
+    vertical-align: bottom;
+    position: relative;
+    display: inline-block;
+
+    input[type=radio] {
+      display: none;
+    }
+
+    label {
+      @include roboto-light();
+
+      line-height: 17px;
+      font-weight: 300;
+      cursor: pointer;
+      position: absolute;
+      display: inline-block;
+      width: 16px;
+      height: 16px;
+      border-radius: 8px;
+      top: 0;
+      left: 0;
+      border: none;
+      box-shadow: none;
+      background: $tc-gray-30;
+      transition: all 0.15s ease-in-out;
+
+      &::after {
+        opacity: 0;
+        content: '';
+        position: absolute;
+        width: 8px;
+        height: 8px;
+        background: transparent;
+        top: 4px;
+        left: 4px;
+        border: 4px solid $tc-blue-20;
+        border-radius: 4px;
+        transition: all 0.15s ease-in-out;
+      }
+
+      &:hover::after {
+        opacity: 0.3;
+      }
+
+      div {
+        margin-left: 24px;
+        width: 300px;
+      }
+    }
+
+    input[type=radio]:checked ~ label {
+      background: $tc-blue-20;
+    }
+
+    input[type=radio]:checked + label::after {
+      opacity: 1;
+      border-color: $white;
+    }
+  }
+
+  &.error {
+    color: $tc-red;
+    margin-top: -25px;
+  }
 }
diff --git a/src/components/ChallengeEditor/NDAField/index.js b/src/components/ChallengeEditor/NDAField/index.js
index ff6b1749..dfbed5a2 100644
--- a/src/components/ChallengeEditor/NDAField/index.js
+++ b/src/components/ChallengeEditor/NDAField/index.js
@@ -1,26 +1,43 @@
 import _ from 'lodash'
 import React from 'react'
 import PropTypes from 'prop-types'
+import cn from 'classnames'
 import styles from './NDAField.module.scss'
 import { DEFAULT_NDA_UUID } from '../../../config/constants'
 
 const NDAField = ({ challenge, toggleNdaRequire, readOnly }) => {
   const isRequiredNda = challenge.terms && _.some(challenge.terms, { id: DEFAULT_NDA_UUID })
+
   return (
     <div className={styles.row}>
-      <div className={styles.tcCheckbox}>
-        <input
-          name='isRequiredNda'
-          type='checkbox'
-          id='isRequiredNda'
-          checked={isRequiredNda}
-          onChange={toggleNdaRequire}
-          readOnly={readOnly}
-        />
-        <label htmlFor='isRequiredNda' className={readOnly ? styles.readOnly : ''}>
-          <div>NDA Required</div>
-          <input type='hidden' />
-        </label>
+      <div className={cn(styles.field, styles.col1, styles.fieldTitle)}>NDA Required :</div>
+      <div className={cn(styles.field, styles.col2)}>
+        <div className={styles.tcRadioButton}>
+          <input
+            name='nda'
+            type='radio'
+            id='nda-yes'
+            checked={isRequiredNda}
+            onChange={!readOnly && toggleNdaRequire}
+          />
+          <label className={styles['tc-RadioButton-label']} htmlFor='nda-yes'>
+            <div>yes</div>
+            <input type='hidden' />
+          </label>
+        </div>
+        <div className={styles.tcRadioButton}>
+          <input
+            name='nda'
+            type='radio'
+            id='nda-no'
+            checked={!isRequiredNda}
+            onChange={!readOnly && toggleNdaRequire}
+          />
+          <label className={styles['tc-RadioButton-label']} htmlFor='nda-no'>
+            <div>No</div>
+            <input type='hidden' />
+          </label>
+        </div>
       </div>
     </div>
   )
diff --git a/src/components/ChallengeEditor/Terms-Field/index.js b/src/components/ChallengeEditor/Terms-Field/index.js
index 4d05e086..44f6ca1d 100644
--- a/src/components/ChallengeEditor/Terms-Field/index.js
+++ b/src/components/ChallengeEditor/Terms-Field/index.js
@@ -4,17 +4,16 @@ import Select from '../../Select'
 import cn from 'classnames'
 import styles from './Terms-Field.module.scss'
 
-const TermsField = ({ terms, challenge, onUpdateMultiSelect }) => {
-  const mapOps = item => ({ label: item.title, value: item.id })
+const TermsField = ({ terms, projectTerms, challenge, onUpdateMultiSelect }) => {
+  const mapOps = item => ({ label: item, value: item })
 
   const [currTerms, setCurrTerms] = React.useState([])
 
   React.useEffect(() => {
-    const challengeTerms = new Set(challenge.terms)
-    const defaultValue = terms
-      .filter(term => challengeTerms.has(term.id))
+    const challengeTermsIds = challenge.terms.map(({ id }) => id)
+    const allTerms = [...new Set([...projectTerms, ...challengeTermsIds])]
       .map(mapOps)
-    setCurrTerms(defaultValue)
+    setCurrTerms(allTerms)
   }, [])
 
   return (
@@ -32,7 +31,7 @@ const TermsField = ({ terms, challenge, onUpdateMultiSelect }) => {
           value={currTerms}
           onChange={(value) => {
             onUpdateMultiSelect(value, 'terms')
-            setCurrTerms(setCurrTerms(terms))
+            setCurrTerms(value)
           }}
         />
       </div>
@@ -47,7 +46,8 @@ TermsField.defaultProps = {
 TermsField.propTypes = {
   challenge: PropTypes.shape().isRequired,
   terms: PropTypes.arrayOf(PropTypes.shape()).isRequired,
-  onUpdateMultiSelect: PropTypes.func.isRequired
+  onUpdateMultiSelect: PropTypes.func.isRequired,
+  projectTerms: PropTypes.array
 }
 
 export default TermsField
diff --git a/src/components/ChallengeEditor/index.js b/src/components/ChallengeEditor/index.js
index 9dca0d00..0f8462e6 100644
--- a/src/components/ChallengeEditor/index.js
+++ b/src/components/ChallengeEditor/index.js
@@ -195,7 +195,8 @@ class ChallengeEditor extends Component {
         challengeData.copilot = copilot || copilotFromResources
         challengeData.reviewer = reviewer || reviewerFromResources
         const challengeDetail = { ...challengeData }
-        const isOpenAdvanceSettings = challengeDetail.groups.length > 0
+        const isRequiredNda = challengeDetail.terms && _.some(challengeDetail.terms, { id: DEFAULT_NDA_UUID })
+        const isOpenAdvanceSettings = challengeDetail.groups.length > 0 || isRequiredNda
         setState({
           challenge: challengeDetail,
           assignedMemberDetails,
@@ -1116,6 +1117,8 @@ class ChallengeEditor extends Component {
   }
 
   render () {
+    const params = new URLSearchParams(this.props.location.search)
+
     const {
       isLaunch,
       isConfirm,
@@ -1359,7 +1362,6 @@ class ChallengeEditor extends Component {
               </div>
             </div>
             <ChallengeNameField challenge={challenge} onUpdateInput={this.onUpdateInput} />
-            <NDAField challenge={challenge} toggleNdaRequire={this.toggleNdaRequire} />
             {isTask && (
               <AssignedMemberField
                 challenge={challenge}
@@ -1392,8 +1394,15 @@ class ChallengeEditor extends Component {
             </div>
             { isOpenAdvanceSettings && (
               <React.Fragment>
-                {/* remove terms field and use default term */}
-                {false && (<TermsField terms={metadata.challengeTerms} challenge={challenge} onUpdateMultiSelect={this.onUpdateMultiSelect} />)}
+                <NDAField challenge={challenge} toggleNdaRequire={this.toggleNdaRequire} />
+                {params.get('beta') && (
+                  <TermsField
+                    terms={metadata.challengeTerms}
+                    projectTerms={projectDetail.terms}
+                    challenge={challenge}
+                    onUpdateMultiSelect={this.onUpdateMultiSelect}
+                  />
+                )}
                 <GroupsField onUpdateMultiSelect={this.onUpdateMultiSelect} challenge={challenge} />
               </React.Fragment>
             )}
@@ -1526,7 +1535,8 @@ ChallengeEditor.propTypes = {
   replaceResourceInRole: PropTypes.func,
   partiallyUpdateChallengeDetails: PropTypes.func.isRequired,
   deleteChallenge: PropTypes.func.isRequired,
-  loggedInUser: PropTypes.shape().isRequired
+  loggedInUser: PropTypes.shape().isRequired,
+  location: PropTypes.object
 }
 
 export default withRouter(ChallengeEditor)

From d7846c759abfaff17ad331ed16e6768fa3ab56c6 Mon Sep 17 00:00:00 2001
From: C Dharmateja <dharmateja@protonmail.com>
Date: Tue, 26 Jan 2021 20:09:22 +0530
Subject: [PATCH 2/3] pr review fixes

---
 .../ChallengeEditor/ChallengeView/index.js    | 17 ++-----------
 .../NDAField/NDAField.module.scss             |  2 +-
 .../ChallengeEditor/NDAField/index.js         | 19 ++++++++++++--
 .../ChallengeEditor/Terms-Field/index.js      | 16 ++++++------
 src/components/ChallengeEditor/index.js       | 25 +++++++++----------
 5 files changed, 40 insertions(+), 39 deletions(-)

diff --git a/src/components/ChallengeEditor/ChallengeView/index.js b/src/components/ChallengeEditor/ChallengeView/index.js
index 8d2348e3..64448bc3 100644
--- a/src/components/ChallengeEditor/ChallengeView/index.js
+++ b/src/components/ChallengeEditor/ChallengeView/index.js
@@ -37,9 +37,7 @@ const ChallengeView = ({
   assignedMemberDetails,
   enableEdit,
   onLaunchChallenge,
-  onCloseTask,
-  location }) => {
-  const params = new URLSearchParams(location.search)
+  onCloseTask }) => {
   const selectedType = _.find(metadata.challengeTypes, { id: challenge.typeId })
   const challengeTrack = _.find(metadata.challengeTracks, { id: challenge.trackId })
 
@@ -183,16 +181,6 @@ const ChallengeView = ({
             {openAdvanceSettings && (
               <>
                 <NDAField beta challenge={challenge} readOnly />
-                {params.get('beta') === 'true' && (
-                  <div className={styles.row}>
-                    <div className={styles.col}>
-                      <span>
-                        <span className={styles.fieldTitle}>Terms:</span>
-                        {challenge.terms.map(term => term.id).join(', ')}
-                      </span>
-                    </div>
-                  </div>
-                )}
                 <div className={cn(styles.row, styles.topRow)}>
                   <div className={styles.col}>
                     <span><span className={styles.fieldTitle}>Groups:</span> {groups}</span>
@@ -283,8 +271,7 @@ ChallengeView.propTypes = {
   assignedMemberDetails: PropTypes.shape(),
   enableEdit: PropTypes.bool,
   onLaunchChallenge: PropTypes.func,
-  onCloseTask: PropTypes.func,
-  location: PropTypes.object
+  onCloseTask: PropTypes.func
 }
 
 export default withRouter(ChallengeView)
diff --git a/src/components/ChallengeEditor/NDAField/NDAField.module.scss b/src/components/ChallengeEditor/NDAField/NDAField.module.scss
index 30ee09ae..9db222fb 100644
--- a/src/components/ChallengeEditor/NDAField/NDAField.module.scss
+++ b/src/components/ChallengeEditor/NDAField/NDAField.module.scss
@@ -173,7 +173,7 @@
     }
 
     height: 18px;
-    width: 210px;
+    width: 80px;
     margin: 0;
     padding: 0;
     vertical-align: bottom;
diff --git a/src/components/ChallengeEditor/NDAField/index.js b/src/components/ChallengeEditor/NDAField/index.js
index dfbed5a2..29cd9a98 100644
--- a/src/components/ChallengeEditor/NDAField/index.js
+++ b/src/components/ChallengeEditor/NDAField/index.js
@@ -8,6 +8,21 @@ import { DEFAULT_NDA_UUID } from '../../../config/constants'
 const NDAField = ({ challenge, toggleNdaRequire, readOnly }) => {
   const isRequiredNda = challenge.terms && _.some(challenge.terms, { id: DEFAULT_NDA_UUID })
 
+  if (readOnly) {
+    return (
+      <div className={styles.row}>
+        <div className={cn(styles.field, styles.col1, styles.fieldTitle)}>NDA Required :</div>
+        <div className={cn(styles.field, styles.col2)}>
+          {
+            isRequiredNda
+              ? <div>Yes</div>
+              : <div>No</div>
+          }
+        </div>
+      </div>
+    )
+  }
+
   return (
     <div className={styles.row}>
       <div className={cn(styles.field, styles.col1, styles.fieldTitle)}>NDA Required :</div>
@@ -18,7 +33,7 @@ const NDAField = ({ challenge, toggleNdaRequire, readOnly }) => {
             type='radio'
             id='nda-yes'
             checked={isRequiredNda}
-            onChange={!readOnly && toggleNdaRequire}
+            onChange={toggleNdaRequire}
           />
           <label className={styles['tc-RadioButton-label']} htmlFor='nda-yes'>
             <div>yes</div>
@@ -31,7 +46,7 @@ const NDAField = ({ challenge, toggleNdaRequire, readOnly }) => {
             type='radio'
             id='nda-no'
             checked={!isRequiredNda}
-            onChange={!readOnly && toggleNdaRequire}
+            onChange={toggleNdaRequire}
           />
           <label className={styles['tc-RadioButton-label']} htmlFor='nda-no'>
             <div>No</div>
diff --git a/src/components/ChallengeEditor/Terms-Field/index.js b/src/components/ChallengeEditor/Terms-Field/index.js
index 44f6ca1d..4d05e086 100644
--- a/src/components/ChallengeEditor/Terms-Field/index.js
+++ b/src/components/ChallengeEditor/Terms-Field/index.js
@@ -4,16 +4,17 @@ import Select from '../../Select'
 import cn from 'classnames'
 import styles from './Terms-Field.module.scss'
 
-const TermsField = ({ terms, projectTerms, challenge, onUpdateMultiSelect }) => {
-  const mapOps = item => ({ label: item, value: item })
+const TermsField = ({ terms, challenge, onUpdateMultiSelect }) => {
+  const mapOps = item => ({ label: item.title, value: item.id })
 
   const [currTerms, setCurrTerms] = React.useState([])
 
   React.useEffect(() => {
-    const challengeTermsIds = challenge.terms.map(({ id }) => id)
-    const allTerms = [...new Set([...projectTerms, ...challengeTermsIds])]
+    const challengeTerms = new Set(challenge.terms)
+    const defaultValue = terms
+      .filter(term => challengeTerms.has(term.id))
       .map(mapOps)
-    setCurrTerms(allTerms)
+    setCurrTerms(defaultValue)
   }, [])
 
   return (
@@ -31,7 +32,7 @@ const TermsField = ({ terms, projectTerms, challenge, onUpdateMultiSelect }) =>
           value={currTerms}
           onChange={(value) => {
             onUpdateMultiSelect(value, 'terms')
-            setCurrTerms(value)
+            setCurrTerms(setCurrTerms(terms))
           }}
         />
       </div>
@@ -46,8 +47,7 @@ TermsField.defaultProps = {
 TermsField.propTypes = {
   challenge: PropTypes.shape().isRequired,
   terms: PropTypes.arrayOf(PropTypes.shape()).isRequired,
-  onUpdateMultiSelect: PropTypes.func.isRequired,
-  projectTerms: PropTypes.array
+  onUpdateMultiSelect: PropTypes.func.isRequired
 }
 
 export default TermsField
diff --git a/src/components/ChallengeEditor/index.js b/src/components/ChallengeEditor/index.js
index 0f8462e6..9348bb8d 100644
--- a/src/components/ChallengeEditor/index.js
+++ b/src/components/ChallengeEditor/index.js
@@ -810,7 +810,7 @@ class ChallengeEditor extends Component {
 
   async createNewChallenge () {
     if (!this.props.isNew) return
-    const { metadata, createChallenge } = this.props
+    const { metadata, createChallenge, projectDetail } = this.props
     const { name, trackId, typeId } = this.state.challenge
     const { timelineTemplates } = metadata
     const isDesignChallenge = trackId === DES_TRACK_ID
@@ -839,6 +839,14 @@ class ChallengeEditor extends Component {
       terms: [{ id: DEFAULT_TERM_UUID, roleId: SUBMITTER_ROLE_UUID }]
       // prizeSets: this.getDefaultPrizeSets()
     }
+    if (projectDetail.terms) {
+      const currTerms = new Set(newChallenge.terms.map(term => term.id))
+      newChallenge.terms.push(
+        ...projectDetail.terms
+          .filter(term => !currTerms.has(term))
+          .map(term => ({ id: term, roleId: SUBMITTER_ROLE_UUID }))
+      )
+    }
     const discussions = this.getDiscussionsConfig(newChallenge)
     if (discussions) {
       newChallenge.discussions = discussions
@@ -1117,8 +1125,6 @@ class ChallengeEditor extends Component {
   }
 
   render () {
-    const params = new URLSearchParams(this.props.location.search)
-
     const {
       isLaunch,
       isConfirm,
@@ -1395,14 +1401,8 @@ class ChallengeEditor extends Component {
             { isOpenAdvanceSettings && (
               <React.Fragment>
                 <NDAField challenge={challenge} toggleNdaRequire={this.toggleNdaRequire} />
-                {params.get('beta') && (
-                  <TermsField
-                    terms={metadata.challengeTerms}
-                    projectTerms={projectDetail.terms}
-                    challenge={challenge}
-                    onUpdateMultiSelect={this.onUpdateMultiSelect}
-                  />
-                )}
+                {/* remove terms field and use default term */}
+                {false && (<TermsField terms={metadata.challengeTerms} challenge={challenge} onUpdateMultiSelect={this.onUpdateMultiSelect} />)}
                 <GroupsField onUpdateMultiSelect={this.onUpdateMultiSelect} challenge={challenge} />
               </React.Fragment>
             )}
@@ -1535,8 +1535,7 @@ ChallengeEditor.propTypes = {
   replaceResourceInRole: PropTypes.func,
   partiallyUpdateChallengeDetails: PropTypes.func.isRequired,
   deleteChallenge: PropTypes.func.isRequired,
-  loggedInUser: PropTypes.shape().isRequired,
-  location: PropTypes.object
+  loggedInUser: PropTypes.shape().isRequired
 }
 
 export default withRouter(ChallengeEditor)

From 6247a54d77ef648600a08c201ca745cd8c72263b Mon Sep 17 00:00:00 2001
From: C Dharmateja <cdharmateja1999@gmail.com>
Date: Wed, 27 Jan 2021 09:31:07 +0000
Subject: [PATCH 3/3] review fixes

---
 .../NDAField/NDAField.module.scss             | 79 ++-----------------
 .../ChallengeEditor/NDAField/index.js         | 10 +--
 2 files changed, 9 insertions(+), 80 deletions(-)

diff --git a/src/components/ChallengeEditor/NDAField/NDAField.module.scss b/src/components/ChallengeEditor/NDAField/NDAField.module.scss
index 9db222fb..70719729 100644
--- a/src/components/ChallengeEditor/NDAField/NDAField.module.scss
+++ b/src/components/ChallengeEditor/NDAField/NDAField.module.scss
@@ -8,78 +8,13 @@
   align-content: space-between;
   justify-content: flex-start;
 
-  .tcCheckbox {
-    @include tc-checkbox;
-
-    height: 18px;
-    width: 210px;
-    margin: 0;
-    padding: 0;
-    vertical-align: bottom;
-    position: relative;
-    display: inline-block;
-
-    input[type='checkbox'] {
-      display: none;
-    }
-
-    label {
-      @include roboto-light();
-
-      line-height: 17px;
-      font-weight: 300;
-      cursor: pointer;
-      position: absolute;
-      display: inline-block;
-      width: 14px;
-      height: 14px;
-      top: 0;
-      left: 0;
-      border: none;
-      box-shadow: none;
-      background: $tc-gray-30;
-      transition: all 0.15s ease-in-out;
-
-
-      &.readOnly {
-        cursor: auto;
-      }
-
-      &::after {
-        opacity: 0;
-        content: '';
-        position: absolute;
-        width: 9px;
-        height: 5px;
-        background: transparent;
-        top: 2px;
-        left: 2px;
-        border-top: none;
-        border-right: none;
-        transform: rotate(-45deg);
-        transition: all 0.15s ease-in-out;
-      }
-
-      &:hover::after {
-        opacity: 0.3;
-      }
-      &:hover:read-only::after {
-        opacity: 0;
-      }
-
-      div {
-        margin-left: 24px;
-        width: 300px;
-      }
-    }
-
-    input[type='checkbox']:checked ~ label {
-      background: $tc-blue-20;
-    }
-
-    input[type='checkbox']:checked + label::after {
-      border-color: $white;
-    }
+  .fieldTitle {
+    @include roboto-bold();
+    font-size: 16px;
+    line-height: 19px;
+    font-weight: 500;
+    color: $tc-gray-80;
+    margin-right: 10px;
   }
 
   .field {
diff --git a/src/components/ChallengeEditor/NDAField/index.js b/src/components/ChallengeEditor/NDAField/index.js
index 29cd9a98..018abf67 100644
--- a/src/components/ChallengeEditor/NDAField/index.js
+++ b/src/components/ChallengeEditor/NDAField/index.js
@@ -13,11 +13,7 @@ const NDAField = ({ challenge, toggleNdaRequire, readOnly }) => {
       <div className={styles.row}>
         <div className={cn(styles.field, styles.col1, styles.fieldTitle)}>NDA Required :</div>
         <div className={cn(styles.field, styles.col2)}>
-          {
-            isRequiredNda
-              ? <div>Yes</div>
-              : <div>No</div>
-          }
+          { isRequiredNda ? 'Yes' : 'No' }
         </div>
       </div>
     )
@@ -36,8 +32,7 @@ const NDAField = ({ challenge, toggleNdaRequire, readOnly }) => {
             onChange={toggleNdaRequire}
           />
           <label className={styles['tc-RadioButton-label']} htmlFor='nda-yes'>
-            <div>yes</div>
-            <input type='hidden' />
+            <div>Yes</div>
           </label>
         </div>
         <div className={styles.tcRadioButton}>
@@ -50,7 +45,6 @@ const NDAField = ({ challenge, toggleNdaRequire, readOnly }) => {
           />
           <label className={styles['tc-RadioButton-label']} htmlFor='nda-no'>
             <div>No</div>
-            <input type='hidden' />
           </label>
         </div>
       </div>