change color for development

craco.config.js

@@ -8,11 +8,11 @@ module.exports = {
       options: {
         lessLoaderOptions: {
           lessOptions: {
-            modifyVars: { '@primary-color': colors.blue[0] },
+            modifyVars: { '@primary-color': colors.primaryColor },
-            javascriptEnabled: true
+            javascriptEnabled: true,
-          }
+          },
-        }
+        },
-      }
+      },
-    }
+    },
-  ]
+  ],
 };

src/client/Containers/Calculation/lib/renderSections.js

@@ -77,7 +77,12 @@ export const renderGroups = ({ groups }) => {
     return (
       <React.Fragment key={ig}>
         {blocksTitle && (
-          <AntDivider style={{ margin: '16px 0', color: colors.blueTemp[100] }}>
+          <AntDivider
+            style={{
+              margin: '16px 0',
+              color: colors.primaryColor,
+            }}
+          >
             {blocksTitle}
           </AntDivider>
         )}

src/client/Elements/Text.jsx

@@ -12,5 +12,5 @@ export const SecondaryText = styled(PrimaryText)`
 `;
 
 export const SecondaryColoredText = styled(SecondaryText)`
-  color: ${colors.blueTemp[300]};
+  color: ${colors.secondaryColor};
 `;

src/client/Layout/index.jsx

@@ -1,4 +1,5 @@
 import paths from 'client/common/paths';
+import Spinner from 'client/Components/Spinner';
 import colors from 'client/UIKit/colors';
 import { Box, Flex } from 'client/UIKit/grid';
 import mq from 'client/UIKit/mq';
@@ -6,13 +7,12 @@ import React, { Suspense } from 'react';
 import { Route, Switch } from 'react-router-dom';
 import styled from 'styled-components';
 import Logo from './Logo';
-import Spinner from 'client/Components/Spinner';
 
 const HeaderContent = styled(Flex)`
   background: ${`linear-gradient(90deg,
-  ${colors.blueTemp[0]} 0%,
+  ${colors.primaryColor} 0%,
-  ${colors.blueTemp[300]} 50%,
+  ${colors.secondaryColor} 50%,
-  ${colors.blueTemp[600]} 100%)`};
+  ${colors.tertiaryColor} 100%)`};
 
   height: 45px;
   ${mq.tablet`

src/client/UIKit/colors.js

@@ -1,6 +1,7 @@
+const { isDevelopment } = require('core/tools/environment');
 const createColorProxy = require('./lib/createColorProxy');
 
-module.exports = {
+const colors = {
   black: createColorProxy(
     {
       0: '#000000',
@@ -82,5 +83,12 @@ module.exports = {
     },
     'blue',
     '#1C01A9'
-  )
+  ),
+};
+
+module.exports = {
+  ...colors,
+  primaryColor: isDevelopment ? colors.blueTemp[500] : colors.blue[0],
+  secondaryColor: isDevelopment ? colors.blueTemp[600] : colors.blueTemp[300],
+  tertiaryColor: isDevelopment ? colors.blueTemp[200] : colors.blueTemp[600],
 };

src/core/tools/environment.js

@@ -0,0 +1,2 @@
+export const isDevelopment =
+  process.env.NODE_ENV === 'development' || process.env.crm !== 'prod';