fix: color contrast

README.md

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

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 {

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 {

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 }}

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 },

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',

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>

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>

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>

components/collections/graphql/index.vue

@@ -70,6 +70,7 @@
       </span>
       <ButtonSecondary
         :label="$t('add_new')"
+        outline
         @click.native="displayModalAdd(true)"
       />
     </div>

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)"
       />

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>

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>

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",
+        get: "text-green-500",
-        post: "text-yellow-400",
+        post: "text-yellow-500",
-        put: "text-blue-400",
+        put: "text-blue-500",
-        delete: "text-red-400",
+        delete: "text-red-500",
-        default: "text-gray-400",
+        default: "text-gray-500",
       },
       confirmRemove: false,
     }

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>

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>

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",
+        get: "text-green-500",
-        post: "text-yellow-400",
+        post: "text-yellow-500",
-        put: "text-blue-400",
+        put: "text-blue-500",
-        delete: "text-red-400",
+        delete: "text-red-500",
-        default: "text-gray-400",
+        default: "text-gray-500",
       },
       confirmRemove: false,
     }

components/environments/index.vue

@@ -68,6 +68,7 @@
       </span>
       <ButtonSecondary
         :label="$t('add_new')"
+        outline
         @click.native="displayModalAdd(true)"
       />
     </div>

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>

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>

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">

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">

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) {

components/smart/AccentModePicker.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="flex">
-    <!-- text-blue-400 -->
+    <!-- text-green-500 -->
-    <!-- text-green-400 -->
+    <!-- text-teal-500 -->
-    <!-- text-teal-400 -->
+    <!-- text-blue-500 -->
-    <!-- text-indigo-400 -->
+    <!-- text-indigo-500 -->
-    <!-- text-purple-400 -->
+    <!-- text-purple-500 -->
-    <!-- text-orange-400 -->
+    <!-- text-yellow-500 -->
-    <!-- text-pink-400 -->
+    <!-- text-orange-500 -->
-    <!-- text-red-400 -->
+    <!-- text-red-500 -->
-    <!-- text-yellow-400 -->
+    <!-- text-pink-500 -->
     <ButtonSecondary
       v-for="(color, index) of accentColors"
       :key="`color-${index}`"

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,

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],
     },
   },
 

pages/graphql.vue

@@ -295,6 +295,7 @@
                     </span>
                     <ButtonSecondary
                       :label="$t('add_new')"
+                      outline
                       @click.native="addRequestHeader"
                     />
                   </div>

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,
     }
   },