fix: color contrast

2021-08-01 23:03:54 +05:30
parent fd3b5ecf08
commit 2ee65e69dc
28 changed files with 112 additions and 89 deletions
--- a/components/app/Shortcuts.vue
+++ b/components/app/Shortcuts.vue
@@ -14,7 +14,7 @@
          justify-between
        "
      >
-        <h3 class="ml-2 heading">{{ $t("shortcuts") }}</h3>
+        <h3 class="ml-4 heading">{{ $t("shortcuts") }}</h3>
        <div>
          <ButtonSecondary to="/settings" icon="tune" />
          <ButtonSecondary icon="close" @click.native="close()" />
@@ -39,7 +39,7 @@
        <div
          v-for="(map, mapIndex) in mappings"
          :key="`map-${mapIndex}`"
-          class="space-y-4 p-4"
+          class="space-y-4 py-4 px-6"
        >
          <h5 class="font-bold text-secondaryDark text-sm">
            {{ map.section }}
--- a/components/button/Primary.vue
+++ b/components/button/Primary.vue
@@ -15,7 +15,7 @@
    :class="[
      color
        ? `text-${color}-800 bg-${color}-200 hover:text-${color}-900 hover:bg-${color}-300 focus:text-${color}-900 focus:bg-${color}-300`
-        : `text-white bg-accent hover:bg-accentDark focus:bg-accentDark`,
+        : `text-primary bg-accent hover:bg-accentDark focus:bg-accentDark`,
      label ? 'px-4' : 'px-2',
      rounded ? 'rounded-full' : 'rounded',
      { 'opacity-75 cursor-not-allowed': disabled },
--- a/components/button/Secondary.vue
+++ b/components/button/Secondary.vue
@@ -15,7 +15,7 @@
    "
    :class="[
      color
-        ? `text-${color}-400 hover:text-${color}-600 focus:text-${color}-600`
+        ? `text-${color}-500 hover:text-${color}-600 focus:text-${color}-600`
        : 'text-secondary hover:text-secondaryDark focus:text-secondaryDark',
      label ? 'px-4' : 'px-2',
      rounded ? 'rounded-full' : 'rounded',
--- a/components/collections/graphql/Collection.vue
+++ b/components/collections/graphql/Collection.vue
@@ -13,7 +13,7 @@
        class="cursor-pointer flex w-10 justify-center items-center truncate"
        @click="toggleShowChildren()"
      >
-        <i class="material-icons" :class="{ 'text-green-400': isSelected }">
+        <i class="material-icons" :class="{ 'text-green-500': isSelected }">
          {{ getCollectionIcon }}
        </i>
      </span>
--- a/components/collections/graphql/Folder.vue
+++ b/components/collections/graphql/Folder.vue
@@ -13,7 +13,7 @@
        class="cursor-pointer flex w-10 justify-center items-center truncate"
        @click="toggleShowChildren()"
      >
-        <i class="material-icons" :class="{ 'text-green-400': isSelected }">
+        <i class="material-icons" :class="{ 'text-green-500': isSelected }">
          {{ getCollectionIcon }}
        </i>
      </span>
--- a/components/collections/graphql/Request.vue
+++ b/components/collections/graphql/Request.vue
@@ -21,7 +21,7 @@
        "
        @click="!doc ? selectRequest() : {}"
      >
-        <i class="material-icons" :class="{ 'text-green-400': isSelected }">
+        <i class="material-icons" :class="{ 'text-green-500': isSelected }">
          {{ isSelected ? "check_circle" : "description" }}
        </i>
      </span>
--- a/components/collections/graphql/index.vue
+++ b/components/collections/graphql/index.vue
@@ -70,6 +70,7 @@
      </span>
      <ButtonSecondary
        :label="$t('add_new')"
+        outline
        @click.native="displayModalAdd(true)"
      />
    </div>
