From 203b45f4d58200bc9b3a91c668ab24d36e7ad467 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Fri, 30 Jul 2021 13:52:43 +0530
Subject: [PATCH] refactor: cleanup

---
 assets/icons/graphql.svg         |   1 +
 assets/scss/styles.scss          |  12 ++-
 components/app/Announcement.vue  |   9 +--
 components/app/Footer.vue        |   4 +-
 components/app/Header.vue        |   7 --
 components/app/Sidenav.vue       |  19 +++--
 components/button/Primary.vue    |  14 +++-
 components/button/Secondary.vue  |  14 +++-
 components/http/CodegenModal.vue |   2 +-
 components/http/Request.vue      |   4 +-
 components/smart/Modal.vue       |   6 +-
 components/teams/Edit.vue        | 135 ++++++++++++++++++-------------
 components/teams/Team.vue        |   2 +-
 components/teams/index.vue       |   2 +-
 pages/profile.vue                |  38 ---------
 pages/settings.vue               |   8 ++
 static/icons/github.svg          |  62 --------------
 static/icons/graphql.svg         |  74 -----------------
 18 files changed, 139 insertions(+), 274 deletions(-)
 create mode 100644 assets/icons/graphql.svg
 delete mode 100644 pages/profile.vue
 delete mode 100644 static/icons/github.svg
 delete mode 100644 static/icons/graphql.svg

diff --git a/assets/icons/graphql.svg b/assets/icons/graphql.svg
new file mode 100644
index 000000000..bebb5a7a0
--- /dev/null
+++ b/assets/icons/graphql.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="64" width="64" viewBox="0 0 29.999 30" fill="currentColor"><path d="M4.08 22.864l-1.1-.636L15.248.98l1.1.636z"/><path d="M2.727 20.53h24.538v1.272H2.727z"/><path d="M15.486 28.332L3.213 21.246l.636-1.1 12.273 7.086zm10.662-18.47L13.874 2.777l.636-1.1 12.273 7.086z"/><path d="M3.852 9.858l-.636-1.1L15.5 1.67l.636 1.1z"/><path d="M25.922 22.864l-12.27-21.25 1.1-.636 12.27 21.25zM3.7 7.914h1.272v14.172H3.7zm21.328 0H26.3v14.172h-1.272z"/><path d="M15.27 27.793l-.555-.962 10.675-6.163.555.962z"/><path d="M27.985 22.5a2.68 2.68 0 01-3.654.981 2.68 2.68 0 01-.981-3.654 2.68 2.68 0 013.654-.981 2.665 2.665 0 01.98 3.654M6.642 10.174a2.68 2.68 0 01-3.654.981A2.68 2.68 0 012.007 7.5a2.68 2.68 0 013.654-.981 2.68 2.68 0 01.981 3.654M2.015 22.5a2.68 2.68 0 01.981-3.654 2.68 2.68 0 013.654.981 2.68 2.68 0 01-.981 3.654c-1.287.735-2.92.3-3.654-.98m21.343-12.326a2.68 2.68 0 01.981-3.654 2.68 2.68 0 013.654.981 2.68 2.68 0 01-.981 3.654 2.68 2.68 0 01-3.654-.981M15 30a2.674 2.674 0 112.674-2.673A2.68 2.68 0 0115 30m0-24.652a2.67 2.67 0 01-2.674-2.674 2.67 2.67 0 115.347 0A2.67 2.67 0 0115 5.347"/></svg>
diff --git a/assets/scss/styles.scss b/assets/scss/styles.scss
index cf0c7c1f3..f799307ec 100644
--- a/assets/scss/styles.scss
+++ b/assets/scss/styles.scss
@@ -46,6 +46,7 @@ body {
   @apply select-none;
   @apply overflow-x-hidden;
 
+  overflow: overlay;
   -webkit-tap-highlight-color: transparent;
   -webkit-touch-callout: none;
 }
