Cleanup components

app/javascript/widget/App.vue

@@ -335,14 +335,14 @@ export default {
 <template>
   <div
     v-if="!conversationSize && isFetchingList"
-    class="flex items-center justify-center flex-1 h-full bg-black-25"
+    class="flex items-center justify-center flex-1 h-full max-w-96 mx-auto"
     :class="{ dark: prefersDarkMode }"
   >
     <Spinner size="" />
   </div>
   <div
     v-else
-    class="flex flex-col justify-end h-full"
+    class="flex flex-col justify-end h-full max-w-[600px] mx-auto"
     :class="{
       'is-mobile': isMobile,
       'is-widget-right': isRightAligned,

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

@@ -15,7 +15,7 @@
 
 html,
 body {
-  @apply antialiased h-full font-interDisplay tracking-[0.4px];
+  @apply antialiased h-full font-interDisplay tracking-[0.4px] bg-n-background;
 }
 
 .is-mobile {

app/javascript/widget/components/ArticleHero.vue

@@ -24,7 +24,7 @@ const onArticleClick = link => {
     <h3 class="font-medium text-n-slate-12">
       {{ $t('PORTAL.POPULAR_ARTICLES') }}
     </h3>
-    <div class="flex flex-col gap-2">
+    <div class="flex flex-col gap-4">
       <ArticleListItem
         v-for="article in articlesToDisplay"
         :key="article.slug"

app/javascript/widget/components/ArticleListItem.vue

@@ -1,41 +1,33 @@
-<script>
-import FluentIcon from 'shared/components/FluentIcon/Index.vue';
+<script setup>
+import { defineProps, defineEmits } from 'vue';
 
-export default {
-  components: { FluentIcon },
-  props: {
-    link: {
-      type: String,
-      default: '',
-    },
-    title: {
-      type: String,
-      default: '',
-    },
+const props = defineProps({
+  link: {
+    type: String,
+    default: '',
   },
-  emits: ['selectArticle'],
-  data() {
-    return {};
-  },
-  methods: {
-    onClick() {
-      this.$emit('selectArticle', this.link);
-    },
+  title: {
+    type: String,
+    default: '',
   },
+});
+
+const emit = defineEmits(['selectArticle']);
+
+const onClick = () => {
+  emit('selectArticle', props.link);
 };
 </script>
 
 <template>
   <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"
+    class="flex items-center justify-between rounded cursor-pointer text-n-slate-11 hover:text-n-slate-12 gap-2"
     role="button"
     @click="onClick"
   >
     <button class="underline-offset-2 leading-6 text-left">
       {{ title }}
     </button>
-    <span class="pl-1 arrow">
-      <span class="i-lucide-chevron-right" />
-    </span>
+    <span class="i-lucide-chevron-right text-base shrink-0" />
   </div>
 </template>

app/javascript/widget/components/ChatHeaderExpanded.vue

@@ -44,11 +44,11 @@ const containerClasses = computed(() => [
     </div>
     <h2
       v-dompurify-html="introHeading"
-      class="mt-4 text-2xl mb-1.5 font-medium text-slate-900 dark:text-slate-50"
+      class="mt-4 text-2xl mb-1.5 font-medium text-n-slate-12"
     />
     <p
       v-dompurify-html="introBody"
-      class="text-base leading-normal text-slate-700 dark:text-slate-200"
+      class="text-lg leading-normal text-n-slate-11"
     />
   </header>
 </template>

app/javascript/widget/components/layouts/ViewWithHeader.vue

@@ -103,13 +103,13 @@ export default {
 
 <template>
   <div
-    class="w-full h-full bg-slate-25 dark:bg-slate-800"
+    class="w-full h-full"
     :class="{ 'overflow-auto': isOnHomeView }"
     @keydown.esc="closeWindow"
   >
     <div class="relative flex flex-col h-full">
       <div
-        class="sticky top-0 z-40 transition-all header-wrap"
+        class=""
         :class="{
           expanded: !isHeaderCollapsed,
           collapsed: isHeaderCollapsed,
@@ -148,21 +148,4 @@ export default {
 .custom-header-shadow {
   @include shadow-large;
 }
-
-.header-wrap {
-  flex-shrink: 0;
-  transition: max-height 100ms;
-
-  &.expanded {
-    max-height: 16rem;
-  }
-
-  &.collapsed {
-    max-height: 4.5rem;
-  }
-
-  @media only screen and (min-device-width: 320px) and (max-device-width: 667px) {
-    border-radius: 0;
-  }
-}
 </style>

app/javascript/widget/router.js

@@ -1,5 +1,11 @@
 import { createRouter, createWebHashHistory } from 'vue-router';
 import ViewWithHeader from './components/layouts/ViewWithHeader.vue';
+import UnreadMessages from './views/UnreadMessages.vue';
+import Campaigns from './views/Campaigns.vue';
+import Home from './views/Home.vue';
+import PreChatForm from './views/PreChatForm.vue';
+import Messages from './views/Messages.vue';
+import ArticleViewer from './views/ArticleViewer.vue';
 
 export default createRouter({
   history: createWebHashHistory(),
@@ -7,12 +13,12 @@ export default createRouter({
     {
       path: '/unread-messages',
       name: 'unread-messages',
-      component: () => import('./views/UnreadMessages.vue'),
+      component: UnreadMessages,
     },
     {
       path: '/campaigns',
       name: 'campaigns',
-      component: () => import('./views/Campaigns.vue'),
+      component: Campaigns,
     },
     {
       path: '/',
@@ -21,22 +27,22 @@ export default createRouter({
         {
           path: '',
           name: 'home',
-          component: () => import('./views/Home.vue'),
+          component: Home,
         },
         {
           path: '/prechat-form',
           name: 'prechat-form',
-          component: () => import('./views/PreChatForm.vue'),
+          component: PreChatForm,
         },
         {
           path: '/messages',
           name: 'messages',
-          component: () => import('./views/Messages.vue'),
+          component: Messages,
         },
         {
           path: '/article',
           name: 'article-viewer',
-          component: () => import('./views/ArticleViewer.vue'),
+          component: ArticleViewer,
         },
       ],
     },