feat(Try it out): Request editor in console mode redesigned

src/common-elements/buttons.ts

@@ -9,12 +9,15 @@ export const Button = styled.button`
   padding: 5px;
 `;
 
-export const SendButton = styled(Button)`
-  background: #B0045E;
-`;
-
-export const ConsoleButton = styled(Button)`
-  background: #e2e2e2;
-  color: black;
-  float: right;
+export const SubmitButton = styled(Button)`
+  background: ${props => props.theme.colors.primary.main}
+  padding: 10px 30px;
+  border-radius: 4px;
+  cursor: pointer;
+  text-align: center;
+  outline: none;
+  margin: 1em 0;
+  min-width: 60px;
+  font-weight: bold;
+  order: 1;
 `;

src/common-elements/panels.ts

@@ -80,10 +80,6 @@ export const FlexLayout = styled.div`
   width: 100%;
 `;
 
-export const ConsoleActionsRow = styled(FlexLayout)`
-  padding: 5px 0px;
-`;
-
 export const FlexLayoutReverse = styled(FlexLayout)`
   flex-direction: row-reverse;
 `;

src/components/Console/ConsoleEditor.tsx

@@ -9,6 +9,7 @@ import 'brace/theme/github';
 import 'brace/theme/monokai';
 
 import {MediaTypeModel} from '../../services/models';
+import {ConsoleEditorWrapper} from './ConsoleEditorWrapper';
 
 export interface ConsoleEditorProps {
   mediaTypes: MediaTypeModel[];
@@ -37,7 +38,7 @@ export class ConsoleEditor extends React.Component<ConsoleEditorProps> {
     }
 
     return (
-      <div>
+      <ConsoleEditorWrapper>
         <AceEditor
           setOptions={{
             enableBasicAutocompletion: true,
@@ -46,17 +47,14 @@ export class ConsoleEditor extends React.Component<ConsoleEditorProps> {
             showLineNumbers: true,
             tabSize: 2,
           }}
-          fontSize={10}
+          fontSize={15}
           mode="json"
-          theme="monokai"
           name="request-builder-editor"
           editorProps={{ $blockScrolling: true }}
           value={JSON.stringify(sample, null, 2)}
           ref={(ace: AceEditor) => (this.editor = ace)}
-          width="100%"
-          height="400px"
         />
-      </div>
+      </ConsoleEditorWrapper>
     );
   }
 

src/components/Console/ConsoleEditorWrapper.ts

@@ -0,0 +1,75 @@
+import {lighten} from 'polished';
+import {styled} from '../../index';
+
+export const ConsoleEditorWrapper = styled.div`
+  font-family: ${props => props.theme.typography.code.fontFamily};
+  font-size: ${props => props.theme.typography.code.fontSize} !important;
+  direction: ltr;
+  white-space: ${({ theme }) => (theme.typography.code.wrap ? 'pre-wrap' : 'pre')};
+  contain: content;
+  overflow-x: auto;
+  background: #11171a !important;
+  padding: 5px 0;
+
+  & .ace_editor {
+    background: #11171a !important;
+    width: 100% !important;
+  }
+  & .ace_editor .ace_marker-layer .ace_selection {
+    background: ${lighten(0.05, '#11171a')} !important;
+  }
+  & .ace_editor .ace_marker-layer .ace_active-line {
+    background: rgba(0, 0, 0, 0.2);
+  }
+  & .ace_editor .ace_line, & .ace_editor .ace_cursor {
+    color: #aaa;
+  }
+  & .ace_editor .ace_marker-layer .ace_bracket {
+    border: none !important;
+  }
+  & .ace_editor .ace_line .ace_fold {
+    background: none !important;
+    color: #aaa;
+  }
+  & .ace_editor .ace_line .ace_fold:hover {
+    background: none !important;
+  }
+  & .ace_editor .ace_string {
+    color: #71e4ff;
+  }
+  & .ace_editor .ace_variable {
+    color: #a0fbaa;
+  }
+  & .ace_editor .ace_indent-guide {
+    background: none;
+    color: rgba(255, 255, 255, 0.3)
+  }
+  & .ace_editor .ace_indent-guide::after {
+    content: "|";
+  }
+  & .ace_editor .ace_gutter {
+    background: ${lighten(0.01, '#11171a')} !important;
+    color: #fff !important;
+  }
+  & .ace_editor .ace_gutter .ace_fold-widget {
+    background-image: none;
+  }
+  & .ace_editor .ace_gutter .ace_fold-widget.ace_open::after {
+    content: "-";
+  }
+  & .ace_editor .ace_gutter .ace_fold-widget.ace_closed::after {
+    content: "+";
+  }
+  & .ace_editor .ace_gutter .ace_gutter-active-line {
+    background: rgba(0, 0, 0, 0.2) !important;
+  }
+  & .ace_editor .ace_gutter .ace_gutter-cell.ace_error {
+    background: none !important;
+  }
+  & .ace_editor .ace_gutter .ace_gutter-cell.ace_error::before {
+    position: absolute;
+    color: red;
+    content: "X";
+    left: 0.5em;
+  }
+`;

src/components/Console/ConsoleViewer.tsx

@@ -1,7 +1,7 @@
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { SendButton } from '../../common-elements/buttons';
-import { ConsoleActionsRow } from '../../common-elements/panels';
+import { SubmitButton } from '../../common-elements/buttons';
+import { FlexLayoutReverse } from '../../common-elements/panels';
 import { FieldModel, OperationModel } from '../../services/models';
 import { OpenAPISchema } from '../../types';
 import { SourceCodeWithCopy } from '../SourceCode/SourceCode';
@@ -30,7 +30,7 @@ export class ConsoleViewer extends React.Component<ConsoleViewerProps, ConsoleVi
   operation: OperationModel;
   additionalHeaders: object;
   visited = new Set();
-  private consoleEditor: ConsoleEditor;
+  private consoleEditor: any;
 
   constructor(props) {
     super(props);
@@ -158,19 +158,19 @@ export class ConsoleViewer extends React.Component<ConsoleViewerProps, ConsoleVi
     const { result } = this.state;
     return (
       <div>
-        <h3> Console </h3>
+        <h3> Request </h3>
         {hasBodySample && (
           <ConsoleEditor
             mediaTypes={mediaTypes}
-            ref={(editor: ConsoleEditor) => (this.consoleEditor = editor)}
+            ref={(editor: any) => (this.consoleEditor = editor)}
           />
         )}
         {false && samples.map(sample => (
           <SourceCodeWithCopy lang={sample.lang} source={sample.source} />
         ))}
-        <ConsoleActionsRow>
-          <SendButton onClick={this.onClickSend} >Send Request</SendButton>
-        </ConsoleActionsRow>
+        <FlexLayoutReverse>
+          <SubmitButton onClick={this.onClickSend} >Send Request</SubmitButton>
+        </FlexLayoutReverse>
         {result &&
           <SourceCodeWithCopy lang="json" source={JSON.stringify(result, null, 2)} />
         }