From 1bea0a42d7ddeb0afa57171274f738ef4bc5a218 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Sun, 22 Aug 2021 12:58:43 +0530
Subject: [PATCH] refactor(ui): better button, tab caomponents

---
 assets/scss/themes.scss                  |  2 +-
 components/app/Header.vue                |  5 ++---
 components/button/Secondary.vue          |  5 +++++
 components/collections/ChooseType.vue    |  3 +++
 components/collections/graphql/index.vue |  2 +-
 components/collections/index.vue         |  5 ++---
 components/environments/Edit.vue         |  6 +++---
 components/environments/index.vue        |  2 +-
 components/graphql/RequestOptions.vue    |  2 +-
 components/http/BodyParameters.vue       |  2 +-
 components/http/Headers.vue              |  2 +-
 components/http/Parameters.vue           |  2 +-
 components/http/Request.vue              |  6 +++---
 components/realtime/Mqtt.vue             | 22 ++++++++++-----------
 components/realtime/Socketio.vue         | 13 ++++++------
 components/realtime/Websocket.vue        |  5 ++---
 components/teams/Edit.vue                | 22 +++++----------------
 components/teams/Team.vue                | 25 ++++++++----------------
 18 files changed, 56 insertions(+), 75 deletions(-)

diff --git a/assets/scss/themes.scss b/assets/scss/themes.scss
index 5d9dd3813..d4962f9d7 100644
--- a/assets/scss/themes.scss
+++ b/assets/scss/themes.scss
@@ -10,7 +10,7 @@
   // Light Background color
   --primary-light-color: theme("colors.dark.600");
   // Dark Background color
-  --primary-dark-color: theme("colors.dark.900");
+  --primary-dark-color: theme("colors.true-gray.800");
   // Text color
   --secondary-color: theme("colors.true-gray.400");
   // Light Text color
diff --git a/components/app/Header.vue b/components/app/Header.vue
index 1293be9d0..d78b27837 100644
--- a/components/app/Header.vue
+++ b/components/app/Header.vue
@@ -26,14 +26,13 @@
           v-if="currentUser === null"
           icon="filter_drama"
           :label="$t('header.save_workspace')"
-          outline
-          class="hidden !text-secondaryDark md:flex"
+          filled
+          class="hidden !font-semibold md:flex"
           @click.native="showLogin = true"
         />
         <ButtonPrimary
           v-if="currentUser === null"
           :label="$t('header.login')"
-          outline
           @click.native="showLogin = true"
         />
         <span v-else class="pr-2">
diff --git a/components/button/Secondary.vue b/components/button/Secondary.vue
index b61129d0b..235527d8b 100644
--- a/components/button/Secondary.vue
+++ b/components/button/Secondary.vue
@@ -27,6 +27,7 @@
         'border border-divider hover:border-dividerDark focus-visible:border-dividerDark':
           outline,
       },
+      { 'bg-primaryDark': filled },
     ]"
     :disabled="disabled"
     tabindex="0"
@@ -127,6 +128,10 @@ export default defineComponent({
       type: Array,
       default: () => [],
     },
+    filled: {
+      type: Boolean,
+      default: false,
+    },
   },
 })
 </script>
diff --git a/components/collections/ChooseType.vue b/components/collections/ChooseType.vue
index c20260a4e..4b81d385e 100644
--- a/components/collections/ChooseType.vue
+++ b/components/collections/ChooseType.vue
@@ -19,12 +19,15 @@
               autofocus
               class="
                 bg-primary
+                border-b border-transparent
                 cursor-pointer
                 flex
+                font-medium
                 w-full
                 py-2
                 px-4
                 appearance-none
+                hover:bg-primaryDark
               "
               @change="updateSelectedTeam(myTeams[$event.target.value])"
             >
diff --git a/components/collections/graphql/index.vue b/components/collections/graphql/index.vue
index 04838b07b..a810fe930 100644
--- a/components/collections/graphql/index.vue
+++ b/components/collections/graphql/index.vue
@@ -75,7 +75,7 @@
       </span>
       <ButtonSecondary
         :label="$t('add.new')"
