From 7ed07f43be4678de41dc744779137b10b0fe2239 Mon Sep 17 00:00:00 2001
From: Vicky Abishek <vicky.abishek@outlook.com>
Date: Sun, 11 Aug 2019 00:04:23 +0530
Subject: [PATCH 1/2] HomePage Nav Donate Button

Added Donate button to the homepage nagvigation bar pointing to the donate url
---
 components/common/header/index.js        | 43 ++++++++++++++++--------
 components/common/header/index.styles.js |  5 +++
 2 files changed, 34 insertions(+), 14 deletions(-)

diff --git a/components/common/header/index.js b/components/common/header/index.js
index e6b9958d7..286610d34 100644
--- a/components/common/header/index.js
+++ b/components/common/header/index.js
@@ -61,6 +61,11 @@ class NavBar extends React.Component {
         path: 'https://coderplex.org/jobs',
         external: true,
       },
+      {
+        title: 'Donate',
+        path: 'https://donate.coderplex.org',
+        external: true,
+      },
     ],
   };
 
@@ -101,22 +106,32 @@ class NavBar extends React.Component {
                 </Link>
               </NavLogo>
               <NavLinks className={this.state.menuOpen ? 'open' : ''}>
-                {this.state.navItems.filter(item => !item.external).map(item => (
-                  <NavLink key={item.path}>
-                    <Link href={item.path}>
-                      <a className={pathName === item.path ? 'active' : ''}>
+                {this.state.navItems
+                  .filter(item => !item.external)
+                  .map(item => (
+                    <NavLink key={item.path}>
+                      <Link href={item.path}>
+                        <a className={pathName === item.path ? 'active' : ''}>
+                          <span>{item.title}</span>
+                        </a>
+                      </Link>
+                    </NavLink>
+                  ))}
+                {this.state.navItems
+                  .filter(item => item.external)
+                  .map(item => (
+                    <NavLink key={item.path}>
+                      <a
+                        href={item.path}
+                        rel="noopener noreferrer"
+                        className={[
+                          pathName === item.path ? 'active' : '',
+                          item.title === 'Donate' ? 'donate_btn' : '',
+                        ].join(' ')}>
                         <span>{item.title}</span>
                       </a>
-                    </Link>
-                  </NavLink>
-                ))}
-                {this.state.navItems.filter(item => item.external).map(item => (
-                  <NavLink key={item.path}>
-                    <a href={item.path} rel="noopener noreferrer" className={pathName === item.path ? 'active' : ''}>
-                      <span>{item.title}</span>
-                    </a>
-                  </NavLink>
-                ))}
+                    </NavLink>
+                  ))}
               </NavLinks>
             </Nav>
           </Container>
diff --git a/components/common/header/index.styles.js b/components/common/header/index.styles.js
index c94444ea1..4f2f0e8e9 100644
--- a/components/common/header/index.styles.js
+++ b/components/common/header/index.styles.js
@@ -107,6 +107,11 @@ export const NavLink = styled.li`
         }
       }
     }
+    &.donate_btn {
+      background: #e91e63;
+      color: white;
+      border-radius: 10px;
+    }
     @media(max-width: 885px) {
       width: 100%;
       font-size: 14px;

From 8bd5aa2a3dc3ee4de1a6f4cad3cc348d00408d1f Mon Sep 17 00:00:00 2001
From: Vicky Abishek <vicky.abishek@outlook.com>
Date: Sun, 11 Aug 2019 12:26:15 +0530
Subject: [PATCH 2/2] Donate button with changes

Updatd donate button properties according other similiar button's properties in the website.
---
 components/common/header/index.js        |  1 +
 components/common/header/index.styles.js | 10 ++++++++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/components/common/header/index.js b/components/common/header/index.js
index 286610d34..e32cdce11 100644
--- a/components/common/header/index.js
+++ b/components/common/header/index.js
@@ -124,6 +124,7 @@ class NavBar extends React.Component {
                       <a
                         href={item.path}
                         rel="noopener noreferrer"
+                        target={item.title === 'Donate' ? '_blank' : ''}
                         className={[
                           pathName === item.path ? 'active' : '',
                           item.title === 'Donate' ? 'donate_btn' : '',
diff --git a/components/common/header/index.styles.js b/components/common/header/index.styles.js
index 4f2f0e8e9..678572cc1 100644
--- a/components/common/header/index.styles.js
+++ b/components/common/header/index.styles.js
@@ -108,9 +108,15 @@ export const NavLink = styled.li`
       }
     }
     &.donate_btn {
-      background: #e91e63;
+      background: #c201b9;
       color: white;
-      border-radius: 10px;
+      border-radius: 6px;
+      font-weight: bold;
+      line-height: inherit;
+      margin: 5px;
+      &:hover {
+        background:#9c27b0;
+      }
     }
     @media(max-width: 885px) {
       width: 100%;