Improve logic for figuring out back button icon

2 files changed, 15 insertions, 5 deletions

diff --git a/gui/src/renderer/components/NavigationBar.tsx b/gui/src/renderer/components/NavigationBar.tsx
index d07b918d56..ee316de783 100644
--- a/gui/src/renderer/components/NavigationBar.tsx
+++ b/gui/src/renderer/components/NavigationBar.tsx
@@ -1,9 +1,10 @@
 import React, { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef } from 'react';
+import styled from 'styled-components';
 
 import { colors } from '../../config.json';
 import { messages } from '../../shared/gettext';
 import { useAppContext } from '../context';
-import { useHistory } from '../lib/history';
+import { transitions, useHistory } from '../lib/history';
 import { useCombinedRefs } from '../lib/utilityHooks';
 import CustomScrollbars, { CustomScrollbarsRef, IScrollEvent } from './CustomScrollbars';
 import InfoButton from './InfoButton';
@@ -186,7 +187,9 @@ export const TitleBarItem = React.memo(function TitleBarItemT(props: ITitleBarIt
 
 export function BackBarItem() {
   const history = useHistory();
-  const backIcon = useMemo(() => history.length > 2, []);
+  // Compare the transition name with dismiss to infer wheter or not the view will slide
+  // horizontally or vertically and then use matching button.
+  const backIcon = useMemo(() => history.getPopTransition().name !== transitions.dismiss.name, []);
   const { parentBackAction } = useContext(BackActionContext);
   const iconSource = backIcon ? 'icon-back' : 'icon-close-down';
   const ariaLabel = backIcon ? messages.gettext('Back') : messages.gettext('Close');
diff --git a/gui/src/renderer/lib/history.tsx b/gui/src/renderer/lib/history.tsx
index af851a01d4..741c298da6 100644
--- a/gui/src/renderer/lib/history.tsx
+++ b/gui/src/renderer/lib/history.tsx
@@ -139,6 +139,13 @@ export default class History {
     return nextIndex >= 0 && nextIndex < this.entries.length;
   }
 
+  public getPopTransition(steps = 1) {
+    // The back transition should be based on the last view to be popped, i.e. the one with the
+    // lowest index.
+    const transition = this.entries[this.index - steps + 1].state.transition;
+    return oppositeTransition(transition);
+  }
+
   // This returns this object casted as History from the History module. The difference between this
   // one and the one in the history module is that this one has stricter types for the paths.
   // Instead of accepting any string it's limited to the paths we actually support. But this history
@@ -183,13 +190,13 @@ export default class History {
 
   private popImpl(n = 1): ITransitionSpecification | undefined {
     if (this.canGo(-n)) {
+      const transition = this.getPopTransition(n);
+
       this.lastAction = 'POP';
       this.index -= n;
-
-      const transition = this.entries[this.index + 1].state.transition;
       this.entries = this.entries.slice(0, this.index + 1);
 
-      return oppositeTransition(transition);
+      return transition;
     } else {
       return undefined;
     }