feat: Search page

app/javascript/dashboard/modules/search/components/SearchResultSection.vue

@@ -31,42 +31,23 @@ export default {
 </script>
 
 <template>
-  <section class="result-section">
-    <div v-if="showTitle" class="header">
-      <h3 class="text-sm text-slate-800 dark:text-slate-100">{{ title }}</h3>
+  <section class="mx-0 my-2">
+    <div v-if="showTitle" class="sticky top-0 p-2 z-50 mb-0.5 bg-n-background">
+      <h3 class="text-sm text-n-slate-12">{{ title }}</h3>
     </div>
     <woot-loading-state
       v-if="isFetching"
       :message="$t('SEARCH.SEARCHING_DATA')"
     />
     <slot v-else />
-    <div v-if="empty && !isFetching" class="empty">
-      <fluent-icon icon="info" size="16px" class="icon" />
-      <p class="empty-state__text">
+    <div
+      v-if="empty && !isFetching"
+      class="flex items-center justify-center px-4 py-6 m-2 rounded-md bg-n-slate-2 dark:bg-n-solid-3"
+    >
+      <fluent-icon icon="info" size="16px" class="text-n-slate-11" />
+      <p class="mx-2 my-0 text-center text-n-slate-11">
         {{ $t('SEARCH.EMPTY_STATE', { item: titleCase, query }) }}
       </p>
     </div>
   </section>
 </template>
-
-<style scoped lang="scss">
-.result-section {
-  @apply my-2 mx-0;
-}
-.search-list {
-  @apply m-0 py-4 px-0 list-none;
-}
-.header {
-  @apply sticky top-0 p-2 z-50 bg-white dark:bg-slate-900 mb-0.5;
-}
-
-.empty {
-  @apply flex items-center justify-center py-6 px-4 m-2 bg-slate-25 dark:bg-slate-800 rounded-md;
-  .icon {
-    @apply text-slate-500 dark:text-slate-300;
-  }
-  .empty-state__text {
-    @apply text-slate-500 dark:text-slate-300 text-center my-0 mx-2;
-  }
-}
-</style>