diff --git a/app/src/components/fields/dynamicFieldsSection/dynamicField/dynamicField.jsx b/app/src/components/fields/dynamicFieldsSection/dynamicField/dynamicField.jsx index db0fcbaac8..d086824477 100644 --- a/app/src/components/fields/dynamicFieldsSection/dynamicField/dynamicField.jsx +++ b/app/src/components/fields/dynamicFieldsSection/dynamicField/dynamicField.jsx @@ -30,6 +30,7 @@ export const DynamicField = ({ withValidation, children, darkView, + modalView, ...rest }) => { const fieldChildren = withValidation ? ( @@ -53,13 +54,12 @@ export const DynamicField = ({ {...fieldCommonProps} fieldWrapperClassName={cx('field-wrapper')} containerClassName={cx('form-field-item')} - labelClassName={cx('form-group-label', { 'dark-view': darkView })} + labelClassName={cx('form-group-label', { 'dark-view': darkView, 'modal-view': modalView })} > {fieldChildren} ); }; - DynamicField.propTypes = { field: dynamicFieldShape, customBlock: PropTypes.object, @@ -67,8 +67,8 @@ DynamicField.propTypes = { withValidation: PropTypes.bool, children: PropTypes.any, darkView: PropTypes.bool, + modalView: PropTypes.bool, }; - DynamicField.defaultProps = { field: {}, customBlock: null, @@ -76,4 +76,5 @@ DynamicField.defaultProps = { withValidation: false, children: null, darkView: false, + modalView: false, }; diff --git a/app/src/components/fields/dynamicFieldsSection/dynamicField/dynamicField.scss b/app/src/components/fields/dynamicFieldsSection/dynamicField/dynamicField.scss index 5cdc828c38..8dc19adfbc 100644 --- a/app/src/components/fields/dynamicFieldsSection/dynamicField/dynamicField.scss +++ b/app/src/components/fields/dynamicFieldsSection/dynamicField/dynamicField.scss @@ -31,6 +31,14 @@ padding-right: 0; color: $COLOR--dirty-gray; } + + &.modal-view { + font-size: 13px; + font-family: $FONT-REGULAR; + text-align: left; + line-height: 16px; + } + @media (max-width: $SCREEN_XS_MAX) { width: 100%; margin-bottom: 8px; diff --git a/app/src/components/fields/dynamicFieldsSection/dynamicFieldsSection.jsx b/app/src/components/fields/dynamicFieldsSection/dynamicFieldsSection.jsx index e45555578c..fb2f060bc4 100644 --- a/app/src/components/fields/dynamicFieldsSection/dynamicFieldsSection.jsx +++ b/app/src/components/fields/dynamicFieldsSection/dynamicFieldsSection.jsx @@ -37,6 +37,7 @@ export class DynamicFieldsSection extends Component { defaultOptionValueKey: PropTypes.oneOf([VALUE_ID_KEY, VALUE_NAME_KEY]), darkView: PropTypes.bool, children: PropTypes.node, + modalView: PropTypes.bool, }; static defaultProps = { @@ -47,6 +48,7 @@ export class DynamicFieldsSection extends Component { defaultOptionValueKey: VALUE_NAME_KEY, darkView: false, children: null, + modalView: false, }; getCustomBlockConfig = (field) => { @@ -64,6 +66,7 @@ export class DynamicFieldsSection extends Component { withValidation, defaultOptionValueKey, darkView, + modalView, } = this.props; return fields.map((field) => { @@ -77,6 +80,7 @@ export class DynamicFieldsSection extends Component { withValidation={withValidation} customFieldWrapper={customFieldWrapper} defaultOptionValueKey={defaultOptionValueKey} + modalView={modalView} darkView={darkView} /> ); diff --git a/app/src/components/fields/dynamicFieldsSection/fields/arrayField.jsx b/app/src/components/fields/dynamicFieldsSection/fields/arrayField.jsx index d7883a95e7..915f3e6d66 100644 --- a/app/src/components/fields/dynamicFieldsSection/fields/arrayField.jsx +++ b/app/src/components/fields/dynamicFieldsSection/fields/arrayField.jsx @@ -24,10 +24,12 @@ export class ArrayField extends Component { field: PropTypes.object.isRequired, defaultOptionValueKey: PropTypes.string.isRequired, darkView: PropTypes.bool, + modalView: PropTypes.bool, }; static defaultProps = { darkView: false, + modalView: false, }; formatOptions = (values = []) => @@ -56,7 +58,7 @@ export class ArrayField extends Component { parseTags = (options) => (options && options.map(this.parseValueToString)) || undefined; render() { - const { field, darkView, ...rest } = this.props; + const { field, darkView, modalView, ...rest } = this.props; return ( [(value && moment(value).format(DATE_FORMAT)) || '']; @@ -41,7 +43,7 @@ export class DateField extends Component { formatDateValue = (value) => value && value[0]; render() { - const { field, darkView, ...rest } = this.props; + const { field, darkView, modalView, ...rest } = this.props; return (
@@ -37,16 +43,19 @@ export class DropdownField extends Component { formatDropdownValue = (value) => value && value[0]; render() { - const { field, darkView, ...rest } = this.props; + const { field, darkView, modalView, ...rest } = this.props; + const DropdownComponent = modalView ? InputDropdown : Dropdown; + return ( - value && value[0]; @@ -34,16 +37,19 @@ export class TextField extends Component { parseInputValue = (value) => (value ? [value] : []); render() { - const { field, darkView, ...rest } = this.props; + const { field, darkView, modalView, ...rest } = this.props; + const FieldComponent = modalView ? Input : FieldText; + return ( - + ); } diff --git a/app/src/pages/inside/stepPage/modals/postIssueModal/postIssueModal.jsx b/app/src/pages/inside/stepPage/modals/postIssueModal/postIssueModal.jsx index 004a5d05e8..62edbdf97d 100644 --- a/app/src/pages/inside/stepPage/modals/postIssueModal/postIssueModal.jsx +++ b/app/src/pages/inside/stepPage/modals/postIssueModal/postIssueModal.jsx @@ -446,6 +446,7 @@ export class PostIssueModal extends Component { fields={fields} defaultOptionValueKey={getDefaultOptionValueKey(pluginName)} darkView + modalView /> ) : (
diff --git a/app/src/pages/inside/stepPage/modals/postIssueModal/postIssueModal.scss b/app/src/pages/inside/stepPage/modals/postIssueModal/postIssueModal.scss index 4d07289667..94474b9eba 100644 --- a/app/src/pages/inside/stepPage/modals/postIssueModal/postIssueModal.scss +++ b/app/src/pages/inside/stepPage/modals/postIssueModal/postIssueModal.scss @@ -94,7 +94,6 @@ font-size: 12px; color: $COLOR--gray-47; font-family: $FONT-REGULAR; - text-transform: uppercase; &.dark-view { color: $COLOR--dirty-gray; }