layout ui fixes

src/client/Containers/Calculation/Sections/index.jsx

@@ -6,20 +6,20 @@ import styled from 'styled-components';
 import SectionsList from './list';
 import withTitle from 'client/hocs/withTitle';
 import mq from 'client/UIKit/mq';
+import Divider from 'client/Elements/Divider';
 
 const { TabPane } = Tabs;
 
 const InputWrapper = styled(Box)`
   width: 100%;
-  // ${mq.desktop`flex: 2 0 23%;
-  //   width:23%;
-  // `}
+  ${mq.desktop`
+    flex: 2 0 23%;
+    width:${(props) => props.width};
+    `}
   margin: 8px 8px;
-
-  // ${(props) => props.newLine && 'flex-basis: 100%;'}
 `;
 
-const Sections = (props) => (
+const Sections = () => (
   <Background flex="3 0 72%">
     <Tabs type="line">
       {SectionsList.map(({ title, elements }, i) => (
@@ -29,13 +29,22 @@ const Sections = (props) => (
             alignItems="flex-end"
             flexWrap="wrap"
           >
-            {elements.map(({ title, Component, props, newLine }, ie) => {
-              return (
-                <InputWrapper key={ie} newLine={newLine}>
-                  {withTitle(title)(Component)(props)}
-                </InputWrapper>
-              );
-            })}
+            {elements.map(
+              ({ title, Component, props, layout, divider }, ie) => {
+                if (divider) {
+                  return <Divider key={ie} {...divider} />;
+                }
+                return (
+                  <InputWrapper
+                    key={ie}
+                    newLine={layout && layout.newLine}
+                    width={layout && layout.width}
+                  >
+                    {withTitle(title)(Component)(props)}
+                  </InputWrapper>
+                );
+              }
+            )}
           </Flex>
         </TabPane>
       ))}

src/client/Containers/Calculation/Sections/list.js

@@ -1,16 +1,20 @@
 import Input from 'client/Elements/Input';
-import withTitle from 'client/hocs/withTitle';
 import Checkbox from 'client/Elements/Checkbox';
 import InputNumber from 'client/Elements/InputNumber';
 import TextArea from 'client/Elements/TextArea';
 import Switch from 'client/Elements/Switch';
 import Select from 'client/Elements/Select';
 import Button from 'client/Elements/Button';
+import { Divider } from 'antd';
 
 export default [
   {
     title: 'Интерес/ЛС',
     elements: [
+      {
+        divider: { title: 'Поиск интереса в CRM' },
+      },
+
       {
         title: 'Выбор Интереса/ЛС',
         Component: Select,
@@ -35,6 +39,13 @@ export default [
           valueName: 'template',
         },
       },
+
+      /** */
+      {
+        divider: { title: 'Создание нового интереса в CRM' },
+      },
+      /** */
+
       {
         title: 'Канал привлечения',
         Component: Select,
@@ -59,6 +70,13 @@ export default [
           valueName: 'account',
         },
       },
+
+      /** */
+      {
+        divider: { empty: true },
+      },
+      /** */
+
       {
         title: 'ИНН',
         Component: Input,
@@ -83,6 +101,13 @@ export default [
           valueName: 'contact',
         },
       },
+
+      /** */
+      {
+        divider: { empty: true },
+      },
+      /** */
+
       {
         title: 'Контактное лицо',
         Component: Select,
@@ -119,6 +144,13 @@ export default [
           valueName: 'contactGender',
         },
       },
+
+      /** */
+      {
+        divider: { empty: true },
+      },
+      /** */
+
       {
         title: 'Поставщик',
         Component: Select,
@@ -135,6 +167,21 @@ export default [
           valueName: 'finDepartment',
         },
       },
+      {
+        title: 'Брокер',
+        Component: Select,
+        props: {
+          name: 'SearchBroker',
+          valueName: 'broker',
+        },
+      },
+      
+      /** */
+      {
+        divider: { empty: true },
+      },
+      /** */
+
       {
         title: 'Агент',
         Component: Select,
@@ -151,22 +198,31 @@ export default [
           valueName: 'doubleAgentgent',
         },
       },
+      
+      /** */
       {
-        title: 'Брокер',
-        Component: Select,
+        divider: { empty: true },
+      },
+      /** */
+
+      {
+        title: 'Комментарий к интересу',
+        Component: TextArea,
         props: {
-          name: 'SearchBroker',
-          valueName: 'broker',
+          name: 'tbxCommentLead',
+          valueName: 'commentLead',
+        },
+        layout: {
+          width: '100%',
         },
       },
-      //   {
-      //     title: 'Комментарий к интересу',
-      //     Component: TextArea,
-      //     props: {
-      //       name: 'tbxCommentLead',
-      //       valueName: 'commentLead'
-      //     }
-      //   },
+
+      /** */
+      {
+        divider: { empty: true },
+      },
+      /** */
+
       {
         title: 'Пересчет без пересмотра',
         Component: Switch,
@@ -174,12 +230,12 @@ export default [
           name: 'cbxRecalcWthtRevision',
           valueName: 'recalcWthtRevision',
         },
-        newLine: true,
       },
       {
         Component: Button,
         props: {
           type: 'primary',
+          size: 'large',
           name: 'btnCreateLead',
           text: 'Создать интерес',
           onClick: undefined,

src/client/Elements/Button.jsx

@@ -4,16 +4,17 @@ import { Status } from 'core/types/elements';
 import React from 'react';
 import colors from 'client/UIKit/colors';
 
-const Button = ({ type, name, text, onClick }) => {
+const Button = ({ type, size, name, text, onClick }) => {
   const { status } = useStatus(name);
 
   return (
     <AntButton
       style={{
         backgroundColor: colors.primary[0],
-        borderColor: colors.primary[0]
+        borderColor: colors.primary[0],
       }}
       type={type}
+      size={size}
       disabled={status === Status.Disabled}
       onClick={onClick}
     >

src/client/Elements/Divider.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Tabs, Divider as AntDivider } from 'antd';
+
+const EmptyDivider = styled.div`
+  width: 100%;
+  margin: 3px 0;
+`;
+
+const Divider = ({ title, empty }) => {
+  if (empty) {
+    return <EmptyDivider />;
+  }
+  return <AntDivider>{title}</AntDivider>;
+};
+
+export default Divider;

src/client/Elements/TextArea.jsx

@@ -21,7 +21,7 @@ const TextArea = ({
   return (
     <AntInput.TextArea
       style={{
-        height: '200px',
+        height: '150px',
       }}
       disabled={status === Status.Disabled}
       readOnly={readonly}

src/client/hocs/withTitle.jsx

@@ -4,9 +4,9 @@ import { Flex } from 'client/UIKit/grid';
 import styled from 'styled-components';
 
 const Title = styled.h5`
-  color: rgba(0, 0, 0, 0.85);
+  color: rgba(0, 0, 0, 0.75);
   font-weight: 600;
-  font-size: 15px;
+  font-size: 14px;
   line-height: 1.5;
   margin: 0 0 3px 0;
 `;