--- a/components/collections/index.vue
+++ b/components/collections/index.vue
@@ -113,9 +113,11 @@
        disabled
        :title="$t('disable_new_collection')"
        :label="$t('add_new')"
+        outline
      />
      <ButtonSecondary
        v-else
+        outline
        :label="$t('add_new')"
        @click.native="displayModalAdd(true)"
      />
--- a/components/collections/my/Collection.vue
+++ b/components/collections/my/Collection.vue
@@ -13,7 +13,7 @@
        class="cursor-pointer flex w-10 justify-center items-center truncate"
        @click="toggleShowChildren()"
      >
-        <i class="material-icons" :class="{ 'text-green-400': isSelected }">
+        <i class="material-icons" :class="{ 'text-green-500': isSelected }">
          {{ getCollectionIcon }}
        </i>
      </span>
--- a/components/collections/my/Folder.vue
+++ b/components/collections/my/Folder.vue
@@ -13,7 +13,7 @@
        class="cursor-pointer flex w-10 justify-center items-center truncate"
        @click="toggleShowChildren()"
      >
-        <i class="material-icons" :class="{ 'text-green-400': isSelected }">
+        <i class="material-icons" :class="{ 'text-green-500': isSelected }">
          {{ getCollectionIcon }}
        </i>
      </span>
--- a/components/collections/my/Request.vue
+++ b/components/collections/my/Request.vue
@@ -25,7 +25,7 @@
        <i
          v-if="isSelected"
          class="material-icons"
-          :class="{ 'text-green-400': isSelected }"
+          :class="{ 'text-green-500': isSelected }"
        >
          check_circle
        </i>