-        outline
+        filled
         @click.native="displayModalAdd(true)"
       />
     </div>
diff --git a/components/collections/index.vue b/components/collections/index.vue
index ae1648032..1e868591d 100644
--- a/components/collections/index.vue
+++ b/components/collections/index.vue
@@ -118,15 +118,14 @@
             collectionsType.selectedTeam.myRole == 'VIEWER')
         "
         v-tippy="{ theme: 'tooltip' }"
-        disabled
         :title="$t('team.no_access')"
         :label="$t('add.new')"
-        outline
+        filled
       />
       <ButtonSecondary
         v-else
-        outline
         :label="$t('add.new')"
+        filled
         @click.native="displayModalAdd(true)"
       />
     </div>
diff --git a/components/environments/Edit.vue b/components/environments/Edit.vue
index 8cc11c095..9b9622a15 100644
--- a/components/environments/Edit.vue
+++ b/components/environments/Edit.vue
@@ -46,13 +46,13 @@
           >
             <input
               v-model="variable.key"
-              class="bg-primaryLight flex flex-1 py-2 px-4"
+              class="bg-primary flex flex-1 py-2 px-4"
               :placeholder="$t('count.variable', { count: index + 1 })"
               :name="'param' + index"
             />
             <input
               v-model="variable.value"
-              class="bg-primaryLight flex flex-1 py-2 px-4"
+              class="bg-primary flex flex-1 py-2 px-4"
               :placeholder="$t('count.value', { count: index + 1 })"
               :name="'value' + index"
             />
@@ -83,7 +83,7 @@
             </span>
             <ButtonSecondary
               :label="$t('add.new')"
-              outline
+              filled
               @click.native="addEnvironmentVariable"
             />
           </div>
diff --git a/components/environments/index.vue b/components/environments/index.vue
index 6608a2984..45ecf8e54 100644
--- a/components/environments/index.vue
+++ b/components/environments/index.vue
@@ -116,7 +116,7 @@
       </span>
       <ButtonSecondary
         :label="$t('add.new')"
-        outline
+        filled
         @click.native="displayModalAdd(true)"
       />
     </div>
diff --git a/components/graphql/RequestOptions.vue b/components/graphql/RequestOptions.vue
index 6928b3132..f33d63cbd 100644
--- a/components/graphql/RequestOptions.vue
+++ b/components/graphql/RequestOptions.vue
@@ -241,7 +241,7 @@
             </span>
             <ButtonSecondary
               :label="$t('add.new')"
-              outline
+              filled
               icon="add"
               @click.native="addRequestHeader"
             />
diff --git a/components/http/BodyParameters.vue b/components/http/BodyParameters.vue
index b9d3b5f7f..9e0ebb094 100644
--- a/components/http/BodyParameters.vue
+++ b/components/http/BodyParameters.vue
@@ -191,7 +191,7 @@
       </span>
       <ButtonSecondary
         :label="$t('add.new')"
-        outline
+        filled
         icon="add"
         @click.native="addBodyParam"
       />
diff --git a/components/http/Headers.vue b/components/http/Headers.vue
index e70aa3f4b..98475e329 100644
--- a/components/http/Headers.vue
+++ b/components/http/Headers.vue
@@ -144,7 +144,7 @@
         {{ $t("empty.headers") }}
       </span>
       <ButtonSecondary
-        outline
+        filled
         :label="$t('add.new')"
         icon="add"
         @click.native="addHeader"
diff --git a/components/http/Parameters.vue b/components/http/Parameters.vue
index 71da7ab8d..9b12d415c 100644
--- a/components/http/Parameters.vue
+++ b/components/http/Parameters.vue
@@ -157,7 +157,7 @@
       <ButtonSecondary
         :label="$t('add.new')"
         icon="add"
-        outline
+        filled
         @click.native="addParam"
       />
     </div>
diff --git a/components/http/Request.vue b/components/http/Request.vue
index 3906252e2..51789182b 100644
--- a/components/http/Request.vue
+++ b/components/http/Request.vue
@@ -108,7 +108,7 @@
           <template #trigger>
             <ButtonPrimary
               class="rounded-l-none"
