From 46fd88c08805d54202b32e4e57ae36fd9372e44e Mon Sep 17 00:00:00 2001
From: Chika <djchikalkin@gmail.com>
Date: Tue, 8 Sep 2020 16:27:49 +0300
Subject: [PATCH] colorize secondary Text

---
 src/client/Containers/Calculation/Sections/index.jsx | 12 +++++++++---
 src/client/Elements/Text.jsx                         |  4 ++++
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/client/Containers/Calculation/Sections/index.jsx b/src/client/Containers/Calculation/Sections/index.jsx
index 9a65a0b..1fb8923 100644
--- a/src/client/Containers/Calculation/Sections/index.jsx
+++ b/src/client/Containers/Calculation/Sections/index.jsx
@@ -1,6 +1,6 @@
 import { Divider as AntDivider, Tabs } from 'antd';
 import Background from 'client/Elements/Background';
-import { SecondaryText } from 'client/Elements/Text';
+import { SecondaryText, SecondaryColoredText } from 'client/Elements/Text';
 import { Flex, Box } from 'client/UIKit/grid';
 import React from 'react';
 import styled from 'styled-components';
@@ -30,6 +30,10 @@ const VerticalDivider = styled.div`
   `}
 `;
 
+const BlockWrapper = styled.div`
+  border: 1px solid black;
+`;
+
 const renderElements = ({ elements }) => {
   return elements.map((element, ie) => {
     const { title: elementTitle, Component, props: elementProps } = element;
@@ -64,9 +68,11 @@ const renderBlocks = ({ blocks }) => {
             '3 0 30%',
           ]}
           mx="10px"
-          my="5px"
+          my="15px"
         >
-          {blockTitle && <SecondaryText>{blockTitle}</SecondaryText>}
+          {blockTitle && (
+            <SecondaryColoredText>{blockTitle}</SecondaryColoredText>
+          )}
           {renderElements({ elements })}
         </Flex>
         {/* {!isSingleElement && blocks.length > 1 && ib < blocks.length - 2 && (
diff --git a/src/client/Elements/Text.jsx b/src/client/Elements/Text.jsx
index 086ecb0..30b8a2b 100644
--- a/src/client/Elements/Text.jsx
+++ b/src/client/Elements/Text.jsx
@@ -19,3 +19,7 @@ export const PrimaryText = styled.p`
 export const SecondaryText = styled(PrimaryText)`
   color: ${colors.black[500]};
 `;
+
+export const SecondaryColoredText = styled(SecondaryText)`
+  color: ${colors.blueTemp[300]};
+`;