UI fixes

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

@@ -5,10 +5,8 @@ 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 flex="0.5 0 20rem" justifyContent="center">
+    <Title text="Результаты" />
   </Background>
 );
 

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

@@ -5,20 +5,22 @@ import React from 'react';
 import styled from 'styled-components';
 import SectionsList from './list';
 import withTitle from 'client/hocs/withTitle';
+import mq from 'client/UIKit/mq';
 
 const { TabPane } = Tabs;
 
 const InputWrapper = styled(Box)`
-  width: 200px;
-  margin-horizontal: 10px;
+  width: 100%;
+  ${mq.desktop`width:200px`}
+  margin: 8px 8px;
 `;
 
 const Sections = props => (
-  <Background flex="3 0 25em">
+  <Background flex="3 1 25rem">
     <Tabs type="line">
       {SectionsList.map(({ title, elements }, i) => (
         <TabPane tab={title} key={i}>
-          <Flex alignItems="flex-end">
+          <Flex alignItems="flex-end" flexWrap="wrap">
             {elements.map(({ title, Component, props }, ie) => {
               return (
                 <InputWrapper key={ie}>

src/client/Elements/Background.jsx

@@ -2,7 +2,7 @@ import colors from 'client/UIKit/colors';
 import { Box, Flex } from 'client/UIKit/grid';
 import styled from 'styled-components';
 
-const Background = styled(Box)`
+const Background = styled(Flex)`
   background: ${colors.white[0]};
   margin: 10px 10px;
   padding: 10px 18px;

src/client/Elements/Button.jsx

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

src/client/Elements/TextArea.jsx

@@ -20,6 +20,9 @@ const TextArea = ({
 
   return (
     <AntInput.TextArea
+      style={{
+        height: '200px',
+      }}
       disabled={status === Status.Disabled}
       readOnly={readonly}
       placeholder={placeholder}

src/client/UIKit/colors.js

@@ -1,97 +1,36 @@
 export default {
   black: {
-    0: "#000000",
-    100: "#121212",
-    200: "#242424",
-    300: "#373737",
-    400: "#494949",
-    500: "#5B5B5B",
+    0: '#000000',
+    100: '#121212',
+    200: '#242424',
+    300: '#373737',
+    400: '#494949',
+    500: '#5B5B5B'
   },
 
   white: {
-    0: "#FFFFFF",
-    100: "#EDEDED",
-    200: "#DBDBDB",
-    300: "#C8C8C8",
-    400: "#B6B6B6",
-    500: "#A4A4A4",
+    0: '#FFFFFF',
+    100: '#EDEDED',
+    200: '#DBDBDB',
+    300: '#C8C8C8',
+    400: '#B6B6B6',
+    500: '#A4A4A4'
   },
   gray: {
-    0: "#A1A1A1",
-    100: "#959595",
-    200: "#8A8A8A",
-    300: "#7E7E7E",
-    400: "#737373",
-    500: "#676767",
-    600: "#5C5C5C",
-    700: "#505050",
-    800: "#454545",
-    900: "#393939",
-    1000: "#2E2E2E",
-    1100: "#222222",
-  },
-  violet: {
-    shades: {
-      0: "#A200FF",
-      100: "#9600ED",
-      200: "#8A00DB",
-      300: "#7F00C8",
-      400: "#7300B6",
-      500: "#6800A4",
-      600: "#5C0092",
-      700: "#510080",
-      800: "#45006D",
-      900: "#3A005B",
-      1000: "#2E0049",
-      1100: "#230037",
-      1200: "#170024",
-    },
-    tints: {
-      0: "#A200FF",
-      100: "#A812FF",
-      200: "#AF24FF",
-      300: "#B637FF",
-      400: "#BC49FF",
-      500: "#C35BFF",
-      600: "#CA6DFF",
-      700: "#D080FF",
-      800: "#D792FF",
-      900: "#DEA4FF",
-      1000: "#E4B6FF",
-      1100: "#EBC8FF",
-      1200: "#F2DBFF",
-    },
-  },
-  blue: {
-    shades: {
-      0: "#2900BF",
-      100: "#2600AF",
-      200: "#2300A2",
-      300: "#200094",
-      400: "#1D0087",
-      500: "#1A0079",
-      600: "#17006C",
-      700: "#14005E",
-      800: "#120051",
-      900: "#0F0043",
-      1000: "#0C0036",
-      1100: "#090028",
-      1200: "#06001B",
-    },
-    tints: {
-      0: "#2900BF",
-      100: "#2E00D4",
-      200: "#3300EB",
-      300: "#3903FF",
-      400: "#4B1AFF",
-      500: "#5D30FF",
-      600: "#6F47FF",
-      700: "#815EFF",
-      800: "#9375FF",
-      900: "#A58CFF",
-      1000: "#B7A3FF",
-      1100: "#C9BAFF",
-      1200: "#DBD1FF",
-    },
+    0: '#A1A1A1',
+    100: '#959595',
+    200: '#8A8A8A',
+    300: '#7E7E7E',
+    400: '#737373',
+    500: '#676767',
+    600: '#5C5C5C',
+    700: '#505050',
+    800: '#454545',
+    900: '#393939',
+    1000: '#2E2E2E',
+    1100: '#222222'
   },
+  primary: {
+    0: '#1C01A9'
+  }
 };

src/client/hocs/withTitle.jsx

@@ -12,7 +12,7 @@ const Title = styled.h5`
 `;
 
 const withTitle = title => Component => props => (
-  <Flex flexDirection="column" mx="5px" my="5px">
+  <Flex flexDirection="column">
     <Title level={5}>{title}</Title>
     <Component {...props} />
   </Flex>