refactor(ui): sort classes

2021-08-07 09:07:26 +05:30
parent d08f15430c
commit 8c60a4c032
45 changed files with 149 additions and 211 deletions
--- a/components/app/Shortcuts.vue
+++ b/components/app/Shortcuts.vue
@@ -15,7 +15,7 @@
        "
      >
        <h3 class="ml-4 heading">{{ $t("shortcuts") }}</h3>
-        <div>
+        <div class="flex">
          <ButtonSecondary to="/settings" icon="tune" />
          <ButtonSecondary icon="close" @click.native="close()" />
        </div>
@@ -24,7 +24,7 @@
        <input
          v-model="filterText"
          type="search"
-          class="bg-primaryLight border-b border-dividerLight flex font-semibold font-mono w-full py-2 pr-2 pl-8 focus:outline-none truncate"
+          class="bg-primaryLight border-b border-dividerLight flex font-semibold font-mono w-full py-2 pr-2 pl-8 truncate focus:outline-none"
          :placeholder="$t('search')"
        />
      </div> -->
--- a/components/app/SlideOver.vue
+++ b/components/app/SlideOver.vue
@@ -3,7 +3,7 @@
    <transition v-if="show" name="fade" appear>
      <div class="inset-0 transition-opacity z-20 fixed" @keydown.esc="close()">
        <div
-          class="bg-primaryDark opacity-75 inset-0 absolute"
+          class="bg-primaryDark opacity-90 inset-0 absolute"
          tabindex="0"
          @click="close()"
        ></div>
--- a/components/collections/AddFolder.vue
+++ b/components/collections/AddFolder.vue
@@ -1,10 +1,8 @@
 <template>
  <SmartModal v-if="show" @close="$emit('hide-modal')">
    <template #header>
-      <h3 class="heading">{{ $t("new_folder") }}</h3>
-      <div>
-        <ButtonSecondary icon="close" @click.native="hideModal" />
-      </div>
+      <h3 class="heading">{{ $t("folder.new") }}</h3>
+      <ButtonSecondary icon="close" @click.native="hideModal" />
    </template>
    <template #body>
      <div class="flex flex-col px-2">
--- a/components/collections/Edit.vue
+++ b/components/collections/Edit.vue
@@ -2,9 +2,7 @@
  <SmartModal v-if="show" @close="hideModal">
    <template #header>
      <h3 class="heading">{{ $t("collection.edit") }}</h3>
-      <div>
-        <ButtonSecondary icon="close" @click.native="hideModal" />
-      </div>
+      <ButtonSecondary icon="close" @click.native="hideModal" />
    </template>
    <template #body>
      <div class="flex flex-col px-2">
--- a/components/collections/EditFolder.vue
+++ b/components/collections/EditFolder.vue
@@ -2,9 +2,7 @@
  <SmartModal v-if="show" @close="$emit('hide-modal')">
    <template #header>
      <h3 class="heading">{{ $t("folder.edit") }}</h3>
-      <div>
-        <ButtonSecondary icon="close" @click.native="hideModal" />
-      </div>
+      <ButtonSecondary icon="close" @click.native="hideModal" />
    </template>
    <template #body>
      <div class="flex flex-col px-2">
--- a/components/collections/EditRequest.vue
+++ b/components/collections/EditRequest.vue
@@ -2,9 +2,7 @@
  <SmartModal v-if="show" @close="hideModal">
    <template #header>
      <h3 class="heading">{{ $t("edit_request") }}</h3>
-      <div>
-        <ButtonSecondary icon="close" @click.native="hideModal" />
-      </div>
+      <ButtonSecondary icon="close" @click.native="hideModal" />
    </template>
    <template #body>
      <div class="flex flex-col px-2">
--- a/components/collections/graphql/AddFolder.vue
+++ b/components/collections/graphql/AddFolder.vue
@@ -1,10 +1,8 @@
 <template>
  <SmartModal v-if="show" @close="$emit('hide-modal')">
    <template #header>