@@ -146,6 +147,10 @@ a {
   @apply max-h-48;
   @apply items-stretch;
   @apply overflow-y-auto;
+
+  &::-webkit-scrollbar {
+    @apply hidden;
+  }
 }
 
 hr {
@@ -305,8 +310,9 @@ input[type="checkbox"] {
     &.toasted-primary {
       @apply bg-tooltip;
       @apply text-primary text-xs;
-      @apply !font-semibold;
       @apply justify-start;
+      @apply shadow;
+      @apply font-semibold;
 
       .action {
         @apply ml-auto;
@@ -321,12 +327,12 @@ input[type="checkbox"] {
     }
 
     &.error {
-      @apply !bg-red-400;
+      @apply !bg-red-200;
       @apply !text-red-800;
     }
 
     &.success {
-      @apply !bg-green-400;
+      @apply !bg-green-200;
       @apply !text-green-800;
     }
   }
diff --git a/components/app/Announcement.vue b/components/app/Announcement.vue
index 8fb46d5f0..2f2f179a9 100644
--- a/components/app/Announcement.vue
+++ b/components/app/Announcement.vue
@@ -1,12 +1,5 @@
 <template>
-  <div
-    class="
-      bg-primary bg-dividerLight
-      border-b border-divider
-      flex
-      justify-between
-    "
-  >
+  <div class="bg-dividerLight border-b border-divider flex justify-between">
     <span class="flex">
       <SmartLink
         to="https://forms.gle/8yFiEynXB7h477Ns6"
diff --git a/components/app/Footer.vue b/components/app/Footer.vue
index 661ff966a..8bb54708e 100644
--- a/components/app/Footer.vue
+++ b/components/app/Footer.vue
@@ -26,7 +26,7 @@
           v-tippy="{ theme: 'tooltip' }"
           icon="keyboard"
           :title="$t('shortcuts')"
-          :shortcut="[getSpecialKey(), '/']"
+          :shortcut="['?']"
           @click.native="showShortcuts = true"
         />
         <ButtonSecondary
@@ -58,7 +58,6 @@ import {
   toggleSetting,
 } from "~/newstore/settings"
 import type { KeysMatching } from "~/types/ts-utils"
-import { getPlatformSpecialKey } from "~/helpers/platformutils"
 
 type SettingsType = typeof defaultSettings
 
@@ -106,7 +105,6 @@ export default defineComponent({
         // fallback
       }
     },
-    getSpecialKey: getPlatformSpecialKey,
   },
 })
 </script>
diff --git a/components/app/Header.vue b/components/app/Header.vue
index 267bb4413..9b1f625f9 100644
--- a/components/app/Header.vue
+++ b/components/app/Header.vue
@@ -47,7 +47,6 @@
                 '<br>' +
                 `<sub>${currentUser.email || 'Email not found'}</sub>`
               "
-              indicator
             />
             <TabPrimary
               v-else
@@ -56,12 +55,6 @@
               icon="account_circle"
             />
           </template>
-          <SmartItem
-            to="/profile"
-            icon="person"
-            :label="$t('profile')"
-            @click.native="$refs.user.tippy().hide()"
-          />
           <SmartItem
             to="/settings"
             icon="settings"
diff --git a/components/app/Sidenav.vue b/components/app/Sidenav.vue
index 683f4017f..847eeebd8 100644
--- a/components/app/Sidenav.vue
+++ b/components/app/Sidenav.vue
@@ -7,7 +7,12 @@
         :to="localePath(navigation.target)"
         class="nav-link"
       >
-        <i class="material-icons">{{ navigation.icon }}</i>
+        <i v-if="navigation.icon" class="material-icons">
+          {{ navigation.icon }}
+        </i>
+        <div v-if="navigation.svg" class="h-4 w-4">
+          <SmartIcon :name="navigation.svg" class="svg-icons" />
+        </div>
         <span>{{ navigation.title }}</span>
       </nuxt-link>
     </nav>
