From b9c233cdf94f6ede946dacac0d149b3c0847ee0b Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Wed, 18 Aug 2021 13:30:01 +0530
Subject: [PATCH] refactor(ui): better remove, delete icons, and select
 components

---
 assets/scss/themes.scss                       |  2 +-
 components/app/Header.vue                     |  2 +-
 components/app/Sidenav.vue                    |  1 +
 components/collections/graphql/Collection.vue |  4 +-
 components/collections/graphql/Folder.vue     |  4 +-
 components/collections/graphql/Request.vue    |  4 +-
 components/collections/my/Collection.vue      |  6 +-
 components/collections/my/Folder.vue          |  4 +-
 components/collections/my/Request.vue         |  4 +-
 components/collections/teams/Collection.vue   |  6 +-
 components/collections/teams/Folder.vue       |  4 +-
 components/collections/teams/Request.vue      |  4 +-
 components/environments/Edit.vue              |  4 +-
 components/environments/Environment.vue       |  4 +-
 components/environments/index.vue             | 65 +++++++++++--------
 components/firebase/Login.vue                 | 12 ++--
 components/graphql/RequestOptions.vue         |  4 +-
 components/history/graphql/Card.vue           |  2 +-
 components/history/index.vue                  |  2 +-
 components/history/rest/Card.vue              |  2 +-
 components/http/Authorization.vue             |  2 +-
 components/http/BodyParameters.vue            |  4 +-
 components/http/CodegenModal.vue              | 52 +++++++--------
 components/http/Headers.vue                   |  4 +-
 components/http/Parameters.vue                |  4 +-
 components/http/PreRequestScript.vue          |  2 +-
 components/http/RawBody.vue                   |  2 +-
 components/http/Request.vue                   |  2 +-
 components/http/TestResult.vue                |  2 +-
 components/http/Tests.vue                     |  2 +-
 components/http/TokenList.vue                 |  4 +-
 components/realtime/Socketio.vue              |  2 +-
 components/realtime/Websocket.vue             |  4 +-
 components/teams/Edit.vue                     |  4 +-
 components/teams/Team.vue                     |  4 +-
 locales/en.json                               | 15 +++--
 pages/documentation.vue                       |  2 +-
 37 files changed, 130 insertions(+), 121 deletions(-)

diff --git a/assets/scss/themes.scss b/assets/scss/themes.scss
index 0635c06d0..1fcdaf4a2 100644
--- a/assets/scss/themes.scss
+++ b/assets/scss/themes.scss
@@ -41,7 +41,7 @@
   // Dark Background color
   --primary-dark-color: theme("colors.blue-gray.100");
   // Text color
-  --secondary-color: theme("colors.blue-gray.600");
+  --secondary-color: theme("colors.blue-gray.500");
   // Light Text color
   --secondary-light-color: theme("colors.blue-gray.400");
   // Dark Text color
diff --git a/components/app/Header.vue b/components/app/Header.vue
index 3cee83eda..63cab3c3e 100644
--- a/components/app/Header.vue
+++ b/components/app/Header.vue
@@ -5,7 +5,7 @@
     >
       <div class="space-x-2 group inline-flex items-center">
         <ButtonSecondary
-          class="tracking-wide !font-bold"
+          class="tracking-wide !font-bold !text-secondaryDark"
           label="HOPPSCOTCH"
           to="/"
         />
diff --git a/components/app/Sidenav.vue b/components/app/Sidenav.vue
index 3cd980ad4..107ec4d42 100644
--- a/components/app/Sidenav.vue
+++ b/components/app/Sidenav.vue
@@ -6,6 +6,7 @@
         :key="`navigation-${index}`"
         :to="localePath(navigation.target)"
         class="nav-link"
+        tabindex="0"
       >
         <i v-if="navigation.icon" class="material-icons">
           {{ navigation.icon }}
diff --git a/components/collections/graphql/Collection.vue b/components/collections/graphql/Collection.vue
index ccd94c56c..2f6b6313f 100644
--- a/components/collections/graphql/Collection.vue
+++ b/components/collections/graphql/Collection.vue
@@ -77,9 +77,9 @@
               "
             />
             <SmartItem
