Update design

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>