-              outline
+              filled
               icon="keyboard_arrow_down"
             />
           </template>
@@ -142,7 +142,7 @@
       <ButtonSecondary
         class="rounded-r-none ml-2"
         :label="$t('request.save')"
-        outline
+        filled
         icon="save"
         @click.native="saveRequest()"
       />
@@ -157,7 +157,7 @@
           <template #trigger>
             <ButtonSecondary
               icon="keyboard_arrow_down"
-              outline
+              filled
               class="rounded-r"
             />
           </template>
diff --git a/components/realtime/Mqtt.vue b/components/realtime/Mqtt.vue
index 78b891b80..766692047 100644
--- a/components/realtime/Mqtt.vue
+++ b/components/realtime/Mqtt.vue
@@ -72,15 +72,15 @@
           />
         </div>
         <div class="flex flex-1 p-4 items-center justify-between">
-          <label for="mqtt-message" class="font-semibold text-secondaryLight">{{
-            $t("mqtt.communication")
-          }}</label>
+          <label for="mqtt-message" class="font-semibold text-secondaryLight">
+            {{ $t("mqtt.communication") }}
+          </label>
         </div>
-        <div class="flex px-4">
+        <div class="flex space-x-2 px-4">
           <input
             id="mqtt-message"
             v-model="msg"
-            class="input !rounded-r-none"
+            class="input"
             type="text"
             :placeholder="$t('mqtt.message')"
             spellcheck="false"
@@ -88,7 +88,6 @@
           <ButtonPrimary
             id="publish"
             name="get"
-            class="rounded-l-none"
             :disabled="!canpublish"
             :label="$t('mqtt.publish')"
             @click.native="publish"
@@ -103,24 +102,23 @@
             inline-flex
           "
         >
-          <label for="sub_topic" class="font-semibold text-secondaryLight">{{
-            $t("mqtt.topic")
-          }}</label>
+          <label for="sub_topic" class="font-semibold text-secondaryLight">
+            {{ $t("mqtt.topic") }}
+          </label>
         </div>
-        <div class="flex px-4">
+        <div class="flex space-x-2 px-4">
           <input
             id="sub_topic"
             v-model="sub_topic"
             type="text"
             :placeholder="$t('mqtt.topic_name')"
             spellcheck="false"
-            class="input !rounded-r-none"
+            class="input"
           />
           <ButtonPrimary
             id="subscribe"
             name="get"
             :disabled="!cansubscribe"
-            class="rounded-l-none"
             :label="
               subscriptionState ? $t('mqtt.unsubscribe') : $t('mqtt.subscribe')
             "
diff --git a/components/realtime/Socketio.vue b/components/realtime/Socketio.vue
index 961cd9092..fc7894424 100644
--- a/components/realtime/Socketio.vue
+++ b/components/realtime/Socketio.vue
@@ -96,9 +96,9 @@
           />
         </div>
         <div class="flex flex-1 p-4 items-center justify-between">
-          <label class="font-semibold text-secondaryLight">{{
-            $t("socketio.communication")
-          }}</label>
+          <label class="font-semibold text-secondaryLight">
+            {{ $t("socketio.communication") }}
+          </label>
           <div class="flex">
             <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
@@ -114,10 +114,10 @@
             v-for="(input, index) of communication.inputs"
             :key="`input-${index}`"
           >
-            <div class="flex">
+            <div class="flex space-x-2">
               <input
                 v-model="communication.inputs[index]"
-                class="input !rounded-r-none"
+                class="input"
                 name="message"
                 :placeholder="$t('count.message', { count: index + 1 })"
                 type="text"
@@ -129,7 +129,7 @@
                 v-tippy="{ theme: 'tooltip' }"
                 :title="$t('action.remove')"
                 icon="remove_circle_outline"
-                class="rounded-r"
+                class="rounded"
                 color="red"
                 outline
                 @click.native="removeCommunicationInput({ index })"
@@ -139,7 +139,6 @@
                 id="send"
                 name="send"
                 :disabled="!connectionState"
-                class="rounded-l-none"
                 :label="$t('action.send')"
                 @click.native="sendMessage"
               />
