Merge branch 'reskin-profile-settings' into reskin-missing-asterisk

Author: dedywahyudi

src/shared/components/Settings/ExperienceAndSkills/WorkExperience/index.jsx

@@ -489,7 +489,7 @@ export default class Work extends ConsentComponent {
                         name="industry"
                         value={newWork.industry}
                         onChange={this.onUpdateInput}
-                        placeholder="Select industry"
+                        placeholder="Enter industry"
                         maxLength="64"
                       />
                     </FormField>

src/shared/components/Settings/FormField/index.jsx

@@ -10,10 +10,11 @@ import './styles.scss';
 
 const FormField = ({
   children, label = '', disabled, style, required,
+  children, label = '', disabled, style, isTextarea,
 }) => (
   <div styleName="form-field-wrapper" style={style}>
     <div styleName="form-field">
-      <div styleName={cn('label', disabled ? 'disabled' : null)} role="presentation">
+      <div styleName={cn('label', disabled ? 'disabled' : null, isTextarea)} role="presentation">
         {label}
         { required && <span styleName="required">*</span> }
       </div>
@@ -28,6 +29,7 @@ FormField.defaultProps = {
   disabled: false,
   style: {},
   required: false,
+  isTextarea: false,
 };
 
 FormField.propTypes = {
@@ -36,6 +38,7 @@ FormField.propTypes = {
   disabled: PT.bool,
   style: PT.object,
   required: PT.bool,
+  isTextarea: PT.bool,
 };
 
 export default FormField;

src/shared/components/Settings/FormField/styles.scss

@@ -34,6 +34,10 @@
         color: $member-red;
         margin-left: 5px;
       }
+
+      &.isTextarea {
+        top: 10px;
+      }
     }
   }
 }

src/shared/components/Settings/FormInputTextArea/index.jsx

@@ -8,20 +8,34 @@ import PT from 'prop-types';
 import cn from 'classnames';
 import './styles.scss';
 
-const FormInputTextArea = ({ styleName, ...props }) => (
-  <textarea
-    type="text"
-    styleName={cn('form-input-text-area', styleName || '')}
-    {...props}
-  />
-);
+const FormInputTextArea = ({ styleName, ...props }) => {
+  const { value } = props;
+
+  return (
+    <div>
+      <span styleName="char-count">
+        {(value && value.length) || 0}
+        <span styleName="grey">
+    &nbsp;/ 240
+        </span>
+      </span>
+      <textarea
+        type="text"
+        styleName={cn('form-input-text-area', styleName || '')}
+        {...props}
+      />
+    </div>
+  );
+};
 
 FormInputTextArea.defaultProps = {
   styleName: {},
+  value: null,
 };
 
 FormInputTextArea.propTypes = {
   styleName: PT.shape(),
+  value: PT.string,
 };
 
 export default FormInputTextArea;

src/shared/components/Settings/FormInputTextArea/styles.scss

@@ -31,3 +31,17 @@
     box-shadow: none !important;
   }
 }
+
+.char-count {
+  @include roboto-regular;
+
+  position: absolute;
+  right: 0;
+  top: 10px;
+  font-size: 11px;
+  padding-right: 5px;
+}
+
+.grey {
+  color: $tc-gray-40;
+}

src/shared/components/Settings/ProfileSettings/AboutYou/index.jsx

@@ -38,7 +38,7 @@ const AboutYou = (props) => {
           </FormField>
 
           {/* Primary interests */}
-          <FormField label="Short bio">
+          <FormField label="Short bio" isTextarea>
             <FormInputTextArea
               disabled={!canModifyTrait}
               id="description"

src/shared/components/Settings/ProfileSettings/Learning/index.jsx

@@ -160,7 +160,7 @@ const Learning = (props) => {
               styleName="edit-text"
               onClick={onHandleAddEducation}
             >
-              <AddItemIcon /> Add Another School / Degree
+              <AddItemIcon /> Add School / Degree
             </span>
           )}
 

src/shared/components/Settings/style.scss

@@ -300,12 +300,6 @@ $checkbox-bg-selected: $tc-dark-blue;
           text-transform: none;
         }
 
-        .char-count {
-          float: right;
-          font-size: 11px;
-          padding-right: 5px;
-        }
-
         .grey {
           color: $tc-gray-40;
         }