added send button

src/common-elements/buttons.ts

@@ -0,0 +1,14 @@
+import styled, { StyledComponentClass, withProps } from '../styled-components';
+
+
+export const Button = styled.button`
+  background: #248fb2;
+  border-radius: 0px;
+  border: none;
+  color: white;
+  font-size: 0.929em;
+`;
+
+export const SendButton = Button.extend`
+  background: #B0045E;
+`;

src/common-elements/panels.ts

@@ -4,7 +4,7 @@ export const MiddlePanel = styled.div`
   width: calc(100% - ${props => props.theme.rightPanel.width});
   padding: ${props => props.theme.spacingUnit * 2}px;
 
-  ${media.lessThan('medium')`
+  ${media.lessThan('medium') `
     width: 100%;
   `};
 `;
@@ -15,7 +15,7 @@ export const RightPanel = styled.div`
   background-color: ${props => props.theme.rightPanel.backgroundColor};
   padding: ${props => props.theme.spacingUnit * 2}px;
 
-  ${media.lessThan('medium')`
+  ${media.lessThan('medium') `
     width: 100%;
   `};
 `;
@@ -25,7 +25,7 @@ export const DarkRightPanel = RightPanel.extend`
 `;
 
 export const EmptyDarkRightPanel = DarkRightPanel.extend`
-  ${media.lessThan('medium')`
+  ${media.lessThan('medium') `
     padding: 0
   `};
 `;
@@ -34,7 +34,13 @@ export const Row = styled.div`
   display: flex;
   width: 100%;
 
-  ${media.lessThan('medium')`
+  ${media.lessThan('medium') `
     flex-direction: column;
   `};
 `;
+
+export const FlexLayout = styled.div`
+  align-items: flex-end;
+  display: flex;
+  width: 100%;
+`;

src/components/Console/ConsoleEditor.tsx

@@ -33,7 +33,7 @@ export class ConsoleEditor extends React.Component<ConsoleEditorProps> {
     for (let mediaType of mediaTypes) {
       if (mediaType.name.indexOf('json') > -1) {
         if (mediaType.examples) {
-          sample = mediaType.examples && mediaType.examples.default;
+          sample = mediaType.examples && mediaType.examples.default && mediaType.examples.default.value;
         }
         break;
       }
@@ -51,12 +51,11 @@ export class ConsoleEditor extends React.Component<ConsoleEditorProps> {
     */
     return (
       <div>
-        <h3>ConsoleEditor</h3>
         <AceEditor
           tabSize={1}
           fontSize={10}
           mode="json"
-          theme="monokai"
+          theme="github"
           name="request-builder-editor"
           editorProps={{ $blockScrolling: true }}
           value={JSON.stringify(sample, null, 2)}

src/components/Console/ConsoleViewer.tsx

@@ -3,6 +3,8 @@ import * as React from 'react';
 import { OperationModel } from '../../services/models';
 import { PayloadSamples } from '../PayloadSamples/PayloadSamples';
 import { SourceCodeWithCopy } from '../SourceCode/SourceCode';
+import { SendButton } from '../../common-elements/buttons';
+import { FlexLayout } from '../../common-elements/panels';
 import { ConsoleEditor } from './ConsoleEditor';
 
 export interface ConsoleViewerProps {
@@ -30,6 +32,9 @@ export class ConsoleViewer extends React.Component<ConsoleViewerProps> {
         {samples.map(sample => (
           <SourceCodeWithCopy lang={sample.lang} source={sample.source} />
         ))}
+        <FlexLayout>
+          <SendButton>Send Request</SendButton>
+        </FlexLayout>
       </div>
     );
   }