Fix light theme spacing. Closes #256

Author: timsuchanek

packages/graphql-playground/src/components/HistoryPopup.tsx

@@ -3,7 +3,7 @@ import * as Modal from 'react-modal'
 import HistoryHeader from './HistoryPopup/HistoryHeader'
 import { HistoryFilter, Session } from '../types'
 import HistoryItems from './HistoryPopup/HistoryItems'
-import { GraphQLEditor } from './Playground/GraphQLEditor'
+import GraphQLEditor from './Playground/GraphQLEditor'
 import { $v, Icon } from 'graphcool-styles'
 import { modalStyle } from '../constants'
 import { withTheme, ThemeInterface } from './Theme'

packages/graphql-playground/src/components/Playground/GraphQLEditor.tsx

@@ -37,6 +37,8 @@ import { flatMap, groupBy } from 'lodash'
 import Results from './Results'
 import ReponseTracing from './ResponseTracing'
 import GenerateCodeButton from './GenerateCodeButton'
+import withTheme from '../Theme/withTheme'
+import { ThemeInterface } from '../Theme/index'
 
 /**
  * The top-level React component for GraphQLEditor, intended to encompass the entire
@@ -132,7 +134,10 @@ export interface ToolbarButtonProps extends SimpleProps {
   label: string
 }
 
-export class GraphQLEditor extends React.PureComponent<Props, State> {
+export class GraphQLEditor extends React.PureComponent<
+  Props & ThemeInterface,
+  State
+> {
   static Logo: (props: SimpleProps) => JSX.Element
   static Toolbar: (props: SimpleProps) => JSX.Element
   static Footer: (props: SimpleProps) => JSX.Element
@@ -392,6 +397,9 @@ export class GraphQLEditor extends React.PureComponent<Props, State> {
             @p: .relative;
             border-top: 8px solid $darkBlue;
           }
+          .queryWrap.light {
+            border-top: 8px solid #eeeff0;
+          }
 
           .graphiql-button {
             @p: .white50, .bgDarkBlue, .ttu, .f14, .fw6, .br2, .pointer;
@@ -470,7 +478,10 @@ export class GraphQLEditor extends React.PureComponent<Props, State> {
             className="editorBar"
             onMouseDown={this.handleResizeStart}
           >
-            <div className="queryWrap" style={queryWrapStyle}>
+            <div
+              className={cn('queryWrap', this.props.localTheme)}
+              style={queryWrapStyle}
+            >
               <QueryEditor
                 ref={this.setQueryEditorComponent}
                 schema={this.state.schema}
@@ -1410,6 +1421,8 @@ export class GraphQLEditor extends React.PureComponent<Props, State> {
   }
 }
 
+export default withTheme<Props>(GraphQLEditor)
+
 // Duck-type promise detection.
 function isPromise(value) {
   return typeof value === 'object' && typeof value.then === 'function'

packages/graphql-playground/src/components/Playground/GraphQLEditorSession.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { PermissionSession, ServiceInformation, Session } from '../../types'
-import { GraphQLEditor } from './GraphQLEditor'
+import GraphQLEditor from './GraphQLEditor'
 import { Header } from './HttpHeaders/HttpHeaders'
 import { Viewer } from '../Playground'
 

packages/graphql-playground/src/components/Playground/TabBar.tsx

@@ -161,6 +161,8 @@ export const TabBar = withTheme<Props>(
             height: 8px;
             background-color: #eeeff0;
             width: 100%;
+            top: -2px;
+            position: relative;
           }
           .tab:hover {
             @p: .bgDarkBlue;

packages/graphql-playground/src/styles/graphiql_light.css

@@ -134,7 +134,6 @@
 }
 
 .docs-graphiql .graphiql-container .queryWrap {
-    border: none;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
@@ -209,7 +208,7 @@
 }
 
 .docs-graphiql .graphiql-container .variable-editor .CodeMirror {
-    background: rgba(0,0,0,.05) !important;
+    background: transparent !important;
 }
 
 .docs-graphiql .graphiql-container .variable-editor .CodeMirror-gutters {
@@ -233,13 +232,17 @@
 }
 
 .docs-graphiql .variable-editor {
+    background: rgba(0,0,0,.05);
     height: 44px;
 }
 
-.docs-graphiql .graphiql-container .variable-editor-title {
-    padding: 12px 15px 13px;
-    line-height: 19px;
+.docs-graphiql .graphiql-container .response-tracing {
     background: rgba(0,0,0,.05);
+}
+
+.docs-graphiql .graphiql-container .variable-editor-title,
+.docs-graphiql .graphiql-container .response-tracing-title {
+    background: none;
     color: rgba(0,0,0,.3);
 }
 
@@ -401,38 +404,10 @@
 
 .docs-graphiql .graphiql-container .CodeMirror {
     color: rgba(255,255,255,.3);
-    font-family:
-            'Source Code Pro',
-            'Consolas',
-            'Inconsolata',
-            'Droid Sans Mono',
-            'Monaco',
-            monospace;
-    font-size: 14px;
-    height: 100%;
-    left: 0;
-    position: absolute;
-    top: 0;
-    width: 100%;
-}
-
-.docs-graphiql .graphiql-container .CodeMirror-lines {
-    padding: 0;
 }
 
 .docs-graphiql .CodeMirror-hint-information .content {
-    box-orient: vertical;
     color: #141823;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    font-family: system, -apple-system, 'San Francisco', '.SFNSDisplay-Regular', 'Segoe UI', Segoe, 'Segoe WP', 'Helvetica Neue', helvetica, 'Lucida Grande', arial, sans-serif;
-    font-size: 13px;
-    line-clamp: 3;
-    line-height: 16px;
-    max-height: 48px;
-    overflow: hidden;
-    text-overflow: -o-ellipsis-lastline;
 }
 
 .docs-graphiql .CodeMirror-hint-information .content p:first-child {
@@ -632,15 +607,6 @@
     height: auto;
 }
 
-/* PADDING */
-
-.docs-graphiql .CodeMirror-lines {
-    padding: 4px 0; /* Vertical padding around content */
-}
-.docs-graphiql .CodeMirror pre {
-    padding: 0 4px; /* Horizontal padding of content */
-}
-
 .docs-graphiql .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
     background-color: white; /* The little square between H and V scrollbars */
 }