-              icon="remove_circle_outline"
+              icon="delete"
               color="red"
-              :label="$t('delete')"
+              :label="$t('action.delete')"
               @click.native="
                 confirmRemove = true
                 $refs.options.tippy().hide()
diff --git a/components/collections/graphql/Folder.vue b/components/collections/graphql/Folder.vue
index c01201572..610d951b5 100644
--- a/components/collections/graphql/Folder.vue
+++ b/components/collections/graphql/Folder.vue
@@ -73,9 +73,9 @@
               "
             />
             <SmartItem
-              icon="remove_circle_outline"
+              icon="delete"
               color="red"
-              :label="$t('delete')"
+              :label="$t('action.delete')"
               @click.native="
                 confirmRemove = true
                 $refs.options.tippy().hide()
diff --git a/components/collections/graphql/Request.vue b/components/collections/graphql/Request.vue
index 949db9768..55e328309 100644
--- a/components/collections/graphql/Request.vue
+++ b/components/collections/graphql/Request.vue
@@ -75,9 +75,9 @@
               "
             />
             <SmartItem
-              icon="remove_circle_outline"
+              icon="delete"
               color="red"
-              :label="$t('delete')"
+              :label="$t('action.delete')"
               @click.native="
                 confirmRemove = true
                 $refs.options.tippy().hide()
diff --git a/components/collections/my/Collection.vue b/components/collections/my/Collection.vue
index 0eb69ec02..de354841b 100644
--- a/components/collections/my/Collection.vue
+++ b/components/collections/my/Collection.vue
@@ -43,7 +43,7 @@
         <ButtonSecondary
           v-if="doc && selected"
           v-tippy="{ theme: 'tooltip' }"
-          :title="$t('delete')"
+          :title="$t('action.remove')"
           icon="check_circle_outline"
           color="green"
           @click.native="$emit('unselect-collection')"
@@ -96,9 +96,9 @@
               "
             />
             <SmartItem
-              icon="remove_circle_outline"
+              icon="delete"
               color="red"
-              :label="$t('delete')"
+              :label="$t('action.delete')"
               @click.native="
                 confirmRemove = true
                 $refs.options.tippy().hide()
diff --git a/components/collections/my/Folder.vue b/components/collections/my/Folder.vue
index af513bde2..00a8bca14 100644
--- a/components/collections/my/Folder.vue
+++ b/components/collections/my/Folder.vue
@@ -78,9 +78,9 @@
               "
             />
             <SmartItem
-              icon="remove_circle_outline"
+              icon="delete"
               color="red"
-              :label="$t('delete')"
+              :label="$t('action.delete')"
               @click.native="
                 confirmRemove = true
                 $refs.options.tippy().hide()
diff --git a/components/collections/my/Request.vue b/components/collections/my/Request.vue
index 5c0363427..7cc22f9f1 100644
--- a/components/collections/my/Request.vue
+++ b/components/collections/my/Request.vue
@@ -86,9 +86,9 @@
               "
             />
             <SmartItem
-              icon="remove_circle_outline"
+              icon="delete"
               color="red"
-              :label="$t('delete')"
+              :label="$t('action.delete')"
               @click.native="
                 confirmRemove = true
                 $refs.options.tippy().hide()
diff --git a/components/collections/teams/Collection.vue b/components/collections/teams/Collection.vue
index 3f6778ed7..3c3b33b9a 100644
--- a/components/collections/teams/Collection.vue
+++ b/components/collections/teams/Collection.vue
@@ -35,7 +35,7 @@
         <ButtonSecondary
           v-if="doc && selected"
           v-tippy="{ theme: 'tooltip' }"
-          :title="$t('delete')"
+          :title="$t('action.remove')"
           icon="check_circle_outline"
           color="green"
           @click.native="$emit('unselect-collection')"
@@ -92,9 +92,9 @@
             />
             <SmartItem
               v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
-              icon="remove_circle_outline"
+              icon="delete"
               color="red"
