From f75ff200a4bd208edc12e1d7ef3e01f9c6605278 Mon Sep 17 00:00:00 2001
From: Patrik Oldsberg <poldsberg@gmail.com>
Date: Sat, 25 Apr 2020 13:23:42 +0200
Subject: [PATCH] plugins/graphiql: make tabs a bit more visible

---
 .../components/GraphiQLBrowser/GraphiQLBrowser.tsx   | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/plugins/graphiql/src/components/GraphiQLBrowser/GraphiQLBrowser.tsx b/plugins/graphiql/src/components/GraphiQLBrowser/GraphiQLBrowser.tsx
index 69ceec3136..e914fd9649 100644
--- a/plugins/graphiql/src/components/GraphiQLBrowser/GraphiQLBrowser.tsx
+++ b/plugins/graphiql/src/components/GraphiQLBrowser/GraphiQLBrowser.tsx
@@ -15,18 +15,22 @@
  */
 
 import React, { FC, useState } from 'react';
-import { Tabs, Tab, makeStyles, Typography } from '@material-ui/core';
+import { Tabs, Tab, makeStyles, Typography, Divider } from '@material-ui/core';
 import 'graphiql/graphiql.css';
 import GraphiQL from 'graphiql';
 import { StorageBucket } from 'lib/storage';
 import { GraphQLEndpoint } from 'lib/api';
+import { BackstageTheme } from '@backstage/theme';
 
-const useStyles = makeStyles({
+const useStyles = makeStyles<BackstageTheme>(theme => ({
   root: {
     height: '100%',
     display: 'flex',
     flexFlow: 'column nowrap',
   },
+  tabs: {
+    background: theme.palette.background.paper,
+  },
   graphiQlWrapper: {
     flex: 1,
     '@global': {
@@ -35,7 +39,7 @@ const useStyles = makeStyles({
       },
     },
   },
-});
+}));
 
 type GraphiQLBrowserProps = {
   endpoints: GraphQLEndpoint[];
@@ -55,6 +59,7 @@ export const GraphiQLBrowser: FC<GraphiQLBrowserProps> = ({ endpoints }) => {
   return (
     <div className={classes.root}>
       <Tabs
+        classes={{ root: classes.tabs }}
         value={tabIndex}
         onChange={(_, value) => setTabIndex(value)}
         indicatorColor="primary"
@@ -63,6 +68,7 @@ export const GraphiQLBrowser: FC<GraphiQLBrowserProps> = ({ endpoints }) => {
           <Tab key={index} label={title} value={index} />
         ))}
       </Tabs>
+      <Divider />
       <div className={classes.graphiQlWrapper}>
         <GraphiQL key={tabIndex} fetcher={fetcher} storage={storage} />
       </div>