-      <h3 class="heading">{{ $t("new_folder") }}</h3>
-      <div>
-        <ButtonSecondary icon="close" @click.native="hideModal" />
-      </div>
+      <h3 class="heading">{{ $t("folder.new") }}</h3>
+      <ButtonSecondary icon="close" @click.native="hideModal" />
    </template>
    <template #body>
      <div class="flex flex-col px-2">
--- a/components/collections/graphql/Collection.vue
+++ b/components/collections/graphql/Collection.vue
@@ -37,7 +37,7 @@
        v-tippy="{ theme: 'tooltip' }"
        icon="create_new_folder"
        :title="$t('folder.new')"
-        class="group-hover:inline-flex hidden"
+        class="hidden group-hover:inline-flex"
        @click.native="
          $emit('add-folder', {
            path: `${collectionIndex}`,
--- a/components/collections/graphql/Edit.vue
+++ b/components/collections/graphql/Edit.vue
@@ -2,9 +2,7 @@
  <SmartModal v-if="show" @close="hideModal">
    <template #header>
      <h3 class="heading">{{ $t("collection.edit") }}</h3>
-      <div>
-        <ButtonSecondary icon="close" @click.native="hideModal" />
-      </div>
+      <ButtonSecondary icon="close" @click.native="hideModal" />
    </template>
    <template #body>
      <div class="flex flex-col px-2">
--- a/components/collections/graphql/EditFolder.vue
+++ b/components/collections/graphql/EditFolder.vue
@@ -2,9 +2,7 @@
  <SmartModal v-if="show" @close="$emit('hide-modal')">
    <template #header>
      <h3 class="heading">{{ $t("folder.edit") }}</h3>
-      <div>
-        <ButtonSecondary icon="close" @click.native="hideModal" />
-      </div>
+      <ButtonSecondary icon="close" @click.native="hideModal" />
    </template>
    <template #body>
      <div class="flex flex-col px-2">
--- a/components/collections/graphql/EditRequest.vue
+++ b/components/collections/graphql/EditRequest.vue
@@ -2,9 +2,7 @@
  <SmartModal v-if="show" @close="hideModal">
    <template #header>
      <h3 class="heading">{{ $t("edit_request") }}</h3>
-      <div>
-        <ButtonSecondary icon="close" @click.native="hideModal" />
-      </div>
+      <ButtonSecondary icon="close" @click.native="hideModal" />
    </template>
    <template #body>
      <div class="flex flex-col px-2">
--- a/components/collections/graphql/Folder.vue
+++ b/components/collections/graphql/Folder.vue
@@ -39,7 +39,7 @@
        v-tippy="{ theme: 'tooltip' }"
        icon="create_new_folder"
        :title="$t('folder.new')"
-        class="group-hover:inline-flex hidden"
+        class="hidden group-hover:inline-flex"
        @click.native="$emit('add-folder', { folder, path: folderPath })"
      />
      <tippy ref="options" interactive trigger="click" theme="popover" arrow>
--- a/components/collections/graphql/Request.vue
+++ b/components/collections/graphql/Request.vue
@@ -46,7 +46,7 @@
        v-tippy="{ theme: 'tooltip' }"
        icon="replay"
        :title="$t('restore')"
-        class="group-hover:inline-flex hidden"
+        class="hidden group-hover:inline-flex"
        @click.native="!doc ? selectRequest() : {}"
      />
      <tippy ref="options" interactive trigger="click" theme="popover" arrow>
--- a/components/collections/graphql/index.vue
+++ b/components/collections/graphql/index.vue
@@ -21,8 +21,8 @@
            py-2
            pr-2
            pl-9
-            focus:outline-none
            truncate
+            focus:outline-none
          "
        />
      </div>
--- a/components/collections/my/Collection.vue
+++ b/components/collections/my/Collection.vue
@@ -54,7 +54,7 @@
        v-tippy="{ theme: 'tooltip' }"
        icon="create_new_folder"
        :title="$t('folder.new')"
-        class="group-hover:inline-flex hidden"
+        class="hidden group-hover:inline-flex"
        @click.native="
          $emit('add-folder', {
            folder: collection,
--- a/components/collections/my/Folder.vue
+++ b/components/collections/my/Folder.vue
@@ -39,7 +39,7 @@
        v-tippy="{ theme: 'tooltip' }"
        icon="create_new_folder"
        :title="$t('folder.new')"
-        class="group-hover:inline-flex hidden"
+        class="hidden group-hover:inline-flex"
        @click.native="$emit('add-folder', { folder, path: folderPath })"
      />
      <tippy ref="options" interactive trigger="click" theme="popover" arrow>
--- a/components/collections/my/Request.vue
+++ b/components/collections/my/Request.vue
@@ -54,7 +54,7 @@
        v-tippy="{ theme: 'tooltip' }"
        icon="replay"
        :title="$t('restore')"
-        class="group-hover:inline-flex hidden"
+        class="hidden group-hover:inline-flex"
        @click.native="!doc ? selectRequest() : {}"
      />
      <tippy ref="options" interactive trigger="click" theme="popover" arrow>
--- a/components/environments/Add.vue
+++ b/components/environments/Add.vue
@@ -2,9 +2,7 @@
  <SmartModal v-if="show" @close="hideModal">
    <template #header>
      <h3 class="heading">{{ $t("new_environment") }}</h3>
-      <div>
-        <ButtonSecondary icon="close" @click.native="hideModal" />
-      </div>
+      <ButtonSecondary icon="close" @click.native="hideModal" />
    </template>
    <template #body>
      <div class="flex flex-col px-2">
--- a/components/environments/Edit.vue
+++ b/components/environments/Edit.vue
@@ -2,9 +2,7 @@
  <SmartModal v-if="show" @close="hideModal">
    <template #header>
      <h3 class="heading">{{ $t("edit_environment") }}</h3>
-      <div>
-        <ButtonSecondary icon="close" @click.native="hideModal" />
-      </div>
+      <ButtonSecondary icon="close" @click.native="hideModal" />
    </template>
    <template #body>
      <div class="flex flex-col px-2">
@@ -23,7 +21,7 @@
          <label for="variableList" class="font-semibold px-4 pt-4 pb-4">
            {{ $t("env_variable_list") }}
          </label>
-          <div>
+          <div class="flex">
            <ButtonSecondary
              v-tippy="{ theme: 'tooltip' }"
              :title="$t('clear')"
@@ -77,7 +75,7 @@
              :placeholder="$t('count.value', { count: index + 1 })"
              :name="'value' + index"
            />
-            <div>
+            <div class="flex">
              <ButtonSecondary
                id="variable"
                v-tippy="{ theme: 'tooltip' }"
--- a/components/firebase/Login.vue
+++ b/components/firebase/Login.vue
@@ -2,9 +2,7 @@
  <SmartModal v-if="show" dialog @close="hideModal">
    <template #header>
      <h3 class="heading">{{ $t("login_to_hoppscotch") }}</h3>
-      <div>
-        <ButtonSecondary icon="close" @click.native="hideModal" />
-      </div>
+      <ButtonSecondary icon="close" @click.native="hideModal" />
    </template>
    <template #body>
      <div v-if="mode === 'sign-in'" class="flex flex-col space-y-2">
--- a/components/history/graphql/Card.vue
+++ b/components/history/graphql/Card.vue
@@ -26,7 +26,7 @@
        icon="delete"
        color="red"
        :title="$t('delete')"
-        class="group-hover:inline-flex hidden"
+        class="hidden group-hover:inline-flex"
        data-testid="delete_history_entry"
        @click.native="$emit('delete-entry')"
      />
@@ -34,7 +34,7 @@
        v-tippy="{ theme: 'tooltip' }"
        :title="expand ? $t('hide.more') : $t('show.more')"
        :icon="expand ? 'unfold_less' : 'unfold_more'"
-        class="group-hover:inline-flex hidden"
+        class="hidden group-hover:inline-flex"
        @click.native="expand = !expand"
      />
      <ButtonSecondary
@@ -51,12 +51,18 @@
      <span
        v-for="(line, index) in query"
        :key="`line-${index}`"
-        class="cursor-pointer font-mono text-secondaryLight px-4 truncate"
+        class="
+          cursor-pointer
+          font-mono
+          text-secondaryLight
+          px-4
+          whitespace-pre
+          truncate
+        "
        data-testid="restore_history_entry"
        @click="$emit('use-entry')"
+        >{{ line }}</span
      >
-        {{ line }}
-      </span>
    </div>
  </div>
 </template>
--- a/components/http/BodyParameters.vue
+++ b/components/http/BodyParameters.vue
@@ -5,8 +5,8 @@
        bg-primary
        border-b border-dividerLight
        flex flex-1
-        pl-4
        top-upperSecondaryStickyFold
+        pl-4
        z-10
        sticky
        items-center
--- a/components/http/Headers.vue
+++ b/components/http/Headers.vue
@@ -5,8 +5,8 @@
        bg-primary
        border-b border-dividerLight
        flex flex-1
-        pl-4
        top-upperSecondaryStickyFold
+        pl-4
        z-10
        sticky
        items-center
@@ -103,42 +103,38 @@
          })
        "
      />
-      <div>
-        <ButtonSecondary
-          v-tippy="{ theme: 'tooltip' }"
-          :title="
-            header.hasOwnProperty('active')
-              ? header.active
-                ? $t('action.turn_off')
-                : $t('action.turn_on')
-              : $t('action.turn_off')
-          "
-          :icon="
-            header.hasOwnProperty('active')
-              ? header.active
-                ? 'check_box'
-                : 'check_box_outline_blank'
-              : 'check_box'
-          "
-          color="green"
-          @click.native="
-            updateHeader(index, {
-              key: header.key,
-              value: header.value,
-              active: header.hasOwnProperty('active') ? !header.active : false,
-            })
-          "
-        />
-      </div>
-      <div>
-        <ButtonSecondary
-          v-tippy="{ theme: 'tooltip' }"
-          :title="$t('delete')"
-          icon="delete"
-          color="red"
-          @click.native="deleteHeader(index)"
-        />
-      </div>
+      <ButtonSecondary
+        v-tippy="{ theme: 'tooltip' }"
+        :title="
+          header.hasOwnProperty('active')
+            ? header.active
+              ? $t('action.turn_off')
+              : $t('action.turn_on')
+            : $t('action.turn_off')
+        "
+        :icon="
+          header.hasOwnProperty('active')
+            ? header.active
+              ? 'check_box'
+              : 'check_box_outline_blank'
+            : 'check_box'
+        "
+        color="green"
+        @click.native="
+          updateHeader(index, {
+            key: header.key,
+            value: header.value,
+            active: header.hasOwnProperty('active') ? !header.active : false,
+          })
+        "
+      />
+      <ButtonSecondary
+        v-tippy="{ theme: 'tooltip' }"
+        :title="$t('delete')"
+        icon="delete"
+        color="red"
+        @click.native="deleteHeader(index)"
+      />
    </div>
    <div
      v-if="headers$.length === 0"
--- a/components/http/ImportCurl.vue
+++ b/components/http/ImportCurl.vue
@@ -2,9 +2,7 @@
  <SmartModal v-if="show" @close="hideModal">
    <template #header>
      <h3 class="heading">{{ $t("import.curl") }}</h3>
-      <div>
-        <ButtonSecondary icon="close" @click.native="hideModal" />
-      </div>
+      <ButtonSecondary icon="close" @click.native="hideModal" />
    </template>
    <template #body>
      <div class="flex flex-col px-2">
--- a/components/http/Parameters.vue
+++ b/components/http/Parameters.vue
@@ -124,42 +124,38 @@
          })
        "
      />