-              :label="$t('delete')"
+              :label="$t('action.delete')"
               @click.native="
                 confirmRemove = true
                 $refs.options.tippy().hide()
diff --git a/components/collections/teams/Folder.vue b/components/collections/teams/Folder.vue
index 241d0609e..ffb88f298 100644
--- a/components/collections/teams/Folder.vue
+++ b/components/collections/teams/Folder.vue
@@ -75,9 +75,9 @@
             />
             <SmartItem
               v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
-              icon="remove_circle_outline"
+              icon="delete"
               color="red"
-              :label="$t('delete')"
+              :label="$t('action.delete')"
               @click.native="
                 confirmRemove = true
                 $refs.options.tippy().hide()
diff --git a/components/collections/teams/Request.vue b/components/collections/teams/Request.vue
index cc21e5a8c..4bba905c8 100644
--- a/components/collections/teams/Request.vue
+++ b/components/collections/teams/Request.vue
@@ -79,9 +79,9 @@
               "
             />
             <SmartItem
-              icon="remove_circle_outline"
+              icon="delete"
               color="red"
-              :label="$t('delete')"
+              :label="$t('action.delete')"
               @click.native="
                 confirmRemove = true
                 $refs.options.tippy().hide()
diff --git a/components/environments/Edit.vue b/components/environments/Edit.vue
index 364f60138..0306a47cc 100644
--- a/components/environments/Edit.vue
+++ b/components/environments/Edit.vue
@@ -24,7 +24,7 @@
           <div class="flex">
             <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
-              :title="$t('clear')"
+              :title="$t('action.clear_all')"
               :icon="clearIcon"
               class="rounded"
               @click.native="clearContent()"
@@ -60,7 +60,7 @@
               <ButtonSecondary
                 id="variable"
                 v-tippy="{ theme: 'tooltip' }"
-                :title="$t('delete')"
+                :title="$t('action.remove')"
                 icon="remove_circle_outline"
                 color="red"
                 @click.native="removeEnvironmentVariable(index)"
diff --git a/components/environments/Environment.vue b/components/environments/Environment.vue
index 6e716c19a..2b102bacf 100644
--- a/components/environments/Environment.vue
+++ b/components/environments/Environment.vue
@@ -41,9 +41,9 @@
         />
         <SmartItem
           v-if="!(environmentIndex === 'Global')"
-          icon="remove_circle_outline"
+          icon="delete"
           color="red"
-          :label="$t('delete')"
+          :label="$t('action.delete')"
           @click.native="
             confirmRemove = true
             $refs.options.tippy().hide()
diff --git a/components/environments/index.vue b/components/environments/index.vue
index 8f207e0f9..2fdecfa22 100644
--- a/components/environments/index.vue
+++ b/components/environments/index.vue
@@ -10,33 +10,46 @@
         sticky
       "
     >
-      <div class="select-wrapper">
-        <select
-          v-model="selectedEnvironmentIndex"
-          :disabled="environments.length == 0"
-          class="
-            bg-primaryLight
-            border-b border-dividerLight
-            flex
-            w-full
-            py-2
-            px-4
-            appearance-none
-          "
-        >
-          <option :value="-1">{{ $t("environment.no_environment") }}</option>
-          <option v-if="environments.length === 0" value="0">
-            {{ $t("environment.create_new") }}
-          </option>
-          <option
-            v-for="(environment, index) in environments"
-            :key="`environment-${index}`"
-            :value="index"
+      <tippy ref="options" interactive trigger="click" theme="popover" arrow>
+        <template #trigger>
+          <span
+            v-tippy="{ theme: 'tooltip' }"
+            :title="$t('environment.select')"
+            class="border-b border-dividerLight flex-1 select-wrapper"
           >
