[Glitch] Add Wrapstodon footer links

Port c06eb371e6 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/features/annual_report/shared_page.module.scss

@@ -13,12 +13,13 @@ $mobile-breakpoint: 540px;
 }
 
 .footer {
-  text-align: center;
-  margin-top: 2rem;
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
   align-items: center;
+  gap: 0.75rem;
+  margin-top: 2rem;
+  font-size: 16px;
+  text-align: center;
   color: var(--color-text-secondary);
 }
 
@@ -26,3 +27,19 @@ $mobile-breakpoint: 540px;
   width: 2rem;
   opacity: 0.6;
 }
+
+.nav {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+
+  a:any-link {
+    color: inherit;
+    text-decoration: underline;
+    text-underline-offset: 0.2em;
+  }
+
+  a:hover {
+    color: var(--color-text-primary);
+  }
+}

app/javascript/flavours/glitch/features/annual_report/shared_page.tsx

@@ -3,6 +3,7 @@ import type { FC } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { IconLogo } from '@/flavours/glitch/components/logo';
+import { me } from '@/flavours/glitch/initial_state';
 
 import { AnnualReport } from './index';
 import classes from './shared_page.module.scss';
@@ -18,6 +19,28 @@ export const WrapstodonSharedPage: FC = () => {
           defaultMessage='Generated with {heart} by the Mastodon team'
           values={{ heart: '♥' }}
         />
+        <nav className={classes.nav}>
+          <a href='/about'>
+            <FormattedMessage
+              id='footer.about_this_server'
+              defaultMessage='About'
+            />
+          </a>
+          {!me && (
+            <a href='https://joinmastodon.org/servers'>
+              <FormattedMessage
+                id='annual_report.shared_page.sign_up'
+                defaultMessage='Sign up'
+              />
+            </a>
+          )}
+          <a href='https://joinmastodon.org/sponsors'>
+            <FormattedMessage
+              id='annual_report.shared_page.donate'
+              defaultMessage='Donate'
+            />
+          </a>
+        </nav>
       </footer>
     </main>
   );