-      <div>
-        <ButtonSecondary
-          v-tippy="{ theme: 'tooltip' }"
-          :title="
-            param.hasOwnProperty('active')
-              ? param.active
-                ? $t('action.turn_off')
-                : $t('action.turn_on')
-              : $t('action.turn_off')
-          "
-          :icon="
-            param.hasOwnProperty('active')
-              ? param.active
-                ? 'check_box'
-                : 'check_box_outline_blank'
-              : 'check_box'
-          "
-          color="green"
-          @click.native="
-            updateParam(index, {
-              key: param.key,
-              value: param.value,
-              active: param.hasOwnProperty('active') ? !param.active : false,
-            })
-          "
-        />
-      </div>
-      <div>
-        <ButtonSecondary
-          v-tippy="{ theme: 'tooltip' }"
-          :title="$t('delete')"
-          icon="delete"
-          color="red"
-          @click.native="deleteParam(index)"
-        />
-      </div>
+      <ButtonSecondary
+        v-tippy="{ theme: 'tooltip' }"
+        :title="
+          param.hasOwnProperty('active')
+            ? param.active
+              ? $t('action.turn_off')
+              : $t('action.turn_on')
+            : $t('action.turn_off')
+        "
+        :icon="
+          param.hasOwnProperty('active')
+            ? param.active
+              ? 'check_box'
+              : 'check_box_outline_blank'
+            : 'check_box'
+        "
+        color="green"
+        @click.native="
+          updateParam(index, {
+            key: param.key,
+            value: param.value,
+            active: param.hasOwnProperty('active') ? !param.active : false,
+          })
+        "
+      />
+      <ButtonSecondary
+        v-tippy="{ theme: 'tooltip' }"
+        :title="$t('delete')"
+        icon="delete"
+        color="red"
+        @click.native="deleteParam(index)"
+      />
    </div>
    <div
      v-if="params$.length === 0"
