chore: Improvements to utils to load article in widget (#7859)

app/javascript/sdk/sdk.js

@@ -280,8 +280,8 @@ export const SDK_CSS = `
   .woot-widget-holder {
     border-radius: 16px;
     bottom: 104px;
-    height: calc(85% - 64px - 20px);
-    max-height: 590px !important;
+    height: calc(90% - 64px - 20px);
+    max-height: 640px !important;
     min-height: 250px !important;
     width: 400px !important;
  }

app/javascript/widget/api/endPoints.js

@@ -97,6 +97,7 @@ const getMostReadArticles = (slug, locale) => ({
   url: `/hc/${slug}/${locale}/articles.json`,
   params: {
     page: 1,
+    sort: 'views',
   },
 });
 

app/javascript/widget/mixins/darkModeMixin.js

@@ -3,6 +3,12 @@ import { mapGetters } from 'vuex';
 export default {
   computed: {
     ...mapGetters({ darkMode: 'appConfig/darkMode' }),
+    prefersDarkMode() {
+      const isOSOnDarkMode =
+        this.darkMode === 'auto' &&
+        window.matchMedia('(prefers-color-scheme: dark)').matches;
+      return isOSOnDarkMode || this.darkMode === 'dark';
+    },
   },
   methods: {
     $dm(light, dark) {

app/javascript/widget/store/modules/specs/conversation/getters.spec.js

@@ -445,4 +445,33 @@ describe('#getters', () => {
     };
     expect(getters.getMessageCount(state)).toEqual(1);
   });
+
+  it('getLastMessage', () => {
+    const state = {
+      conversations: {
+        1: {
+          id: 1,
+          content: 'Thanks for the help',
+          created_at: 1574075964,
+          message_type: 1,
+        },
+        2: {
+          id: 2,
+          content: 'Yes, It makes sense',
+          created_at: 1574092218,
+          message_type: 1,
+        },
+        3: {
+          id: 3,
+          content: 'Yes, It makes sense',
+          created_at: 1574092218,
+          message_type: 0,
+        },
+      },
+      meta: {
+        userLastSeenAt: 1674075964,
+      },
+    };
+    expect(getters.getLastMessage(state).id).toEqual(3);
+  });
 });

tailwind.config.js

@@ -26,8 +26,8 @@ module.exports = {
   ],
   theme: {
     fontSize: {
-      xxs: '0.625rem',
       ...defaultTheme.fontSize,
+      xxs: '0.625rem',
     },
     colors: {
       transparent: 'transparent',
@@ -127,6 +127,7 @@ module.exports = {
       body: slateDark.slate7,
     },
     keyframes: {
+      ...defaultTheme.keyframes,
       wiggle: {
         '0%': { transform: 'translateX(0)' },
         '15%': { transform: 'translateX(0.375rem)' },
@@ -139,6 +140,7 @@ module.exports = {
       },
     },
     animation: {
+      ...defaultTheme.animation,
       wiggle: 'wiggle 0.5s ease-in-out',
     },
   },