-            {{ environment.name }}
-          </option>
-        </select>
-      </div>
+            <ButtonSecondary
+              v-if="selectedEnvironmentIndex !== -1"
+              :label="environments[selectedEnvironmentIndex].name"
+              class="rounded-none flex-1 pr-8"
+            />
+            <ButtonSecondary
+              v-else
+              :label="$t('environment.no_environment')"
+              class="rounded-none flex-1 pr-8"
+            />
+          </span>
+        </template>
+        <SmartItem
+          :label="$t('environment.no_environment')"
+          :info-icon="selectedEnvironmentIndex === -1 ? 'done' : ''"
+          :active-info-icon="selectedEnvironmentIndex === -1"
+          @click.native="
+            selectedEnvironmentIndex = -1
+            $refs.options.tippy().hide()
+          "
+        />
+        <SmartItem
+          v-for="(gen, index) in environments"
+          :key="`gen-${index}`"
+          :label="gen.name"
+          :info-icon="index === selectedEnvironmentIndex ? 'done' : ''"
+          :active-info-icon="index === selectedEnvironmentIndex"
+          @click.native="
+            selectedEnvironmentIndex = index
+            $refs.options.tippy().hide()
+          "
+        />
+      </tippy>
       <div class="border-b border-dividerLight flex flex-1 justify-between">
         <ButtonSecondary
           icon="add"
diff --git a/components/firebase/Login.vue b/components/firebase/Login.vue
index 322f74b5e..e10ea2a8d 100644
--- a/components/firebase/Login.vue
+++ b/components/firebase/Login.vue
@@ -7,18 +7,18 @@
   >
     <template #body>
       <div v-if="mode === 'sign-in'" class="flex flex-col space-y-2 px-2">
-        <SmartItem
-          :loading="signingInWithGoogle"
-          svg="google"
-          :label="$t('auth.continue_with_google')"
-          @click.native="signInWithGoogle"
-        />
         <SmartItem
           :loading="signingInWithGitHub"
           svg="github"
           :label="$t('auth.continue_with_github')"
           @click.native="signInWithGithub"
         />
+        <SmartItem
+          :loading="signingInWithGoogle"
+          svg="google"
+          :label="$t('auth.continue_with_google')"
+          @click.native="signInWithGoogle"
+        />
         <SmartItem
           icon="mail"
           :label="$t('auth.continue_with_email')"
diff --git a/components/graphql/RequestOptions.vue b/components/graphql/RequestOptions.vue
index 206f67f0c..f7e73ecc8 100644
--- a/components/graphql/RequestOptions.vue
+++ b/components/graphql/RequestOptions.vue
@@ -132,7 +132,7 @@
             <div class="flex">
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
-                :title="$t('clear')"
+                :title="$t('action.clear_all')"
                 icon="clear_all"
                 @click.native="headers = []"
               />
@@ -220,7 +220,7 @@
             <span>
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
-                :title="$t('delete')"
+                :title="$t('action.remove')"
                 icon="remove_circle_outline"
                 color="red"
                 @click.native="removeRequestHeader(index)"
diff --git a/components/history/graphql/Card.vue b/components/history/graphql/Card.vue
index 1b78883a3..b544e0168 100644
--- a/components/history/graphql/Card.vue
+++ b/components/history/graphql/Card.vue
@@ -23,7 +23,7 @@
         v-tippy="{ theme: 'tooltip' }"
         icon="remove_circle_outline"
         color="red"
-        :title="$t('delete')"
+        :title="$t('action.remove')"
         class="hidden group-hover:inline-flex"
         data-testid="delete_history_entry"
         @click.native="$emit('delete-entry')"
diff --git a/components/history/index.vue b/components/history/index.vue
index 81585c161..3e0f1580d 100644
--- a/components/history/index.vue
+++ b/components/history/index.vue
@@ -31,7 +31,7 @@
           data-testid="clear_history"
           :disabled="history.length === 0"
           icon="clear_all"
-          :title="$t('clear_all')"
+          :title="$t('action.clear_all')"
           @click.native="confirmRemove = true"
         />
       </div>
diff --git a/components/history/rest/Card.vue b/components/history/rest/Card.vue
index a4bd0fe24..a7d8bb53b 100644
--- a/components/history/rest/Card.vue
+++ b/components/history/rest/Card.vue
@@ -31,7 +31,7 @@
       v-tippy="{ theme: 'tooltip' }"
       icon="remove_circle_outline"
       color="red"
