From 70a8f025648fc84058b208b807e663931517e835 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Mon, 4 Jun 2018 21:46:24 -0700
Subject: [PATCH] Add changelog to account menu, make changelog headings
 anchors

---
 app/menus/AccountMenu.js  |  4 ++++
 server/pages/Changelog.js | 13 ++++++++++++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/app/menus/AccountMenu.js b/app/menus/AccountMenu.js
index 7ce948e49..44f9e6080 100644
--- a/app/menus/AccountMenu.js
+++ b/app/menus/AccountMenu.js
@@ -7,6 +7,7 @@ import AuthStore from 'stores/AuthStore';
 import { DropdownMenu, DropdownMenuItem } from 'components/DropdownMenu';
 import {
   developers,
+  changelog,
   githubIssuesUrl,
   mailToUrl,
   spectrumUrl,
@@ -49,6 +50,9 @@ class AccountMenu extends React.Component<Props> {
           API documentation
         </DropdownMenuItem>
         <hr />
+        <DropdownMenuItem href={changelog()} target="_blank">
+          Changelog
+        </DropdownMenuItem>
         <DropdownMenuItem href={spectrumUrl()} target="_blank">
           Community
         </DropdownMenuItem>
diff --git a/server/pages/Changelog.js b/server/pages/Changelog.js
index 2caf0b87a..b866f7fa2 100644
--- a/server/pages/Changelog.js
+++ b/server/pages/Changelog.js
@@ -30,7 +30,9 @@ function Changelog({ releases }: { releases: Release[] }) {
       <Container>
         {releases.map(release => (
           <Article key={release.id}>
-            <h1>{release.name}</h1>
+            <Heading id={release.name}>
+              <a href={`#${release.name}`}>{release.name}</a>
+            </Heading>
             <Time datetime={release.created_at}>
               {format(new Date(release.created_at), 'MMMM Do, YYYY')}
             </Time>
@@ -42,6 +44,15 @@ function Changelog({ releases }: { releases: Release[] }) {
   );
 }
 
+const Heading = styled.h1`
+  a {
+    color: ${color.text};
+  }
+  a:hover {
+    text-decoration: underline;
+  }
+`;
+
 const Time = styled.time`
   color: ${color.slateDark};
   margin-top: -16px;