--- a/components/http/TokenList.vue
+++ b/components/http/TokenList.vue
@@ -2,9 +2,7 @@
  <SmartModal v-if="show" @close="hideModal">
    <template #header>
      <h3 class="heading">{{ $t("manage_token") }}</h3>
-      <div>
-        <ButtonSecondary icon="close" @click.native="hideModal" />
-      </div>
+      <ButtonSecondary icon="close" @click.native="hideModal" />
    </template>
    <template #body>
      <div class="flex flex-1">
--- a/components/lenses/renderers/HTMLLensRenderer.vue
+++ b/components/lenses/renderers/HTMLLensRenderer.vue
@@ -15,7 +15,7 @@
      <label for="body" class="font-semibold px-4">
        {{ $t("response_body") }}
      </label>
-      <div>
+      <div class="flex">
        <ButtonSecondary
          v-if="response.body"
          v-tippy="{ theme: 'tooltip' }"
--- a/components/lenses/renderers/ImageLensRenderer.vue
+++ b/components/lenses/renderers/ImageLensRenderer.vue
@@ -15,7 +15,7 @@
      <label for="body" class="font-semibold px-4">
        {{ $t("response_body") }}
      </label>
-      <div>
+      <div class="flex">
        <ButtonSecondary
          v-if="response.body"
          ref="downloadResponse"
