feat:add discord icon to header (#1444)

* feat:add discord icon to header #1443

* feat:add discord icon to header #1444(changes done)

* chore: added a `,`

---------

Signed-off-by: Priyankar Pal <[email protected]>
Co-authored-by: Priyankar Pal <[email protected]>

Author: clavy123

src/common/header/HeaderNav.jsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { Link } from 'react-router-dom';
 import { BsGithub, BsTrophyFill } from 'react-icons/bs';
 import { FaLightbulb } from 'react-icons/fa';
-import { FaXTwitter } from 'react-icons/fa6';
+import { FaXTwitter, FaDiscord } from 'react-icons/fa6';
 import { BiMoney } from 'react-icons/bi';
 import { IoAddSharp, IoShareSocial, IoHeartSharp } from 'react-icons/io5';
 import { MdManageSearch, MdClose, MdEvent } from 'react-icons/md';
@@ -68,6 +68,15 @@ const HeaderNav = ({ showBrowse }) => {
       iconClass: 'icon twitter-icon',
       label: 'Twitter'
     },
+    {
+      type: 'a',
+      testId: 'discord-btn',
+      href: 'https://discord.gg/9nFHKdfWMx',
+      title: 'Discord',
+      icon: FaDiscord,
+      iconClass: 'icon discord-icon',
+      label: 'Discord'
+    },
     {
       type: 'button',
       testId: 'share-btn',

src/common/header/header.css

@@ -267,6 +267,10 @@
   fill: #ffffff;
 }
 
+.header-links > li > .app-header-btn:hover .discord-icon {
+  fill: #7289da;
+}
+
 .header-links > li > .app-header-btn .btn-label {
   font-size: var(--fs-sm);
   font-weight: var(--fw-semibold);