diff --git a/src/shared/components/Settings/Profile/Work/styles.scss b/src/shared/components/Settings/Profile/Work/styles.scss
index 937adc83e5..68ab6e56cb 100644
--- a/src/shared/components/Settings/Profile/Work/styles.scss
+++ b/src/shared/components/Settings/Profile/Work/styles.scss
@@ -1,4 +1,5 @@
@import "../../style";
+@import "./List//Item/mixin";
$checkbox-size: $base-unit * 4;
$checkbox-bg-empty: $tc-gray-neutral-light;
@@ -140,6 +141,10 @@ label {
user-select: none;
cursor: pointer;
}
+
+ .row .field.align-top {
+ margin-top: 25px;
+ }
}
.form-container-mobile {
@@ -283,6 +288,14 @@ label {
top: 25px;
}
}
+
+ &.col-checkbox-sibling-next {
+ padding-top: 30px;
+
+ @include upto-sm {
+ padding-top: 55px;
+ }
+ }
}
}
@@ -390,6 +403,184 @@ label {
}
}
+.editor-outer-container {
+ position: relative;
+
+ @include upto-sm {
+ margin-top: 5px;
+ }
+
+ .toolbar-wrapper {
+ position: absolute;
+ width: 100%;
+ z-index: 1;
+ }
+
+ :global {
+ .editor-container {
+ height: 254px;
+ margin: 0;
+ padding: 0;
+ background: $tc-white;
+ border: 1px solid #c3c3c8;
+ border-radius: 4px;
+ }
+
+ .DraftEditor-root {
+ margin-top: 0;
+ padding: 10px 10px 0 10px;
+ height: calc(100% - 10px);
+ overflow: auto;
+ }
+
+ .public-DraftEditorPlaceholder-root {
+ z-index: auto;
+ }
+
+ .editor-container.is-focused .DraftEditor-root {
+ margin-top: 40px;
+ height: calc(100% - 40px);
+ }
+
+ .editor-container.is-focused .public-DraftEditorPlaceholder-root,
+ .editor-container.has-user-input .public-DraftEditorPlaceholder-root {
+ display: none;
+ }
+
+ .public-DraftEditorPlaceholder-inner {
+ line-height: 20px;
+ }
+
+ .public-DraftEditor-content {
+ @include html-content-style {
+ ol li {
+ list-style-type: decimal;
+ }
+
+ ol li::before {
+ display: none;
+ }
+ }
+ }
+ }
+}
+
+.char-num {
+ @include roboto-medium;
+
+ margin-bottom: 2px;
+ line-height: 15px;
+ font-size: 11px;
+ color: $tc-dark-blue-100;
+ text-align: right;
+
+ @include upto-sm {
+ position: relative;
+ top: -15px;
+ margin-bottom: -3px;
+ height: 0;
+ }
+}
+
+.label-achievements {
+ width: 134px;
+ white-space: normal;
+
+ @include upto-sm {
+ width: auto;
+ }
+}
+
+.label-checkbox-working {
+ margin-left: 29px;
+}
+
+.select-technologies-container {
+ @include upto-sm {
+ margin-top: 5px;
+ }
+
+ .selected-value-text {
+ @include roboto-regular;
+
+ font-size: 15px;
+ color: #262628;
+
+ &:not(:first-child) {
+ &::before {
+ content: ', ';
+ }
+ }
+ }
+
+ :global {
+ .select-technologies {
+ .Select-control {
+ height: 40px;
+ }
+
+ .Select-multi-value-wrapper {
+ max-width: 602px;
+ padding: 0 15px;
+ line-height: 40px;
+ }
+
+ .Select-placeholder {
+ line-height: 40px;
+ padding: 0 15px;
+ }
+
+ .Select-input {
+ height: 40px;
+ margin: 0;
+
+ > input {
+ padding: 0;
+ }
+ }
+
+ &:not(.is-open) {
+ .Select-input {
+ width: 1px;
+ margin: 0;
+ }
+ }
+
+ .Select-option {
+ height: 40px;
+ line-height: 40px;
+ padding: 0 15px;
+
+ &.is-selected {
+ position: relative;
+ background-color: white;
+
+ &::after {
+ content: '';
+ position: absolute;
+ right: 15px;
+ bottom: 22px;
+ display: block;
+ width: 15px;
+ height: 8px;
+ border-left: 2px solid $tc-gray-90;
+ border-bottom: 2px solid $tc-gray-90;
+ transform: rotate(-45deg);
+ }
+ }
+
+ &.is-focused {
+ background-color: $tc-dark-blue-10;
+ }
+ }
+ }
+ }
+}
+
+.work-container .form-container .row .field :global .Select-placeholder {
+ color: $tc-gray-50;
+}
+
/*
* React Select component styling
*/
@@ -405,7 +596,3 @@ label {
margin-top: 5px;
}
}
-
-.work-container .form-container .row .field :global .Select-placeholder {
- color: $tc-gray-50;
-}
diff --git a/src/shared/containers/Settings.jsx b/src/shared/containers/Settings.jsx
index dcbaf86ad0..3d759242b5 100644
--- a/src/shared/containers/Settings.jsx
+++ b/src/shared/containers/Settings.jsx
@@ -153,6 +153,8 @@ function mapDispatchToProps(dispatch) {
dispatch(lookupActions.getSkillTagsDone());
dispatch(lookupActions.getCountriesInit());
dispatch(lookupActions.getCountriesDone());
+ dispatch(lookupActions.getTechnologiesInit());
+ dispatch(lookupActions.getTechnologiesDone());
} else if (settingsTab === TABS.PREFERENCES) {
// Deprecated. Leaving it here as reminder to update topcoder-react-lib as well
// dispatch(profileActions.getEmailPreferencesDone(profile, tokenV3));
diff --git a/src/shared/utils/settings.js b/src/shared/utils/settings.js
index 87a5969f2b..b175297067 100644
--- a/src/shared/utils/settings.js
+++ b/src/shared/utils/settings.js
@@ -3,6 +3,10 @@
*/
import _ from 'lodash';
+export function isEmpty(value) {
+ return value == null || value === '' || _.isEqual(value, []) || _.isEqual(value, {});
+}
+
export function validateStartDate(flag, fromDate, toDate) {
const result = {
invalid: false,
@@ -11,7 +15,7 @@ export function validateStartDate(flag, fromDate, toDate) {
const currentDate = new Date().setHours(0, 0, 0, 0);
- if (!_.isEmpty(fromDate)) {
+ if (!isEmpty(fromDate)) {
const startDate = new Date(fromDate).setHours(0, 0, 0, 0);
if (startDate > currentDate) {
@@ -20,17 +24,17 @@ export function validateStartDate(flag, fromDate, toDate) {
}
}
- if (!_.isEmpty(toDate)) {
+ if (!isEmpty(toDate)) {
const endDate = new Date(toDate).setHours(0, 0, 0, 0);
if (flag) {
- if (!_.isEmpty(fromDate)) {
+ if (!isEmpty(fromDate)) {
const startDate = new Date(fromDate).setHours(0, 0, 0, 0);
if (startDate >= endDate) {
result.invalid = true;
result.message = 'Start Date should be before End Date';
}
}
- } else if (!flag && !_.isEmpty(fromDate)) {
+ } else if (!flag && !isEmpty(fromDate)) {
const startDate = new Date(fromDate).setHours(0, 0, 0, 0);
if (startDate >= endDate) {
result.invalid = true;
@@ -50,15 +54,15 @@ export function validateEndDate(flag, fromDate, toDate) {
const currentDate = new Date().setHours(0, 0, 0, 0);
- if (!_.isEmpty(toDate)) {
+ if (!isEmpty(toDate)) {
const endDate = new Date(toDate).setHours(0, 0, 0, 0);
if (flag) {
- if (!_.isEmpty(fromDate)) {
+ if (!isEmpty(fromDate)) {
if (endDate > currentDate) {
result.invalid = true;
result.message = 'End Date should be current or in past';
}
- } else if (_.isEmpty(fromDate)) {
+ } else if (isEmpty(fromDate)) {
if (endDate > currentDate) {
result.invalid = true;
result.message = 'End Date should be current or in past';