--- a/components/lenses/renderers/JSONLensRenderer.vue
+++ b/components/lenses/renderers/JSONLensRenderer.vue
@@ -15,7 +15,7 @@
      <label for="body" class="font-semibold px-4">
        {{ $t("response_body") }}
      </label>
-      <div>
+      <div class="flex">
        <ButtonSecondary
          v-if="response.body"
          ref="downloadResponse"
--- a/components/lenses/renderers/RawLensRenderer.vue
+++ b/components/lenses/renderers/RawLensRenderer.vue
@@ -15,7 +15,7 @@
      <label for="body" class="font-semibold px-4">
        {{ $t("response_body") }}
      </label>
-      <div>
+      <div class="flex">
        <ButtonSecondary
          v-if="response.body"
          ref="downloadResponse"
--- a/components/lenses/renderers/XMLLensRenderer.vue
+++ b/components/lenses/renderers/XMLLensRenderer.vue
@@ -15,7 +15,7 @@
      <label for="body" class="font-semibold px-4">
        {{ $t("response_body") }}
      </label>
-      <div>
+      <div class="flex">
        <ButtonSecondary
          v-if="response.body"
          ref="downloadResponse"
--- a/components/realtime/Websocket.vue
+++ b/components/realtime/Websocket.vue
@@ -96,7 +96,7 @@
                name="message"
                type="text"
              />
-              <div>
+              <div class="flex">
                <ButtonSecondary
                  v-tippy="{ theme: 'tooltip' }"
                  :title="
@@ -121,7 +121,7 @@
                  "
                />
              </div>