@@ -19,13 +24,11 @@ export default {
   data() {
     return {
       primaryNavigation: [
-        { target: "index", icon: "apps", title: "App" },
+        { target: "index", icon: "settings_ethernet", title: "REST" },
+        { target: "graphql", svg: "graphql", title: "GraphQL" },
         { target: "realtime", icon: "language", title: "Realtime" },
-        { target: "graphql", icon: "code", title: "GraphQL" },
         { target: "documentation", icon: "book", title: "Doc" },
-        { target: "profile", icon: "person", title: "Profile" },
         { target: "settings", icon: "settings", title: "Settings" },
-        { target: "home", icon: "home", title: "Home" },
       ],
     }
   },
@@ -42,7 +45,8 @@ export default {
   @apply hover:bg-primaryDark;
   @apply hover:text-secondaryDark;
 
-  .material-icons {
+  .material-icons,
+  .svg-icons {
     @apply opacity-75;
   }
 
@@ -55,7 +59,8 @@ export default {
     @apply text-accent;
     @apply hover:text-accent;
 
-    .material-icons {
+    .material-icons,
+    .svg-icons {
       @apply opacity-100;
     }
   }
diff --git a/components/button/Primary.vue b/components/button/Primary.vue
index 5c69a6f93..7f141fab4 100644
--- a/components/button/Primary.vue
+++ b/components/button/Primary.vue
@@ -41,16 +41,22 @@
     >
       <i
         v-if="icon"
-        :class="label ? (reverse ? 'ml-2' : 'mr-2') : ''"
-        class="material-icons"
+        :class="[
+          'material-icons',
+          { '!text-2xl': large },
+          label ? (reverse ? 'ml-2' : 'mr-2') : '',
+        ]"
       >
         {{ icon }}
       </i>
       <SmartIcon
         v-if="svg"
         :name="svg"
-        :class="label ? (reverse ? 'ml-4' : 'mr-4') : ''"
-        class="svg-icons"
+        :class="[
+          'svg-icons',
+          { '!h-6 !w-6': large },
+          label ? (reverse ? 'ml-2' : 'mr-2') : '',
+        ]"
       />
       {{ label }}
       <div v-if="shortcut.length && SHORTCUT_INDICATOR" class="ml-2">
diff --git a/components/button/Secondary.vue b/components/button/Secondary.vue
index 037ec80d1..1b29e5d1d 100644
--- a/components/button/Secondary.vue
+++ b/components/button/Secondary.vue
@@ -31,16 +31,22 @@
   >
     <i
       v-if="icon"
-      :class="label ? (reverse ? 'ml-2' : 'mr-2') : ''"
-      class="material-icons"
+      :class="[
+        'material-icons',
+        { '!text-2xl': large },
+        label ? (reverse ? 'ml-2' : 'mr-2') : '',
+      ]"
     >
       {{ icon }}
     </i>
     <SmartIcon
       v-if="svg"
       :name="svg"
-      :class="label ? (reverse ? 'ml-2' : 'mr-2') : ''"
-      class="svg-icons"
+      :class="[
+        'svg-icons',
+        { '!h-6 !w-6': large },
+        label ? (reverse ? 'ml-2' : 'mr-2') : '',
+      ]"
     />
     {{ label }}
     <div v-if="shortcut.length && SHORTCUT_INDICATOR" class="ml-2">
diff --git a/components/http/CodegenModal.vue b/components/http/CodegenModal.vue
index 76a8bca81..c29935135 100644
--- a/components/http/CodegenModal.vue
+++ b/components/http/CodegenModal.vue
@@ -79,7 +79,7 @@
         :icon="copyIcon"
         @click.native="copyRequestCode"
       />
-      <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
+      <ButtonSecondary :label="$t('dismiss')" @click.native="hideModal" />
     </template>
   </SmartModal>
 </template>
diff --git a/components/http/Request.vue b/components/http/Request.vue
index fac3e6677..229597a9a 100644
--- a/components/http/Request.vue
+++ b/components/http/Request.vue
@@ -22,10 +22,10 @@
                 font-semibold font-mono
                 h-8
                 text-secondaryDark
+                min-w-28
                 py-1
                 px-4
                 transition
-                w-28
                 truncate
                 focus:outline-none focus:border-accent
               "
@@ -72,7 +72,7 @@
     <div class="flex">
       <ButtonPrimary
         id="send"
-        class="rounded-none w-18"
+        class="rounded-none min-w-18"
         :label="!loading ? $t('send') : $t('cancel')"
         :shortcut="[getSpecialKey(), 'G']"
         @click.native="!loading ? newSendRequest() : cancelRequest()"
diff --git a/components/smart/Modal.vue b/components/smart/Modal.vue
index a8a9f0687..ea153b4dd 100644
--- a/components/smart/Modal.vue
+++ b/components/smart/Modal.vue
@@ -9,7 +9,7 @@
       >
         <transition name="fade" appear>
           <div
