chore: lint

assets/scss/styles.scss

@@ -114,8 +114,9 @@ a {
 
     kbd {
       @apply font-sans;
-      @apply bg-secondaryDark;
-      @apply text-primaryDark;
+      @apply bg-gray-500;
+      @apply bg-opacity-45;
+      @apply text-primaryLight;
       @apply rounded-sm;
       @apply px-1;
       @apply ml-1;

components/app/Footer.vue

@@ -6,7 +6,7 @@
           v-tippy="{ theme: 'tooltip' }"
           :title="LEFT_SIDEBAR ? $t('hide.sidebar') : $t('show.sidebar')"
           icon="menu_open"
-          :class="{ 'transform rotate-180': !LEFT_SIDEBAR }"
+          :class="{ 'transform -rotate-180': !LEFT_SIDEBAR }"
           @click.native="LEFT_SIDEBAR = !LEFT_SIDEBAR"
         />
         <ButtonSecondary
@@ -104,7 +104,7 @@
           :title="RIGHT_SIDEBAR ? $t('hide.sidebar') : $t('show.sidebar')"
           icon="menu_open"
           class="transform rotate-180"
-          :class="{ 'rotate-0': !RIGHT_SIDEBAR }"
+          :class="{ 'rotate-360': !RIGHT_SIDEBAR }"
           @click.native="RIGHT_SIDEBAR = !RIGHT_SIDEBAR"
         />
       </div>

components/graphql/RequestOptions.vue

@@ -401,7 +401,7 @@ export default defineComponent({
 
       logHoppRequestRunToAnalytics({
         platform: "graphql-query",
-        strategy: getCurrentStrategyID()
+        strategy: getCurrentStrategyID(),
       })
     }
 

components/graphql/Sidebar.vue

@@ -214,11 +214,11 @@ import {
   ref,
   useContext,
 } from "@nuxtjs/composition-api"
-import { GraphQLField, GraphQLType } from 'graphql'
-import { map } from 'rxjs/operators'
-import { GQLConnection } from '~/helpers/GQLConnection'
+import { GraphQLField, GraphQLType } from "graphql"
+import { map } from "rxjs/operators"
+import { GQLConnection } from "~/helpers/GQLConnection"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
-import { useReadonlyStream } from '~/helpers/utils/composables'
+import { useReadonlyStream } from "~/helpers/utils/composables"
 import {
   GQLHeader,
   setGQLHeaders,

components/smart/Modal.vue

@@ -46,7 +46,7 @@
               overflow-hidden
               sm:max-w-md sm:align-middle
             "
-            :class="{ 'mt-24': placement === 'top' }"
+            :class="{ 'mt-24 md:mb-8': placement === 'top' }"
           >
             <div
               v-if="title"

newstore/GQLSession.ts

@@ -86,7 +86,7 @@ const dispatchers = defineDispatchers({
     return {
       response: newResponse,
     }
-  }
+  },
 })
 
 export const gqlSessionStore = new DispatchingStore(
@@ -136,7 +136,7 @@ export function updateGQLHeader(headerIndex: number, updatedHeader: GQLHeader) {
     payload: {
       headerIndex,
       updatedHeader,
-    }
+    },
   })
 }
 

pages/graphql.vue

@@ -4,11 +4,11 @@
       <Pane class="hide-scrollbar !overflow-auto">
         <Splitpanes :dbl-click-splitter="false" horizontal>
           <Pane class="hide-scrollbar !overflow-auto">
-            <GraphqlURLBar :conn="gqlConn" />
-            <GraphqlContentArea :conn="gqlConn" />
+            <GraphqlRequest :conn="gqlConn" />
+            <GraphqlRequestOptions :conn="gqlConn" />
           </Pane>
           <Pane class="hide-scrollbar !overflow-auto">
-            <GraphqlResponseSection :conn="gqlConn" />
+            <GraphqlResponse :conn="gqlConn" />
           </Pane>
         </Splitpanes>
       </Pane>
@@ -65,14 +65,3 @@ export default defineComponent({
   },
 })
 </script>
-
-<style lang="scss" scoped>
-.shortcut-key {
-  @apply bg-dividerLight;
-  @apply rounded;
-  @apply ml-2;
-  @apply py-1;
-  @apply px-2;
-  @apply inline-flex;
-}
-</style>