Merge branch 'refactor/ui' of https://github.com/hoppscotch/hoppscotch into refactor/ui

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

components/app/Header.vue

@@ -26,14 +26,13 @@
           v-if="currentUser === null"
           icon="filter_drama"
           :label="$t('header.save_workspace')"
-          outline
+          filled
-          class="hidden !text-secondaryDark md:flex"
+          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">

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>

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

components/collections/graphql/index.vue

@@ -75,7 +75,7 @@
       </span>
       <ButtonSecondary
         :label="$t('add.new')"
-        outline
+        filled
         @click.native="displayModalAdd(true)"
       />
     </div>

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>

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>

components/environments/index.vue

@@ -116,7 +116,7 @@
       </span>
       <ButtonSecondary
         :label="$t('add.new')"
-        outline
+        filled
         @click.native="displayModalAdd(true)"
       />
     </div>

components/graphql/RequestOptions.vue

@@ -241,7 +241,7 @@
             </span>
             <ButtonSecondary
               :label="$t('add.new')"
-              outline
+              filled
               icon="add"
               @click.native="addRequestHeader"
             />

components/http/BodyParameters.vue

@@ -191,7 +191,7 @@
       </span>
       <ButtonSecondary
         :label="$t('add.new')"
-        outline
+        filled
         icon="add"
         @click.native="addBodyParam"
       />

components/http/Headers.vue

@@ -144,7 +144,7 @@
         {{ $t("empty.headers") }}
       </span>
       <ButtonSecondary
-        outline
+        filled
         :label="$t('add.new')"
         icon="add"
         @click.native="addHeader"

components/http/Parameters.vue

@@ -157,7 +157,7 @@
       <ButtonSecondary
         :label="$t('add.new')"
         icon="add"
-        outline
+        filled
         @click.native="addParam"
       />
     </div>

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>

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">{{
+          <label for="mqtt-message" class="font-semibold text-secondaryLight">
-            $t("mqtt.communication")
+            {{ $t("mqtt.communication") }}
-          }}</label>
+          </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">{{
+          <label for="sub_topic" class="font-semibold text-secondaryLight">
-            $t("mqtt.topic")
+            {{ $t("mqtt.topic") }}
-          }}</label>
+          </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')
             "

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">{{
+          <label class="font-semibold text-secondaryLight">
-            $t("socketio.communication")
+            {{ $t("socketio.communication") }}
-          }}</label>
+          </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"
               />

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

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="
+                      class="bg-primary cursor-pointer flex flex-1 py-2 px-4"
-                        bg-primaryLight
-                        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="
+                      class="bg-primary cursor-pointer flex flex-1 py-2 px-4"
-                        bg-primaryLight
-                        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>

components/teams/Team.vue

@@ -49,24 +49,15 @@
             $refs.options.tippy().hide()
           "
         />
-        <span
+        <SmartItem
-          v-tippy="{ theme: 'tooltip' }"
+          v-if="!(team.myRole === 'OWNER' && team.ownersCount == 1)"
-          :title="
+          icon="remove"
-            team.myRole === 'OWNER' && team.ownersCount == 1
+          :label="$t('team.exit')"
-              ? $t('team.exit_disabled')
+          @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>