Merge pull request #2338 from topcoder-platform/issue_2082

fix for issue #2082

Author: ThomasKranitsas

src/shared/components/Settings/Profile/Hobby/index.jsx

@@ -341,6 +341,7 @@ export default class Hobby extends ConsentComponent {
                 <div styleName="field row-1">
                   <label htmlFor="hobby">
                     Hobby
+                    <span styleName="text-required">* Required</span>
                     <input type="hidden" />
                   </label>
                   <input disabled={!canModifyTrait} id="hobby" name="hobby" type="text" placeholder="Hobby" onChange={this.onUpdateInput} value={newHobby.hobby} maxLength="128" required />
@@ -351,6 +352,7 @@ export default class Hobby extends ConsentComponent {
                   <label styleName="description-label" htmlFor="description">
                     <span>
                       Description
+                      <span styleName="text-required">* Required</span>
                     </span>
                     {' '}
                     <span styleName="description-counts">

src/shared/components/Settings/Profile/Hobby/styles.scss

@@ -180,6 +180,12 @@ textarea {
         line-height: 15px;
         font-weight: 500;
         color: $tc-gray-80;
+
+        .text-required {
+          font-size: 10px;
+          color: $tc-red-110;
+          margin-left: 5px;
+        }
       }
 
       &.col-1 {

src/shared/components/Settings/Profile/Skills/index.jsx

@@ -590,6 +590,7 @@ export default class Skills extends ConsentComponent {
                 <div styleName="field">
                   <label htmlFor="skills">
                     Skill
+                    <span styleName="text-required">* Required</span>
                     <input type="hidden" />
                   </label>
                   <Select

src/shared/components/Settings/Profile/Skills/styles.scss

@@ -165,6 +165,12 @@
         line-height: 15px;
         color: $tc-gray-80;
         margin-bottom: 6px;
+
+        .text-required {
+          font-size: 10px;
+          color: $tc-red-110;
+          margin-left: 5px;
+        }
       }
 
       .col-1,