-      :title="$t('delete')"
+      :title="$t('action.remove')"
       class="group-hover:inline-flex hidden"
       data-testid="delete_history_entry"
       @click.native="$emit('delete-entry')"
diff --git a/components/http/Authorization.vue b/components/http/Authorization.vue
index 20fcd9f11..66ad40ea6 100644
--- a/components/http/Authorization.vue
+++ b/components/http/Authorization.vue
@@ -75,7 +75,7 @@
         />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
-          :title="$t('clear')"
+          :title="$t('action.clear')"
           icon="clear_all"
           @click.native="clearContent"
         />
diff --git a/components/http/BodyParameters.vue b/components/http/BodyParameters.vue
index ebf199354..471486e20 100644
--- a/components/http/BodyParameters.vue
+++ b/components/http/BodyParameters.vue
@@ -26,7 +26,7 @@
         />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
-          :title="$t('clear')"
+          :title="$t('action.clear_all')"
           icon="clear_all"
           @click.native="clearContent"
         />
@@ -175,7 +175,7 @@
       <span>
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
-          :title="$t('delete')"
+          :title="$t('action.remove')"
           icon="remove_circle_outline"
           color="red"
           @click.native="deleteBodyParam(index)"
diff --git a/components/http/CodegenModal.vue b/components/http/CodegenModal.vue
index bf5d9efa5..0db8c0009 100644
--- a/components/http/CodegenModal.vue
+++ b/components/http/CodegenModal.vue
@@ -9,36 +9,28 @@
         <label for="requestType" class="px-4 pb-4">
           {{ $t("request.choose_language") }}
         </label>
-        <div class="flex">
-          <tippy
-            ref="options"
-            interactive
-            trigger="click"
-            theme="popover"
-            arrow
-          >
-            <template #trigger>
-              <span class="select-wrapper">
-                <ButtonSecondary
-                  :label="codegens.find((x) => x.id === codegenType).name"
-                  outline
-                  class="pr-8"
-                />
-              </span>
-            </template>
-            <SmartItem
-              v-for="(gen, index) in codegens"
-              :key="`gen-${index}`"
-              :label="gen.name"
-              :info-icon="gen.id === codegenType ? 'done' : ''"
-              :active-info-icon="gen.id === codegenType"
-              @click.native="
-                codegenType = gen.id
-                $refs.options.tippy().hide()
-              "
-            />
-          </tippy>
-        </div>
+        <tippy ref="options" interactive trigger="click" theme="popover" arrow>
+          <template #trigger>
+            <span class="select-wrapper">
+              <ButtonSecondary
+                :label="codegens.find((x) => x.id === codegenType).name"
+                outline
+                class="flex-1 pr-8"
+              />
+            </span>
+          </template>
+          <SmartItem
+            v-for="(gen, index) in codegens"
+            :key="`gen-${index}`"
+            :label="gen.name"
+            :info-icon="gen.id === codegenType ? 'done' : ''"
+            :active-info-icon="gen.id === codegenType"
+            @click.native="
+              codegenType = gen.id
+              $refs.options.tippy().hide()
+            "
+          />
+        </tippy>
         <div class="flex flex-1 justify-between">
           <label for="generatedCode" class="px-4 pt-4 pb-4">
             {{ $t("request.generated_code") }}
diff --git a/components/http/Headers.vue b/components/http/Headers.vue
index 91430cb1d..2a10cf472 100644
--- a/components/http/Headers.vue
+++ b/components/http/Headers.vue
@@ -26,7 +26,7 @@
         />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
-          :title="$t('clear')"
+          :title="$t('action.clear_all')"
           icon="clear_all"
           @click.native="clearContent"
         />
@@ -129,7 +129,7 @@
       <span>
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
-          :title="$t('delete')"
+          :title="$t('action.remove')"
           icon="remove_circle_outline"
           color="red"
           @click.native="deleteHeader(index)"
diff --git a/components/http/Parameters.vue b/components/http/Parameters.vue
index c5a5693e1..f2d8ff760 100644
--- a/components/http/Parameters.vue
+++ b/components/http/Parameters.vue
@@ -26,7 +26,7 @@
         />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