@@ -128,11 +128,11 @@ export default {
    return {
      dragging: false,
      requestMethodLabels: {
-        get: "text-green-400",
-        post: "text-yellow-400",
-        put: "text-blue-400",
-        delete: "text-red-400",
-        default: "text-gray-400",
+        get: "text-green-500",
+        post: "text-yellow-500",
+        put: "text-blue-500",
+        delete: "text-red-500",
+        default: "text-gray-500",
      },
      confirmRemove: false,
    }
--- a/components/collections/teams/Collection.vue
+++ b/components/collections/teams/Collection.vue
@@ -5,7 +5,7 @@
        class="cursor-pointer flex w-10 justify-center items-center truncate"
        @click="toggleShowChildren()"
      >
-        <i class="material-icons" :class="{ 'text-green-400': isSelected }">
+        <i class="material-icons" :class="{ 'text-green-500': isSelected }">
          {{ getCollectionIcon }}
        </i>
      </span>
--- a/components/collections/teams/Folder.vue
+++ b/components/collections/teams/Folder.vue
@@ -5,7 +5,7 @@
        class="cursor-pointer flex w-10 justify-center items-center truncate"
        @click="toggleShowChildren()"
      >
-        <i class="material-icons" :class="{ 'text-green-400': isSelected }">
+        <i class="material-icons" :class="{ 'text-green-500': isSelected }">
          {{ getCollectionIcon }}
        </i>
      </span>
--- a/components/collections/teams/Request.vue
+++ b/components/collections/teams/Request.vue
@@ -18,7 +18,7 @@
        <i
          v-if="isSelected"
          class="material-icons"
-          :class="{ 'text-green-400': isSelected }"
+          :class="{ 'text-green-500': isSelected }"
        >
          check_circle
        </i>
@@ -119,11 +119,11 @@ export default {
  data() {
    return {
      requestMethodLabels: {
-        get: "text-green-400",
-        post: "text-yellow-400",
-        put: "text-blue-400",
-        delete: "text-red-400",
-        default: "text-gray-400",
+        get: "text-green-500",
+        post: "text-yellow-500",
+        put: "text-blue-500",
+        delete: "text-red-500",
+        default: "text-gray-500",
      },
      confirmRemove: false,
    }
--- a/components/environments/index.vue
+++ b/components/environments/index.vue
@@ -68,6 +68,7 @@
      </span>
      <ButtonSecondary
        :label="$t('add_new')"
+        outline
        @click.native="displayModalAdd(true)"
      />
    </div>
--- a/components/http/Headers.vue
+++ b/components/http/Headers.vue
@@ -148,7 +148,11 @@
      <span class="text-center pb-4">
        {{ $t("headers_empty") }}
      </span>
-      <ButtonSecondary :label="$t('add_new')" @click.native="addHeader" />
+      <ButtonSecondary
+        outline
+        :label="$t('add_new')"
+        @click.native="addHeader"
+      />
    </div>
  </AppSection>
 </template>
--- a/components/http/Parameters.vue
+++ b/components/http/Parameters.vue
@@ -169,7 +169,11 @@
      <span class="text-center pb-4">
        {{ $t("parameters_empty") }}
      </span>
-      <ButtonSecondary :label="$t('add_new')" @click.native="addParam" />
+      <ButtonSecondary
+        :label="$t('add_new')"
+        outline
+        @click.native="addParam"
+      />
    </div>
  </AppSection>
 </template>
--- a/components/http/Request.vue
+++ b/components/http/Request.vue
@@ -91,9 +91,8 @@
    <div class="flex">
      <ButtonPrimary
        id="send"
-        class="rounded-none min-w-18"
+        class="rounded-none min-w-20"
        :label="!loading ? $t('send') : $t('cancel')"
-        :shortcut="[getSpecialKey(), 'G']"
        @click.native="!loading ? newSendRequest() : cancelRequest()"
      />
      <span class="inline-flex">
--- a/components/http/ResponseMeta.vue
+++ b/components/http/ResponseMeta.vue
@@ -5,15 +5,20 @@
      class="
        flex flex-col flex-1
        text-secondaryLight
-        p-4
        items-center
        justify-center
      "
    >
      <i class="opacity-75 pb-2 material-icons">send</i>
-      <span class="text-center">
+      <span class="text-center pb-4">
        {{ $t("waiting_send_req") }}
      </span>
+      <ButtonSecondary
+        :label="$t('documentation')"
+        to="https://docs.hoppscotch.io"
+        blank
+        outline
+      />
    </div>
    <div v-else>
      <i v-if="response.type === 'loading'" class="animate-spin material-icons">
--- a/components/realtime/Websocket.vue
+++ b/components/realtime/Websocket.vue
@@ -256,6 +256,9 @@ export default defineComponent({
    this.worker.terminate()
  },
  methods: {
+    clearContent() {
+      this.protocols = []
+    },
    debouncer: debounce(function () {
      this.worker.postMessage({ type: "ws", url: this.url })
    }, 1000),
@@ -330,6 +333,8 @@ export default defineComponent({
    disconnect() {
      if (this.socket) {
        this.socket.close()
+        this.connectionState = false
+        this.connectingState = false
      }
    },
    handleError(error) {
--- a/components/smart/AccentModePicker.vue
+++ b/components/smart/AccentModePicker.vue
@@ -1,14 +1,14 @@
 <template>
  <div class="flex">
-    <!-- text-blue-400 -->
-    <!-- text-green-400 -->
-    <!-- text-teal-400 -->
-    <!-- text-indigo-400 -->
-    <!-- text-purple-400 -->
-    <!-- text-orange-400 -->
-    <!-- text-pink-400 -->
-    <!-- text-red-400 -->
-    <!-- text-yellow-400 -->
+    <!-- text-green-500 -->
+    <!-- text-teal-500 -->
+    <!-- text-blue-500 -->
+    <!-- text-indigo-500 -->
+    <!-- text-purple-500 -->
+    <!-- text-yellow-500 -->
+    <!-- text-orange-500 -->
+    <!-- text-red-500 -->
+    <!-- text-pink-500 -->
    <ButtonSecondary
      v-for="(color, index) of accentColors"
      :key="`color-${index}`"