chore(refactor): modern UI

components/layout/contributors.vue

@@ -6,7 +6,7 @@
     <p class="info">
       {{ $t("donate_info2") }}
     </p>
-    <div class="row-wrapper">
+    <div class="px-2 row-wrapper">
       <span>
         <a
           href="https://github.com/sponsors/hoppscotch"
@@ -33,7 +33,7 @@
         </a>
       </span>
     </div>
-    <div class="row-wrapper">
+    <div class="px-2 row-wrapper">
       <span>
         <a
           href="https://opencollective.com/hoppscotch"
@@ -48,84 +48,96 @@
         </a>
       </span>
     </div>
-    <div>
-      <a
-        href="https://www.patreon.com/liyasthomas"
-        target="_blank"
-        rel="noopener"
-        v-tooltip.right="$t('recurring')"
-      >
-        <button class="icon">
-          <i class="material-icons">local_parking</i>
-          <span>{{ $t("patreon") }}</span>
-        </button>
-      </a>
+    <div class="px-2 row-wrapper">
+      <span>
+        <a
+          href="https://www.patreon.com/liyasthomas"
+          target="_blank"
+          rel="noopener"
+          v-tooltip.right="$t('recurring')"
+        >
+          <button class="icon">
+            <i class="material-icons">local_parking</i>
+            <span>{{ $t("patreon") }}</span>
+          </button>
+        </a>
+      </span>
     </div>
-    <div>
-      <a
-        href="https://www.paypal.me/liyascthomas"
-        target="_blank"
-        rel="noopener"
-        v-tooltip.right="$t('one_time')"
-      >
-        <button class="icon">
-          <i class="material-icons">payment</i>
-          <span>{{ $t("paypal") }}</span>
-        </button>
-      </a>
+    <div class="px-2 row-wrapper">
+      <span>
+        <a
+          href="https://www.paypal.me/liyascthomas"
+          target="_blank"
+          rel="noopener"
+          v-tooltip.right="$t('one_time')"
+        >
+          <button class="icon">
+            <i class="material-icons">payment</i>
+            <span>{{ $t("paypal") }}</span>
+          </button>
+        </a>
+      </span>
     </div>
     <hr />
-    <h3 class="title">Financial Contributors</h3>
-    <div class="contributors fle">
-      <a href="https://www.deta.sh/?ref=hoppscotch" target="_blank" rel="noopener">
-        <img style="max-width: 200px" src="~assets/images/hs-gh-banner.png" alt="Deta" />
-      </a>
+    <div class="p-2">
+      <h3 class="title">Financial Contributors</h3>
+      <div class="contributors">
+        <a href="https://www.deta.sh/?ref=hoppscotch" target="_blank" rel="noopener">
+          <img style="max-width: 200px" src="~assets/images/hs-gh-banner.png" alt="Deta" />
+        </a>
+      </div>
+      <div class="contributors">
+        <a
+          href="https://paw.cloud/?utm_source=hoppscotch&utm_medium=website&utm_campaign=hoppscotch-sponsorship"
+          target="_blank"
+          rel="noopener"
+        >
+          <img
+            style="max-width: 100px"
+            src="~assets/images/Paw-Logo-for-Hoppscotch.png"
+            alt="Paw"
+          />
+        </a>
+      </div>
+      <div class="contributors">
+        <a href="https://tyk.io" target="_blank" rel="noopener">
+          <img
+            style="max-width: 320px"
+            src="~assets/images/Tyk-side-project-logo-tagline-blk.png"
+            alt="Tyk Banner"
+          />
+        </a>
+      </div>
+      <div class="contributors">
+        <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
+          target="_blank"
+          rel="noopener"
+          href="https://opencollective.com/hoppscotch/organization/1/website"
+        >
+          <img src="https://opencollective.com/hoppscotch/organization/1/avatar.svg" />
+        </a>
+      </div>
     </div>
-    <div class="contributors">
-      <a
-        href="https://paw.cloud/?utm_source=hoppscotch&utm_medium=website&utm_campaign=hoppscotch-sponsorship"
-        target="_blank"
-        rel="noopener"
-      >
-        <img style="max-width: 100px" src="~assets/images/Paw-Logo-for-Hoppscotch.png" alt="Paw" />
-      </a>
-    </div>
-    <div class="contributors">
-      <a href="https://tyk.io" target="_blank" rel="noopener">
-        <img
-          style="max-width: 320px"
-          src="~assets/images/Tyk-side-project-logo-tagline-blk.png"
-          alt="Tyk Banner"
-        />
-      </a>
-    </div>
-    <div class="contributors">
-      <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
-        target="_blank"
-        rel="noopener"
-        href="https://opencollective.com/hoppscotch/organization/1/website"
-      >
-        <img src="https://opencollective.com/hoppscotch/organization/1/avatar.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">
+    <hr />
+    <p class="info">
+      This project exists thanks to all the
       <a
         target="_blank"
         rel="noopener"
         href="https://github.com/hoppscotch/hoppscotch/graphs/contributors"
