feat: Update Inbox/Team creation UI (#12305)

app/javascript/dashboard/components-next/icon/provider.js

@@ -2,23 +2,23 @@ import { computed } from 'vue';
 
 export function useChannelIcon(inbox) {
   const channelTypeIconMap = {
-    'Channel::Api': 'i-ri-cloudy-fill',
-    'Channel::Email': 'i-ri-mail-fill',
-    'Channel::FacebookPage': 'i-ri-messenger-fill',
-    'Channel::Line': 'i-ri-line-fill',
-    'Channel::Sms': 'i-ri-chat-1-fill',
-    'Channel::Telegram': 'i-ri-telegram-fill',
-    'Channel::TwilioSms': 'i-ri-chat-1-fill',
+    'Channel::Api': 'i-woot-api',
+    'Channel::Email': 'i-woot-mail',
+    'Channel::FacebookPage': 'i-woot-messenger',
+    'Channel::Line': 'i-woot-line',
+    'Channel::Sms': 'i-woot-sms',
+    'Channel::Telegram': 'i-woot-telegram',
+    'Channel::TwilioSms': 'i-woot-sms',
     'Channel::TwitterProfile': 'i-ri-twitter-x-fill',
-    'Channel::WebWidget': 'i-ri-global-fill',
-    'Channel::Whatsapp': 'i-ri-whatsapp-fill',
-    'Channel::Instagram': 'i-ri-instagram-fill',
+    'Channel::WebWidget': 'i-woot-website',
+    'Channel::Whatsapp': 'i-woot-whatsapp',
+    'Channel::Instagram': 'i-woot-instagram',
     'Channel::Voice': 'i-ri-phone-fill',
   };
 
   const providerIconMap = {
-    microsoft: 'i-ri-microsoft-fill',
-    google: 'i-ri-google-fill',
+    microsoft: 'i-woot-outlook',
+    google: 'i-woot-gmail',
   };
 
   const channelIcon = computed(() => {
@@ -34,7 +34,7 @@ export function useChannelIcon(inbox) {
 
     // Special case for Twilio whatsapp
     if (type === 'Channel::TwilioSms' && inboxDetails.medium === 'whatsapp') {
-      icon = 'i-ri-whatsapp-fill';
+      icon = 'i-woot-whatsapp';
     }
 
     return icon ?? 'i-ri-global-fill';

app/javascript/dashboard/components-next/icon/specs/provider.spec.js

@@ -4,19 +4,19 @@ describe('useChannelIcon', () => {
   it('returns correct icon for API channel', () => {
     const inbox = { channel_type: 'Channel::Api' };
     const { value: icon } = useChannelIcon(inbox);
-    expect(icon).toBe('i-ri-cloudy-fill');
+    expect(icon).toBe('i-woot-api');
   });
 
   it('returns correct icon for Facebook channel', () => {
     const inbox = { channel_type: 'Channel::FacebookPage' };
     const { value: icon } = useChannelIcon(inbox);
-    expect(icon).toBe('i-ri-messenger-fill');
+    expect(icon).toBe('i-woot-messenger');
   });
 
   it('returns correct icon for WhatsApp channel', () => {
     const inbox = { channel_type: 'Channel::Whatsapp' };
     const { value: icon } = useChannelIcon(inbox);
-    expect(icon).toBe('i-ri-whatsapp-fill');
+    expect(icon).toBe('i-woot-whatsapp');
   });
 
   it('returns correct icon for Voice channel', () => {
@@ -28,19 +28,19 @@ describe('useChannelIcon', () => {
   it('returns correct icon for Line channel', () => {
     const inbox = { channel_type: 'Channel::Line' };
     const { value: icon } = useChannelIcon(inbox);
-    expect(icon).toBe('i-ri-line-fill');
+    expect(icon).toBe('i-woot-line');
   });
 
   it('returns correct icon for SMS channel', () => {
     const inbox = { channel_type: 'Channel::Sms' };
     const { value: icon } = useChannelIcon(inbox);
-    expect(icon).toBe('i-ri-chat-1-fill');
+    expect(icon).toBe('i-woot-sms');
   });
 
   it('returns correct icon for Telegram channel', () => {
     const inbox = { channel_type: 'Channel::Telegram' };
     const { value: icon } = useChannelIcon(inbox);
-    expect(icon).toBe('i-ri-telegram-fill');
+    expect(icon).toBe('i-woot-telegram');
   });
 
   it('returns correct icon for Twitter channel', () => {
@@ -52,20 +52,20 @@ describe('useChannelIcon', () => {
   it('returns correct icon for WebWidget channel', () => {
     const inbox = { channel_type: 'Channel::WebWidget' };
     const { value: icon } = useChannelIcon(inbox);
-    expect(icon).toBe('i-ri-global-fill');
+    expect(icon).toBe('i-woot-website');
   });
 
   it('returns correct icon for Instagram channel', () => {
     const inbox = { channel_type: 'Channel::Instagram' };
     const { value: icon } = useChannelIcon(inbox);
-    expect(icon).toBe('i-ri-instagram-fill');
+    expect(icon).toBe('i-woot-instagram');
   });
 
   describe('TwilioSms channel', () => {
     it('returns chat icon for regular Twilio SMS channel', () => {
       const inbox = { channel_type: 'Channel::TwilioSms' };
       const { value: icon } = useChannelIcon(inbox);
-      expect(icon).toBe('i-ri-chat-1-fill');
+      expect(icon).toBe('i-woot-sms');
     });
 
     it('returns WhatsApp icon for Twilio SMS with WhatsApp medium', () => {
@@ -74,7 +74,7 @@ describe('useChannelIcon', () => {
         medium: 'whatsapp',
       };
       const { value: icon } = useChannelIcon(inbox);
-      expect(icon).toBe('i-ri-whatsapp-fill');
+      expect(icon).toBe('i-woot-whatsapp');
     });
 
     it('returns chat icon for Twilio SMS with non-WhatsApp medium', () => {
@@ -83,7 +83,7 @@ describe('useChannelIcon', () => {
         medium: 'sms',
       };
       const { value: icon } = useChannelIcon(inbox);
-      expect(icon).toBe('i-ri-chat-1-fill');
+      expect(icon).toBe('i-woot-sms');
     });
 
     it('returns chat icon for Twilio SMS with undefined medium', () => {
@@ -92,7 +92,7 @@ describe('useChannelIcon', () => {
         medium: undefined,
       };
       const { value: icon } = useChannelIcon(inbox);
-      expect(icon).toBe('i-ri-chat-1-fill');
+      expect(icon).toBe('i-woot-sms');
     });
   });
 
@@ -100,7 +100,7 @@ describe('useChannelIcon', () => {
     it('returns mail icon for generic email channel', () => {
       const inbox = { channel_type: 'Channel::Email' };
       const { value: icon } = useChannelIcon(inbox);
-      expect(icon).toBe('i-ri-mail-fill');
+      expect(icon).toBe('i-woot-mail');
     });
 
     it('returns Microsoft icon for Microsoft email provider', () => {
@@ -109,7 +109,7 @@ describe('useChannelIcon', () => {
         provider: 'microsoft',
       };
       const { value: icon } = useChannelIcon(inbox);
-      expect(icon).toBe('i-ri-microsoft-fill');
+      expect(icon).toBe('i-woot-outlook');
     });
 
     it('returns Google icon for Google email provider', () => {
@@ -118,7 +118,7 @@ describe('useChannelIcon', () => {
         provider: 'google',
       };
       const { value: icon } = useChannelIcon(inbox);
-      expect(icon).toBe('i-ri-google-fill');
+      expect(icon).toBe('i-woot-gmail');
     });
   });
 

app/javascript/dashboard/components-next/sidebar/ChannelLeaf.vue

@@ -25,7 +25,7 @@ const reauthorizationRequired = computed(() => {
 
 <template>
   <span
-    class="size-4 grid place-content-center rounded-full bg-n-alpha-2"
+    class="size-5 grid place-content-center rounded-full bg-n-alpha-2"
     :class="{ 'bg-n-solid-blue': active }"
   >
     <ChannelIcon :inbox="inbox" class="size-3" />