colorize secondary Text

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 && (

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]};
+`;