-          :title="$t('clear_all')"
+          :title="$t('action.clear_all')"
           icon="clear_all"
           @click.native="clearContent"
         />
@@ -140,7 +140,7 @@
       <span>
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
-          :title="$t('delete')"
+          :title="$t('action.remove')"
           icon="remove_circle_outline"
           color="red"
           @click.native="deleteParam(index)"
diff --git a/components/http/PreRequestScript.vue b/components/http/PreRequestScript.vue
index d1069859d..d0701bad3 100644
--- a/components/http/PreRequestScript.vue
+++ b/components/http/PreRequestScript.vue
@@ -26,7 +26,7 @@
         />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
-          :title="$t('clear')"
+          :title="$t('action.clear')"
           icon="clear_all"
           @click.native="clearContent"
         />
diff --git a/components/http/RawBody.vue b/components/http/RawBody.vue
index 5aec1c59e..589604c26 100644
--- a/components/http/RawBody.vue
+++ b/components/http/RawBody.vue
@@ -26,7 +26,7 @@
         />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
-          :title="$t('clear')"
+          :title="$t('action.clear')"
           icon="clear_all"
           @click.native="clearContent('rawParams', $event)"
         />
diff --git a/components/http/Request.vue b/components/http/Request.vue
index fc8bd0760..da08a0549 100644
--- a/components/http/Request.vue
+++ b/components/http/Request.vue
@@ -121,7 +121,7 @@
           />
           <SmartItem
             ref="clearAll"
-            :label="$t('clear_all')"
+            :label="$t('action.clear_all')"
             icon="clear_all"
             @click.native="
               clearContent()
diff --git a/components/http/TestResult.vue b/components/http/TestResult.vue
index 5994798ce..1201580f6 100644
--- a/components/http/TestResult.vue
+++ b/components/http/TestResult.vue
@@ -24,7 +24,7 @@
         </label>
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
-          :title="$t('clear')"
+          :title="$t('action.clear')"
           icon="clear_all"
           @click.native="clearContent()"
         />
diff --git a/components/http/Tests.vue b/components/http/Tests.vue
index 4d92ddc71..ee8ae3241 100644
--- a/components/http/Tests.vue
+++ b/components/http/Tests.vue
@@ -26,7 +26,7 @@
         />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
-          :title="$t('clear')"
+          :title="$t('action.clear')"
           icon="clear_all"
           @click.native="clearContent"
         />
diff --git a/components/http/TokenList.vue b/components/http/TokenList.vue
index 2439bda4c..57d93d6d8 100644
--- a/components/http/TokenList.vue
+++ b/components/http/TokenList.vue
@@ -6,7 +6,7 @@
         <div v-if="tokens.length != 0">
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
-            :title="$t('clear')"
+            :title="$t('action.clear_all')"
             icon="clear_all"
             @click.native="clearContent('tokens', $event)"
           />
@@ -41,7 +41,7 @@
           <li>
             <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
-              :title="$t('delete')"
+              :title="$t('action.remove')"
               icon="remove_circle_outline"
               color="red"
               @click.native="removeOAuthToken(index)"
diff --git a/components/realtime/Socketio.vue b/components/realtime/Socketio.vue
index 220d90159..634c03e02 100644
--- a/components/realtime/Socketio.vue
+++ b/components/realtime/Socketio.vue
@@ -117,7 +117,7 @@
               <ButtonSecondary
                 v-if="index + 1 !== communication.inputs.length"
                 v-tippy="{ theme: 'tooltip' }"
-                :title="$t('delete')"
+                :title="$t('action.remove')"
                 icon="remove_circle_outline"
                 class="rounded-l-none"
                 color="red"
diff --git a/components/realtime/Websocket.vue b/components/realtime/Websocket.vue
index f5eab5ffb..93293f9dc 100644
--- a/components/realtime/Websocket.vue
+++ b/components/realtime/Websocket.vue
@@ -56,7 +56,7 @@
               <div class="flex">
                 <ButtonSecondary
                   v-tippy="{ theme: 'tooltip' }"
