Feat/tailwind (#1179)

2020-09-22 22:36:37 +05:30
parent 45fb612793
commit b747d0273c
59 changed files with 2020 additions and 1431 deletions
--- a/components/layout/contributors.vue
+++ b/components/layout/contributors.vue
@@ -6,7 +6,7 @@
    <p class="info">
      {{ $t("donate_info2") }}
    </p>
-    <div class="flex-wrap">
+    <div class="row-wrapper">
      <span>
        <a
          href="https://github.com/sponsors/hoppscotch"
@@ -33,7 +33,7 @@
        </a>
      </span>
    </div>
-    <div class="flex-wrap">
+    <div class="row-wrapper">
      <span>
        <a
          href="https://opencollective.com/hoppscotch"
@@ -78,13 +78,25 @@
    <h3 class="title">Financial Contributors</h3>
    <p class="info">
      Become a financial contributor and help us sustain our community.
-      <a class="link" href="https://opencollective.com/hoppscotch/contribute">Contribute</a>.
+      <a
+        class="link"
+        target="_blank"
+        rel="noopener"
+        href="https://opencollective.com/hoppscotch/contribute"
+        >Contribute</a
+      >.
    </p>
    <h3 class="title">Organizations</h3>
    <p class="info">
      Support this project with your organization. Your logo will show up here with a link to your
      website.
-      <a class="link" href="https://opencollective.com/hoppscotch/contribute">Contribute</a>.
+      <a
+        class="link"
+        target="_blank"
+        rel="noopener"
+        href="https://opencollective.com/hoppscotch/contribute"
+        >Contribute</a
+      >.
    </p>
    <div class="contributors">
      <a href="https://tyk.io" target="_blank" rel="noopener">
@@ -96,34 +108,74 @@
      </a>
    </div>
    <div class="contributors">
-      <a href="https://opencollective.com/hoppscotch/organization/0/website">
+      <a
+        target="_blank"
+        rel="noopener"
+        href="https://opencollective.com/hoppscotch/organization/0/website"
+      >
        <img src="https://opencollective.com/hoppscotch/organization/0/avatar.svg" />
      </a>
-      <a href="https://opencollective.com/hoppscotch/organization/1/website">
+      <a
+        target="_blank"
+        rel="noopener"
+        href="https://opencollective.com/hoppscotch/organization/1/website"
+      >
        <img src="https://opencollective.com/hoppscotch/organization/1/avatar.svg" />
      </a>
-      <a href="https://opencollective.com/hoppscotch/organization/2/website">
+      <a
+        target="_blank"
+        rel="noopener"
+        href="https://opencollective.com/hoppscotch/organization/2/website"
+      >
        <img src="https://opencollective.com/hoppscotch/organization/2/avatar.svg" />
      </a>
-      <a href="https://opencollective.com/hoppscotch/organization/3/website">
+      <a
+        target="_blank"
+        rel="noopener"
+        href="https://opencollective.com/hoppscotch/organization/3/website"
+      >
        <img src="https://opencollective.com/hoppscotch/organization/3/avatar.svg" />
      </a>
-      <a href="https://opencollective.com/hoppscotch/organization/4/website">
+      <a
+        target="_blank"
+        rel="noopener"
+        href="https://opencollective.com/hoppscotch/organization/4/website"
+      >
        <img src="https://opencollective.com/hoppscotch/organization/4/avatar.svg" />
      </a>
-      <a href="https://opencollective.com/hoppscotch/organization/5/website">
+      <a
+        target="_blank"
+        rel="noopener"
+        href="https://opencollective.com/hoppscotch/organization/5/website"
+      >
        <img src="https://opencollective.com/hoppscotch/organization/5/avatar.svg" />
      </a>
-      <a href="https://opencollective.com/hoppscotch/organization/6/website">
+      <a
+        target="_blank"
+        rel="noopener"
+        href="https://opencollective.com/hoppscotch/organization/6/website"
+      >
        <img src="https://opencollective.com/hoppscotch/organization/6/avatar.svg" />
      </a>
-      <a href="https://opencollective.com/hoppscotch/organization/7/website">
+      <a
+        target="_blank"
+        rel="noopener"
+        href="https://opencollective.com/hoppscotch/organization/7/website"
+      >
        <img src="https://opencollective.com/hoppscotch/organization/7/avatar.svg" />
      </a>
-      <a href="https://opencollective.com/hoppscotch/organization/8/website">
+      <a
+        target="_blank"
+        rel="noopener"
+        href="https://opencollective.com/hoppscotch/organization/8/website"
+      >
        <img src="https://opencollective.com/hoppscotch/organization/8/avatar.svg" />
      </a>
-      <a href="https://opencollective.com/hoppscotch/organization/9/website">
+      <a
+        target="_blank"
+        rel="noopener"
+        href="https://opencollective.com/hoppscotch/organization/9/website"
+      >
        <img src="https://opencollective.com/hoppscotch/organization/9/avatar.svg" />
      </a>
    </div>
@@ -131,7 +183,13 @@
    <p class="info">
      Support this project with your organization. Your logo will show up here with a link to your
      website.
-      <a class="link" href="https://opencollective.com/hoppscotch/contribute">Contribute</a>.
+      <a
+        class="link"
+        target="_blank"
+        rel="noopener"
+        href="https://opencollective.com/hoppscotch/contribute"
+        >Contribute</a
+      >.
    </p>
    <div class="contributors">
      <a
@@ -147,14 +205,18 @@
          :alt="sponsor.handle"
        />
      </a>
-      <a href="https://opencollective.com/hoppscotch">
+      <a target="_blank" rel="noopener" href="https://opencollective.com/hoppscotch">
        <img src="https://opencollective.com/hoppscotch/individuals.svg" />
      </a>
    </div>
    <h3 class="title">Code Contributors</h3>
    <p class="info">This project exists thanks to all the people who contribute.</p>
    <div class="contributors">
-      <a href="https://github.com/liyasthomas/hoppscotch/graphs/contributors">
+      <a
+        target="_blank"
+        rel="noopener"
+        href="https://github.com/liyasthomas/hoppscotch/graphs/contributors"
+      >
        <img src="https://opencollective.com/hoppscotch/contributors.svg" />
      </a>
    </div>
@@ -163,12 +225,12 @@

 <style scoped lang="scss">
 .contributors {
-  display: flex;
-  align-items: center;
-  flex-flow: row nowrap;
-  overflow: auto;
-  padding: 8px 0;
-  margin: 8px 0;
+  @apply flex;
+  @apply items-center;
+  @apply flex-no-wrap;
+  @apply overflow-auto;
+  @apply py-4;
+  @apply my-4;
  max-width: calc(100vw - 72px);
 }
 </style>
--- a/components/layout/history.vue
+++ b/components/layout/history.vue
@@ -7,7 +7,11 @@
      </button> -->
    </div>
    <div class="virtual-list" :class="{ filled: filteredHistory.length }">
-      <ul v-for="(entry, index) in filteredHistory" :key="index" class="entry">
+      <ul
+        v-for="(entry, index) in filteredHistory"
+        :key="index"
+        class="flex-col border-b border-dashed border-brdColor"
+      >
        <div class="show-on-large-screen">
          <button
            class="icon"
@@ -30,7 +34,7 @@
              {{ entry.star ? "star" : "star_border" }}
            </i>
          </button>
-          <li class="method-list-item">
+          <li class="relative">
            <input
              :aria-label="$t('method')"
              type="text"
@@ -38,14 +42,8 @@
              :value="`${entry.method} ${entry.status}`"
              :class="findEntryStatus(entry).className"
              :style="{ '--status-code': entry.status }"
-              class="bg-color"
+              class="bg-transparent"
            />
-            <!-- <span
-              class="entry-status-code"
-              :class="findEntryStatus(entry).className"
-              :style="{ '--status-code': entry.status }"
-              >{{ entry.status }}</span
-            > -->
          </li>
          <v-popover>
            <button class="tooltip-target icon" v-tooltip="$t('options')">
@@ -66,14 +64,14 @@
              </div>
            </template>
          </v-popover>
-          <!-- <li class="method-list-item">
+          <!-- <li class="relative">
            <input
              :aria-label="$t('label')"
              type="text"
              readonly
              :value="entry.label"
              :placeholder="$t('no_label')"
-              class="bg-color"
+              class="bg-transparent"
            />
          </li> -->
          <!-- <li>
@@ -101,7 +99,7 @@
              readonly
              :value="`${entry.url}${entry.path}`"
              :placeholder="$t('no_url')"
-              class="bg-color"
+              class="bg-transparent"
            />
          </li>
          <!-- <li>
@@ -147,7 +145,7 @@
        </transition>
      </ul>
    </div>
-    <ul :class="{ hidden: filteredHistory.length != 0 || history.length === 0 }">
+    <ul class="flex-col" :class="{ hidden: filteredHistory.length != 0 || history.length === 0 }">
      <li>
        <label>{{ $t("nothing_found") }} "{{ filterText }}"</label>
      </li>
@@ -156,7 +154,7 @@
      <i class="material-icons">schedule</i> {{ $t("history_empty") }}
    </p>
    <div v-if="history.length !== 0">
-      <div class="flex-wrap" v-if="!isClearingHistory">
+      <div class="row-wrapper" v-if="!isClearingHistory">
        <button
          class="icon"
          id="clear-history-button"
@@ -218,7 +216,7 @@
          </template>
        </v-popover>
      </div>
-      <div class="flex-wrap" v-else>
+      <div class="row-wrapper" v-else>
        <label for="clear-history-button" class="info">
          <i class="material-icons">help_outline</i> {{ $t("are_you_sure") }}
        </label>
@@ -250,47 +248,24 @@
  max-height: calc(100vh - 290px);

  [readonly] {
-    cursor: default;
+    @apply cursor-default;
  }
 }

 .fade-enter-active,
 .fade-leave-active {
-  transition: all 0.2s;
+  @apply transition;
+  @apply ease-in-out;
+  @apply duration-200;
 }

 .fade-enter,
 .fade-leave-to {
-  opacity: 0;
+  @apply opacity-0;
 }

 .stared {
-  color: #f8e81c !important;
-}
-
-ul,
-ol {
-  flex-direction: column;
-}
-
-.method-list-item {
-  position: relative;
-
-  span {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    font-family: "Roboto Mono", monospace;
-    font-weight: 400;
-    background-color: transparent;
-    padding: 2px 6px;
-    border-radius: 8px;
-  }
-}
-
-.entry {
-  border-bottom: 1px dashed var(--brd-color);
-  padding: 0 0 8px;
+  @apply text-yellow-200;
 }

