From 0511c678db433d382f28f73683496c2c2f9151ab Mon Sep 17 00:00:00 2001
From: Oleksiy Kachynskyy <oleksiy.kachynskyy@gmail.com>
Date: Wed, 8 Apr 2020 09:39:40 +0300
Subject: [PATCH] feat: add gray color to theme

---
 src/components/CallbackSamples/CallbackSamples.tsx |  2 +-
 src/components/Callbacks/CallbacksList.tsx         |  4 ++--
 src/components/Callbacks/styled.elements.ts        |  8 ++------
 src/components/Responses/ResponsesList.tsx         |  4 ++--
 src/theme.ts                                       | 10 ++++++++++
 5 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/components/CallbackSamples/CallbackSamples.tsx b/src/components/CallbackSamples/CallbackSamples.tsx
index 3d5ab2bf..c86e081c 100644
--- a/src/components/CallbackSamples/CallbackSamples.tsx
+++ b/src/components/CallbackSamples/CallbackSamples.tsx
@@ -53,7 +53,7 @@ export class CallbackSamples extends React.Component<CallbackSamplesProps> {
     return (
       (hasSamples && (
         <div>
-          <RightPanelHeader> Callback request samples </RightPanelHeader>
+          <RightPanelHeader> Callback payload samples </RightPanelHeader>
 
           <SamplesWrapper>
             <GenericDropdown
diff --git a/src/components/Callbacks/CallbacksList.tsx b/src/components/Callbacks/CallbacksList.tsx
index 604bffed..c27d6bf6 100644
--- a/src/components/Callbacks/CallbacksList.tsx
+++ b/src/components/Callbacks/CallbacksList.tsx
@@ -31,11 +31,11 @@ export class CallbacksList extends React.PureComponent<CallbacksListProps> {
   }
 }
 
-// TODO: get text color and font size from the theme?
+// TODO: get font size from the theme?
 const CallbacksHeader = styled.h3`
   font-size: 18px;
   padding: 0.2em 0;
   margin: 3em 0 1.1em;
-  color: #253137;
+  color: ${({ theme }) => theme.colors.text.primary};
   font-weight: normal;
 `;
diff --git a/src/components/Callbacks/styled.elements.ts b/src/components/Callbacks/styled.elements.ts
index e0b077f4..87c7586c 100644
--- a/src/components/Callbacks/styled.elements.ts
+++ b/src/components/Callbacks/styled.elements.ts
@@ -1,22 +1,18 @@
 import styled from '../../styled-components';
 import { CallbackTitle } from './CallbackTitle';
 
-// TODO: get 'background-color' from theme
-// e.g. "theme.colors.secondary.main" or "theme.colors.callbacks.background.main"
 export const StyledCallbackTitle = styled(CallbackTitle)`
   padding: 10px;
   border-radius: 2px;
   margin-bottom: 4px;
   line-height: 1.5em;
-  background-color: #f2f2f2;
+  background-color: ${({ theme }) => theme.colors.gray.A50};
   cursor: pointer;
 `;
 
-// TODO: get 'background-color' from theme
-// e.g. "theme.colors.secondary.light" or "theme.colors.callbacks.background.light"
 export const CallbackDetailsWrap = styled.div`
   padding: 10px 25px;
-  background-color: #fafafa;
+  background-color: ${({ theme }) => theme.colors.gray[50]};
   margin-bottom: 5px;
   margin-top: 5px;
 `;
diff --git a/src/components/Responses/ResponsesList.tsx b/src/components/Responses/ResponsesList.tsx
index 1b23be7a..8f77c4c7 100644
--- a/src/components/Responses/ResponsesList.tsx
+++ b/src/components/Responses/ResponsesList.tsx
@@ -3,12 +3,12 @@ import { ResponseModel } from '../../services/models';
 import styled from '../../styled-components';
 import { ResponseView } from './Response';
 
-// TODO: get text color and font size from the theme?
+// TODO: get font size from the theme?
 const ResponsesHeader = styled.h3`
   font-size: 18px;
   padding: 0.2em 0;
   margin: 3em 0 1.1em;
-  color: #253137;
+  color: ${({ theme }) => theme.colors.text.primary};
   font-weight: normal;
 `;
 
diff --git a/src/theme.ts b/src/theme.ts
index 3181808a..2a99e36e 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -37,6 +37,11 @@ const defaultTheme: ThemeInterface = {
       dark: ({ colors }) => darken(colors.tonalOffset, colors.error.main),
       contrastText: ({ colors }) => readableColor(colors.error.main),
     },
+    gray: {
+      50: '#fafafa',
+      A50: '#f2f2f2',
+      A200: '#aaaaaa',
+    },
     text: {
       primary: '#333333',
       secondary: ({ colors }) => lighten(colors.tonalOffset, colors.text.primary),
@@ -229,6 +234,11 @@ export interface ResolvedThemeInterface {
     success: ColorSetting;
     warning: ColorSetting;
     error: ColorSetting;
+    gray: {
+      50: string;
+      A50: string;
+      A200: string;
+    };
     border: {
       light: string;
       dark: string;