-                  :title="$t('clear_all')"
+                  :title="$t('action.clear_all')"
                   icon="clear_all"
                   @click.native="clearContent"
                 />
@@ -112,7 +112,7 @@
               <span>
                 <ButtonSecondary
                   v-tippy="{ theme: 'tooltip' }"
-                  :title="$t('delete')"
+                  :title="$t('action.remove')"
                   icon="remove_circle_outline"
                   color="red"
                   @click.native="deleteProtocol({ index })"
diff --git a/components/teams/Edit.vue b/components/teams/Edit.vue
index 3f246413a..e3e39cf29 100644
--- a/components/teams/Edit.vue
+++ b/components/teams/Edit.vue
@@ -82,7 +82,7 @@
               <ButtonSecondary
                 id="member"
                 v-tippy="{ theme: 'tooltip' }"
-                :title="$t('delete')"
+                :title="$t('action.remove')"
                 icon="remove_circle_outline"
                 color="red"
                 @click.native="removeExistingTeamMember(member.user.uid)"
@@ -142,7 +142,7 @@
               <ButtonSecondary
                 id="member"
                 v-tippy="{ theme: 'tooltip' }"
-                :title="$t('delete')"
+                :title="$t('action.remove')"
                 icon="remove_circle_outline"
                 color="red"
                 @click.native="removeTeamMember(index)"
diff --git a/components/teams/Team.vue b/components/teams/Team.vue
index 25a43caae..808a2476a 100644
--- a/components/teams/Team.vue
+++ b/components/teams/Team.vue
@@ -39,9 +39,9 @@
         />
         <SmartItem
           v-if="team.myRole === 'OWNER'"
-          icon="remove_circle_outline"
+          icon="delete"
           color="red"
-          :label="$t('delete')"
+          :label="$t('action.delete')"
           @click.native="
             deleteTeam()
             $refs.options.tippy().hide()
diff --git a/locales/en.json b/locales/en.json
index fc6724542..436fe1050 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -17,7 +17,11 @@
     "dismiss": "Dismiss",
     "copy": "Copy",
     "learn_more": "Learn more",
-    "go_back": "Go back"
+    "go_back": "Go back",
+    "delete": "Delete",
+    "remove": "Remove",
+    "clear": "Clear",
+    "clear_all": "Clear all"
   },
   "confirm": {
     "logout": "Are you sure you want to logout?",
@@ -27,7 +31,8 @@
     "remove_request": "Are you sure you want to permanently delete this request?",
     "remove_environment": "Are you sure you want to permanently delete this environment?",
     "remove_telemetry": "Are you sure you want to opt-out of Telemetry?",
-    "remove_team": "Are you sure you want to delete this team?"
+    "remove_team": "Are you sure you want to delete this team?",
+    "sync": "Are you sure you want to sync this workspace?"
   },
   "empty": {
     "protocols": "Protocols are empty",
@@ -307,7 +312,8 @@
     "create_new": "Create new environment",
     "edit": "Edit Environment",
     "variable_list": "Variable List",
-    "invalid_name": "Please provide a valid name for the environment"
+    "invalid_name": "Please provide a valid name for the environment",
+    "select": "Select environment"
   },
   "response": {
     "title": "Response",
@@ -401,8 +407,6 @@
   "no_label": "No label",
   "search": "Search",
   "history_deleted": "History deleted",
-  "clear": "Clear",
-  "clear_all": "Clear all",
   "cleared": "Cleared",
   "time": "Time",
   "duration": "Duration",
@@ -410,7 +414,6 @@
   "new": "New",
   "more": "More",
   "edit": "Edit",
-  "delete": "Delete",
   "deleted": "Deleted",
   "undo": "Undo",
   "edit_request": "Edit Request",
diff --git a/pages/documentation.vue b/pages/documentation.vue
index f853337b3..f56e8bc9f 100644
--- a/pages/documentation.vue
+++ b/pages/documentation.vue
@@ -52,7 +52,7 @@
               />
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
-                :title="$t('clear')"
+                :title="$t('action.clear')"
                 icon="clear_all"
                 @click.native="collectionJSON = '[]'"
               />