Update design

app/javascript/widget/components/ArticleCategoryCard.vue

@@ -17,7 +17,7 @@ export default {
   },
   emits: ['view', 'viewAll'],
   computed: {
-    ...mapGetters({ widgetColor: 'appConfig/getWidgetColor' }),
+    ...mapGetters({ : '' }),
   },
   methods: {
     onArticleClick(link) {
@@ -27,28 +27,4 @@ export default {
 };
 </script>
 
-<template>
-  <div>
-    <h3 class="mb-0 text-sm font-medium text-slate-800 dark:text-slate-50">
-      {{ title }}
-    </h3>
-    <ArticleList :articles="articles" @select-article="onArticleClick" />
-    <button
-      class="inline-flex items-center justify-between px-2 py-1 -ml-2 text-sm font-medium leading-6 rounded-md text-slate-800 dark:text-slate-50 hover:bg-slate-25 dark:hover:bg-slate-800 see-articles"
-      :style="{ color: widgetColor }"
-      @click="$emit('viewAll')"
-    >
-      <span class="pr-2 text-sm">{{ $t('PORTAL.VIEW_ALL_ARTICLES') }}</span>
-      <FluentIcon icon="arrow-right" size="14" />
-    </button>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.see-articles {
-  color: var(--brand-textButtonClear);
-  svg {
-    color: var(--brand-textButtonClear);
-  }
-}
-</style>
+<template></template>

app/javascript/widget/components/ArticleHero.vue

@@ -1,27 +1,36 @@
-<script>
-import CategoryCard from './ArticleCategoryCard.vue';
-export default {
-  components: { CategoryCard },
-  props: {
-    articles: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  emits: ['view', 'viewAll'],
-  methods: {
-    onArticleClick(link) {
-      this.$emit('view', link);
-    },
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+import ArticleList from './ArticleList.vue';
+import { useMapGetter } from 'dashboard/composables/store';
+
+defineProps({
+  articles: {
+    type: Array,
+    default: () => [],
   },
+});
+
+const emit = defineEmits(['view', 'viewAll']);
+const widgetColor = useMapGetter('appConfig/getWidgetColor');
+
+const onArticleClick = link => {
+  emit('view', link);
 };
 </script>
 
 <template>
-  <CategoryCard
-    :title="$t('PORTAL.POPULAR_ARTICLES')"
-    :articles="articles.slice(0, 6)"
-    @view-all="$emit('viewAll')"
-    @view="onArticleClick"
-  />
+  <div>
+    <h3 class="mb-0 text-sm font-medium text-slate-800 dark:text-slate-50">
+      {{ $t('PORTAL.POPULAR_ARTICLES') }}
+    </h3>
+    <ArticleList :articles="articles" @select-article="onArticleClick" />
+    <button
+      class="inline-flex items-center justify-between px-2 py-1 -ml-2 text-sm font-medium leading-6 rounded-md text-slate-800 dark:text-slate-50 hover:bg-slate-25 dark:hover:bg-slate-800 see-articles"
+      :style="{ color: widgetColor }"
+      @click="$emit('viewAll')"
+    >
+      <span class="pr-2 text-sm">{{ $t('PORTAL.VIEW_ALL_ARTICLES') }}</span>
+      <FluentIcon icon="arrow-right" size="14" />
+    </button>
+  </div>
 </template>

app/javascript/widget/components/TeamAvailability.vue

@@ -5,7 +5,6 @@ import nextAvailabilityTime from 'widget/mixins/nextAvailabilityTime';
 import AvailableAgents from 'widget/components/AvailableAgents.vue';
 import configMixin from 'widget/mixins/configMixin';
 import availabilityMixin from 'widget/mixins/availability';
-import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 import { IFrameHelper } from 'widget/helpers/utils';
 import { CHATWOOT_ON_START_CONVERSATION } from '../constants/sdkEvents';
 
@@ -13,7 +12,6 @@ export default {
   name: 'TeamAvailability',
   components: {
     AvailableAgents,
-    FluentIcon,
   },
   mixins: [configMixin, nextAvailabilityTime, availabilityMixin],
   props: {
@@ -61,35 +59,37 @@ export default {
 </script>
 
 <template>
-  <div class="p-4 bg-white rounded-md shadow-sm dark:bg-slate-700">
-    <div class="flex items-center justify-between">
-      <div class="">
-        <div class="text-sm font-medium text-slate-700 dark:text-slate-50">
+  <div
+    class="flex flex-col gap-5 w-full shadow outline-1 outline outline-n-container rounded-xl bg-n-solid-2 px-5 py-4"
+  >
+    <div class="flex items-center justify-between gap-2">
+      <div class="flex flex-col gap-1">
+        <div class="text-base font-medium text-n-slate-12">
           {{
             isOnline
               ? $t('TEAM_AVAILABILITY.ONLINE')
               : $t('TEAM_AVAILABILITY.OFFLINE')
           }}
         </div>
-        <div class="mt-1 text-sm text-slate-500 dark:text-slate-100">
+        <div class="text-n-slate-11 text-sm">
           {{ replyWaitMessage }}
         </div>
       </div>
       <AvailableAgents v-if="isOnline" :agents="availableAgents" />
     </div>
     <button
-      class="inline-flex items-center justify-between px-2 py-1 mt-2 -ml-2 text-sm font-medium leading-6 rounded-md text-slate-800 dark:text-slate-50 hover:bg-slate-25 dark:hover:bg-slate-800"
+      class="inline-flex items-center text-sm font-medium text-n-slate-12"
       :style="{ color: widgetColor }"
       @click="startConversation"
     >
-      <span class="pr-2 text-sm">
+      <span class="pr-1">
         {{
           hasConversation
             ? $t('CONTINUE_CONVERSATION')
             : $t('START_CONVERSATION')
         }}
       </span>
-      <FluentIcon icon="arrow-right" size="14" />
+      <i class="i-lucide-arrow-right text-base" />
     </button>
   </div>
 </template>