-            class="bg-primaryDark inset-0 transition-opacity fixed"
+            class="bg-primaryDark opacity-100 inset-0 transition fixed"
             @touchstart="!dialog ? close() : null"
             @touchend="!dialog ? close() : null"
             @mouseup="!dialog ? close() : null"
@@ -33,9 +33,9 @@
           <div
             class="
               bg-primary
-              rounded
-              shadow-xl
+              rounded-lg
               m-4
+              shadow-lg
               text-left
               w-full
               p-4
diff --git a/components/teams/Edit.vue b/components/teams/Edit.vue
index 4aff70af1..360fc24dd 100644
--- a/components/teams/Edit.vue
+++ b/components/teams/Edit.vue
@@ -2,7 +2,9 @@
   <SmartModal v-if="show" @close="hideModal">
     <template #header>
       <h3 class="heading">{{ $t("edit_team") }}</h3>
-      <ButtonSecondary icon="close" @click.native="hideModal" />
+      <div>
+        <ButtonSecondary icon="close" @click.native="hideModal" />
+      </div>
     </template>
     <template #body>
       <div class="flex flex-col px-2">
@@ -17,29 +19,43 @@
           :placeholder="editingTeam.name"
           @keyup.enter="saveTeam"
         />
-        <label for="memberList" class="font-semibold px-4 pt-4 pb-4">
-          {{ $t("team_member_list") }}
-        </label>
-        <ul
-          v-for="(member, index) in members"
-          :key="`member-${index}`"
-          class="
-            divide-y divide-dashed divide-divider
-            border-b border-divider
-            md:divide-x md:divide-y-0
-          "
-          :class="{ 'border-t': index == 0 }"
-        >
-          <li>
+        <div class="flex flex-1 justify-between items-center">
+          <label for="memberList" class="font-semibold px-4 pt-4 pb-4">
+            {{ $t("team_member_list") }}
+          </label>
+          <div>
+            <ButtonSecondary
+              icon="add"
+              :label="$t('add_new')"
+              @click.native="addTeamMember"
+            />
+          </div>
+        </div>
+        <div class="border-divider border rounded">
+          <div
+            v-for="(member, index) in members"
+            :key="`member-${index}`"
+            class="
+              divide-x divide-dividerLight
+              border-b border-dividerLight
+              flex
+            "
+          >
             <input
-              class="input"
+              class="
+                bg-primaryLight
+                flex
+                font-semibold font-mono
+                flex-1
+                py-2
+                px-4
+                focus:outline-none
+              "
               :placeholder="$t('email')"
               :name="'param' + index"
               :value="member.user.email"
               readonly
             />
-          </li>
-          <li>
             <span class="select-wrapper">
               <tippy
                 ref="options"
@@ -51,7 +67,15 @@
               >
                 <template #trigger>
                   <input
-                    class="input"
+                    class="
+                      bg-primaryLight
+                      flex
+                      font-semibold font-mono
+                      flex-1
+                      py-2
+                      px-4
+                      focus:outline-none
+                    "
                     :placeholder="$t('permissions')"
                     :name="'value' + index"
                     :value="
@@ -85,9 +109,7 @@
                 />
               </tippy>
             </span>
-          </li>
-          <div>
-            <li>
+            <div>
               <ButtonSecondary
                 id="member"
                 v-tippy="{ theme: 'tooltip' }"
@@ -96,28 +118,32 @@
                 color="red"
                 @click.native="removeExistingTeamMember(member.user.uid)"
               />
-            </li>
+            </div>
           </div>
-        </ul>
-        <ul
-          v-for="(member, index) in newMembers"
-          :key="`member-${index}`"
-          class="
-            divide-y divide-dashed divide-divider
-            border-b border-divider
-            md:divide-x md:divide-y-0
-          "
-        >
-          <li>
+          <div
+            v-for="(member, index) in newMembers"
+            :key="`member-${index}`"
+            class="
+              divide-x divide-dividerLight
+              border-b border-dividerLight
+              flex
+            "
+          >
             <input
               v-model="member.key"
-              class="input"
+              class="
+                bg-primaryLight
+                flex
+                font-semibold font-mono
+                flex-1
+                py-2
+                px-4
+                focus:outline-none
+              "
               :placeholder="$t('email')"
