feat: remove tailwindcss + introduce windicss

AmolDerickSoans · Jun 25, 2021 · 6d33132 · 6d33132
1 parent 3e5629e
commit 6d33132
Show file tree

Hide file tree

Showing 84 changed files with 2,109 additions and 41,093 deletions.
diff --git a/.stylelintrc.js b/.stylelintrc.js
@@ -8,7 +8,6 @@ module.exports = {
       {
         ignoreAtRules: [
           "extends",
-          "tailwind",
           "apply",
           "variants",
           "responsive",

diff --git a/README.md b/README.md
@@ -436,7 +436,7 @@ _Add-ons are developed and maintained under **[Official Hoppscotch Organization]
 ## **Built with**
 
 - [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML)
-- [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS), [SCSS](https://sass-lang.com), [Tailwind CSS](https://tailwindcss.com)
+- [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS), [SCSS](https://sass-lang.com), [Windi CSS](https://windicss.org)
 - [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
 - [TypeScript](https://www.typescriptlang.org)
 - [Vue](https://vuejs.org)

diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
diff --git a/assets/scss/styles.scss b/assets/scss/styles.scss
@@ -1,5 +1,3 @@
-$responsiveWidth: 767px;
-
 *,
 *::before,
 *::after {
@@ -46,7 +44,6 @@ html {
 body {
   @apply bg-primary;
   @apply text-secondary;
-  @apply text-base;
   @apply font-medium;
   @apply select-none;
   @apply transition-colors;
@@ -140,17 +137,14 @@ main {
   @apply px-4;
 }
 
-h1,
-h2,
-h3,
-h4 {
+.heading {
   @apply flex;
   @apply items-center;
   @apply m-0;
   @apply font-bold;
 }
 
-h3.title {
+h3.heading {
   @apply m-2;
 }
 
@@ -327,7 +321,7 @@ hr {
   }
 }
 
-button {
+.button {
   @apply inline-flex;
   @apply items-center;
   @apply justify-center;
@@ -339,7 +333,6 @@ button {
   @apply ease-in-out;
   @apply duration-150;
   @apply fill-current;
-  @apply cursor-pointer;
   @apply outline-none;
   @apply border-none;
 
@@ -438,12 +431,12 @@ input[type="radio"],
 
 .drop-down-input,
 .url-field,
+.input,
+.select,
+.textarea,
 kbd,
-select,
-input,
-textarea,
-pre,
-code {
+code,
+pre {
   @apply flex;
   @apply p-4;
   @apply bg-primaryDark;
@@ -734,7 +727,7 @@ section {
   width: var(--width);
 }
 
-@media (max-width: $responsiveWidth) {
+@media (max-width: 767px) {
   .content,
   .columns {
     @apply flex-col;

diff --git a/components/app/Contributors.vue b/components/app/Contributors.vue
@@ -9,12 +9,12 @@
     <div class="px-2 row-wrapper">
       <span>
         <a
-          v-tooltip.right="$t('recurring')"
+          v-tooltip.right="$t('one_time_recurring')"
           href="https://github.com/sponsors/hoppscotch"
           target="_blank"
           rel="noopener"
         >
-          <button class="icon">
+          <button class="icon button">
             <i class="material-icons">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -41,7 +41,7 @@
           target="_blank"
           rel="noopener"
         >
-          <button class="icon">
+          <button class="icon button">
             <i class="material-icons">donut_large</i>
             <span>{{ $t("open_collective") }}</span>
           </button>
@@ -56,7 +56,7 @@
           target="_blank"
           rel="noopener"
         >
-          <button class="icon">
+          <button class="icon button">
             <i class="material-icons">local_parking</i>
             <span>{{ $t("patreon") }}</span>
           </button>
@@ -71,7 +71,7 @@
           target="_blank"
           rel="noopener"
         >
-          <button class="icon">
+          <button class="icon button">
             <i class="material-icons">payment</i>
             <span>{{ $t("paypal") }}</span>
           </button>
@@ -80,7 +80,7 @@
     </div>
     <hr />
     <div class="p-2">
-      <h3 class="title">Financial Contributors</h3>
+      <h3 class="heading">Financial Contributors</h3>
       <div class="contributors">
         <a
           href="https://oss.capital/?ref=hoppscotch"

diff --git a/components/app/Extensions.vue b/components/app/Extensions.vue
@@ -2,9 +2,9 @@
   <SmartModal v-if="show" @close="hideModal">
     <div slot="header">
       <div class="row-wrapper">
-        <h3 class="title">{{ $t("extensions") }}</h3>
+        <h3 class="heading">{{ $t("extensions") }}</h3>
         <div>
-          <button class="icon" @click="hideModal">
+          <button class="icon button" @click="hideModal">
             <i class="material-icons">close</i>
           </button>
         </div>
@@ -20,7 +20,7 @@
           target="_blank"
           rel="noopener"
         >
-          <button class="icon">
+          <button class="icon button">
             <svg
               class="material-icons"
               xmlns="http://www.w3.org/2000/svg"
@@ -35,7 +35,7 @@
             <span
               v-if="hasFirefoxExtInstalled"
               v-tooltip="$t('installed')"
-              class="icon"
+              class="icon button"
             >
               <i class="material-icons">done</i>
             </span>
@@ -48,7 +48,7 @@
           target="_blank"
           rel="noopener"
         >
-          <button class="icon">
+          <button class="icon button">
             <svg
               class="material-icons"
               xmlns="http://www.w3.org/2000/svg"
@@ -63,7 +63,7 @@
             <span
               v-if="hasChromeExtInstalled"
               v-tooltip="$t('installed')"
-              class="icon"
+              class="icon button"
             >
               <i class="material-icons">done</i>
             </span>

diff --git a/components/app/Footer.vue b/components/app/Footer.vue
@@ -49,18 +49,18 @@
       </span>
       <span class="flex font-mono" style="align-items: start">
         <a href="mailto:[email protected]" target="_blank" rel="noopener">
-          <button v-tooltip="$t('contact_us')" class="icon">
+          <button v-tooltip="$t('contact_us')" class="icon button">
             <i class="material-icons">email</i>
           </button>
         </a>
         <v-popover>
-          <button v-tooltip="$t('choose_language')" class="icon">
+          <button v-tooltip="$t('choose_language')" class="icon button">
             <i class="material-icons">translate</i>
           </button>
           <template slot="popover">
             <div v-for="locale in availableLocales" :key="locale.code">
               <nuxt-link :to="switchLocalePath(locale.code)">
-                <button v-close-popover class="icon">
+                <button v-close-popover class="icon button">
                   {{ locale.name }}
                 </button>
               </nuxt-link>

diff --git a/components/app/Header.vue b/components/app/Header.vue
@@ -3,7 +3,7 @@
     <div class="row-wrapper">
       <span class="slide-in">
         <nuxt-link :to="localePath('index')">
-          <h1 class="logo">Hoppscotch</h1>
+          <h1 class="heading logo">Hoppscotch</h1>
         </nuxt-link>
         <iframe
           src="https://ghbtns.com/github-btn.html?user=hoppscotch&repo=hoppscotch&type=star&count=true"
@@ -22,7 +22,6 @@
           target="_blank"
           rel="noopener"
           class="
-            inline-flex
             items-center
             px-4
             py-2
@@ -44,7 +43,7 @@
         <button
           id="installPWA"
           v-tooltip="$t('install_pwa')"
-          class="icon"
+          class="icon button"
           @click.prevent="showInstallPrompt()"
         >
           <i class="material-icons">offline_bolt</i>
@@ -55,7 +54,7 @@
           aria-label="GitHub"
           rel="noopener"
         >
-          <button v-tooltip="'GitHub'" class="icon" aria-label="GitHub">
+          <button v-tooltip="'GitHub'" class="icon button" aria-label="GitHub">
             <svg
               xmlns="http://www.w3.org/2000/svg"
               width="24"
@@ -69,7 +68,7 @@
           </button>
         </a>
         <v-popover v-if="currentUser === null">
-          <button v-tooltip="$t('login_with')" class="icon">
+          <button v-tooltip="$t('login_with')" class="icon button">
             <i class="material-icons">login</i>
           </button>
           <template slot="popover">
@@ -84,7 +83,7 @@
               '<br>' +
               (currentUser.email || '<label><i>Email not found</i></label>')
             "
-            class="icon"
+            class="icon button"
             aria-label="Account"
           >
             <img
@@ -98,7 +97,7 @@
           <template slot="popover">
             <div>
               <nuxt-link v-close-popover :to="localePath('settings')">
-                <button class="icon">
+                <button class="icon button">
                   <i class="material-icons">settings</i>
                   <span>
                     {{ $t("settings") }}
@@ -112,25 +111,37 @@
           </template>
         </v-popover>
         <v-popover>
-          <button v-tooltip="$t('more')" class="icon">
+          <button v-tooltip="$t('more')" class="icon button">
             <i class="material-icons">drag_indicator</i>
           </button>
           <template slot="popover">
-            <button v-close-popover class="icon" @click="showExtensions = true">
+            <button
+              v-close-popover
+              class="icon button"
+              @click="showExtensions = true"
+            >
               <i class="material-icons">extension</i>
               <span>{{ $t("extensions") }}</span>
             </button>
-            <button v-close-popover class="icon" @click="showShortcuts = true">
+            <button
+              v-close-popover
+              class="icon button"
+              @click="showShortcuts = true"
+            >
               <i class="material-icons">keyboard</i>
               <span>{{ $t("shortcuts") }}</span>
             </button>
-            <button v-close-popover class="icon" @click="showSupport = true">
+            <button
+              v-close-popover
+              class="icon button"
+              @click="showSupport = true"
+            >
               <i class="material-icons">favorite</i>
               <span>{{ $t("support_us") }}</span>
             </button>
             <button
               v-close-popover
-              class="icon"
+              class="icon button"
               onClick="window.open('https://twitter.com/share?text=👽 Hoppscotch • Open source API development ecosystem - Helps you create requests faster, saving precious time on development.&url=https://hoppscotch.io&hashtags=hoppscotch&via=hoppscotch_io');"
             >
               <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
@@ -144,7 +155,7 @@
               v-if="navigatorShare"
               v-close-popover
               v-tooltip="$t('more')"
-              class="icon"
+              class="icon button"
               @click="nativeShare"
             >
               <i class="material-icons">share</i>

diff --git a/components/app/Shortcuts.vue b/components/app/Shortcuts.vue
@@ -2,9 +2,9 @@
   <SmartModal v-if="show" @close="hideModal">
     <div slot="header">
       <div class="row-wrapper">
-        <h3 class="title">{{ $t("shortcuts") }}</h3>
+        <h3 class="heading">{{ $t("shortcuts") }}</h3>
         <div>
-          <button class="icon" @click="hideModal">
+          <button class="icon button" @click="hideModal">
             <i class="material-icons">close</i>
           </button>
         </div>

diff --git a/components/app/Sidenav.vue b/components/app/Sidenav.vue
@@ -188,8 +188,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-$responsiveWidth: 767px;
-
 .nav-first {
   @apply h-screen;
   @apply p-2;
@@ -298,7 +296,7 @@ nav.secondary-nav {
   }
 }
 
-@media (max-width: $responsiveWidth) {
+@media (max-width: 767px) {
   .nav-first {
     @apply fixed;
     @apply z-10;

diff --git a/components/app/Support.vue b/components/app/Support.vue
@@ -2,9 +2,9 @@
   <SmartModal v-if="show" @close="hideModal">
     <div slot="header">
       <div class="row-wrapper">
-        <h3 class="title">{{ $t("support_us") }}</h3>
+        <h3 class="heading">{{ $t("support_us") }}</h3>
         <div>
-          <button class="icon" @click="hideModal">
+          <button class="icon button" @click="hideModal">
             <i class="material-icons">close</i>
           </button>
         </div>