feat: revamp collections ui

components/history/graphql/Card.vue

@@ -28,7 +28,14 @@
         :icon="expand ? 'unfold_less' : 'unfold_more'"
         @click.native="expand = !expand"
       />
-      <tippy ref="options" tabindex="-1" trigger="click" theme="popover" arrow>
+      <tippy
+        ref="options"
+        interactive
+        tabindex="-1"
+        trigger="click"
+        theme="popover"
+        arrow
+      >
         <template #trigger>
           <TabPrimary
             v-tippy="{ theme: 'tooltip' }"

components/history/index.vue

@@ -1,11 +1,11 @@
 <template>
   <AppSection label="history">
-    <div class="flex sticky top-10 shadow-sm">
+    <div class="flex sticky top-10 border-b border-dividerLight">
       <input
         v-model="filterText"
         aria-label="Search"
         type="search"
-        class="px-4 py-2 text-xs flex flex-1 focus:outline-none border-divider"
+        class="px-4 py-3 text-xs flex flex-1 bg-primary focus:outline-none"
         :placeholder="$t('search')"
       />
       <ButtonSecondary

components/history/rest/Card.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex group">
+  <div class="flex items-center group">
     <span
       class="
         font-mono font-bold
@@ -10,14 +10,26 @@
         w-12
         mx-2
         truncate
+        cursor-pointer
       "
       :class="entryStatus.className"
-      :style="{ '--status-code': entry.status }"
       @click="$emit('use-entry')"
     >
       {{ entry.method }}
     </span>
-    <span class="py-3 pr-3 flex flex-1 min-w-0 text-secondaryLight text-xs">
+    <span
+      class="
+        py-3
+        cursor-pointer
+        pr-3
+        flex flex-1
+        min-w-0
+        text-secondaryLight text-xs
+        group-hover:text-secondary
+        transition
+      "
+      @click="$emit('use-entry')"
+    >
       <span class="truncate">
         {{ `${entry.url}${entry.path}` }}
       </span>