From cc791d8313bd56cd521936a2a3ff24b9a4069d21 Mon Sep 17 00:00:00 2001 From: Chika Date: Wed, 2 Sep 2020 22:56:40 +0300 Subject: [PATCH] UI fixes --- .../Containers/Calculation/Results/index.jsx | 6 +- .../Containers/Calculation/Sections/index.jsx | 10 +- src/client/Elements/Background.jsx | 2 +- src/client/Elements/Button.jsx | 13 +- src/client/Elements/TextArea.jsx | 3 + src/client/UIKit/colors.js | 115 ++++-------------- src/client/hocs/withTitle.jsx | 2 +- 7 files changed, 51 insertions(+), 100 deletions(-) diff --git a/src/client/Containers/Calculation/Results/index.jsx b/src/client/Containers/Calculation/Results/index.jsx index 3600659..73747c9 100644 --- a/src/client/Containers/Calculation/Results/index.jsx +++ b/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 => ( - - - - </Flex> + <Background flex="0.5 0 20rem" justifyContent="center"> + <Title text="Результаты" /> </Background> ); diff --git a/src/client/Containers/Calculation/Sections/index.jsx b/src/client/Containers/Calculation/Sections/index.jsx index 6d8ce7e..f565a6f 100644 --- a/src/client/Containers/Calculation/Sections/index.jsx +++ b/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}> diff --git a/src/client/Elements/Background.jsx b/src/client/Elements/Background.jsx index 17a9f4a..8f59f5a 100644 --- a/src/client/Elements/Background.jsx +++ b/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; diff --git a/src/client/Elements/Button.jsx b/src/client/Elements/Button.jsx index aedea2a..c6854a0 100644 --- a/src/client/Elements/Button.jsx +++ b/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> ); diff --git a/src/client/Elements/TextArea.jsx b/src/client/Elements/TextArea.jsx index 5c6ab5e..a3dbc98 100644 --- a/src/client/Elements/TextArea.jsx +++ b/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} diff --git a/src/client/UIKit/colors.js b/src/client/UIKit/colors.js index 74cf864..f75816b 100644 --- a/src/client/UIKit/colors.js +++ b/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' + } }; diff --git a/src/client/hocs/withTitle.jsx b/src/client/hocs/withTitle.jsx index be65ac9..1742335 100644 --- a/src/client/hocs/withTitle.jsx +++ b/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}