[Remove Vuetify from Studio] Saved searches dialogs

contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SavedSearchesModal.vue

@@ -13,72 +13,65 @@
       />
       <p
         v-else-if="savedSearches.length === 0"
-        class="grey--text pa-2"
+        :style="{ color: $themeTokens.annotation }"
+        class="empty-state"
       >
         {{ $tr('noSavedSearches') }}
       </p>
-      <VList v-else>
-        <template v-for="(search, index) in savedSearches">
-          <VListTile
-            :key="index"
-            class="py-2"
-          >
-            <VListTileContent>
-              <VListTileTitle>
-                <ActionLink
-                  class="font-weight-bold"
-                  :to="searchResultsRoute(search)"
-                  :text="search.name"
-                  @click="dialog = false"
-                />
-              </VListTileTitle>
-              <VListTileSubTitle class="metadata">
-                <span>
-                  {{ $formatRelative(search.created, { now: new Date() }) }}
-                </span>
-                <span>
-                  {{ $tr('filterCount', { count: searchFilterCount(search) }) }}
-                </span>
-              </VListTileSubTitle>
-            </VListTileContent>
-
-            <VListTileAction>
-              <IconButton
-                icon="clear"
-                color="grey"
-                :text="$tr('deleteAction')"
-                @click="handleClickDelete(search.id)"
-              />
-            </VListTileAction>
-          </VListTile>
-          <VDivider
-            v-if="index < savedSearches.length - 1"
-            :key="index + 'divider'"
-          />
-        </template>
-      </VList>
+      <ul
+        v-else
+        class="saved-searches-list"
+      >
+        <li
+          v-for="search in savedSearches"
+          :key="search.id"
+          :style="itemStyle"
+          class="search-item"
+        >
+          <div class="search-content">
+            <div class="search-title">
+              <KRouterLink
+                :to="searchResultsRoute(search)"
+                class="notranslate saved-search-link"
+                @click="dialog = false"
+              >
+                {{ search.name }}
+              </KRouterLink>
+            </div>
+            <div
+              class="metadata"
+              :style="{ color: $themeTokens.annotation }"
+            >
+              <span>
+                {{ $formatRelative(search.created, { now: new Date() }) }}
+              </span>
+              <span>
+                {{ $tr('filterCount', { count: searchFilterCount(search) }) }}
+              </span>
+            </div>
+          </div>
+
+          <div class="search-actions">
+            <KIconButton
+              icon="clear"
+              :tooltip="$tr('deleteAction')"
+              @click="handleClickDelete(search.id)"
+            />
+          </div>
+        </li>
+      </ul>
     </KModal>
 
-    <MessageDialog
-      v-model="showDelete"
-      :header="$tr('deleteSearchTitle')"
-      :text="$tr('deleteConfirmation')"
+    <KModal
+      v-if="showDelete"
+      :title="$tr('deleteSearchTitle')"
+      :cancelText="$tr('cancelAction')"
+      :submitText="$tr('deleteAction')"
+      @cancel="handleCancel"
+      @submit="handleDeleteConfirm"
     >
-      <template #buttons>
-        <VBtn
-          flat
-          @click="handleCancel"
-        >
-          {{ $tr('cancelAction') }}
-        </VBtn>
-        <VBtn
-          color="primary"
-          @click="handleDeleteConfirm"
-        >
-          {{ $tr('deleteAction') }}
-        </VBtn>
-      </template>
-    </MessageDialog>
+      <p>{{ $tr('deleteConfirmation') }}</p>
+    </KModal>
   </div>
 
 </template>
@@ -87,16 +80,10 @@
 <script>
 
   import { mapActions, mapGetters } from 'vuex';
-  import MessageDialog from 'shared/views/MessageDialog';
-  import IconButton from 'shared/views/IconButton';
 
   export default {
     name: 'SavedSearchesModal',
     inject: ['RouteNames'],
-    components: {
-      MessageDialog,
-      IconButton,
-    },
     props: {
       value: {
         type: Boolean,
@@ -120,6 +107,11 @@
           this.$emit('input', value);
         },
       },
+      itemStyle() {
+        return {
+          borderBottom: `1px solid ${this.$themeTokens.fineLine}`,
+        };
+      },
     },
     mounted() {
       this.loading = true;
@@ -189,14 +181,48 @@
 
 <style scoped lang="scss">
 
+  .saved-searches-list {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+
+  .search-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px 0;
+
+    &:last-child {
+      border-bottom: unset;
+    }
+  }
+
+  .search-content {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .search-title {
+    margin-bottom: 4px;
+  }
+
+  .saved-search-link {
+    font-weight: 600;
+  }
+
   .metadata {
-    color: var(--v-grey-darken2);
+    font-size: 14px;
 
     span:not(:last-child)::after {
       margin: 0 4px;
-      color: var(--v-grey-base);
       content: '•';
     }
   }
 
+  .search-actions {
+    flex-shrink: 0;
+    margin-left: 16px;
+  }
+
 </style>