-              :name="'param' + index"
+              :name="'member' + index"
               autofocus
             />
-          </li>
-          <li>
             <span class="select-wrapper">
               <tippy
                 ref="memberOptions"
@@ -129,7 +155,15 @@
               >
                 <template #trigger>
                   <input
-                    class="input"
+                    class="
+                      bg-primaryLight
+                      flex
+                      font-semibold font-mono
+                      flex-1
+                      py-2
+                      px-4
+                      focus:outline-none
+                    "
                     :placeholder="$t('permissions')"
                     :name="'value' + index"
                     :value="
@@ -144,28 +178,26 @@
                   label="OWNER"
                   @click.native="
                     member.value = 'OWNER'
-                    $refs.options.tippy().hide()
+                    $refs.memberOptions.tippy().hide()
                   "
                 />
                 <SmartItem
                   label="EDITOR"
                   @click.native="
                     member.value = 'EDITOR'
-                    $refs.options.tippy().hide()
+                    $refs.memberOptions.tippy().hide()
                   "
                 />
                 <SmartItem
                   label="VIEWER"
                   @click.native="
                     member.value = 'VIEWER'
-                    $refs.options.tippy().hide()
+                    $refs.memberOptions.tippy().hide()
                   "
                 />
               </tippy>
             </span>
-          </li>
-          <div>
-            <li>
+            <div>
               <ButtonSecondary
                 id="member"
                 v-tippy="{ theme: 'tooltip' }"
@@ -174,18 +206,9 @@
                 color="red"
                 @click.native="removeTeamMember(index)"
               />
-            </li>
+            </div>
           </div>
-        </ul>
-        <ul>
-          <li>
-            <ButtonSecondary
-              icon="add"
-              :label="$t('add_new')"
-              @click.native="addTeamMember"
-            />
-          </li>
-        </ul>
+        </div>
       </div>
     </template>
     <template #footer>
diff --git a/components/teams/Team.vue b/components/teams/Team.vue
index eaa08d4bc..38fc79f59 100644
--- a/components/teams/Team.vue
+++ b/components/teams/Team.vue
@@ -3,7 +3,7 @@
     <div>
       <ButtonSecondary
         v-tippy="{ theme: 'tooltip' }"
-        title="team.myRole === 'OWNER' ? $t('edit') : ''"
+        :title="team.myRole === 'OWNER' ? $t('edit') : ''"
         icon="group"
         :label="team.name"
         @click.native="team.myRole === 'OWNER' ? $emit('edit-team') : ''"
diff --git a/components/teams/index.vue b/components/teams/index.vue
index c6b82529c..5a3a91dff 100644
--- a/components/teams/index.vue
+++ b/components/teams/index.vue
@@ -1,7 +1,7 @@
 <template>
   <AppSection label="teams">
     <div class="flex flex-col">
-      <label>{{ $t("teams") }}</label>
+      <legend class="font-bold text-secondaryDark">{{ $t("teams") }}</legend>
       <div v-if="currentUser"></div>
       <div v-else>
         <label>{{ $t("login_with") }}</label>
diff --git a/pages/profile.vue b/pages/profile.vue
deleted file mode 100644
index af39b8e11..000000000
--- a/pages/profile.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<template>
-  <div>
-    <ButtonPrimary
-      v-if="currentUser === null"
-      label="Get Started"
-      @click.native="showLogin = true"
-    />
-    <div v-if="currentBackendUser && currentBackendUser.eaInvited">
-      <Teams />
-    </div>
-    {{ hideRightPane }}
-    <div v-if="!hideRightPane">hide this thingy</div>
-    <FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
-  </div>
-</template>
-
-<script>
-import { currentUser$ } from "~/helpers/fb/auth"
-import { currentUserInfo$ } from "~/helpers/teams/BackendUserInfo"
-
-export default {
-  props: { hideRightPane: { type: Boolean, default: false } },
-  data() {
-    return {
-      showLogin: false,
-      currentBackendUser: null,
-    }
-  },
-  subscriptions() {
-    return {
-      currentUser: currentUser$,
-
-      // Teams feature flag
-      currentBackendUser: currentUserInfo$,
-    }
-  },
-}
-</script>
diff --git a/pages/settings.vue b/pages/settings.vue
index 5d4b8d912..980a2ca7b 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -88,6 +88,9 @@
                 </div>
               </div>
             </fieldset>