@media (max-width: 720px) {
@@ -299,7 +274,7 @@ ol {
  }

  .labels {
-    display: none;
+    @apply hidden;
  }
 }
 </style>
@@ -341,14 +316,16 @@ export default {
        fb.currentUser !== null
          ? fb.currentHistory
          : JSON.parse(window.localStorage.getItem("history")) || []
-      return this.history.filter((entry) => {
-        const filterText = this.filterText.toLowerCase()
-        return Object.keys(entry).some((key) => {
-          let value = entry[key]
-          value = typeof value !== "string" ? value.toString() : value
-          return value.toLowerCase().includes(filterText)
+      return this.history
+        .filter((entry) => {
+          const filterText = this.filterText.toLowerCase()
+          return Object.keys(entry).some((key) => {
+            let value = entry[key]
+            value = typeof value !== "string" ? value.toString() : value
+            return value.toLowerCase().includes(filterText)
+          })
        })
-      }).reverse()
+        .reverse()
    },
  },
  methods: {
--- a/components/layout/pw-footer.vue
+++ b/components/layout/pw-footer.vue
@@ -1,7 +1,7 @@
 <template>
-  <footer class="footer">
-    <div class="flex-wrap">
-      <span v-if="version.name" class="mono">
+  <footer class="flex-col flex-no-wrap">
+    <div class="row-wrapper">
+      <span v-if="version.name" class="font-mono">
        <a
          class="footer-link"
          :href="'https://github.com/hoppscotch/hoppscotch/releases/tag/' + version.name"
@@ -31,9 +31,7 @@
      </span>
      <span>
        <a href="https://liyasthomas.web.app" target="_blank" rel="noopener">
-          <button class="icon" v-tooltip="'Liyas Thomas'">
-            🦄
-          </button>
+          <button class="icon" v-tooltip="'Liyas Thomas'">🦄</button>
        </a>
        <a href="mailto:liyascthomas@gmail.com" target="_blank" rel="noopener">
          <button class="icon" v-tooltip="$t('contact_us')">
@@ -60,16 +58,13 @@
 </template>

 <style scoped lang="scss">
-.footer {
-  flex-flow: column nowrap;
-}
-
 .footer-link {
-  margin: 8px 16px;
-  color: var(--fg-light-color);
+  @apply my-2;
+  @apply mx-4;
+  @apply text-fgLightColor;

  &:hover {
-    color: var(--fg-color);
+    @apply text-fgColor;
  }
 }
 </style>
--- a/components/layout/pw-header.vue
+++ b/components/layout/pw-header.vue
@@ -1,6 +1,6 @@
 <template>
  <header class="header">
-    <div class="flex-wrap">
+    <div class="row-wrapper">
      <span class="slide-in">
        <nuxt-link :to="localePath('index')">
          <h1 class="logo hide-on-small-screen">Hoppscotch</h1>
@@ -51,7 +51,7 @@
            <img
              v-if="fb.currentUser.photoURL"
              :src="fb.currentUser.photoURL"
-              class="material-icons"
+              class="rounded-full material-icons"
              alt="Profile image"
            />
            <i v-else class="material-icons">account_circle</i>
@@ -119,7 +119,7 @@
      <div slot="header">
        <ul>
          <li>
-            <div class="flex-wrap">
+            <div class="row-wrapper">
              <h3 class="title">{{ $t("extensions") }}</h3>
              <div>
                <button class="icon" @click="showExtensions = false">
@@ -179,7 +179,7 @@
      <div slot="header">
        <ul>
          <li>
-            <div class="flex-wrap">
+            <div class="row-wrapper">
              <h3 class="title">{{ $t("shortcuts") }}</h3>
              <div>
                <button class="icon" @click="showShortcuts = false">
@@ -214,11 +214,11 @@
        </div>
        <hr />
        <div>
-          <kbd>Alt</kbd>+<kbd>🠋</kbd>
+          <kbd>Alt</kbd>+<kbd>▲</kbd>
          <label>{{ $t("select_next_method") }}</label>
        </div>
        <div>
-          <kbd>Alt</kbd>+<kbd>🠉</kbd>
+          <kbd>Alt</kbd>+<kbd>▼</kbd>
          <label>{{ $t("select_previous_method") }}</label>
        </div>
        <hr />
@@ -249,7 +249,7 @@
      <div slot="header">
        <ul>
          <li>
-            <div class="flex-wrap">
+            <div class="row-wrapper">
              <h3 class="title">{{ $t("support_us") }}</h3>
              <div>
                <button class="icon" @click="showSupport = false">
@@ -271,38 +271,43 @@
 <style scoped lang="scss">
 $responsiveWidth: 768px;

+kbd {
+  @apply inline-flex;
+  @apply resize-none;
+}
+
@keyframes slideIn {
  0% {
-    opacity: 0;
-    left: -16px;
+    @apply opacity-0;
+    @apply -left-4;
  }

  100% {
-    opacity: 1;
-    left: 0px;
+    @apply opacity-100;
+    @apply left-0;
  }
 }

 .slide-in {
-  position: relative;
+  @apply relative;
  animation: slideIn 0.2s forwards ease-in-out;
 }

 .logo {
-  font-size: 22px;
+  @apply text-xl;

  &:hover {
-    color: var(--ac-color);
+    @apply text-acColor;
  }
 }

 .show-on-small-screen {
-  display: none;
+  @apply hidden;
 }

@media (max-width: $responsiveWidth) {
  .show-on-small-screen {
-    display: inline-flex;
+    @apply inline-flex;
  }
 }
 </style>
--- a/components/layout/pw-section.vue
+++ b/components/layout/pw-section.vue
@@ -14,26 +14,26 @@

 <style scoped lang="scss">
 fieldset {
-  margin: 16px 0;
-  border-radius: 8px;
-  background-color: var(--bg-dark-color);
-  transition: all 0.2s ease-in-out;
+  @apply my-2;
+  @apply p-2;
+  @apply rounded-lg;
+  @apply bg-bgDarkColor;
+  @apply transition;
+  @apply ease-in-out;
+  @apply duration-200;

  legend {
-    display: inline-block;
-    align-items: center;
-    justify-content: center;
-    color: var(--fg-color);
-    font-weight: 700;
-    cursor: pointer;
-    transition: all 0.2s ease-in-out;
-
-    * {
-      vertical-align: middle;
-    }
+    @apply text-fgColor;
+    @apply text-sm;
+    @apply font-bold;
+    @apply cursor-pointer;
+    @apply transition;
+    @apply ease-in-out;
+    @apply duration-200;

    i {
-      margin-left: 8px;
+      @apply ml-2;
+      @apply align-middle;
    }
  }

@@ -75,7 +75,7 @@ fieldset {
 }

 fieldset.no-colored-frames legend {
-  color: var(--fg-color);
+  @apply text-fgColor;
 }
 </style>

--- a/components/layout/sidenav.vue
+++ b/components/layout/sidenav.vue
@@ -11,7 +11,7 @@
        v-tooltip.right="$t('home')"
        :aria-label="$t('home')"
      >
-        <logo alt class="material-icons" style="height: 24px;"></logo>
+        <logo alt class="material-icons" style="height: 24px"></logo>
      </nuxt-link>
      <nuxt-link
        :to="localePath('realtime')"
@@ -171,93 +171,103 @@
 $responsiveWidth: 768px;

 .nav-first {
-  z-index: 1;
-  height: 100vh;
-  padding: 0 8px;
-  background-color: var(--bg-dark-color);
-  transition: all 0.2s ease-in-out;
+  @apply z-10;
+  @apply h-screen;
+  @apply p-2;
+  @apply bg-bgDarkColor;
+  @apply transition;
+  @apply ease-in-out;
+  @apply duration-200;
+  // @apply overflow-y-auto;
 }

 nav.primary-nav {
-  display: flex;
-  flex-flow: column nowrap;
-  align-items: center;
-  justify-content: center;
+  @apply flex;
+  @apply flex-col;
+  @apply flex-no-wrap;
+  @apply items-center;
+  @apply justify-center;
+  @apply space-y-2;

  svg {
-    fill: var(--fg-light-color);
-    transition: all 0.2s ease-in-out;
+    @apply fill-current;
  }

  a {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    padding: 14px;
-    border-radius: 50%;
-    background-color: var(--bg-light-color);
-    color: var(--fg-light-color);
-    fill: var(--fg-light-color);
-    margin: 8px 0;
+    @apply inline-flex;
+    @apply items-center;
+    @apply justify-center;
+    @apply flex-shrink-0;
+    @apply p-4;
+    @apply rounded-full;
+    @apply bg-bgLightColor;
+    @apply text-fgLightColor;
+    @apply fill-current;
+    @apply outline-none;

    &:hover {
-      color: var(--fg-color);
-      fill: var(--fg-color);
+      @apply text-fgColor;
+      @apply fill-current;

      svg {
-        fill: var(--fg-color);
+        @apply fill-current;
      }
    }

    &.nuxt-link-exact-active {
-      background-color: var(--ac-color);
-      color: var(--act-color);
-      fill: var(--act-color);
+      @apply bg-acColor;
+      @apply text-actColor;
+      @apply fill-current;
      border-radius: 16px;

      svg {
-        fill: var(--act-color);
+        @apply fill-current;
      }
    }
  }
 }

+nav.primary-nav::-webkit-scrollbar,
+.nav-first::-webkit-scrollbar {
+  @apply hidden;
+}
+
 nav.secondary-nav {
-  display: flex;
-  flex-flow: column nowrap;
-  align-items: center;
-  justify-content: center;
-  border-top: 2px dashed var(--brd-color);
-  margin-top: 4px;
+  @apply flex;
+  @apply flex-col;
+  @apply flex-no-wrap;
+  @apply items-center;
+  @apply justify-center;
+  @apply border-t-2;
+  @apply border-dashed;
+  @apply border-brdColor;
+  @apply mt-2;

  ul {
-    display: flex;
-    flex-flow: column nowrap;
+    @apply flex;
+    @apply flex-col;
+    @apply flex-no-wrap;
+    @apply space-y-2;

    li {
-      display: flex;
+      @apply flex;

      a {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        flex-shrink: 0;
-        padding: 14px;
-        border-radius: 50%;
-        background-color: var(--bg-dark-color);
-        color: var(--fg-light-color);
-        fill: var(--fg-light-color);
-        margin: 8px 0;
+        @apply p-4;
+        @apply rounded-full;
+        @apply bg-bgDarkColor;
+        @apply text-fgLightColor;
+        @apply fill-current;
+        @apply outline-none;

        &:hover {
-          color: var(--fg-color);
-          fill: var(--fg-color);
+          @apply text-fgColor;
+          @apply fill-current;
        }

        &.current {
-          color: var(--ac-color);
-          fill: var(--ac-color);
+          @apply text-acColor;
+          @apply fill-current;
        }
      }
    }
@@ -266,41 +276,43 @@ nav.secondary-nav {

@media (max-width: $responsiveWidth) {
  .nav-first {
-    position: fixed;
-    top: auto;
-    bottom: 0;
-    height: auto;
-    padding: 0;
-    width: 100%;
-    background-color: var(--bg-color);
-    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.45);
+    @apply fixed;
+    @apply top-auto;
+    @apply bottom-0;
+    @apply h-auto;
+    @apply p-0;
+    @apply w-full;
+    @apply bg-bgColor;
+    @apply shadow-2xl;
  }

  nav.primary-nav {
-    flex-flow: row nowrap;
-    overflow: auto;
-    justify-content: space-between;
-    background-color: var(--bg-dark-color);
+    @apply flex-row;
+    @apply flex-no-wrap;
+    @apply overflow-auto;
+    @apply justify-between;
+    @apply bg-bgDarkColor;
+    @apply space-y-0;

    a {
-      background-color: transparent;
-      margin: 8px;
-      flex: 1;
+      @apply bg-transparent;
+      @apply m-2;
+      @apply flex-1;

      &.nuxt-link-exact-active {
-        background-color: transparent;
-        color: var(--ac-color);
-        fill: var(--ac-color);
+        @apply bg-transparent;
+        @apply text-acColor;
+        @apply fill-current;

        svg {
-          fill: var(--ac-color);
+          @apply fill-current;
        }
      }
    }
  }

  nav.secondary-nav {
-    display: none;
+    @apply hidden;
  }
 }
 </style>