+        class="link"
       >
-        <img src="https://opencollective.com/hoppscotch/contributors.svg" />
+        people who contribute
       </a>
-    </div>
+      .
+    </p>
   </div>
 </template>
 
@@ -135,11 +147,6 @@
   @apply items-center;
   @apply flex-no-wrap;
   @apply overflow-auto;
-  @apply my-4;
-}
-
-.github-sponsor {
-  @apply mr-2;
-  @apply rounded-full;
+  @apply m-2;
 }
 </style>

components/layout/history.vue

@@ -1,13 +1,19 @@
 <template>
-  <pw-section class="green" icon="history" :label="$t('history')" ref="history">
+  <pw-section class="green" icon="history" :label="$t('history')" ref="history" no-legend>
     <div class="show-on-large-screen">
-      <input aria-label="Search" type="search" :placeholder="$t('search')" v-model="filterText" />
-      <button class="icon">
-        <i class="material-icons">search</i>
-      </button>
+      <input
+        aria-label="Search"
+        type="search"
+        :placeholder="$t('search')"
+        v-model="filterText"
+        class="rounded-t-lg"
+      />
     </div>
-    <div class="virtual-list" :class="{ filled: filteredHistory.length }">
-      <ul v-for="(entry, index) in filteredHistory" :key="index" class="entry">
+    <div
+      class="divide-y virtual-list divide-dashed divide-brdColor"
+      :class="{ filled: filteredHistory.length }"
+    >
+      <ul v-for="(entry, index) in filteredHistory" :key="index">
         <div class="show-on-large-screen">
           <span
             class="p-2 m-2"
@@ -105,15 +111,17 @@
                 readonly
                 :value="entry.time"
                 v-tooltip="entry.date"
+                class="pt-0 mt-0 text-sm bg-transparent text-fgLightColor"
               />
             </li>
             <li>
               <input
-                :aria-label="$t('duration')"
+                :aria-label="$t('nn')"
                 type="text"
                 readonly
                 :value="entry.duration"
                 :placeholder="$t('no_duration')"
+                class="pt-0 mt-0 text-sm bg-transparent text-fgLightColor"
               />
             </li>
             <li>
@@ -123,6 +131,7 @@
                 readonly
                 :value="entry.preRequestScript"
                 :placeholder="$t('no_prerequest_script')"
+                class="pt-0 mt-0 text-sm bg-transparent text-fgLightColor"
               />
             </li>
           </div>
@@ -135,7 +144,7 @@
     <p v-if="history.length === 0" class="info">
       <i class="material-icons">schedule</i> {{ $t("history_empty") }}
     </p>
-    <div v-if="history.length !== 0">
+    <div v-if="history.length !== 0" class="rounded-b-lg bg-bgDarkColor">
       <div class="row-wrapper" v-if="!isClearingHistory">
         <button
           class="icon"
@@ -199,9 +208,9 @@
         </v-popover>
       </div>
       <div class="row-wrapper" v-else>
-        <label for="clear-history-button" class="info">
+        <p for="clear-history-button" class="info">
           <i class="material-icons">help_outline</i> {{ $t("are_you_sure") }}
-        </label>
+        </p>
         <div>
           <button
             class="icon"
@@ -253,11 +262,6 @@ ol {
   flex-direction: column;
 }
 
-.entry {
-  border-bottom: 1px dashed var(--brd-color);
-  padding: 0 0 8px;
-}
-
 @media (max-width: 720px) {
   .virtual-list.filled {
     min-height: 320px;

components/layout/pw-section.vue

@@ -1,6 +1,6 @@
 <template>
   <fieldset :id="label.toLowerCase()" :class="{ 'no-colored-frames': !frameColorsEnabled }">
-    <legend @click.prevent="collapse">
+    <legend v-if="!noLegend" @click.prevent="collapse">
       <span>{{ label }}</span>
       <i class="ml-2 align-middle material-icons">
         {{ isCollapsed(label) ? "expand_more" : "expand_less" }}
@@ -14,8 +14,7 @@
 
 <style scoped lang="scss">
 fieldset {
-  @apply my-2;
-  @apply p-2;
+  @apply my-4;
   @apply rounded-lg;
   @apply bg-bgDarkColor;
   @apply transition;
@@ -23,8 +22,8 @@ fieldset {
   @apply duration-200;
 
   legend {
+    @apply px-4;
     @apply text-fgColor;
-    @apply text-sm;
     @apply font-bold;
     @apply cursor-pointer;
     @apply transition;
@@ -86,6 +85,10 @@ export default {
       type: String,
       default: "Section",
     },
+    noLegend: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   methods: {