added sponsor button (#451)

* added sponsor button * fixes * fix size --------- Co-authored-by: Kate Golovanova <[email protected]>
OWASP · Jan 14, 2025 · cf21f5e · cf21f5e
1 parent 04c224d
commit cf21f5e
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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