+            <fieldset v-if="currentBackendUser && currentBackendUser.eaInvited">
+              <Teams />
+            </fieldset>
           </div>
         </div>
       </div>
@@ -338,6 +341,7 @@
 
 <script lang="ts">
 import { defineComponent } from "@nuxtjs/composition-api"
+import { currentUserInfo$ } from "~/helpers/teams/BackendUserInfo"
 import {
   hasExtensionInstalled,
   hasChromeExtensionInstalled,
@@ -373,6 +377,10 @@ export default defineComponent({
       LEFT_SIDEBAR: useSetting("LEFT_SIDEBAR"),
       ZEN_MODE: useSetting("ZEN_MODE"),
       currentUser: useReadonlyStream(currentUser$, currentUser$.value),
+      currentBackendUser: useReadonlyStream(
+        currentUserInfo$,
+        currentUserInfo$.value
+      ),
     }
   },
   data() {
diff --git a/static/icons/github.svg b/static/icons/github.svg
deleted file mode 100644
index f4ebc114c..000000000
--- a/static/icons/github.svg
+++ /dev/null
@@ -1,62 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   version="1.1"
-   id="Layer_1"
-   x="0px"
-   y="0px"
-   viewBox="0 0 24 24"
-   xml:space="preserve"
-   width="24"
-   height="24"
-   sodipodi:docname="github.svg"
-   inkscape:version="0.92.3 (2405546, 2018-03-11)"><metadata
-   id="metadata13"><rdf:RDF><cc:Work
-       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
-         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
-   id="defs11" /><sodipodi:namedview
-   pagecolor="#ffffff"
-   bordercolor="#666666"
-   borderopacity="1"
-   objecttolerance="10"
-   gridtolerance="10"
-   guidetolerance="10"
-   inkscape:pageopacity="0"
-   inkscape:pageshadow="2"
-   inkscape:window-width="1600"
-   inkscape:window-height="847"
-   id="namedview9"
-   showgrid="false"
-   inkscape:zoom="16.342125"
-   inkscape:cx="-6.175781"
-   inkscape:cy="11.228523"
-   inkscape:window-x="-8"
-   inkscape:window-y="-8"
-   inkscape:window-maximized="1"
-   inkscape:current-layer="Layer_1" />
-<style
-   type="text/css"
-   id="style2">
-	.st0{opacity:0.3;enable-background:new    ;}
-</style>
-<circle
-   class="st0"
-   cx="10"
-   cy="10"
-   r="10"
-   id="circle4"
-   style="opacity:0.3;enable-background:new" />
-<path
-   d="M 8.9,0.1 C 4.3,0.6 0.6,4.3 0.1,8.8 -0.4,13.5 2.3,17.7 6.4,19.3 6.7,19.4 7,19.2 7,18.8 v -1.6 c 0,0 -0.4,0.1 -0.9,0.1 C 4.7,17.3 4.1,16.1 4,15.4 3.9,15 3.7,14.7 3.4,14.4 3.1,14.3 3,14.3 3,14.2 3,14 3.3,14 3.4,14 4,14 4.5,14.7 4.7,15 5.2,15.8 5.8,16 6.1,16 6.5,16 6.8,15.9 7,15.8 7.1,15.1 7.4,14.4 8,14 5.7,13.5 4,12.2 4,10 4,8.9 4.5,7.8 5.2,7 5.1,6.8 5,6.3 5,5.6 5,5.2 5,4.6 5.3,4 5.3,4 6.7,4 8.1,5.3 8.6,5.1 9.3,5 10,5 10.7,5 11.4,5.1 12,5.3 13.3,4 14.8,4 14.8,4 15,4.6 15,5.2 15,5.6 15,6.4 14.9,6.8 14.8,7 c 0.7,0.8 1.2,1.8 1.2,3 0,2.2 -1.7,3.5 -4,4 0.6,0.5 1,1.4 1,2.3 v 2.6 c 0,0.3 0.3,0.6 0.7,0.5 3.7,-1.5 6.3,-5.1 6.3,-9.3 0,-6 -5.1,-10.7 -11.1,-10 z"
-   id="path6"
-   inkscape:connector-curvature="0"
-   style="fill:#fff" />
-</svg>
diff --git a/static/icons/graphql.svg b/static/icons/graphql.svg
deleted file mode 100644
index b2f4689a6..000000000
--- a/static/icons/graphql.svg
+++ /dev/null
@@ -1,74 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 400 400">
-  <g>
-    <g>
-      <g>
-        <rect x="122" y="-0.4" transform="matrix(-0.866 -0.5 0.5 -0.866 163.3196 363.3136)" fill="#FFFFFF" width="16.6"
-              height="320.3"/>
-      </g>
-    </g>
-    <g>
-      <g>
-        <rect x="39.8" y="272.2" fill="#FFFFFF" width="320.3" height="16.6"/>
-      </g>
-    </g>
-    <g>
-      <g>
-
-        <rect x="37.9" y="312.2" transform="matrix(-0.866 -0.5 0.5 -0.866 83.0693 663.3409)" fill="#FFFFFF" width="185"
-              height="16.6"/>
-      </g>
-    </g>
-    <g>
-      <g>
-
-        <rect x="177.1" y="71.1" transform="matrix(-0.866 -0.5 0.5 -0.866 463.3409 283.0693)" fill="#FFFFFF" width="185"
-              height="16.6"/>
-      </g>
-    </g>
-    <g>
-      <g>
-
-        <rect x="122.1" y="-13" transform="matrix(-0.5 -0.866 0.866 -0.5 126.7903 232.1221)" fill="#FFFFFF" width="16.6"
-              height="185"/>
-      </g>
-    </g>
-    <g>
-      <g>
-
-        <rect x="109.6" y="151.6" transform="matrix(-0.5 -0.866 0.866 -0.5 266.0828 473.3766)" fill="#FFFFFF"
-              width="320.3" height="16.6"/>
-      </g>
-    </g>
-    <g>
-      <g>
-        <rect x="52.5" y="107.5" fill="#FFFFFF" width="16.6" height="185"/>
-      </g>
-    </g>
-    <g>s
-      <g>
-        <rect x="330.9" y="107.5" fill="#FFFFFF" width="16.6" height="185"/>
-      </g>
-    </g>
-    <g>
-      <g>
-
-        <rect x="262.4" y="240.1" transform="matrix(-0.5 -0.866 0.866 -0.5 126.7953 714.2875)" fill="#FFFFFF"
-              width="14.5" height="160.9"/>
-      </g>
-    </g>
-    <path fill="#FFFFFF" d="M369.5,297.9c-9.6,16.7-31,22.4-47.7,12.8c-16.7-9.6-22.4-31-12.8-47.7c9.6-16.7,31-22.4,47.7-12.8
-		C373.5,259.9,379.2,281.2,369.5,297.9"/>
-    <path fill="#FFFFFF" d="M90.9,137c-9.6,16.7-31,22.4-47.7,12.8c-16.7-9.6-22.4-31-12.8-47.7c9.6-16.7,31-22.4,47.7-12.8
-		C94.8,99,100.5,120.3,90.9,137"/>
-    <path fill="#FFFFFF" d="M30.5,297.9c-9.6-16.7-3.9-38,12.8-47.7c16.7-9.6,38-3.9,47.7,12.8c9.6,16.7,3.9,38-12.8,47.7
-		C61.4,320.3,40.1,314.6,30.5,297.9"/>
-    <path fill="#FFFFFF" d="M309.1,137c-9.6-16.7-3.9-38,12.8-47.7c16.7-9.6,38-3.9,47.7,12.8c9.6,16.7,3.9,38-12.8,47.7
-		C340.1,159.4,318.7,153.7,309.1,137"/>
-    <path fill="#FFFFFF" d="M200,395.8c-19.3,0-34.9-15.6-34.9-34.9c0-19.3,15.6-34.9,34.9-34.9c19.3,0,34.9,15.6,34.9,34.9
-		C234.9,380.1,219.3,395.8,200,395.8"/>
-    <path fill="#FFFFFF" d="M200,74c-19.3,0-34.9-15.6-34.9-34.9c0-19.3,15.6-34.9,34.9-34.9c19.3,0,34.9,15.6,34.9,34.9
-		C234.9,58.4,219.3,74,200,74"/>
-  </g>
-</svg>