feat: add gray color to theme

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

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;
 `;

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;
 `;

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;
 `;
 

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;