Fixing sponsor page. Fixes #444

5 files changed, 23 insertions, 4 deletions

diff --git a/ui/src/components/footer.tsx b/ui/src/components/footer.tsx
index 8aa05072..5451da2c 100644
--- a/ui/src/components/footer.tsx
+++ b/ui/src/components/footer.tsx
@@ -29,7 +29,7 @@ export class Footer extends Component<any, any> {
             </li>
             <li class="nav-item">
               <Link class="nav-link" to="/sponsors">
-                <T i18nKey="sponsors">#</T>
+                <T i18nKey="donate">#</T>
               </Link>
             </li>
             <li class="nav-item">
diff --git a/ui/src/components/navbar.tsx b/ui/src/components/navbar.tsx
index 9fa1e3dc..b1dcf096 100644
--- a/ui/src/components/navbar.tsx
+++ b/ui/src/components/navbar.tsx
@@ -128,11 +128,22 @@ export class Navbar extends Component<any, NavbarState> {
                 <T i18nKey="create_community">#</T>
               </Link>
             </li>
+            <li className="nav-item">
+              <Link
+                class="nav-link ml-2"
+                to="/sponsors"
+                title={i18n.t('donate_to_lemmy')}
+              >
+                <svg class="icon">
+                  <use xlinkHref="#icon-coffee"></use>
+                </svg>
+              </Link>
+            </li>
           </ul>
-          <ul class="navbar-nav ml-auto mr-2">
+          <ul class="navbar-nav ml-auto">
             {this.state.isLoggedIn ? (
               <>
-                <li className="nav-item">
+                <li className="nav-item mt-1">
                   <Link class="nav-link" to="/inbox">
                     <svg class="icon">
                       <use xlinkHref="#icon-mail"></use>
diff --git a/ui/src/components/sponsors.tsx b/ui/src/components/sponsors.tsx
index 9883e079..5b78e2bd 100644
--- a/ui/src/components/sponsors.tsx
+++ b/ui/src/components/sponsors.tsx
@@ -18,6 +18,7 @@ export class Sponsors extends Component<any, any> {
     document.title = `${i18n.t('sponsors')} - ${
       WebSocketService.Instance.site.name
     }`;
+    window.scrollTo(0, 0);
   }
 
   render() {
@@ -36,7 +37,7 @@ export class Sponsors extends Component<any, any> {
     return (
       <div>
         <h5>
-          <T i18nKey="sponsors_of_lemmy">#</T>
+          <T i18nKey="donate_to_lemmy">#</T>
         </h5>
         <p>
           <T i18nKey="sponsor_message">
diff --git a/ui/src/components/symbols.tsx b/ui/src/components/symbols.tsx
index c7f8232f..829201e4 100644
--- a/ui/src/components/symbols.tsx
+++ b/ui/src/components/symbols.tsx
@@ -15,6 +15,11 @@ export class Symbols extends Component<any, any> {
         xmlnsXlink="http://www.w3.org/1999/xlink"
       >
         <defs>
+          <symbol id="icon-coffee" viewBox="0 0 24 24">
+            <title>coffee1</title>
+            <path d="M17 19h-12c-0.553 0-1-0.447-1-1s0.447-1 1-1h12c0.553 0 1 0.447 1 1s-0.447 1-1 1z"></path>
+            <path d="M17.5 5h-12.5v9c0 1.1 0.9 2 2 2h8c1.1 0 2-0.9 2-2v-2h0.5c1.93 0 3.5-1.57 3.5-3.5s-1.57-3.5-3.5-3.5zM15 14h-8v-7h8v7zM17.5 10h-1.5v-3h1.5c0.827 0 1.5 0.673 1.5 1.5s-0.673 1.5-1.5 1.5z"></path>
+          </symbol>
           <symbol id="icon-rss" viewBox="0 0 32 32">
             <title>rss</title>
             <path d="M4.259 23.467c-2.35 0-4.259 1.917-4.259 4.252 0 2.349 1.909 4.244 4.259 4.244 2.358 0 4.265-1.895 4.265-4.244-0-2.336-1.907-4.252-4.265-4.252zM0.005 10.873v6.133c3.993 0 7.749 1.562 10.577 4.391 2.825 2.822 4.384 6.595 4.384 10.603h6.16c-0-11.651-9.478-21.127-21.121-21.127zM0.012 0v6.136c14.243 0 25.836 11.604 25.836 25.864h6.152c0-17.64-14.352-32-31.988-32z"></path>
diff --git a/ui/src/translations/en.ts b/ui/src/translations/en.ts
index d919e509..be5f9e73 100644
--- a/ui/src/translations/en.ts
+++ b/ui/src/translations/en.ts
@@ -160,6 +160,8 @@ export const en = {
     sponsor_message:
       'Lemmy is free, <1>open-source</1> software, meaning no advertising, monetizing, or venture capital, ever. Your donations directly support full-time development of the project. Thank you to the following people:',
     support_on_patreon: 'Support on Patreon',
+    donate_to_lemmy: 'Donate to Lemmy',
+    donate: 'Donate',
     general_sponsors:
       'General Sponsors are those that pledged $10 to $39 to Lemmy.',
     crypto: 'Crypto',