UI refactor

src/client/Components/Result.tsx

@@ -1,3 +1,6 @@
-import React from "react";
+import React from 'react';
+import { Result, Button } from 'antd';
 
-export const NotFound = () => <div>404 Not Found</div>;
+export const NotFound = () => (
+  <Result status="404" title="404" subTitle="Ой! Тут ничего нет." />
+);

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Divider } from 'antd';
+import Background from 'client/Elements/Background';
+import Title from 'client/Elements/Title';
+import { Flex } from 'client/UIKit/grid';
+
+const Results = props => (
+  <Background flex="0.5 0 25em">
+    <Flex justifyContent="center">
+      <Title text="Результаты" />
+    </Flex>
+  </Background>
+);
+
+export default Results;

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

@@ -0,0 +1,35 @@
+import { Tabs } from 'antd';
+import Background from 'client/Elements/Background';
+import { Box, Flex } from 'client/UIKit/grid';
+import React from 'react';
+import styled from 'styled-components';
+import SectionsList from './list';
+
+const { TabPane } = Tabs;
+
+const InputWrapper = styled(Box)`
+  width: 200px;
+  margin-horizontal: 10px;
+`;
+
+const Sections = props => (
+  <Background flex="3 0 25em">
+    <Tabs type="line">
+      {SectionsList.map(({ title, elements }, i) => (
+        <TabPane tab={title} key={i}>
+          <Flex>
+            {elements.map(({ Component, props }, ie) => {
+              return (
+                <InputWrapper key={ie}>
+                  <Component {...props} />
+                </InputWrapper>
+              );
+            })}
+          </Flex>
+        </TabPane>
+      ))}
+    </Tabs>
+  </Background>
+);
+
+export default Sections;

src/client/Containers/Calculation/index.jsx

@@ -1,41 +1,15 @@
-import { Tabs } from 'antd';
-import Background from 'client/Elements/Background';
-import { Box, Flex } from 'client/UIKit/grid';
+import { Flex } from 'client/UIKit/grid';
 import React from 'react';
-import Sections from './Sections';
-import styled from 'styled-components';
-
-const { TabPane } = Tabs;
-
-const InputWrapper = styled(Box)`
-  width: 200px;
-  margin-horizontal: 10px;
-`;
+import Results from './Results';
+import SectionsList from './Sections';
 
 const Calculation = () => {
   return (
     <Flex flexWrap="wrap">
-      <Background flex="3 0 25em">
-        <Tabs type="line">
-          {Sections.map(({ title, elements }, i) => (
-            <TabPane tab={title} key={i}>
-              <Flex>
-                {elements.map(({ Component, props }, ie) => {
-                  return (
-                    <InputWrapper key={ie}>
-                      <Component {...props} />
-                    </InputWrapper>
-                  );
-                })}
-              </Flex>
-            </TabPane>
-          ))}
-        </Tabs>
-      </Background>
-      <Background flex="0.5 0 25em">Results</Background>
+      <SectionsList />
+      <Results />
     </Flex>
   );
 };
 
-// export default observer(Calculation);
 export default Calculation;

src/client/Elements/Button.jsx

@@ -0,0 +1,16 @@
+import { Button as AntButton } from 'antd';
+import { useStatus } from 'client/hooks/useStatus';
+import { Status } from 'core/types/elements';
+import React from 'react';
+
+const Button = ({ name, text, onClick }) => {
+  const { status } = useStatus(name);
+
+  return (
+    <AntButton disabled={status === Status.Disabled} onClick={onClick}>
+      {text}
+    </AntButton>
+  );
+};
+
+export default Button;

src/client/Elements/Title.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const TitleText = styled.div`
+  font-size: 1.3rem;
+  font-weight: 500;
+`;
+
+const Title = ({ text }) => <TitleText>{text}</TitleText>;
+
+export default Title;