fix(web): Invite-members icon is changed in header-nav (#4695)

* added new component in lib/design-system

* fix: changed the invite-members icon in header Nav

* fix: changed the invite-members icon in header Nav and resolving file conflicts

* updating pnpm-lock.yml to resolve merge issues by doing pnpm install

* revert pnpm lock changes

---------

Co-authored-by: Pablo Fernández <[email protected]>
Co-authored-by: Richard Fontein <[email protected]>

apps/web/src/components/layout/components/HeaderNav.tsx

@@ -19,8 +19,8 @@ import {
   Question,
   Sun,
   Logout,
+  InviteMembers,
 } from '@novu/design-system';
-
 import { useLocalThemePreference } from '../../../hooks';
 import { discordInviteUrl } from '../../../pages/quick-start/consts';
 import { useAuthContext } from '../../providers/AuthProvider';
@@ -32,7 +32,7 @@ type Props = { isIntercomOpened: boolean };
 const menuItem = [
   {
     title: 'Invite Members',
-    icon: <Mail />,
+    icon: <InviteMembers />,
     path: ROUTES.TEAM,
   },
 ];

libs/design-system/src/icons/general/InviteMembers.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+/* eslint-disable */
+export function InviteMembers(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <mask
+        id="mask0_1537_455"
+        style={{ maskType: 'alpha' }}
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="20"
+        height="20"
+      >
+        <rect width="20" height="20" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_1537_455)">
+        <path
+          d="M9.375 9.9375C9.73611 9.52083 10.0139 9.06167 10.2083 8.56002C10.4028 8.05837 10.5 7.53836 10.5 7C10.5 6.46649 10.4028 5.95117 10.2083 5.45404C10.0139 4.9569 9.73611 4.49306 9.375 4.0625C9.48611 4.03472 9.59028 4.01736 9.6875 4.01042C9.78472 4.00347 9.88889 4 10 4C10.8333 4 11.5417 4.29167 12.125 4.875C12.7083 5.45833 13 6.16667 13 7C13 7.83333 12.7083 8.54167 12.125 9.125C11.5417 9.70833 10.8333 10 10 10C9.88889 10 9.78125 9.99653 9.67708 9.98958C9.57292 9.98264 9.47222 9.96528 9.375 9.9375ZM13.5 16V14.0833C13.5 13.5139 13.3681 12.9826 13.1042 12.4896C12.8403 11.9965 12.4722 11.5764 12 11.2292C12.9444 11.4514 13.8472 11.7569 14.7083 12.1458C15.5694 12.5347 16 13.1806 16 14.0833V16H13.5ZM16.25 11V9.25H14.5V7.75H16.25V6H17.75V7.75H19.5V9.25H17.75V11H16.25ZM6 10C5.16667 10 4.45833 9.70833 3.875 9.125C3.29167 8.54167 3 7.83333 3 7C3 6.16667 3.29167 5.45833 3.875 4.875C4.45833 4.29167 5.16667 4 6 4C6.83333 4 7.54167 4.29167 8.125 4.875C8.70833 5.45833 9 6.16667 9 7C9 7.83333 8.70833 8.54167 8.125 9.125C7.54167 9.70833 6.83333 10 6 10ZM0 16V14.0833C0 13.7305 0.0868056 13.4061 0.260417 13.1104C0.434028 12.8146 0.673611 12.5694 0.979167 12.375C1.72917 11.9028 2.53151 11.5556 3.38621 11.3333C4.24092 11.1111 5.10897 11 5.99038 11C6.87179 11 7.73611 11.1181 8.58333 11.3542C9.43056 11.5903 10.2431 11.9306 11.0208 12.375C11.3125 12.5694 11.5486 12.8146 11.7292 13.1104C11.9097 13.4061 12 13.7305 12 14.0833V16H0ZM5.98967 8.5C6.39933 8.5 6.75347 8.35414 7.05208 8.06242C7.35069 7.77068 7.5 7.41999 7.5 7.01033C7.5 6.60067 7.35069 6.24653 7.05208 5.94792C6.75347 5.64931 6.39933 5.5 5.98967 5.5C5.58001 5.5 5.22932 5.64931 4.93758 5.94792C4.64586 6.24653 4.5 6.60067 4.5 7.01033C4.5 7.41999 4.64586 7.77068 4.93758 8.06242C5.22932 8.35414 5.58001 8.5 5.98967 8.5ZM1.5 14.5H10.5V14.0833C10.5 13.999 10.4792 13.9224 10.4375 13.8535C10.3958 13.7845 10.3403 13.7222 10.2708 13.6667C9.60417 13.3056 8.91319 13.0208 8.19792 12.8125C7.48264 12.6042 6.74653 12.5 5.98958 12.5C5.23264 12.5 4.49653 12.6007 3.78125 12.8021C3.06597 13.0035 2.38194 13.2917 1.72917 13.6667C1.65972 13.7222 1.60417 13.7845 1.5625 13.8535C1.52083 13.9224 1.5 13.999 1.5 14.0833V14.5Z"
+          fill="currentColor"
+        />
+      </g>
+    </svg>
+  );
+}

libs/design-system/src/icons/index.ts

@@ -85,6 +85,7 @@ export { Condition } from './general/Condition';
 export { RemoveCondition } from './general/RemoveCondition';
 export { Warning } from './general/Warning';
 export { Logout } from './general/Logout';
+export { InviteMembers } from './general/InviteMembers';
 
 export { Copy } from './actions/Copy';
 export { Close } from './actions/Close';