styles

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

@@ -25,6 +25,7 @@ export default [
         name: 'total',
         Component: withTitle('Total')(Input),
         props: {
+          readonly: true,
           computedValue: 'total'
         }
       }

src/client/Containers/Calculation/index.jsx

@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 import Sections from './Sections';
 
 import { Tabs } from 'antd';
-import { Box } from 'client/UIKit/grid';
+import { Box, Flex } from 'client/UIKit/grid';
 const { TabPane } = Tabs;
 
 const Calculation = () => {
@@ -12,13 +12,15 @@ const Calculation = () => {
       <Tabs type="line">
         {Sections.map(({ title, elements }, i) => (
           <TabPane tab={title} key={i}>
-            {elements.map(({ Component, props }, ie) => {
-              return (
-                <Box width="250px" my="10px" key={ie}>
-                  <Component {...props} />
-                </Box>
-              );
-            })}
+            <Flex>
+              {elements.map(({ Component, props }, ie) => {
+                return (
+                  <Box width="250px" my="10px" key={ie}>
+                    <Component {...props} />
+                  </Box>
+                );
+              })}
+            </Flex>
           </TabPane>
         ))}
       </Tabs>

src/client/Elements/Input.jsx

@@ -28,6 +28,7 @@ const Input = ({ readonly, placeholder, bindedValueName, computedValue }) => {
 
   return (
     <AntInput
+      disabled={readonly}
       placeholder={placeholder}
       value={computedValue ? calculationStore[computedValue]() : currentValue}
       onChange={e => {

src/client/hocs/withTitle.jsx

@@ -1,9 +1,19 @@
-import React from "react";
-import { Flex } from "client/UIKit/grid";
+import React from 'react';
+import { Flex } from 'client/UIKit/grid';
 
-const withTitle = (title) => (Component) => (props) => (
-  <Flex flexDirection="column">
-    <div>{title}</div>
+import styled from 'styled-components';
+
+const Title = styled.h5`
+  color: rgba(0, 0, 0, 0.85);
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 1.5;
+  margin: 0 0 2px 0;
+`;
+
+const withTitle = title => Component => props => (
+  <Flex flexDirection="column" mx="5px" my="5px">
+    <Title level={5}>{title}</Title>
     <Component {...props} />
   </Flex>
 );