From cf21f5ef1037963d664d931afedcc73a66ffd76a Mon Sep 17 00:00:00 2001
From: Raj gupta <134638667+Rajgupta36@users.noreply.github.com>
Date: Tue, 14 Jan 2025 07:02:29 +0530
Subject: [PATCH] added sponsor button (#451)

* added sponsor button

* fixes

* fix size

---------

Co-authored-by: Kate Golovanova <kate@kgthreads.com>
---
 frontend/src/components/Header.tsx        |  2 ++
 frontend/src/components/ModeToggle.tsx    |  2 +-
 frontend/src/components/SponsorButton.tsx | 18 ++++++++++++++++++
 3 files changed, 21 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/SponsorButton.tsx

diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
index 7fc18ee3e..30c07c48c 100644
--- a/frontend/src/components/Header.tsx
+++ b/frontend/src/components/Header.tsx
@@ -6,6 +6,7 @@ import { headerLinks } from 'utils/constants'
 
 import { cn } from 'utils/utility'
 import ModeToggle from './ModeToggle'
+import SponsorButton from './SponsorButton'
 
 export default function Header() {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
@@ -52,6 +53,7 @@ export default function Header() {
           </div>
         </div>
         <div className="flex items-center justify-normal space-x-4">
+          <SponsorButton />
           <ModeToggle />
           <div className="md:hidden">
             <button
diff --git a/frontend/src/components/ModeToggle.tsx b/frontend/src/components/ModeToggle.tsx
index ae735817b..f05d46637 100644
--- a/frontend/src/components/ModeToggle.tsx
+++ b/frontend/src/components/ModeToggle.tsx
@@ -27,7 +27,7 @@ function ModeToggle({ className }: { className?: string }) {
   return (
     <div className={cn('flex items-center space-x-2', className)}>
       <span className="text-sm font-medium text-gray-900 dark:text-gray-100">
-        <FontAwesomeIcon icon={dark ? faMoon : faSun} />
+        <FontAwesomeIcon icon={dark ? faMoon : faSun} className="h-4 w-4" fixedWidth />
       </span>
       <label className="relative inline-flex cursor-pointer items-center">
         <input
diff --git a/frontend/src/components/SponsorButton.tsx b/frontend/src/components/SponsorButton.tsx
new file mode 100644
index 000000000..5ed672702
--- /dev/null
+++ b/frontend/src/components/SponsorButton.tsx
@@ -0,0 +1,18 @@
+import { faHeart } from '@fortawesome/free-regular-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+
+const SponsorButton = () => {
+  return (
+    <a
+      href={'https://owasp.org/donate/?reponame=www-project-nest&title=OWASP+Nest'}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="group flex items-center space-x-2 divide-solid rounded-md border-2 border-solid bg-[#8faac6] px-4 py-2 font-medium text-[#253247] shadow-[0_1px_1px_-1px_rgba(0,0,0,0.05)] transition-all duration-300 hover:bg-[#98AFC7] hover:shadow-[0_1px_1px_-1px_rgba(0,0,0,0.05),0_1px_1px_0_rgba(0,0,0,0.1)] dark:bg-[#2D3B4F] dark:text-[#98AFC7] dark:shadow-[0_1px_1px_-1px_rgba(255,255,255,0.05)] dark:hover:bg-[#2D3B4F] dark:hover:shadow-[0_1px_1px_-1px_rgba(255,255,255,0.05),0px_1px_1px_0px_rgba(255,255,255,0.05)]"
+    >
+      <FontAwesomeIcon icon={faHeart} color="#b55f95" focusable="true" />
+      <span>Sponsor</span>
+    </a>
+  )
+}
+
+export default SponsorButton