akadmin/chatwoot
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

chore: Update sidebar and app layout UI (#12933)

Browse Source
This commit is contained in:
Sivin Varghese
2025-11-28 18:39:51 +05:30
committed by GitHub
parent 8cc6bde24f
commit a0edf2e6e3
58 changed files with 158 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/dashboard/App.vue
+1 -1
View File
@@ -131,7 +131,7 @@ export default {
<div
v-if="!authUIFlags.isFetching && !accountUIFlags.isFetchingItem"
id="app"
class="flex flex-col w-full h-screen min-h-0"
class="flex flex-col w-full h-screen min-h-0 bg-n-background"
:dir="isRTL ? 'rtl' : 'ltr'"
>
<UpdateBanner :latest-chatwoot-version="latestChatwootVersion" />
app/javascript/dashboard/components-next/Campaigns/CampaignCard/CampaignCard.vue
+1 -1
View File
@@ -77,7 +77,7 @@ const inboxName = computed(() => props.inbox?.name || '');
const inboxIcon = computed(() => {
const { medium, channel_type: type } = props.inbox;
return getInboxIconByType(type, medium);
return getInboxIconByType(type, medium, 'line');
});
</script>
app/javascript/dashboard/components-next/Campaigns/CampaignCard/LiveChatCampaignDetails.vue
+2 -2
View File
@@ -47,8 +47,8 @@ const senderThumbnailSrc = computed(() => props.sender?.thumbnail);
<span class="flex-shrink-0 text-sm text-n-slate-11 whitespace-nowrap">
{{ t('CAMPAIGN.LIVE_CHAT.CARD.CAMPAIGN_DETAILS.FROM') }}
</span>
<div class="flex items-center gap-1.5 flex-shrink-0">
<Icon :icon="inboxIcon" class="flex-shrink-0 text-n-slate-12 size-3" />
<div class="flex items-center gap-1 flex-shrink-0">
<Icon :icon="inboxIcon" class="flex-shrink-0 text-n-slate-12 size-4" />
<span class="text-sm font-medium text-n-slate-12">
{{ inboxName }}
</span>
app/javascript/dashboard/components-next/Campaigns/CampaignLayout.vue
+1 -1
View File
@@ -20,7 +20,7 @@ const handleButtonClick = () => {
</script>
<template>
<section class="flex flex-col w-full h-full overflow-hidden bg-n-background">
<section class="flex flex-col w-full h-full overflow-hidden bg-n-surface-1">
<header class="sticky top-0 z-10 px-6 lg:px-0">
<div class="w-full max-w-[60rem] mx-auto">
<div class="flex items-center justify-between w-full h-20 gap-2">
app/javascript/dashboard/components-next/Companies/CompaniesListLayout.vue
+1 -1
View File
@@ -21,7 +21,7 @@ const updateCurrentPage = page => {
<template>
<section
class="flex w-full h-full gap-4 overflow-hidden justify-evenly bg-n-background"
class="flex w-full h-full gap-4 overflow-hidden justify-evenly bg-n-surface-1"
>
<div class="flex flex-col w-full h-full transition-all duration-300">
<CompanyHeader
app/javascript/dashboard/components-next/Contacts/ContactsDetailsLayout.vue
+1 -1
View File
@@ -73,7 +73,7 @@ const closeMobileSidebar = () => {
<template>
<section
class="flex w-full h-full overflow-hidden justify-evenly bg-n-background"
class="flex w-full h-full overflow-hidden justify-evenly bg-n-surface-1"
>
<div
class="flex flex-col w-full h-full transition-all duration-300 ltr:2xl:ml-56 rtl:2xl:mr-56"
app/javascript/dashboard/components-next/Contacts/ContactsListLayout.vue
+1 -1
View File
@@ -65,7 +65,7 @@ const openFilter = () => {
<template>
<section
class="flex w-full h-full gap-4 overflow-hidden justify-evenly bg-n-background"
class="flex w-full h-full gap-4 overflow-hidden justify-evenly bg-n-surface"
>
<div class="flex flex-col w-full h-full transition-all duration-300">
<ContactListHeaderWrapper
app/javascript/dashboard/components-next/EmptyStateLayout.vue
+1 -1
View File
@@ -37,7 +37,7 @@ defineProps({
<div
class="flex flex-col items-center justify-end w-full h-full pb-20"
:class="{
'absolute inset-x-0 bottom-0 bg-gradient-to-t from-n-background from-25% dark:from-n-background to-transparent':
'absolute inset-x-0 bottom-0 bg-gradient-to-t from-n-surface-1 from-25% to-transparent':
showBackdrop,
}"
>
app/javascript/dashboard/components-next/HelpCenter/HelpCenterLayout.vue
+1 -1
View File
@@ -58,7 +58,7 @@ const togglePortalSwitcher = () => {
</script>
<template>
<section class="flex flex-col w-full h-full overflow-hidden bg-n-background">
<section class="flex flex-col w-full h-full overflow-hidden bg-n-surface-1">
<header class="sticky top-0 z-10 px-6 pb-3 lg:px-0">
<div class="w-full max-w-[60rem] mx-auto lg:px-6">
<div
app/javascript/dashboard/components-next/NewConversation/helpers/specs/composeConversationHelper.spec.js
+1 -1
View File
@@ -70,7 +70,7 @@ describe('composeConversationHelper', () => {
const result = helpers.buildContactableInboxesList(inboxes);
expect(result[0]).toMatchObject({
id: 1,
icon: 'i-ri-mail-line',
icon: 'i-woot-mail',
label: 'Email Inbox (support@example.com)',
action: 'inbox',
value: 1,
app/javascript/dashboard/components-next/captain/PageLayout.vue
+1 -1
View File
@@ -115,7 +115,7 @@ const handleCreateAssistant = () => {
</script>
<template>
<section class="flex flex-col w-full h-full overflow-hidden bg-n-background">
<section class="flex flex-col w-full h-full overflow-hidden bg-n-surface-1">
<header class="sticky top-0 z-10 px-6">
<div class="w-full max-w-[60rem] mx-auto">
<div
app/javascript/dashboard/components-next/captain/assistant/InboxCard.vue
+3 -2
View File
@@ -7,6 +7,7 @@ import CardLayout from 'dashboard/components-next/CardLayout.vue';
import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
import Button from 'dashboard/components-next/button/Button.vue';
import Policy from 'dashboard/components/policy.vue';
import Icon from 'dashboard/components-next/icon/Icon.vue';
import { INBOX_TYPES, getInboxIconByType } from 'dashboard/helper/inbox';
const props = defineProps({
@@ -59,7 +60,7 @@ const menuItems = computed(() => [
const icon = computed(() => {
const { medium, channel_type: type } = props.inbox;
return getInboxIconByType(type, medium, 'outline');
return getInboxIconByType(type, medium, 'line');
});
const handleAction = ({ action, value }) => {
@@ -74,7 +75,7 @@ const handleAction = ({ action, value }) => {
<span
class="text-base text-n-slate-12 line-clamp-1 flex items-center gap-2"
>
<span :class="icon" />
<Icon :icon="icon" class="size-5" />
{{ inboxName }}
</span>
<div class="flex items-center gap-2">
app/javascript/dashboard/components-next/icon/provider.js
+2 -2
View File
@@ -9,11 +9,11 @@ export function useChannelIcon(inbox) {
'Channel::Sms': 'i-woot-sms',
'Channel::Telegram': 'i-woot-telegram',
'Channel::TwilioSms': 'i-woot-sms',
'Channel::TwitterProfile': 'i-ri-twitter-x-fill',
'Channel::TwitterProfile': 'i-woot-x',
'Channel::WebWidget': 'i-woot-website',
'Channel::Whatsapp': 'i-woot-whatsapp',
'Channel::Instagram': 'i-woot-instagram',
'Channel::Voice': 'i-ri-phone-fill',
'Channel::Voice': 'i-woot-voice',
};
const providerIconMap = {
app/javascript/dashboard/components-next/icon/specs/provider.spec.js
+2 -2
View File
@@ -22,7 +22,7 @@ describe('useChannelIcon', () => {
it('returns correct icon for Voice channel', () => {
const inbox = { channel_type: 'Channel::Voice' };
const { value: icon } = useChannelIcon(inbox);
expect(icon).toBe('i-ri-phone-fill');
expect(icon).toBe('i-woot-voice');
});
it('returns correct icon for Line channel', () => {
@@ -46,7 +46,7 @@ describe('useChannelIcon', () => {
it('returns correct icon for Twitter channel', () => {
const inbox = { channel_type: 'Channel::TwitterProfile' };
const { value: icon } = useChannelIcon(inbox);
expect(icon).toBe('i-ri-twitter-x-fill');
expect(icon).toBe('i-woot-x');
});
it('returns correct icon for WebWidget channel', () => {
app/javascript/dashboard/components-next/message/MessageList.vue
+1 -1
View File
@@ -160,7 +160,7 @@ const getInReplyToMessage = parentMessage => {
</script>
<template>
<ul class="px-4 bg-n-background">
<ul class="px-4 bg-n-surface-1">
<slot name="beforeAll" />
<template v-for="(message, index) in allMessages" :key="message.id">
<slot
app/javascript/dashboard/components-next/pagination/PaginationFooter.vue
+1 -1
View File
@@ -71,7 +71,7 @@ const pageInfo = computed(() => {
<template>
<div
class="flex justify-between h-12 w-full max-w-[calc(60rem-3px)] outline outline-n-container outline-1 -outline-offset-1 mx-auto bg-n-solid-2 rounded-xl py-2 ltr:pl-4 rtl:pr-4 ltr:pr-3 rtl:pl-3 items-center before:absolute before:inset-x-0 before:-top-4 before:bg-gradient-to-t before:from-n-background before:from-10% before:dark:from-0% before:to-transparent before:h-4 before:pointer-events-none"
class="flex justify-between h-12 w-full max-w-[calc(60rem-3px)] outline outline-n-container outline-1 -outline-offset-1 mx-auto bg-n-solid-2 rounded-xl py-2 ltr:pl-4 rtl:pr-4 ltr:pr-3 rtl:pl-3 items-center before:absolute before:inset-x-0 before:-top-4 before:bg-gradient-to-t before:from-n-surface-1 before:from-10% before:dark:from-0% before:to-transparent before:h-4 before:pointer-events-none"
>
<div class="flex items-center gap-3">
<span class="min-w-0 text-sm font-normal line-clamp-1 text-n-slate-11">
app/javascript/dashboard/components-next/sidebar/ChannelLeaf.vue
+3 -5
View File
@@ -8,6 +8,7 @@ const props = defineProps({
type: String,
required: true,
},
// eslint-disable-next-line vue/no-unused-properties
active: {
type: Boolean,
default: false,
@@ -24,11 +25,8 @@ const reauthorizationRequired = computed(() => {
</script>
<template>
<span
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" />
<span class="size-4 grid place-content-center rounded-full">
<ChannelIcon :inbox="inbox" class="size-4" />
</span>
<div class="flex-1 truncate min-w-0">{{ label }}</div>
<div
app/javascript/dashboard/components-next/sidebar/Sidebar.vue
+6 -6
View File
@@ -207,7 +207,7 @@ const menuItems = computed(() => {
name: `${label.title}-${label.id}`,
label: label.title,
icon: h('span', {
class: `size-[12px] ring-1 ring-n-alpha-1 dark:ring-white/20 ring-inset rounded-sm`,
class: `size-[8px] rounded-sm`,
style: { backgroundColor: label.color },
}),
to: accountScopedRoute('label_conversations', {
@@ -335,7 +335,7 @@ const menuItems = computed(() => {
name: `${label.title}-${label.id}`,
label: label.title,
icon: h('span', {
class: `size-[12px] ring-1 ring-n-alpha-1 dark:ring-white/20 ring-inset rounded-sm`,
class: `size-[8px] rounded-sm`,
style: { backgroundColor: label.color },
}),
to: accountScopedRoute(
@@ -589,7 +589,7 @@ const menuItems = computed(() => {
closeMobileSidebar,
{ ignore: ['#mobile-sidebar-launcher'] },
]"
class="bg-n-solid-2 rtl:border-l ltr:border-r border-n-weak flex flex-col text-sm pb-1 fixed top-0 ltr:left-0 rtl:right-0 h-full z-40 transition-transform duration-200 ease-in-out md:static w-[200px] basis-[200px] md:flex-shrink-0 md:ltr:translate-x-0 md:rtl:-translate-x-0"
class="bg-n-background flex flex-col text-sm pb-0.5 fixed top-0 ltr:left-0 rtl:right-0 h-full z-40 transition-transform duration-200 ease-in-out md:static w-[200px] basis-[200px] md:flex-shrink-0 md:ltr:translate-x-0 md:rtl:-translate-x-0"
:class="[
{
'shadow-lg md:shadow-none': isMobileSidebarOpen,
@@ -597,7 +597,7 @@ const menuItems = computed(() => {
},
]"
>
<section class="grid gap-2 mt-2 mb-4">
<section class="grid gap-2 mt-1 mb-4">
<div class="flex gap-2 items-center px-2 min-w-0">
<div class="grid flex-shrink-0 place-content-center size-6">
<Logo class="size-4" />
@@ -649,13 +649,13 @@ const menuItems = computed(() => {
class="flex flex-col flex-shrink-0 relative gap-1 justify-between items-center"
>
<div
class="pointer-events-none absolute inset-x-0 -top-[31px] h-8 bg-gradient-to-t from-n-solid-2 to-transparent"
class="pointer-events-none absolute inset-x-0 -top-[31px] h-8 bg-gradient-to-t from-n-background to-transparent"
/>
<SidebarChangelogCard
v-if="isOnChatwootCloud && !isACustomBrandedInstance"
/>
<div
class="p-1 flex-shrink-0 flex w-full justify-between z-10 gap-2 items-center border-t border-n-weak shadow-[0px_-2px_4px_0px_rgba(27,28,29,0.02)]"
class="px-1 pt-1 flex-shrink-0 flex w-full justify-between z-10 gap-2 items-center border-t border-n-weak shadow-[0px_-2px_4px_0px_rgba(27,28,29,0.02)]"
>
<SidebarProfileMenu
@open-key-shortcut-modal="emit('openKeyShortcutModal')"
app/javascript/dashboard/components-next/sidebar/SidebarGroupHeader.vue
+2 -2
View File
@@ -32,7 +32,7 @@ const count = computed(() =>
:to="to"
:title="label"
:class="{
'text-n-blue-text bg-n-alpha-2 font-medium': isActive && !hasActiveChild,
'text-n-slate-12 bg-n-alpha-2 font-medium': isActive && !hasActiveChild,
'text-n-slate-12 font-medium': hasActiveChild,
'text-n-slate-11 hover:bg-n-alpha-2': !isActive && !hasActiveChild,
}"
@@ -53,7 +53,7 @@ const count = computed(() =>
v-if="dynamicCount && !expandable"
class="rounded-md capitalize text-xs leading-5 font-medium text-center outline outline-1 px-1 flex-shrink-0"
:class="{
'text-n-blue-text outline-n-slate-6': isActive,
'text-n-slate-12 outline-n-slate-6': isActive,
'text-n-slate-11 outline-n-strong': !isActive,
}"
>
app/javascript/dashboard/components-next/sidebar/SidebarGroupLeaf.vue
+4 -2
View File
@@ -33,7 +33,7 @@ const shouldRenderComponent = computed(() => {
:title="label"
class="flex h-8 items-center gap-2 px-2 py-1 rounded-lg max-w-[9.438rem] hover:bg-gradient-to-r from-transparent via-n-slate-3/70 to-n-slate-3/70 group"
:class="{
'text-n-blue-text bg-n-alpha-2 active': active,
'text-n-slate-12 bg-n-alpha-2 active': active,
}"
>
<component
@@ -44,7 +44,9 @@ const shouldRenderComponent = computed(() => {
:active
/>
<template v-else>
<Icon v-if="icon" :icon="icon" class="size-4 inline-block" />
<span v-if="icon" class="size-4 grid place-content-center rounded-full">
<Icon :icon="icon" class="size-4 inline-block" />
</span>
<div class="flex-1 truncate min-w-0">{{ label }}</div>
</template>
</component>
app/javascript/dashboard/components-next/sidebar/SidebarSubGroup.vue
+1 -1
View File
@@ -68,7 +68,7 @@ useEventListener(scrollableContainer, 'scroll', () => {
<div
v-if="isScrollable && isExpanded"
v-show="!scrollEnd"
class="absolute bg-gradient-to-t from-n-solid-2 w-full h-12 to-transparent -bottom-1 pointer-events-none flex items-end justify-end px-2 animate-fade-in-up"
class="absolute bg-gradient-to-t from-n-background w-full h-12 to-transparent -bottom-1 pointer-events-none flex items-end justify-end px-2 animate-fade-in-up"
>
<svg
width="16"
app/javascript/dashboard/components/Accordion/AccordionItem.vue
+1 -1
View File
@@ -55,7 +55,7 @@ const onToggle = () => {
</button>
<div
v-if="isOpen"
class="bg-n-background outline outline-1 outline-n-weak -mt-[-1px] border-t-0 rounded-br-lg rounded-bl-lg"
class="outline outline-1 outline-n-weak -mt-[-1px] border-t-0 rounded-br-lg rounded-bl-lg"
:class="compact ? 'p-0' : 'px-2 py-4'"
>
<slot />
app/javascript/dashboard/components/ChatList.vue
+1 -1
View File
@@ -842,7 +842,7 @@ watch(conversationFilters, (newVal, oldVal) => {
<template>
<div
class="flex flex-col flex-shrink-0 bg-n-solid-1 conversations-list-wrap"
class="flex flex-col flex-shrink-0 conversations-list-wrap bg-n-surface-1"
:class="[
{ hidden: !showConversationList },
isOnExpandedLayout ? 'basis-full' : 'w-[340px] 2xl:w-[412px]',
app/javascript/dashboard/components/ChatListHeader.vue
+1 -1
View File
@@ -57,7 +57,7 @@ const toggleConversationLayout = () => {
<template>
<div
class="flex items-center justify-between gap-2 px-3 h-12"
class="flex items-center justify-between gap-2 px-3 h-[3.25rem]"
:class="{
'border-b border-n-strong': hasAppliedFiltersOrActiveFolders,
}"
app/javascript/dashboard/components/copilot/CopilotContainer.vue
+1 -1
View File
@@ -133,7 +133,7 @@ onMounted(() => {
<div
v-if="shouldShowCopilotPanel"
v-on-click-outside="() => closeCopilotPanel()"
class="bg-n-background h-full overflow-hidden flex-col fixed top-0 ltr:right-0 rtl:left-0 z-40 w-full max-w-sm transition-transform duration-300 ease-in-out md:static md:w-[320px] md:min-w-[320px] ltr:border-l rtl:border-r border-n-weak 2xl:min-w-[360px] 2xl:w-[360px] shadow-lg md:shadow-none"
class="bg-n-surface-2 h-full overflow-hidden flex-col fixed top-0 ltr:right-0 rtl:left-0 z-40 w-full max-w-sm transition-transform duration-300 ease-in-out md:static md:w-[320px] md:min-w-[320px] ltr:border-l rtl:border-r border-n-weak 2xl:min-w-[360px] 2xl:w-[360px] shadow-lg md:shadow-none"
:class="[
{
'md:flex': shouldShowCopilotPanel,
app/javascript/dashboard/components/ui/Tabs/TabsItem.vue
+4 -4
View File
@@ -50,7 +50,7 @@ const onTabClick = event => {
class="flex items-center flex-row border-b select-none cursor-pointer text-sm relative top-[1px] transition-[border-color] duration-[150ms] ease-[cubic-bezier(0.37,0,0.63,1)]"
:class="[
active
? 'border-b border-n-brand text-n-blue-text'
? 'border-b border-n-brand text-n-blue-11'
: 'border-transparent text-n-slate-11',
isCompact ? 'py-2 text-sm' : 'text-base py-3',
]"
@@ -59,11 +59,11 @@ const onTabClick = event => {
{{ name }}
<div
v-if="showBadge"
class="rounded-md h-5 flex items-center justify-center text-xxs font-semibold my-0 mx-1 px-1 py-0 min-w-[20px]"
class="rounded-full h-5 flex items-center justify-center text-xxs font-semibold my-0 mx-1 px-1.5 py-0 min-w-[20px]"
:class="[
active
? 'bg-n-brand/10 dark:bg-n-brand/20 text-n-blue-text'
: 'bg-n-alpha-black2 dark:bg-n-solid-3 text-n-slate-11',
? 'bg-n-blue-3 text-n-blue-11'
: 'bg-n-alpha-1 text-n-slate-10',
]"
>
<span>
app/javascript/dashboard/components/widgets/InboxName.vue
+1 -1
View File
@@ -13,7 +13,7 @@ defineProps({
<div class="flex items-center text-n-slate-11 text-xs min-w-0">
<ChannelIcon
:inbox="inbox"
class="size-3 ltr:mr-1 rtl:ml-1 flex-shrink-0"
class="size-3.5 ltr:mr-0.5 rtl:ml-0.5 flex-shrink-0"
/>
<span class="truncate">
{{ inbox.name }}
app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
+2 -2
View File
@@ -91,7 +91,7 @@ export default {
<template>
<div
class="conversation-details-wrap flex flex-col min-w-0 w-full bg-n-background relative"
class="conversation-details-wrap flex flex-col min-w-0 w-full bg-n-surface-1 relative"
:class="{
'border-l rtl:border-l-0 rtl:border-r border-n-weak': !isOnExpandedLayout,
}"
@@ -104,7 +104,7 @@ export default {
<woot-tabs
v-if="dashboardApps.length && currentChat.id"
:index="activeIndex"
class="-mt-px border-t border-t-n-background"
class="-mt-px"
@change="onDashboardAppTabChange"
>
<woot-tabs-item
app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
+1 -1
View File
@@ -95,7 +95,7 @@ const hasSlaPolicyId = computed(() => props.chat?.sla_policy_id);
<template>
<div
ref="conversationHeader"
class="flex flex-col gap-3 items-center justify-between flex-1 w-full min-w-0 xl:flex-row px-3 py-2 border-b bg-n-background border-n-weak h-24 xl:h-12"
class="flex flex-col gap-3 items-center justify-between flex-1 w-full min-w-0 xl:flex-row px-3 pt-3 pb-2 h-24 xl:h-12"
>
<div
class="flex items-center justify-start w-full xl:w-auto max-w-full min-w-0 xl:flex-1"
app/javascript/dashboard/components/widgets/conversation/ConversationSidebar.vue
+1 -1
View File
@@ -42,7 +42,7 @@ const closeContactPanel = () => {
<template>
<div
v-on-click-outside="() => closeContactPanel()"
class="bg-n-background h-full overflow-hidden flex flex-col fixed top-0 z-40 w-full max-w-sm transition-transform duration-300 ease-in-out ltr:right-0 rtl:left-0 md:static md:w-[320px] md:min-w-[320px] ltr:border-l rtl:border-r border-n-weak 2xl:min-w-[360px] 2xl:w-[360px] shadow-lg md:shadow-none"
class="bg-n-surface-2 h-full overflow-hidden flex flex-col fixed top-0 z-40 w-full max-w-sm transition-transform duration-300 ease-in-out ltr:right-0 rtl:left-0 md:static md:w-[320px] md:min-w-[320px] ltr:border-l rtl:border-r border-n-weak 2xl:min-w-[360px] 2xl:w-[360px] shadow-lg md:shadow-none"
:class="[
{
'md:flex': activeTab === 0,
app/javascript/dashboard/components/widgets/conversation/EmptyState/EmptyState.vue
+1 -1
View File
@@ -58,7 +58,7 @@ export default {
) {
return 'h-full overflow-auto w-full';
}
return 'flex-1 min-w-0 px-0 flex flex-col items-center justify-center h-full';
return 'flex-1 min-w-0 px-0 flex flex-col items-center justify-center h-full bg-n-surface-1';
},
},
};
app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
+1 -1
View File
@@ -508,7 +508,7 @@ export default {
class="flex relative flex-col"
:class="{
'modal-mask': isPopOutReplyBox,
'bg-n-background': !isPopOutReplyBox,
'bg-n-surface-1': !isPopOutReplyBox,
}"
>
<div
app/javascript/dashboard/helper/inbox.js
+10 -10
View File
@@ -29,16 +29,16 @@ const INBOX_ICON_MAP_FILL = {
const DEFAULT_ICON_FILL = 'i-ri-chat-1-fill';
const INBOX_ICON_MAP_LINE = {
[INBOX_TYPES.WEB]: 'i-ri-global-line',
[INBOX_TYPES.FB]: 'i-ri-messenger-line',
[INBOX_TYPES.TWITTER]: 'i-ri-twitter-x-line',
[INBOX_TYPES.WHATSAPP]: 'i-ri-whatsapp-line',
[INBOX_TYPES.API]: 'i-ri-cloudy-line',
[INBOX_TYPES.EMAIL]: 'i-ri-mail-line',
[INBOX_TYPES.TELEGRAM]: 'i-ri-telegram-line',
[INBOX_TYPES.LINE]: 'i-ri-line-line',
[INBOX_TYPES.INSTAGRAM]: 'i-ri-instagram-line',
[INBOX_TYPES.VOICE]: 'i-ri-phone-line',
[INBOX_TYPES.WEB]: 'i-woot-website',
[INBOX_TYPES.FB]: 'i-woot-messenger',
[INBOX_TYPES.TWITTER]: 'i-woot-x',
[INBOX_TYPES.WHATSAPP]: 'i-woot-whatsapp',
[INBOX_TYPES.API]: 'i-woot-api',
[INBOX_TYPES.EMAIL]: 'i-woot-mail',
[INBOX_TYPES.TELEGRAM]: 'i-woot-telegram',
[INBOX_TYPES.LINE]: 'i-woot-line',
[INBOX_TYPES.INSTAGRAM]: 'i-woot-instagram',
[INBOX_TYPES.VOICE]: 'i-woot-voice',
};
const DEFAULT_ICON_LINE = 'i-ri-chat-1-line';
app/javascript/dashboard/helper/specs/inbox.spec.js
+3 -3
View File
@@ -92,13 +92,13 @@ describe('#Inbox Helpers', () => {
describe('line variant', () => {
it('returns correct line icon for web widget', () => {
expect(getInboxIconByType(INBOX_TYPES.WEB, null, 'line')).toBe(
'i-ri-global-line'
'i-woot-website'
);
});
it('returns correct line icon for Facebook', () => {
expect(getInboxIconByType(INBOX_TYPES.FB, null, 'line')).toBe(
'i-ri-messenger-line'
'i-woot-messenger'
);
});
@@ -134,7 +134,7 @@ describe('#Inbox Helpers', () => {
it('returns WhatsApp line icon for Twilio WhatsApp number', () => {
expect(
getInboxIconByType(INBOX_TYPES.TWILIO, 'whatsapp', 'line')
).toBe('i-ri-whatsapp-line');
).toBe('i-woot-whatsapp');
});
it('returns SMS line icon for regular Twilio number', () => {
app/javascript/dashboard/modules/search/components/SearchView.vue
+1 -1
View File
@@ -309,7 +309,7 @@ onUnmounted(() => {
</script>
<template>
<div class="flex flex-col w-full h-full bg-n-background">
<div class="flex flex-col w-full h-full bg-n-surface-1">
<div class="flex w-full p-4">
<NextButton
:label="t('GENERAL_SETTINGS.BACK')"
app/javascript/dashboard/routes/dashboard/Dashboard.vue
+6 -2
View File
@@ -121,7 +121,9 @@ export default {
</script>
<template>
<div class="flex flex-grow overflow-hidden text-n-slate-12">
<div
class="flex flex-grow overflow-hidden text-n-slate-12 md:my-3 md:ltr:mr-3 md:rtl:ml-3"
>
<NextSidebar
:is-mobile-sidebar-open="isMobileSidebarOpen"
@toggle-account-modal="toggleAccountModal"
@@ -131,7 +133,9 @@ export default {
@close-mobile-sidebar="closeMobileSidebar"
/>
<main class="flex flex-1 h-full w-full min-h-0 px-0 overflow-hidden">
<main
class="flex flex-1 h-full w-full min-h-0 px-0 overflow-hidden md:rounded-lg md:border md:border-n-weak bg-n-surface-1"
>
<UpgradePage
v-show="showUpgradePage"
ref="upgradePageRef"
app/javascript/dashboard/routes/dashboard/campaigns/pages/CampaignsPageRouteView.vue
+1 -1
View File
@@ -16,7 +16,7 @@ onMounted(() => {
<template>
<div
class="flex flex-col justify-between flex-1 h-full m-0 overflow-auto bg-n-background px-6"
class="flex flex-col justify-between flex-1 h-full m-0 overflow-auto bg-n-surface-1 px-6"
>
<router-view v-slot="{ Component }">
<keep-alive v-if="keepAlive">
app/javascript/dashboard/routes/dashboard/captain/pages/AssistantsIndexPage.vue
+1 -1
View File
@@ -82,7 +82,7 @@ onMounted(() => performRouting());
<template>
<div
class="flex items-center justify-center w-full bg-n-background text-n-slate-11"
class="flex items-center justify-center w-full bg-n-surface-1 text-n-slate-11"
>
<Spinner />
</div>
app/javascript/dashboard/routes/dashboard/captain/pages/CaptainPageRouteView.vue
+1 -1
View File
@@ -23,7 +23,7 @@ watch(
<template>
<div class="flex w-full h-full min-h-0">
<section class="flex flex-1 h-full px-0 overflow-hidden bg-n-background">
<section class="flex flex-1 h-full px-0 overflow-hidden bg-n-surface-1">
<router-view />
</section>
</div>
app/javascript/dashboard/routes/dashboard/contacts/pages/ContactManageView.vue
+1 -1
View File
@@ -127,7 +127,7 @@ onMounted(() => {
<template>
<div
class="flex flex-col justify-between flex-1 h-full m-0 overflow-auto bg-n-background"
class="flex flex-col justify-between flex-1 h-full m-0 overflow-auto bg-n-surface-1"
>
<ContactsDetailsLayout
:button-label="$t('CONTACTS_LAYOUT.HEADER.SEND_MESSAGE')"
app/javascript/dashboard/routes/dashboard/contacts/pages/ContactsIndex.vue
+1 -1
View File
@@ -409,7 +409,7 @@ onMounted(async () => {
<template>
<div
class="flex flex-col justify-between flex-1 h-full m-0 overflow-auto bg-n-background"
class="flex flex-col justify-between flex-1 h-full m-0 overflow-auto bg-n-surface-1"
>
<ContactsListLayout
:search-value="searchValue"
app/javascript/dashboard/routes/dashboard/conversation/ConversationAction.vue
+1 -1
View File
@@ -207,7 +207,7 @@ export default {
</script>
<template>
<div class="bg-n-background">
<div>
<div class="multiselect-wrap--small">
<ContactDetailsItem
compact
app/javascript/dashboard/routes/dashboard/conversation/ConversationParticipant.vue
+1 -1
View File
@@ -155,7 +155,7 @@ export default {
</script>
<template>
<div class="relative bg-n-background">
<div class="relative">
<div class="flex justify-between">
<div class="flex justify-between w-full mb-1">
<div>
app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue
+2 -2
View File
@@ -254,8 +254,8 @@ onMounted(() => {
});
const evenClass = [
'[&>*:nth-child(odd)]:!bg-n-background [&>*:nth-child(even)]:!bg-n-slate-2',
'dark:[&>*:nth-child(odd)]:!bg-n-background dark:[&>*:nth-child(even)]:!bg-n-solid-1',
'[&>*:nth-child(odd)]:!bg-n-surface-1 [&>*:nth-child(even)]:!bg-n-slate-1',
'dark:[&>*:nth-child(odd)]:!bg-n-surface-2 dark:[&>*:nth-child(even)]:!bg-n-surface-1',
];
</script>
app/javascript/dashboard/routes/dashboard/helpcenter/pages/HelpCenterPageRouteView.vue
+1 -1
View File
@@ -67,7 +67,7 @@ watch(
<div class="flex w-full h-full min-h-0">
<section
v-if="isHelpCenterEnabled"
class="flex flex-1 h-full px-0 overflow-hidden bg-n-background"
class="flex flex-1 h-full px-0 overflow-hidden bg-n-surface-1"
>
<router-view />
</section>
app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsIndexPage.vue
+1 -1
View File
@@ -69,7 +69,7 @@ onMounted(() => performRouting());
<template>
<div
class="flex items-center justify-center w-full bg-n-background text-n-slate-11"
class="flex items-center justify-center w-full bg-n-surface-1 text-n-slate-11"
>
<Spinner />
</div>
app/javascript/dashboard/routes/dashboard/inbox/InboxEmptyState.vue
+1 -1
View File
@@ -28,7 +28,7 @@ export default {
<template>
<div
class="items-center justify-center hidden w-full h-full text-center bg-n-background lg:flex"
class="items-center justify-center hidden w-full h-full text-center bg-n-surface-1 lg:flex"
>
<div v-if="uiFlags.isFetching" class="flex justify-center my-4">
<Spinner class="text-n-brand" />
app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue
+2 -2
View File
@@ -222,7 +222,7 @@ onMounted(() => {
</script>
<template>
<section class="flex w-full h-full bg-n-solid-1">
<section class="flex w-full h-full bg-n-surface-1">
<div
class="flex flex-col h-full w-full lg:min-w-[340px] lg:max-w-[340px] ltr:border-r rtl:border-l border-n-weak"
:class="!currentConversationId ? 'flex' : 'hidden xl:flex'"
@@ -244,7 +244,7 @@ onMounted(() => {
class="inbox-card rounded-none hover:rounded-lg hover:bg-n-alpha-1 dark:hover:bg-n-alpha-3"
:class="
currentConversationId === notificationItem.primaryActor?.id
? 'bg-n-alpha-1 dark:bg-n-alpha-3 rounded-lg active'
? 'bg-n-alpha-1 dark:bg-n-alpha-3 !rounded-lg active'
: ''
"
@mark-notification-as-read="markNotificationAsRead"
app/javascript/dashboard/routes/dashboard/inbox/components/InboxItemHeader.vue
+1 -1
View File
@@ -109,7 +109,7 @@ export default {
<template>
<div
class="flex items-center justify-between w-full gap-2 border-b px-3 h-12 rtl:border-r border-n-weak flex-shrink-0"
class="flex items-center justify-between w-full gap-2 border-b px-3 h-12 rtl:border-r border-n-weak flex-shrink-0 bg-n-surface-1"
>
<div class="flex items-center gap-4">
<BackButton
app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
+1 -1
View File
@@ -41,7 +41,7 @@ export default {
<template>
<div
class="flex justify-between items-center h-20 min-h-[3.5rem] px-4 py-2 bg-n-background"
class="flex justify-between items-center h-20 min-h-[3.5rem] px-4 py-2 bg-n-surface-1"
>
<h1 class="flex items-center mb-0 text-2xl text-n-slate-12">
<BackButton
app/javascript/dashboard/routes/dashboard/settings/SettingsWrapper.vue
+1 -1
View File
@@ -9,7 +9,7 @@ defineProps({
<template>
<div
class="flex flex-col w-full h-full m-0 p-6 sm:py-8 lg:px-16 overflow-auto bg-n-background font-inter"
class="flex flex-col w-full h-full m-0 p-6 sm:py-8 lg:px-16 overflow-auto bg-n-surface-1 font-inter"
>
<div class="flex items-start w-full max-w-6xl mx-auto">
<router-view v-slot="{ Component }">
app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue
+1 -1
View File
@@ -19,7 +19,7 @@ const showSettingsHeader = computed(
</script>
<template>
<div class="flex flex-1 flex-col m-0 bg-n-background overflow-auto">
<div class="flex flex-1 flex-col m-0 bg-n-surface-1 overflow-auto">
<div
class="mx-auto w-full flex flex-col flex-1"
:class="{ 'max-w-6xl': !fullWidth }"
app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue
+1 -1
View File
@@ -77,7 +77,7 @@ const channelList = computed(() => {
key: 'voice',
title: t('INBOX_MGMT.ADD.AUTH.CHANNEL.VOICE.TITLE'),
description: t('INBOX_MGMT.ADD.AUTH.CHANNEL.VOICE.DESCRIPTION'),
icon: 'i-ri-phone-fill',
icon: 'i-woot-voice',
},
];
});
app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
+5 -4
View File
@@ -103,20 +103,21 @@ const openDelete = inbox => {
<div class="flex items-center flex-row gap-4">
<div
v-if="inbox.avatar_url"
class="bg-n-alpha-3 rounded-full size-12 p-2 ring ring-n-solid-1 border border-n-strong shadow-sm"
class="bg-n-alpha-3 rounded-full size-10 ring ring-n-solid-1 border border-n-strong shadow-sm grid place-items-center"
>
<Avatar
:src="inbox.avatar_url"
:name="inbox.name"
:size="30"
:size="24"
rounded-full
/>
</div>
<div
v-else
class="size-12 flex justify-center items-center bg-n-alpha-3 rounded-full p-2 ring ring-n-solid-1 border border-n-strong shadow-sm"
class="size-10 justify-center bg-n-alpha-3 rounded-full ring ring-n-solid-1 border border-n-strong shadow-sm grid place-items-center"
>
<ChannelIcon class="size-5 text-n-slate-10" :inbox="inbox" />
<ChannelIcon class="size-6 text-n-slate-10" :inbox="inbox" />
</div>
<div>
<span class="block font-medium capitalize">
app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
+1 -1
View File
@@ -201,7 +201,7 @@ export default {
},
inboxIcon() {
const { medium, channel_type: type } = this.inbox;
return getInboxIconByType(type, medium);
return getInboxIconByType(type, medium, 'line');
},
inboxName() {
if (this.isATwilioSMSChannel || this.isATwilioWhatsAppChannel) {
app/javascript/dashboard/routes/dashboard/settings/profile/Wrapper.vue
+1 -1
View File
@@ -9,7 +9,7 @@ defineProps({
<template>
<div
class="flex flex-col justify-between flex-1 h-full m-0 overflow-auto bg-n-background"
class="flex flex-col justify-between flex-1 h-full m-0 overflow-auto bg-n-surface-1"
>
<router-view v-slot="{ Component }">
<keep-alive v-if="keepAlive">
app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportsWrapper.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<div class="reports--wrapper overflow-auto bg-n-background w-full px-6">
<div class="reports--wrapper overflow-auto bg-n-surface-1 w-full px-6">
<div class="max-w-[60rem] mx-auto pb-12">
<router-view />
</div>
theme/icons.js
+59 -39
View File
@@ -115,69 +115,89 @@ export const icons = {
},
/** Channels Starts */
website: {
body: `<path d="m3.023 1.664.126-.001.418-.001 1.286-.004h.34l1.596-.003q.92 0 1.84-.004l1.425-.003.85-.002a108 108 0 0 1 1.092-.003c.628-.004 1.163.04 1.706.388.554.593.645 1.218.64 2.004v.192l-.002.624v.435l-.004 1.14-.002 1.166-.006 2.283a4 4 0 0 1-.798-.15l-.182-.056-.193-.061-.2-.062-.634-.198-1.03-.32q-.088-.03-.18-.057l-.158-.05c-.39-.117-.764-.18-1.151-.013-.261.15-.403.338-.513.616-.059.432.047.817.18 1.224l.055.177q.086.278.175.554l.285.904.05.157.044.138c.031.127.031.127.031.361a1215 1215 0 0 1-4.146.014 337 337 0 0 1-1.753.005l-.68.001-.2.002c-.606-.002-1.133-.094-1.603-.493a1.78 1.78 0 0 1-.54-1.298l-.002-.703-.002-1.102-.002-1.481q0-.69-.003-1.378l-.002-1.185-.001-.707v-.666l-.002-.358c.004-.622.125-1.103.557-1.563.395-.347.776-.462 1.293-.463m-.648 1.121c-.48.604-.293.955-.293 1.875h11.309c.135-1.332.135-1.332-.235-1.816-.303-.28-.518-.3-.924-.302h-.12l-.687-.002-.943-.003h-.325q-.762-.003-1.525-.003-.88 0-1.76-.005L5.51 2.527l-.813-.003a99 99 0 0 0-1.044-.002c-.675-.009-.675-.009-1.279.263" fill="currentColor"/><path d="M10.52 9.406c.193.044.193.044.396.105l.112.034.621.189.534.163a164 164 0 0 0 1.211.369l.252.076.554.17c.507.179.507.179.597.359.034.365.034.365-.092.532-.176.14-.355.197-.567.258l-.251.079q-.196.06-.394.118c-.498.13-.498.13-.908.416a2 2 0 0 0-.132.413q-.057.177-.117.351-.09.28-.176.561l-.058.183-.052.164a.93.93 0 0 1-.3.382c-.205.03-.205.03-.41 0-.226-.176-.292-.356-.374-.625l-.037-.118-.116-.384-.081-.268-.17-.562q-.107-.36-.218-.717a136 136 0 0 1-.36-1.19q-.03-.105-.064-.212a2 2 0 0 1-.045-.611c.174-.272.34-.252.645-.235M6.184 3.162c.175.033.175.033.318.158.092.168.092.168.092.351-.068.194-.11.253-.293.344-.147.026-.147.026-.293 0-.136-.095-.136-.095-.235-.234-.035-.215-.028-.31.096-.49.139-.096.139-.096.315-.129m-1.172.033c.139.096.139.096.234.235.027.186.034.296-.066.458a.74.74 0 0 1-.461.128c-.172-.121-.172-.121-.293-.293 0-.191.026-.3.128-.462.161-.1.272-.092.458-.066m-1.231.059c.117.117.117.117.14.348-.006.168-.01.222-.114.359-.203.078-.345.046-.553-.004-.117-.117-.117-.117-.14-.348.006-.168.01-.222.114-.359.203-.078.345-.046.553.004" fill="currentColor"/>`,
width: 16,
height: 16,
body: `<g fill="none" stroke="currentColor"><path d="M12 10.1755L12.0083 10.1663" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><path d="M15.333 10.1755L15.3413 10.1663" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><path d="M8.66699 10.1755L8.67533 10.1663" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><path d="M20.0424 13.9838V7.56679C20.0424 6.14919 18.9729 5 17.3687 5H6.67374C5.0695 5 4 6.14919 4 7.56679V15.2672C4 16.6848 4.53475 17.8339 6.67374 17.8339H12.0212" stroke-width="1.60424" stroke-linecap="round" stroke-linejoin="round"/><path d="M19.9345 16.8695C20.3746 17.1402 20.3475 17.7991 19.8942 17.8505L17.6067 18.1098L16.5807 20.1706C16.3774 20.579 15.749 20.3791 15.6451 19.8729L14.5263 14.4221C14.4385 13.9943 14.823 13.725 15.1949 13.9539L19.9345 16.8695Z" stroke-width="1.60424"/></g>`,
width: 24,
height: 24,
},
line: {
body: `<g clip-path="url(#a)"><path d="M2.778.778a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2zm4 2.25c2.344 0 4.25 1.528 4.25 3.407 0 .751-.295 1.429-.912 2.096-.892 1.014-2.885 2.249-3.339 2.437-.453.189-.386-.12-.367-.226l.06-.36c.014-.107.03-.273-.013-.38-.048-.116-.236-.177-.375-.206-2.042-.267-3.554-1.677-3.554-3.361 0-1.879 1.907-3.407 4.25-3.407M4.27 5.443a.22.22 0 0 0-.223.22v1.669c0 .122.1.22.223.22h.844a.22.22 0 0 0 .223-.22c0-.121-.1-.22-.223-.22h-.621V5.664c0-.122-.1-.22-.223-.22m1.495 0a.22.22 0 0 0-.223.22v1.669c0 .122.1.22.223.22a.22.22 0 0 0 .223-.22V5.664c0-.122-.1-.22-.223-.22m.766 0a.22.22 0 0 0-.224.22v1.669c0 .122.101.22.224.22a.22.22 0 0 0 .223-.22V6.3l.865 1.164a.225.225 0 0 0 .25.077.22.22 0 0 0 .151-.209V5.664c0-.122-.1-.22-.222-.22a.22.22 0 0 0-.223.22v1.032l-.866-1.164a.23.23 0 0 0-.178-.089m2.011 0a.22.22 0 0 0-.222.221v1.668c0 .122.1.22.222.22h.845a.22.22 0 0 0 .223-.22c0-.121-.1-.22-.223-.22h-.622v-.394h.622a.22.22 0 0 0 .223-.22c0-.122-.1-.22-.223-.22h-.622v-.394h.622a.22.22 0 0 0 .223-.22c0-.121-.1-.22-.223-.22z" fill="currentColor"/></g><defs><clipPath id="a"><path fill="currentColor" d="M.333.333h13.333v13.333H.333z"/></clipPath></defs>`,
width: 13,
height: 13,
body: `<g fill="none" stroke="currentColor"><path d="M20.8417 10.2395C20.8417 6.24765 16.84 3 11.9209 3C7.00219 3 3 6.24765 3 10.2395C3 13.818 6.17364 16.8152 10.4607 17.3817C10.7511 17.4445 11.1466 17.5733 11.2465 17.8217C11.3365 18.0471 11.3054 18.4005 11.2755 18.6282C11.2755 18.6282 11.1708 19.2578 11.148 19.392C11.1091 19.6173 10.9688 20.274 11.9209 19.873C12.8729 19.4717 17.0583 16.8477 18.9299 14.6937C20.2227 13.2758 20.8417 11.837 20.8417 10.2395Z" stroke-width="1.3" stroke-linejoin="round"/><path d="M15.7695 8.88233H17.643V8.71192H15.5989V12.143H17.643V11.9725H15.7695V10.5127H17.643V10.3422H15.7695V8.88233ZM6.49854 11.9725V8.71192H6.32812V12.143H8.37221V11.9725H6.49854ZM14.0175 12.0099L11.5754 8.71185H11.2922V12.143H11.4626V8.84573L13.9042 12.143H14.1879V8.71185H14.0175V12.0099ZM9.71054 8.71185V12.143H9.88096V8.71185H9.71054Z" stroke-width="0.892086" stroke-linejoin="round"/></g>`,
width: 24,
height: 24,
},
facebook: {
body: `<path d="M7 .333a6.667 6.667 0 0 1 1 13.258v-4.59h.666a1 1 0 0 0 0-2H8V5.665c0-.183.15-.333.333-.333h.333a1 1 0 0 0 0-2h-.333A2.333 2.333 0 0 0 6 5.668V7h-.667a1 1 0 1 0 0 2H6v4.592A6.668 6.668 0 0 1 7 .333" fill="currentColor"/>`,
width: 14,
height: 14,
body: `<g fill="none" stroke="currentColor"><path d="M12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM12 20V12.889M12 12.889V10.2223C12 8.46581 13.2033 7.58775 15.1111 7.71966M12 12.889H14.6667M12 12.889H9.33333" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></g>`,
width: 24,
height: 24,
},
whatsapp: {
body: `<path d="M7 .333A6.667 6.667 0 1 1 3.554 12.71l-2.02.594a.673.673 0 0 1-.836-.836l.593-2.021A6.667 6.667 0 0 1 7 .334M5.524 3.84a.46.46 0 0 0-.456-.05 1.86 1.86 0 0 0-1.072 1.258l-.004.02c-.026.101-.047.22-.042.35.016.455.194 1.743 1.543 3.091 1.347 1.348 2.634 1.527 3.09 1.543.13.005.249-.017.35-.042l.023-.006a1.85 1.85 0 0 0 1.254-1.067.47.47 0 0 0-.06-.469c-.355-.455-.832-.784-1.256-1.077l-.085-.058a.474.474 0 0 0-.649.105l-.4.61a.153.153 0 0 1-.203.05 5 5 0 0 1-.951-.703 4.4 4.4 0 0 1-.671-.915.15.15 0 0 1 .045-.194l.615-.457a.474.474 0 0 0 .081-.626l-.09-.133c-.28-.413-.607-.898-1.062-1.23" fill="currentColor"/>`,
width: 14,
height: 14,
body: `<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5226 5.48219C16.9248 3.88232 14.7997 3.00081 12.5355 3C7.8698 3 4.07265 6.79675 4.07102 11.4636C4.07021 12.9555 4.46024 14.4117 5.20092 15.695L4.43204 18.5034C4.24004 19.2047 4.87929 19.8508 5.58261 19.6664L8.4871 18.9045C9.72331 19.5791 11.1154 19.9342 12.5318 19.9346H12.5355C17.2003 19.9346 20.9979 16.1374 20.9995 11.4705C21.0003 9.20874 20.1208 7.08206 18.5226 5.48219ZM12.5355 18.5052H12.5326C11.2704 18.5048 10.0322 18.1655 8.95182 17.5246L8.6949 17.372L6.0321 18.0705L6.74275 15.4742L6.57553 15.208C5.87138 14.0879 5.49922 12.7932 5.50003 11.4641C5.50165 7.58532 8.65755 4.42941 12.5383 4.42941C14.4174 4.43022 16.1837 5.16279 17.512 6.49276C18.8404 7.82234 19.5713 9.59024 19.5705 11.4697C19.5689 15.3489 16.413 18.5052 12.5355 18.5052ZM16.3943 13.2364C16.1828 13.1305 15.1431 12.6191 14.9491 12.5485C14.7551 12.4778 14.6143 12.4426 14.4734 12.6544C14.3326 12.8663 13.9271 13.3427 13.8038 13.4836C13.6804 13.6248 13.557 13.6423 13.3455 13.5363C13.1341 13.4304 12.4527 13.2072 11.6446 12.4868C11.016 11.9259 10.5914 11.2335 10.4681 11.0216C10.3447 10.8098 10.4551 10.6953 10.5606 10.5902C10.6555 10.4953 10.772 10.3431 10.878 10.2197C10.9839 10.0963 11.0188 10.0079 11.0894 9.867C11.1601 9.72576 11.1247 9.60242 11.072 9.49646C11.0192 9.39054 10.5963 8.34951 10.4198 7.92622C10.2481 7.51389 10.0736 7.56989 9.94411 7.56299C9.82073 7.5569 9.67991 7.55569 9.53868 7.55569C9.39744 7.55569 9.16851 7.60845 8.97453 7.82031C8.78055 8.03214 8.23425 8.54392 8.23425 9.58452C8.23425 10.6251 8.992 11.6313 9.09792 11.7725C9.20383 11.9137 10.5894 14.0497 12.7108 14.9661C13.2153 15.1841 13.6094 15.3144 13.9166 15.4118C14.4231 15.5729 14.8841 15.5502 15.2486 15.4958C15.6549 15.4349 16.4998 14.984 16.676 14.4901C16.8521 13.9961 16.8521 13.5724 16.7994 13.4844C16.7466 13.3963 16.6058 13.3423 16.3943 13.2364Z" fill="currentColor"/>`,
width: 24,
height: 24,
},
instagram: {
body: `<path d="M8.667 0A3.333 3.333 0 0 1 12 3.333v5.334A3.333 3.333 0 0 1 8.667 12H3.333A3.333 3.333 0 0 1 0 8.667V3.333A3.333 3.333 0 0 1 3.333 0zM6 3.333a2.667 2.667 0 1 0 0 5.334 2.667 2.667 0 0 0 0-5.334m0 1.334a1.333 1.333 0 1 1 0 2.666 1.333 1.333 0 0 1 0-2.666m3-2.334a.667.667 0 1 0 0 1.334.667.667 0 0 0 0-1.334" fill="currentColor"/>`,
width: 12,
height: 12,
body: `<g fill="none" stroke="currentColor"><path d="M12.0003 15.3329C13.8412 15.3329 15.3337 13.8405 15.3337 11.9996C15.3337 10.1586 13.8412 8.66626 12.0003 8.66626C10.1594 8.66626 8.66699 10.1586 8.66699 11.9996C8.66699 13.8405 10.1594 15.3329 12.0003 15.3329Z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M4.5 15.3333V8.66667C4.5 6.36548 6.36548 4.5 8.66667 4.5H15.3333C17.6345 4.5 19.5 6.36548 19.5 8.66667V15.3333C19.5 17.6345 17.6345 19.5 15.3333 19.5H8.66667C6.36548 19.5 4.5 17.6345 4.5 15.3333Z" stroke-width="1.5"/><path d="M16.583 7.42552L16.5913 7.41626" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></g>`,
width: 24,
height: 24,
},
messenger: {
body: `<path fill-rule="evenodd" clip-rule="evenodd" d="M.333 7a6.667 6.667 0 1 1 3.221 5.709l-2.033.597a.667.667 0 0 1-.827-.827l.598-2.033A6.64 6.64 0 0 1 .333 7M5.53 5.53c.26-.26.682-.26.942 0L8 7.057 9.529 5.53a.667.667 0 1 1 .942.943l-2 2a.667.667 0 0 1-.942 0L6 6.943 4.471 8.472a.667.667 0 1 1-.942-.943z" fill="currentColor"/>`,
width: 14,
height: 14,
body: `<g fill="none" stroke="currentColor"><path d="M17.6568 6.34316C14.5326 3.21895 9.46735 3.21895 6.34314 6.34316C3.63893 9.04737 3.27537 13.2059 5.25266 16.3012L4.7839 18.709C4.72531 19.0099 4.99007 19.2747 5.29104 19.2161L7.69882 18.7473C10.7941 20.7246 14.9526 20.3611 17.6568 17.6569C20.7811 14.5326 20.7811 9.46736 17.6568 6.34316Z" stroke-width="1.6" stroke-linejoin="round"/><path d="M15.8218 10.624L13.2228 13.2231L10.853 10.8534L8.25391 13.4524" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></g>`,
width: 24,
height: 24,
},
mail: {
body: `<g clip-path="url(#a)" fill="currentColor"><path d="M0 4.676q.058.03.116.063l.065.036c.105.06.204.128.304.196l.068.047.54.366.083.056q.421.284.847.562.598.393 1.19.793.673.454 1.352.9a57 57 0 0 1 1.1.738c.525.356 1.087.543 1.725.437.46-.096.845-.36 1.225-.621q.193-.134.387-.265l.081-.055q.418-.284.843-.56.597-.392 1.19-.793.669-.452 1.345-.896.38-.249.757-.501l.076-.05.358-.24.127-.086.059-.04c.132-.087.132-.087.162-.087l.007 2.49v.354l.006 1.92.001.545.002.703c.004.486-.045.832-.387 1.2-.262.242-.547.369-.907.369h-.409l-.403.001h-.434l-.85.001h-.692l-1.96.001H7.76l-1.715.001-2.75.002a262 262 0 0 1-1.664 0l-.142.001c-.422.003-.775-.061-1.098-.354l-.063-.07-.04-.04c-.17-.181-.292-.427-.291-.678V9.407l.001-1.933v-.06z"/><path d="M1.278 1.743h.263l.549-.001h.434l1.542-.002H6.24q.858 0 1.715-.002a1231 1231 0 0 1 3.592-.002h.964c.422-.003.775.061 1.098.354l.063.07.04.04c.26.272.3.613.296.97-.013.348-.198.612-.44.85a2 2 0 0 1-.303.221l-.07.046-.15.097-.407.265-.084.055q-.421.276-.837.56-.63.425-1.265.842-.565.371-1.124.75a123 123 0 0 1-1.22.817c-.46.305-.85.525-1.419.433a1.6 1.6 0 0 1-.46-.213l-.056-.036q-.33-.211-.651-.433A98 98 0 0 0 4.21 6.55q-.634-.417-1.262-.843-.531-.358-1.065-.71l-.654-.43-.062-.041-.47-.312C.451 4.047.235 3.873.108 3.6l-.046-.097a1.37 1.37 0 0 1-.005-.94c.16-.352.434-.613.79-.76a1.5 1.5 0 0 1 .43-.061"/></g><defs><clipPath id="a"><path fill="currentColor" d="M0 0h14v14H0z"/></clipPath></defs>`,
width: 14,
height: 14,
body: `<g fill="none" stroke="currentColor"><path d="M20.4186 8.48859L18.1374 9.94025L15.8562 11.3919L13.7341 12.5709C12.7344 13.1263 11.519 13.1278 10.5183 12.574C9.56816 12.0482 8.52477 11.4699 8.3905 11.3919L3.82812 8.48859" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><rect x="3" y="6" width="18.2495" height="13.2724" rx="3.31809" stroke-width="1.6"/></g>`,
width: 24,
height: 24,
},
sms: {
body: `<path fill-rule="evenodd" clip-rule="evenodd" d="M.333 2a2 2 0 0 1 2-2h9.334a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-1.448a.67.67 0 0 0-.472.195L8.414 11.53a2 2 0 0 1-2.828 0l-1.333-1.334A.67.67 0 0 0 3.78 10H2.333a2 2 0 0 1-2-2zm3.334.667a.667.667 0 1 0 0 1.333h6.666a.667.667 0 1 0 0-1.333zm0 2.666a.667.667 0 1 0 0 1.334H7a.667.667 0 1 0 0-1.334z" fill="currentColor"/>`,
width: 14,
height: 12,
body: `<g fill="none" stroke="currentColor"><path d="M17.5 4.66711H6.5C4.98122 4.66711 3.75 5.89833 3.75 7.41711V14.7504C3.75 16.2692 4.98122 17.5004 6.5 17.5004H9.0336C9.72802 17.5004 10.3628 17.8928 10.6734 18.5139L11.1801 19.5273C11.5179 20.203 12.4821 20.203 12.8199 19.5273L13.3266 18.5139C13.6372 17.8928 14.272 17.5004 14.9664 17.5004H17.5C19.0188 17.5004 20.25 16.2692 20.25 14.7505V7.41711C20.25 5.89833 19.0188 4.66711 17.5 4.66711Z" stroke-width="1.5"/><path d="M12 10.1755L12.0083 10.1663" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><path d="M15.333 10.1755L15.3413 10.1663" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><path d="M8.66699 10.1755L8.67533 10.1663" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></g>`,
width: 24,
height: 24,
},
telegram: {
body: `<path fill-rule="evenodd" clip-rule="evenodd" d="M12.185.287A1 1 0 0 1 13.56 1.37l-1.513 9.171c-.146.884-1.117 1.392-1.928.951a39 39 0 0 1-2.594-1.53c-.453-.296-1.841-1.245-1.67-1.921C6 7.464 8.332 5.292 9.666 4c.524-.507.285-.8-.334-.333C7.8 4.826 5.336 6.587 4.521 7.083c-.719.438-1.094.512-1.542.438a10.2 10.2 0 0 1-2.194-.604c-.836-.346-.795-1.496 0-1.83z" fill="currentColor"/>`,
width: 14,
height: 12,
body: `<g fill="none" stroke="currentColor"><path d="M3.96668 10.6616C3.96668 10.6616 10.9417 7.80776 13.3608 6.80292C14.288 6.40099 17.4329 5.11474 17.4329 5.11474C17.4329 5.11474 18.8843 4.55212 18.7633 5.91861C18.7229 6.48134 18.4004 8.45083 18.0778 10.5811C17.5941 13.5957 17.0699 16.8916 17.0699 16.8916C17.0699 16.8916 16.9894 17.816 16.304 17.9768C15.6185 18.1376 14.4896 17.4141 14.288 17.2533C14.1268 17.1327 11.2643 15.324 10.216 14.4398C9.93378 14.1986 9.61123 13.7163 10.2563 13.1535C11.7077 11.8272 13.4414 10.1792 14.4896 9.13418C14.9734 8.6518 15.4573 7.52634 13.4414 8.89294C10.5789 10.8624 7.7566 12.7114 7.7566 12.7114C7.7566 12.7114 7.11161 13.1134 5.90208 12.7516C4.69255 12.3898 3.28141 11.9076 3.28141 11.9076C3.28141 11.9076 2.31387 11.3045 3.96689 10.6616H3.96668Z" stroke-width="1.5"/></g>`,
width: 24,
height: 24,
},
api: {
body: `<path d="M4.468 11.5q-1.14 0-1.776-.636-.624-.636-.624-1.632v-.996q0-.504-.12-.792a.7.7 0 0 0-.348-.408q-.24-.132-.624-.132V5.488q.384 0 .624-.12a.7.7 0 0 0 .348-.408q.12-.3.12-.804V3.16q0-.996.624-1.62.636-.636 1.776-.636h.756v1.548q-.756-.036-1.104.204-.336.24-.336.792v.828q0 .852-.42 1.332-.408.48-.972.552v.072q.564.06.972.552.42.48.42 1.332v.84q0 .552.336.816.348.252 1.104.228v1.5zm6.855 0h-.756V10q.756.024 1.092-.228.348-.264.348-.816v-.84q0-.852.408-1.332.42-.492.984-.552V6.16q-.552-.072-.972-.552t-.42-1.332v-.828q0-.552-.348-.792-.336-.24-1.092-.204V.904h.756q1.152 0 1.776.636.624.624.624 1.62v.996q0 .504.108.804.12.288.36.408t.624.12v1.416q-.384 0-.624.132a.76.76 0 0 0-.36.408q-.108.288-.108.792v.996q0 .996-.624 1.632t-1.776.636" fill="currentColor"/>`,
width: 15,
height: 12,
body: `<path d="M15.3225 20.0768H14.3193V18.44C15.1876 18.4635 15.8036 18.3461 16.1673 18.088C16.5311 17.8416 16.7129 17.4251 16.7129 16.8384V15.36C16.7129 14.4917 16.9065 13.8112 17.2937 13.3184C17.6927 12.8256 18.1679 12.5264 18.7193 12.4208V12.3856C18.1796 12.2683 17.7103 11.9691 17.3113 11.488C16.9124 11.0069 16.7129 10.3381 16.7129 9.48159V7.98559C16.7129 7.39893 16.5311 6.98239 16.1673 6.73599C15.8036 6.48959 15.1876 6.38399 14.3193 6.41919V4.74719H15.3225C16.3316 4.74719 17.1119 5.04053 17.6633 5.62719C18.2148 6.20213 18.4905 6.95306 18.4905 7.87999V9.34079C18.4905 9.83359 18.5551 10.2501 18.6841 10.5904C18.8249 10.9189 19.0244 11.1653 19.2825 11.3296C19.5407 11.4939 19.8575 11.576 20.2329 11.576V13.248C19.8575 13.248 19.5407 13.3301 19.2825 13.4944C19.0244 13.6587 18.8249 13.9109 18.6841 14.2512C18.5551 14.5797 18.4905 14.9963 18.4905 15.5008V16.9616C18.4905 17.8768 18.2148 18.6219 17.6633 19.1968C17.1119 19.7835 16.3316 20.0768 15.3225 20.0768Z" fill="currentColor"/><path d="M8.68384 20.0768C7.6865 20.0768 6.90624 19.7835 6.34304 19.1968C5.79157 18.6219 5.51584 17.8768 5.51584 16.9616V15.5008C5.51584 14.9963 5.44544 14.5797 5.30464 14.2512C5.17557 13.9109 4.98197 13.6587 4.72384 13.4944C4.4657 13.3301 4.1489 13.248 3.77344 13.248V11.576C4.1489 11.576 4.4657 11.4939 4.72384 11.3296C4.98197 11.1653 5.17557 10.9189 5.30464 10.5904C5.44544 10.2501 5.51584 9.83359 5.51584 9.34079V7.87999C5.51584 6.95306 5.79157 6.20213 6.34304 5.62719C6.90624 5.04053 7.6865 4.74719 8.68384 4.74719H9.68704V6.41919C8.8305 6.38399 8.2145 6.48959 7.83904 6.73599C7.4753 6.98239 7.29344 7.39893 7.29344 7.98559V9.48159C7.29344 10.3381 7.09397 11.0069 6.69504 11.488C6.30784 11.9691 5.8385 12.2683 5.28704 12.3856V12.4208C5.8385 12.5264 6.30784 12.8256 6.69504 13.3184C7.09397 13.8112 7.29344 14.4917 7.29344 15.36V16.8384C7.29344 17.4251 7.4753 17.8416 7.83904 18.088C8.2145 18.3461 8.8305 18.4635 9.68704 18.44V20.0768H8.68384Z" fill="currentColor"/>`,
width: 24,
height: 24,
},
twilio: {
body: `<path d="M8 .5c4.14 0 7.5 3.36 7.5 7.5s-3.36 7.5-7.5 7.5S.5 12.14.5 8 3.86.5 8 .5m0 1.98C4.94 2.48 2.48 4.94 2.48 8S4.94 13.52 8 13.52s5.52-2.46 5.52-5.52S11.06 2.48 8 2.48M9.86 8.3a1.56 1.56 0 1 1 0 3.12 1.56 1.56 0 0 1 0-3.12m-3.72 0a1.56 1.56 0 1 1 0 3.12 1.56 1.56 0 0 1 0-3.12m3.72-3.72a1.56 1.56 0 1 1 0 3.12 1.56 1.56 0 0 1 0-3.12m-3.72 0a1.56 1.56 0 1 1 0 3.12 1.56 1.56 0 0 1 0-3.12" fill="currentColor"/>`,
width: 16,
height: 16,
body: `<g clip-path="url(#a)" fill="none"><circle cx="12.5" cy="11.5" r="8.55" stroke="currentColor" stroke-width="1.6"/><circle cx="10.5" cy="9.5" r="1.5" fill="currentColor"/><circle cx="14.5" cy="9.5" r="1.5" fill="currentColor"/><circle cx="14.5" cy="13.5" r="1.5" fill="currentColor"/><circle cx="10.5" cy="13.5" r="1.5" fill="currentColor"/></g><defs><clipPath id="a"><path fill="currentColor" d="M3 2h19v19H3z"/></clipPath></defs>`,
width: 24,
height: 24,
},
gmail: {
body: `<path d="M3.182 12.253H.955A.954.954 0 0 1 0 11.298V3.185c0-1.18 1.346-1.854 2.29-1.146L7 5.571l4.71-3.532c.942-.708 2.29-.035 2.29 1.146v8.113a.954.954 0 0 1-.955.955h-2.227v-5.41L7 9.708 3.182 6.844z" fill="currentColor"/>`,
width: 14,
height: 14,
body: `<path d="M20 7V17C20 17.5675 19.5675 18 19 18H18V8.9245L12 13.2345L6 8.9245V18H5C4.4325 18 4 17.5675 4 17V7C4 6.716 4.107 6.466 4.2865 6.289C4.466 6.1065 4.716 6 5 6H5.3335L12 10.8335L18.6665 6H19C19.284 6 19.534 6.107 19.7135 6.289C19.893 6.466 20 6.716 20 7Z" fill="currentColor"/>`,
width: 24,
height: 24,
},
outlook: {
body: `<path d="M6.18.365a1 1 0 0 0-.267.028l-4.405.978A1.505 1.505 0 0 0 .333 2.836v8.328c0 .7.492 1.313 1.175 1.465l4.405.98v-.001c.718.16 1.42-.404 1.42-1.14V1.532C7.333.888 6.796.376 6.18.365m2.153 2.319v3.713l1.17.826 4.494-3.1c-.03-.8-.69-1.44-1.497-1.44zM3.833 4.5c1.028 0 1.834 1.172 1.834 2.667S4.86 9.834 3.833 9.834 2 8.662 2 7.167 2.805 4.5 3.833 4.5M14 5.337 9.783 8.244a.49.49 0 0 1-.573-.003l-.877-.621v4.064H12.5c.827 0 1.5-.674 1.5-1.5zM3.833 5.5C3.44 5.5 3 6.213 3 7.167s.44 1.667.833 1.667c.394 0 .834-.713.834-1.667S4.227 5.5 3.833 5.5" fill="currentColor"/>`,
width: 14,
height: 14,
body: `<g fill="none"><path d="M7.875 8.4c.77 0 1.403.45 1.818 1.048.418.601.657 1.4.657 2.252 0 .853-.24 1.65-.657 2.251C9.278 14.55 8.644 15 7.875 15s-1.403-.45-1.818-1.049c-.418-.6-.657-1.398-.657-2.25s.24-1.652.657-2.253C6.472 8.85 7.106 8.4 7.875 8.4Z" stroke="currentColor" stroke-width="1.2"/><path d="M10.588 3.632a1.7 1.7 0 0 1 2.112 1.65v13.437a1.7 1.7 0 0 1-2.112 1.65l-5.243-1.311a2.7 2.7 0 0 1-2.045-2.62V7.563a2.7 2.7 0 0 1 2.045-2.62zM13 7h5a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2h-5" stroke="currentColor" stroke-width="1.4"/><path d="M20.47 9.518a.7.7 0 0 0-.94-1.036L20 9zm-7.318 3.133-.495.495zM20 9l-.47-.518-4.09 3.717.471.518.471.518 4.089-3.717zm-6.848 3.652.495-.495-.652-.652L12.5 12l-.495.495.652.652zm2.76.065-.472-.518a1.3 1.3 0 0 1-1.793-.042l-.495.495-.495.495a2.7 2.7 0 0 0 3.725.088z" fill="currentColor"/></g>`,
width: 24,
height: 24,
},
voice: {
body: `<g fill="none" stroke="currentColor"><path d="M12.75 4.50031C14.5402 4.50031 16.2571 5.21146 17.523 6.47733C18.7888 7.7432 19.5 9.46009 19.5 11.2503" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M12.75 7.5C13.7446 7.5 14.6984 7.89509 15.4017 8.59835C16.1049 9.30161 16.5 10.2554 16.5 11.25" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M13.374 15.4263C13.5289 15.4974 13.7034 15.5137 13.8688 15.4724C14.0341 15.4311 14.1805 15.3347 14.2837 15.1991L14.55 14.8503C14.6897 14.664 14.8709 14.5128 15.0792 14.4087C15.2875 14.3045 15.5171 14.2503 15.75 14.2503H18C18.3978 14.2503 18.7794 14.4083 19.0607 14.6896C19.342 14.9709 19.5 15.3525 19.5 15.7503V18.0003C19.5 18.3981 19.342 18.7797 19.0607 19.061C18.7794 19.3423 18.3978 19.5003 18 19.5003C14.4196 19.5003 10.9858 18.078 8.45406 15.5462C5.92232 13.0145 4.5 9.58073 4.5 6.00031C4.5 5.60248 4.65804 5.22095 4.93934 4.93964C5.22064 4.65834 5.60218 4.50031 6 4.50031H8.25C8.64782 4.50031 9.02935 4.65834 9.31066 4.93964C9.59196 5.22095 9.75 5.60248 9.75 6.00031V8.2503C9.75 8.48317 9.69578 8.71284 9.59164 8.92113C9.4875 9.12941 9.33629 9.31058 9.15 9.45031L8.799 9.71355C8.66131 9.81869 8.56426 9.96824 8.52434 10.1368C8.48442 10.3054 8.50409 10.4826 8.58 10.6383C9.60501 12.7202 11.2908 14.4039 13.374 15.4263Z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g>`,
width: 24,
height: 24,
},
github: {
body: `<g fill="none" stroke="currentColor"><path d="M15.1283 19.5827V16.4662C15.2367 15.4901 14.9568 14.5106 14.3492 13.7392C16.6866 13.7392 19.024 12.1809 19.024 9.45395C19.0863 8.48003 18.8136 7.52169 18.2448 6.72698C18.463 5.83097 18.463 4.89601 18.2448 4C18.2448 4 17.4657 4 15.9074 5.1687C13.8505 4.77914 11.7313 4.77914 9.67434 5.1687C8.11607 4 7.33693 4 7.33693 4C7.10319 4.89601 7.10319 5.83097 7.33693 6.72698C6.76962 7.51849 6.49428 8.4822 6.5578 9.45395C6.5578 12.1809 8.89521 13.7392 11.2326 13.7392C10.9287 14.121 10.7028 14.5573 10.5703 15.0248C10.4379 15.4923 10.3989 15.9831 10.4535 16.4662V19.5827" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M10.454 16.4656C6.94005 18.0238 6.55827 14.9073 5 14.9073" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g>`,
width: 24,
height: 24,
},
x: {
body: `<path d="M16.6007 4.99988H19.054L13.694 11.1265L20 19.4619H15.0627L11.196 14.4059L6.77067 19.4619H4.316L10.0493 12.9085L4 5.00054H9.06267L12.558 9.62188L16.6007 4.99988ZM15.74 17.9939H17.0993L8.324 6.39121H6.86533L15.74 17.9939Z" fill="currentColor"/>`,
width: 24,
height: 24,
},
linkedin: {
body: `<g fill="none"><path d="M18.0606 4H5.93939C4.8683 4 4 4.8683 4 5.93939V18.0606C4 19.1317 4.8683 20 5.93939 20H18.0606C19.1317 20 20 19.1317 20 18.0606V5.93939C20 4.8683 19.1317 4 18.0606 4Z" stroke="currentColor" stroke-width="1.6"/><path d="M8.36328 10.7879V16.1212" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><path d="M8.36423 9.09091C8.89978 9.09091 9.33393 8.65677 9.33393 8.12122C9.33393 7.58567 8.89978 7.15152 8.36423 7.15152C7.82868 7.15152 7.39453 7.58567 7.39453 8.12122C7.39453 8.65677 7.82868 9.09091 8.36423 9.09091Z" fill="currentColor"/><path d="M15.6361 16.1212V12.9697C15.6361 11.7647 14.6592 10.7879 13.4543 10.7879C12.2493 10.7879 11.2725 11.7647 11.2725 12.9697V16.1212" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></g>`,
width: 24,
height: 24,
},
/** Ends */
};