From 948c38d68b793d247e65097fae1bfa51acf66a8d Mon Sep 17 00:00:00 2001
From: Chika <djchikalkin@gmail.com>
Date: Tue, 1 Sep 2020 21:47:11 +0300
Subject: [PATCH] layout styles

---
 src/client/Containers/Calculation/index.jsx | 43 +++++++++++----------
 src/client/Elements/Background.jsx          |  7 ++--
 2 files changed, 27 insertions(+), 23 deletions(-)

diff --git a/src/client/Containers/Calculation/index.jsx b/src/client/Containers/Calculation/index.jsx
index 98d503b..4a27345 100644
--- a/src/client/Containers/Calculation/index.jsx
+++ b/src/client/Containers/Calculation/index.jsx
@@ -1,30 +1,33 @@
+import { Tabs } from 'antd';
 import Background from 'client/Elements/Background';
-import React, { useState } from 'react';
+import { Box, Flex } from 'client/UIKit/grid';
+import React from 'react';
 import Sections from './Sections';
 
-import { Tabs } from 'antd';
-import { Box, Flex } from 'client/UIKit/grid';
 const { TabPane } = Tabs;
 
 const Calculation = () => {
   return (
-    <Background>
-      <Tabs type="line">
-        {Sections.map(({ title, elements }, i) => (
-          <TabPane tab={title} key={i}>
-            <Flex>
-              {elements.map(({ Component, props }, ie) => {
-                return (
-                  <Box width="250px" my="10px" key={ie}>
-                    <Component {...props} />
-                  </Box>
-                );
-              })}
-            </Flex>
-          </TabPane>
-        ))}
-      </Tabs>
-    </Background>
+    <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 (
+                    <Box width="250px" my="10px" key={ie}>
+                      <Component {...props} />
+                    </Box>
+                  );
+                })}
+              </Flex>
+            </TabPane>
+          ))}
+        </Tabs>
+      </Background>
+      <Background flex="0.5 0 25em">Results</Background>
+    </Flex>
   );
 };
 
diff --git a/src/client/Elements/Background.jsx b/src/client/Elements/Background.jsx
index 1c147ea..17a9f4a 100644
--- a/src/client/Elements/Background.jsx
+++ b/src/client/Elements/Background.jsx
@@ -1,12 +1,13 @@
-import colors from "client/UIKit/colors";
-import { Box, Flex } from "client/UIKit/grid";
-import styled from "styled-components";
+import colors from 'client/UIKit/colors';
+import { Box, Flex } from 'client/UIKit/grid';
+import styled from 'styled-components';
 
 const Background = styled(Box)`
   background: ${colors.white[0]};
   margin: 10px 10px;
   padding: 10px 18px;
   box-shadow: 4px 5px 17px -11px rgba(0, 0, 0, 0.75);
+  flex: ${props => props.flex};
 `;
 
 export default Background;