From 76099694918f1b98b055d0e0d4dd84778c7d6343 Mon Sep 17 00:00:00 2001
From: WithoutPants <53250216+WithoutPants@users.noreply.github.com>
Date: Thu, 11 Feb 2021 09:12:35 +1100
Subject: [PATCH] Add donate button to navbar (#1117)

---
 ui/v2.5/src/components/MainNavbar.tsx | 16 +++++++++++++++-
 ui/v2.5/src/index.scss                | 14 ++++++++++++++
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/ui/v2.5/src/components/MainNavbar.tsx b/ui/v2.5/src/components/MainNavbar.tsx
index 4246f8f8d..330c9d674 100644
--- a/ui/v2.5/src/components/MainNavbar.tsx
+++ b/ui/v2.5/src/components/MainNavbar.tsx
@@ -60,6 +60,10 @@ const messages = defineMessages({
     id: "sceneTagger",
     defaultMessage: "Scene Tagger",
   },
+  donate: {
+    id: "donate",
+    defaultMessage: "Donate",
+  },
 });
 
 const allMenuItems: IMenuItem[] = [
@@ -244,7 +248,7 @@ export const MainNavbar: React.FC = () => {
         variant="dark"
         bg="dark"
         className="top-nav"
-        expand="lg"
+        expand="xl"
         expanded={expanded}
         onToggle={setExpanded}
         ref={navbarRef}
@@ -282,6 +286,16 @@ export const MainNavbar: React.FC = () => {
         </Navbar.Collapse>
         <Nav className="order-2 flex-row">
           <div className="d-none d-sm-block">{newButton}</div>
+          <Nav.Link
+            href="https://opencollective.com/stashapp"
+            target="_blank"
+            onClick={() => setExpanded(false)}
+          >
+            <Button className="minimal donate" title="Donate">
+              <Icon icon="heart" />
+              <span>{intl.formatMessage(messages.donate)}</span>
+            </Button>
+          </Nav.Link>
           <NavLink exact to="/settings" onClick={() => setExpanded(false)}>
             <Button className="minimal settings-button" title="Settings">
               <Icon icon="cog" />
diff --git a/ui/v2.5/src/index.scss b/ui/v2.5/src/index.scss
index 5270b858c..f1712ff41 100755
--- a/ui/v2.5/src/index.scss
+++ b/ui/v2.5/src/index.scss
@@ -476,9 +476,23 @@ div.dropdown-menu {
       padding-left: 1rem;
       padding-right: 1rem;
     }
+
+    .donate {
+      span {
+        display: none;
+      }
+
+      svg {
+        margin: 0;
+      }
+    }
   }
 }
 
+.donate svg {
+  color: #ff7373;
+}
+
 .error-message {
   white-space: "pre-wrap";
 }