From 6e2ea3ac4b9f48fb8172a5e108b8d0fb63ab131f Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Thu, 21 May 2020 22:22:04 -0700
Subject: [PATCH] fix: overflow menu on history revision is incorrect color
 when selected closes #1140

---
 app/components/DocumentHistory/DocumentHistory.js     |  1 +
 app/components/DocumentHistory/components/Revision.js | 11 +++++++----
 app/menus/RevisionMenu.js                             | 10 ++++++++--
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/app/components/DocumentHistory/DocumentHistory.js b/app/components/DocumentHistory/DocumentHistory.js
index ff23d1060..b22c27c3c 100644
--- a/app/components/DocumentHistory/DocumentHistory.js
+++ b/app/components/DocumentHistory/DocumentHistory.js
@@ -110,6 +110,7 @@ class DocumentHistory extends React.Component<Props> {
                   revision={revision}
                   document={document}
                   showMenu={index !== 0}
+                  selected={this.props.match.params.revisionId === revision.id}
                 />
               ))}
             </ArrowKeyNavigation>
diff --git a/app/components/DocumentHistory/components/Revision.js b/app/components/DocumentHistory/components/Revision.js
index 3bca0ae1d..ee277c588 100644
--- a/app/components/DocumentHistory/components/Revision.js
+++ b/app/components/DocumentHistory/components/Revision.js
@@ -16,14 +16,15 @@ import { documentHistoryUrl } from 'utils/routeHelpers';
 
 type Props = {
   theme: Object,
-  showMenu: () => void,
+  showMenu: boolean,
+  selected: boolean,
   document: Document,
   revision: Revision,
 };
 
 class RevisionListItem extends React.Component<Props> {
   render() {
-    const { revision, document, showMenu, theme } = this.props;
+    const { revision, document, showMenu, selected, theme } = this.props;
 
     return (
       <StyledNavLink
@@ -43,7 +44,9 @@ class RevisionListItem extends React.Component<Props> {
           <StyledRevisionMenu
             document={document}
             revision={revision}
-            label={<MoreIcon color={theme.white} />}
+            label={
+              <MoreIcon color={selected ? theme.white : theme.textTertiary} />
+            }
           />
         )}
       </StyledNavLink>
@@ -59,7 +62,7 @@ const StyledAvatar = styled(Avatar)`
 const StyledRevisionMenu = styled(RevisionMenu)`
   position: absolute;
   right: 16px;
-  top: 16px;
+  top: 20px;
 `;
 
 const StyledNavLink = styled(NavLink)`
diff --git a/app/menus/RevisionMenu.js b/app/menus/RevisionMenu.js
index aa29d3f3c..caa37702c 100644
--- a/app/menus/RevisionMenu.js
+++ b/app/menus/RevisionMenu.js
@@ -17,6 +17,7 @@ type Props = {
   document: Document,
   revision: Revision,
   className?: string,
+  label: React.Node,
   ui: UiStore,
 };
 
@@ -33,14 +34,19 @@ class RevisionMenu extends React.Component<Props> {
   };
 
   render() {
-    const { className, onOpen, onClose } = this.props;
+    const { className, label, onOpen, onClose } = this.props;
     const url = `${window.location.origin}${documentHistoryUrl(
       this.props.document,
       this.props.revision.id
     )}`;
 
     return (
-      <DropdownMenu onOpen={onOpen} onClose={onClose} className={className}>
+      <DropdownMenu
+        onOpen={onOpen}
+        onClose={onClose}
+        className={className}
+        label={label}
+      >
         <DropdownMenuItem onClick={this.handleRestore}>
           Restore version
         </DropdownMenuItem>