Improve logic for figuring out back button icon

1 files changed, 5 insertions, 2 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');