refactor(ui): remaining realtime pages

components/collections/graphql/index.vue

@@ -7,22 +7,26 @@
       class="flex flex-col top-8 z-10 sticky"
       :class="{ 'bg-primary': !savingMode }"
     >
-      <input
-        v-if="showCollActions"
-        v-model="filterText"
-        type="search"
-        :placeholder="$t('search')"
-        class="
-          bg-primaryLight
-          border-b border-dividerLight
-          flex
-          font-semibold font-mono
-          flex-1
-          py-2
-          px-4
-          focus:outline-none
-        "
-      />
+      <div class="search-wrapper">
+        <input
+          v-if="showCollActions"
+          v-model="filterText"
+          type="search"
+          :placeholder="$t('search')"
+          class="
+            bg-primaryLight
+            border-b border-dividerLight
+            flex
+            font-semibold font-mono
+            w-full
+            py-2
+            pr-2
+            pl-9
+            focus:outline-none
+            truncate
+          "
+        />
+      </div>
       <div class="border-b border-dividerLight flex flex-1 justify-between">
         <ButtonSecondary
           icon="add"

components/collections/index.vue

@@ -7,22 +7,26 @@
       class="bg-primary rounded-t flex flex-col top-0 z-10 sticky"
       :class="{ '!top-8': !saveRequest && !doc }"
     >
-      <input
-        v-if="!saveRequest"
-        v-model="filterText"
-        type="search"
-        :placeholder="$t('search')"
-        class="
-          bg-primaryLight
-          border-b border-dividerLight
-          flex
-          font-semibold font-mono
-          flex-1
-          py-2
-          px-4
-          focus:outline-none
-        "
-      />
+      <div class="search-wrapper">
+        <input
+          v-if="!saveRequest"
+          v-model="filterText"
+          type="search"
+          :placeholder="$t('search')"
+          class="
+            bg-primaryLight
+            border-b border-dividerLight
+            flex
+            font-semibold font-mono
+            w-full
+            py-2
+            pr-2
+            pl-9
+            focus:outline-none
+            truncate
+          "
+        />
+      </div>
       <CollectionsChooseType
         :collections-type="collectionsType"
         :show="showTeamCollections"

components/collections/my/Collection.vue

@@ -46,6 +46,7 @@
         v-tippy="{ theme: 'tooltip' }"
         :title="$t('delete')"
         icon="check_box"
+        color="green"
         @click.native="$emit('unselect-collection')"
       />
       <ButtonSecondary

components/collections/teams/Collection.vue

@@ -38,6 +38,7 @@
         v-tippy="{ theme: 'tooltip' }"
         :title="$t('delete')"
         icon="check_box"
+        color="green"
         @click.native="$emit('unselect-collection')"
       />
       <ButtonSecondary