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/README.md
+++ b/README.md
@@ -103,8 +103,8 @@

 ---

- Choose theme: System, Light, Dark (default) and Black
- Choose accent color: Blue, Green (default), Teal, Indigo, Purple, Orange, Pink, Red, and Yellow
+- Choose theme: System (default), Light, Dark and Black
+- Choose accent color: Green (default), Teal, Blue, Indigo, Purple, Yellow, Orange, Red and Pink
 - Toggle auto-scroll to response

 <p>
--- a/assets/scss/styles.scss
+++ b/assets/scss/styles.scss
@@ -85,7 +85,6 @@ a {
  @apply text-current;
  @apply no-underline;
  @apply outline-none;
-  @apply focus-visible:(ring ring-inset ring-accent);
  @apply transition;

  &.link {
@@ -94,6 +93,7 @@ a {
    @apply -mx-2 -my-1;
    @apply text-accent;
    @apply hover:text-accentDark;
+    @apply focus-visible:(ring ring-inset ring-accent);
  }
 }

@@ -265,19 +265,19 @@ input[type="checkbox"] {
 }

 .info-response {
-  @apply text-pink-400;
+  @apply text-pink-500;
 }

 .success-response {
-  @apply text-green-400;
+  @apply text-green-500;
 }

 .redir-response {
-  @apply text-yellow-400;
+  @apply text-yellow-500;
 }

 .cl-error-response {
-  @apply text-red-400;
+  @apply text-red-500;
 }

 .sv-error-response {
--- a/assets/scss/themes.scss
+++ b/assets/scss/themes.scss
@@ -85,21 +85,6 @@
  --editor-theme: "twilight";
 }

-@mixin blueTheme {
-  // Accent color
-  --accent-color: theme("colors.blue.500");
-  // Light Accent color
-  --accent-light-color: theme("colors.blue.400");
-  // Dark Accent color
-  --accent-dark-color: theme("colors.blue.600");
-  // Gradient from
-  --gradient-from-color: theme("colors.blue.200");
-  // Gradient via
-  --gradient-via-color: theme("colors.blue.400");
-  // Gradient to
-  --gradient-to-color: theme("colors.blue.600");
-}
-
@mixin greenTheme {
  // Accent color
  --accent-color: theme("colors.green.500");
@@ -130,6 +115,21 @@
  --gradient-to-color: theme("colors.teal.600");
 }

+@mixin blueTheme {
+  // Accent color
+  --accent-color: theme("colors.blue.500");
+  // Light Accent color
+  --accent-light-color: theme("colors.blue.400");
+  // Dark Accent color
+  --accent-dark-color: theme("colors.blue.600");
+  // Gradient from
+  --gradient-from-color: theme("colors.blue.200");
+  // Gradient via
+  --gradient-via-color: theme("colors.blue.400");
+  // Gradient to
+  --gradient-to-color: theme("colors.blue.600");
+}
+
@mixin indigoTheme {
  // Accent color
  --accent-color: theme("colors.indigo.500");
@@ -160,6 +160,21 @@
  --gradient-to-color: theme("colors.purple.600");
 }

+@mixin yellowTheme {
+  // Accent color
+  --accent-color: theme("colors.yellow.500");
+  // Light Accent color
+  --accent-light-color: theme("colors.yellow.400");
+  // Dark Accent color
+  --accent-dark-color: theme("colors.yellow.600");
+  // Gradient from
+  --gradient-from-color: theme("colors.yellow.200");
+  // Gradient via
+  --gradient-via-color: theme("colors.yellow.400");
+  // Gradient to
+  --gradient-to-color: theme("colors.yellow.600");
+}
+
@mixin orangeTheme {
  // Accent color
  --accent-color: theme("colors.orange.500");
@@ -175,21 +190,6 @@
  --gradient-to-color: theme("colors.orange.600");
 }

-@mixin pinkTheme {
-  // Accent color
-  --accent-color: theme("colors.pink.500");
-  // Light Accent color
-  --accent-light-color: theme("colors.pink.400");
-  // Dark Accent color
-  --accent-dark-color: theme("colors.pink.600");
-  // Gradient from
-  --gradient-from-color: theme("colors.pink.200");
-  // Gradient via
-  --gradient-via-color: theme("colors.pink.400");
-  // Gradient to
-  --gradient-to-color: theme("colors.pink.600");
-}
-
@mixin redTheme {
  // Accent color
  --accent-color: theme("colors.red.500");
@@ -205,19 +205,19 @@
  --gradient-to-color: theme("colors.red.600");
 }

-@mixin yellowTheme {
+@mixin pinkTheme {
  // Accent color
-  --accent-color: theme("colors.yellow.500");
+  --accent-color: theme("colors.pink.500");
  // Light Accent color
-  --accent-light-color: theme("colors.yellow.400");
+  --accent-light-color: theme("colors.pink.400");
  // Dark Accent color
-  --accent-dark-color: theme("colors.yellow.600");
+  --accent-dark-color: theme("colors.pink.600");
  // Gradient from
-  --gradient-from-color: theme("colors.yellow.200");
+  --gradient-from-color: theme("colors.pink.200");
  // Gradient via
-  --gradient-via-color: theme("colors.yellow.400");
+  --gradient-via-color: theme("colors.pink.400");
  // Gradient to
-  --gradient-to-color: theme("colors.yellow.600");
+  --gradient-to-color: theme("colors.pink.600");
 }

 :root {
--- 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}`"
--- a/newstore/settings.ts
+++ b/newstore/settings.ts
@@ -11,15 +11,15 @@ export const HoppBgColors = ["system", "light", "dark", "black"] as const
 export type HoppBgColor = typeof HoppBgColors[number]

 export const HoppAccentColors = [
-  "blue",
  "green",
  "teal",
+  "blue",
  "indigo",
  "purple",
-  "orange",
-  "pink",
-  "red",
  "yellow",
+  "orange",
+  "red",
+  "pink",
 ] as const

 export type HoppAccentColor = typeof HoppAccentColors[number]
@@ -67,7 +67,7 @@ export const defaultSettings: SettingsType = {
    httpPassword: true,
    bearerToken: true,
  },
-  THEME_COLOR: "indigo",
+  THEME_COLOR: "green",
  BG_COLOR: "system",
  TELEMETRY_ENABLED: true,
  SHORTCUT_INDICATOR: false,
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -209,7 +209,7 @@ export default {
    families: {
      Inter: [400, 500, 600, 700, 800],
      "Material+Icons": true,
-      "Roboto+Mono": true,
+      "Roboto+Mono": [400, 500, 600, 700, 800],
    },
  },

--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -295,6 +295,7 @@
                    </span>
                    <ButtonSecondary
                      :label="$t('add_new')"
+                      outline
                      @click.native="addRequestHeader"
                    />
                  </div>
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -316,6 +316,7 @@
                  v-tippy="{ theme: 'tooltip' }"
                  :title="$t('reset_default')"
                  :icon="clearIcon"
+                  outline
                  @click.native="resetProxy"
                />
              </div>
@@ -396,7 +397,7 @@ export default defineComponent({

      showLogin: false,

-      active: getLocalConfig("THEME_COLOR") || "indigo",
+      active: getLocalConfig("THEME_COLOR") || "green",
      confirmRemove: false,
    }
  },