diff --git a/components/realtime/Websocket.vue b/components/realtime/Websocket.vue
index 2500110bb..3feea7677 100644
--- a/components/realtime/Websocket.vue
+++ b/components/realtime/Websocket.vue
@@ -167,7 +167,7 @@
             {{ $t("websocket.communication") }}
           </label>
         </div>
-        <div class="flex px-4">
+        <div class="flex space-x-2 px-4">
           <input
             id="websocket-message"
             v-model="communication.input"
@@ -175,7 +175,7 @@
             type="text"
             :disabled="!connectionState"
             :placeholder="$t('websocket.message')"
-            class="input !rounded-r-none"
+            class="input"
             @keyup.enter="connectionState ? sendMessage() : null"
             @keyup.up="connectionState ? walkHistory('up') : null"
             @keyup.down="connectionState ? walkHistory('down') : null"
@@ -184,7 +184,6 @@
             id="send"
             name="send"
             :disabled="!connectionState"
-            class="rounded-l-none"
             :label="$t('action.send')"
             @click.native="sendMessage"
           />
diff --git a/components/teams/Edit.vue b/components/teams/Edit.vue
index 545c0fd4b..608021acb 100644
--- a/components/teams/Edit.vue
+++ b/components/teams/Edit.vue
@@ -35,7 +35,7 @@
             class="divide-x divide-dividerLight flex"
           >
             <input
-              class="bg-primaryLight flex flex-1 py-2 px-4"
+              class="bg-primary flex flex-1 py-2 px-4"
               :placeholder="$t('team.email')"
               :name="'param' + index"
               :value="member.user.email"
@@ -52,13 +52,7 @@
                 <template #trigger>
                   <span class="select-wrapper">
                     <input
-                      class="
-                        bg-primaryLight
-                        cursor-pointer
-                        flex flex-1
-                        py-2
-                        px-4
-                      "
+                      class="bg-primary cursor-pointer flex flex-1 py-2 px-4"
                       :placeholder="$t('team.permissions')"
                       :name="'value' + index"
                       :value="
@@ -102,7 +96,7 @@
           >
             <input
               v-model="member.key"
-              class="bg-primaryLight flex flex-1 py-2 px-4"
+              class="bg-primary flex flex-1 py-2 px-4"
               :placeholder="$t('team.email')"
               :name="'member' + index"
               autofocus
@@ -118,13 +112,7 @@
                 <template #trigger>
                   <span class="select-wrapper">
                     <input
-                      class="
-                        bg-primaryLight
-                        cursor-pointer
-                        flex flex-1
-                        py-2
-                        px-4
-                      "
+                      class="bg-primary cursor-pointer flex flex-1 py-2 px-4"
                       :placeholder="$t('team.permissions')"
                       :name="'value' + index"
                       :value="
@@ -177,7 +165,7 @@
             </span>
             <ButtonSecondary
               :label="$t('add.new')"
-              outline
+              filled
               @click.native="addTeamMember"
             />
           </div>
diff --git a/components/teams/Team.vue b/components/teams/Team.vue
index 952c73d20..353f55f7a 100644
--- a/components/teams/Team.vue
+++ b/components/teams/Team.vue
@@ -49,24 +49,15 @@
             $refs.options.tippy().hide()
           "
         />
-        <span
-          v-tippy="{ theme: 'tooltip' }"
-          :title="
-            team.myRole === 'OWNER' && team.ownersCount == 1
-              ? $t('team.exit_disabled')
-              : ''
+        <SmartItem
+          v-if="!(team.myRole === 'OWNER' && team.ownersCount == 1)"
+          icon="remove"
+          :label="$t('team.exit')"
+          @click.native="
+            exitTeam()
+            $refs.options.tippy().hide()
           "
-        >
-          <SmartItem
-            :disabled="team.myRole === 'OWNER' && team.ownersCount == 1"
-            icon="remove"
-            :label="$t('team.exit')"
-            @click.native="
-              exitTeam()
-              $refs.options.tippy().hide()
-            "
-          />
-        </span>
+        />
       </tippy>
     </span>
   </div>