-              <div>
+              <div class="flex">
                <ButtonSecondary
                  v-tippy="{ theme: 'tooltip' }"
                  :title="$t('delete')"
--- a/components/smart/ConfirmModal.vue
+++ b/components/smart/ConfirmModal.vue
@@ -2,9 +2,7 @@
  <SmartModal v-if="show" @close="hideModal">
    <template #header>
      <h3 class="heading">{{ $t("modal.confirm") }}</h3>
-      <div>
-        <ButtonSecondary icon="close" @click.native="hideModal" />
-      </div>
+      <ButtonSecondary icon="close" @click.native="hideModal" />
    </template>
    <template #body>
      <div class="flex flex-col px-2">
--- a/components/smart/Modal.vue
+++ b/components/smart/Modal.vue
@@ -9,7 +9,7 @@
      >
        <transition name="fade" appear>
          <div
-            class="bg-primaryDark opacity-100 inset-0 transition fixed"
+            class="bg-primaryDark opacity-90 inset-0 transition fixed"
            @touchstart="!dialog ? close() : null"
            @touchend="!dialog ? close() : null"
            @mouseup="!dialog ? close() : null"
@@ -17,7 +17,7 @@
          ></div>
        </transition>
        <span
-          class="hidden sm:inline-block sm:align-middle sm:h-screen"
+          class="hidden sm:h-screen sm:inline-block sm:align-middle"
          aria-hidden="true"
          >&#8203;</span
        >
@@ -44,7 +44,7 @@
              inline-block
              align-bottom
              overflow-hidden
-              sm:align-middle sm:max-w-md
+              sm:max-w-md sm:align-middle
            "
          >
            <div class="flex pl-2 items-center justify-between">
--- a/components/teams/Edit.vue
+++ b/components/teams/Edit.vue
@@ -21,13 +21,11 @@
          <label for="memberList" class="font-semibold px-4 pt-4 pb-4">
            {{ $t("team.members") }}
          </label>
-          <div>
-            <ButtonSecondary
-              icon="add"
-              :label="$t('add.new')"
-              @click.native="addTeamMember"
-            />
-          </div>
+          <ButtonSecondary
+            icon="add"
+            :label="$t('add.new')"
+            @click.native="addTeamMember"
+          />
        </div>
        <div class="border-divider border rounded">
          <div
@@ -106,16 +104,14 @@
                />
              </tippy>
            </span>
-            <div>
-              <ButtonSecondary
-                id="member"
-                v-tippy="{ theme: 'tooltip' }"
-                :title="$t('delete')"
-                icon="delete"
-                color="red"
-                @click.native="removeExistingTeamMember(member.user.uid)"
-              />
-            </div>
+            <ButtonSecondary
+              id="member"
+              v-tippy="{ theme: 'tooltip' }"
+              :title="$t('delete')"
+              icon="delete"
+              color="red"
+              @click.native="removeExistingTeamMember(member.user.uid)"
+            />
          </div>
          <div
            v-for="(member, index) in newMembers"
@@ -193,16 +189,14 @@
                />
              </tippy>
            </span>
-            <div>
-              <ButtonSecondary
-                id="member"
-                v-tippy="{ theme: 'tooltip' }"
-                :title="$t('delete')"
-                icon="delete"
-                color="red"
-                @click.native="removeTeamMember(index)"
-              />
-            </div>
+            <ButtonSecondary
+              id="member"
+              v-tippy="{ theme: 'tooltip' }"
+              :title="$t('delete')"
+              icon="delete"
+              color="red"
+              @click.native="removeTeamMember(index)"
+            />
          </div>
        </div>
      </div>
--- a/components/teams/index.vue
+++ b/components/teams/index.vue
@@ -17,9 +17,10 @@
      <p v-if="$apollo.queries.myTeams.loading">
        {{ $t("loading") }}
      </p>
-      <p v-if="myTeams.length === 0">
-        <i class="material-icons">help_outline</i> {{ $t("team.create_new") }}
-      </p>
+      <div v-if="myTeams.length === 0" class="flex items-center">
+        <i class="mr-4 material-icons">help_outline</i>
+        {{ $t("empty.teams") }}
+      </div>
      <div
        v-else
        class="