Simplify components

app/javascript/widget/assets/scss/_forms.scss

@@ -14,7 +14,6 @@ $input-height: $space-two * 2;
   box-sizing: border-box;
   color: $color-body;
   display: block;
-  font-family: $font-family;
   font-size: $font-size-medium;
   height: $input-height;
   line-height: 1.5;
@@ -69,7 +68,6 @@ $input-height: $space-two * 2;
 
 // Form element: Textarea
 textarea.form-input {
-  font-family: $font-family;
 
   @include placeholder {
     color: $color-light-gray;

app/javascript/widget/assets/scss/_variables.scss

@@ -72,16 +72,5 @@ $line-height: 1;
 $footer-height: 11.2rem;
 $header-expanded-height: $space-medium * 10;
 
-$font-family: 'Inter',
-  -apple-system,
-  system-ui,
-  BlinkMacSystemFont,
-  'Segoe UI',
-  Roboto,
-  'Helvetica Neue',
-  Tahoma,
-  Arial,
-  sans-serif;
-
 // Break points
 $break-point-medium: 667px;

app/javascript/widget/assets/scss/woot.scss

@@ -15,10 +15,7 @@
 
 html,
 body {
-  font-family: $font-family;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  height: 100%;
+  @apply antialiased h-full font-interDisplay tracking-[0.4px];
 }
 
 .is-mobile {
@@ -43,10 +40,6 @@ body {
   }
 }
 
-.cursor-pointer {
-  cursor: pointer;
-}
-
 .message-content {
   ul {
     list-style: disc;

app/javascript/widget/components/ArticleCategoryCard.vue

@@ -1,30 +0,0 @@
-<script>
-import { mapGetters } from 'vuex';
-import ArticleList from './ArticleList.vue';
-import FluentIcon from 'shared/components/FluentIcon/Index.vue';
-
-export default {
-  components: { FluentIcon, ArticleList },
-  props: {
-    title: {
-      type: String,
-      default: '',
-    },
-    articles: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  emits: ['view', 'viewAll'],
-  computed: {
-    ...mapGetters({ : '' }),
-  },
-  methods: {
-    onArticleClick(link) {
-      this.$emit('view', link);
-    },
-  },
-};
-</script>
-
-<template></template>

app/javascript/widget/components/ArticleHero.vue

@@ -1,9 +1,9 @@
 <script setup>
-import { defineProps, defineEmits } from 'vue';
-import ArticleList from './ArticleList.vue';
+import { defineProps, defineEmits, computed } from 'vue';
+import ArticleListItem from './ArticleListItem.vue';
 import { useMapGetter } from 'dashboard/composables/store';
 
-defineProps({
+const props = defineProps({
   articles: {
     type: Array,
     default: () => [],
@@ -12,6 +12,7 @@ defineProps({
 
 const emit = defineEmits(['view', 'viewAll']);
 const widgetColor = useMapGetter('appConfig/getWidgetColor');
+const articlesToDisplay = computed(() => props.articles.slice(0, 6));
 
 const onArticleClick = link => {
   emit('view', link);
@@ -19,18 +20,25 @@ const onArticleClick = link => {
 </script>
 
 <template>
-  <div>
-    <h3 class="mb-0 text-sm font-medium text-slate-800 dark:text-slate-50">
+  <div class="flex flex-col gap-3 pb-4">
+    <h3 class="font-medium text-n-slate-12">
       {{ $t('PORTAL.POPULAR_ARTICLES') }}
     </h3>
-    <ArticleList :articles="articles" @select-article="onArticleClick" />
+    <div class="flex flex-col gap-2">
+      <ArticleListItem
+        v-for="article in articlesToDisplay"
+        :key="article.slug"
+        :link="article.link"
+        :title="article.title"
+        @select-article="onArticleClick"
+      />
+    </div>
     <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"
+      class="font-medium tracking-wide inline-flex"
       :style="{ color: widgetColor }"
       @click="$emit('viewAll')"
     >
-      <span class="pr-2 text-sm">{{ $t('PORTAL.VIEW_ALL_ARTICLES') }}</span>
-      <FluentIcon icon="arrow-right" size="14" />
+      <span>{{ $t('PORTAL.VIEW_ALL_ARTICLES') }}</span>
     </button>
   </div>
 </template>

app/javascript/widget/components/ArticleList.vue

@@ -1,36 +0,0 @@
-<script>
-import ArticleListItem from './ArticleListItem.vue';
-
-export default {
-  components: {
-    ArticleListItem,
-  },
-  props: {
-    articles: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  emits: ['selectArticle'],
-  data() {
-    return {};
-  },
-  methods: {
-    onClick(link) {
-      this.$emit('selectArticle', link);
-    },
-  },
-};
-</script>
-
-<template>
-  <ul role="list" class="py-2">
-    <ArticleListItem
-      v-for="article in articles"
-      :key="article.slug"
-      :link="article.link"
-      :title="article.title"
-      @select-article="onClick"
-    />
-  </ul>
-</template>

app/javascript/widget/components/ArticleListItem.vue

@@ -26,16 +26,16 @@ export default {
 </script>
 
 <template>
-  <li
-    class="py-1 flex items-center justify-between -mx-1 px-1 hover:bg-slate-25 dark:hover:bg-slate-600 rounded cursor-pointer text-slate-700 dark:text-slate-50 dark:hover:text-slate-25 hover:text-slate-900"
+  <div
+    class="py-1 flex items-center justify-between -mx-1 px-1 rounded cursor-pointer text-n-slate-11 hover:text-n-slate-12"
     role="button"
     @click="onClick"
   >
-    <button class="underline-offset-2 text-sm leading-6 text-left">
+    <button class="underline-offset-2 leading-6 text-left">
       {{ title }}
     </button>
     <span class="pl-1 arrow">
-      <FluentIcon icon="arrow-right" size="14" />
+      <span class="i-lucide-chevron-right" />
     </span>
-  </li>
+  </div>
 </template>

app/javascript/widget/components/TeamAvailability.vue

@@ -17,7 +17,7 @@ export default {
   props: {
     availableAgents: {
       type: Array,
-      default: () => {},
+      default: () => { },
     },
     hasConversation: {
       type: Boolean,
@@ -60,25 +60,25 @@ export default {
 
 <template>
   <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"
+    class="flex flex-col gap-3 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">
+        <div class="font-medium text-n-slate-12">
           {{
             isOnline
               ? $t('TEAM_AVAILABILITY.ONLINE')
               : $t('TEAM_AVAILABILITY.OFFLINE')
           }}
         </div>
-        <div class="text-n-slate-11 text-sm">
+        <div class="text-n-slate-11">
           {{ replyWaitMessage }}
         </div>
       </div>
       <AvailableAgents v-if="isOnline" :agents="availableAgents" />
     </div>
     <button
-      class="inline-flex items-center text-sm font-medium text-n-slate-12"
+      class="inline-flex items-center font-medium text-n-slate-12"
       :style="{ color: widgetColor }"
       @click="startConversation"
     >
@@ -89,7 +89,7 @@ export default {
             : $t('START_CONVERSATION')
         }}
       </span>
-      <i class="i-lucide-arrow-right text-base" />
+      <i class="i-lucide-chevron-right text-lg" />
     </button>
   </div>
 </template>