fix: Refactor components in widget to show articles (#7874)

app/javascript/widget/components/ArticleCategoryCard.vue

@@ -1,21 +1,27 @@
 <template>
-  <div class="py-2">
-    <h3 class="text-sm font-semibold text-slate-900 mb-0">{{ title }}</h3>
-    <article-list :articles="articles" />
+  <div>
+    <h3 class="text-base font-medium text-slate-900 dark:text-slate-50 mb-0">
+      {{ title }}
+    </h3>
+    <article-list :articles="articles" @click="onArticleClick" />
     <button
-      class="inline-flex text-sm font-medium rounded-md px-2 py-1 -ml-2 leading-6 text-slate-800 justify-between items-center hover:bg-slate-25 see-articles"
-      @click="$emit('view-all-articles')"
+      class="inline-flex text-sm font-medium rounded-md px-2 py-1 -ml-2 leading-6 text-slate-800 dark:text-slate-50 justify-between items-center hover:bg-slate-25 dark:hover:bg-slate-800 see-articles"
+      :style="{ color: widgetColor }"
+      @click="$emit('view-all')"
     >
-      <span class="pr-2">{{ $t('PORTAL.VIEW_ALL_ARTICLES') }}</span>
+      <span class="pr-2 text-sm">{{ $t('PORTAL.VIEW_ALL_ARTICLES') }}</span>
       <fluent-icon icon="arrow-right" size="14" />
     </button>
   </div>
 </template>
 
 <script>
+import { mapGetters } from 'vuex';
 import ArticleList from './ArticleList.vue';
+import FluentIcon from 'shared/components/FluentIcon/Index.vue';
+
 export default {
-  components: { ArticleList },
+  components: { FluentIcon, ArticleList },
   props: {
     title: {
       type: String,
@@ -25,9 +31,13 @@ export default {
       type: Array,
       default: () => [],
     },
-    categoryPath: {
-      type: String,
-      default: '',
+  },
+  computed: {
+    ...mapGetters({ widgetColor: 'appConfig/getWidgetColor' }),
+  },
+  methods: {
+    onArticleClick(link) {
+      this.$emit('view', link);
     },
   },
 };