Use go-back instead of going to overview from the auth management (#1139)

* go back instead of home

* modifying the onAction instead

* go back if possible otherwise go home

* delete unused css

packages/extension-ui/src/Popup/AuthManagement/AccountManagement.tsx

@@ -37,7 +37,7 @@ function AccountManagement ({ className }: Props): React.ReactElement<Props> {
   const _onApprove = useCallback(
     (): void => {
       updateAuthorization(selectedAccounts, url)
-        .then(() => onAction('/auth-list'))
+        .then(() => onAction('..'))
         .catch(console.error);
     },
     [onAction, selectedAccounts, url]

packages/extension-ui/src/Popup/index.tsx

@@ -5,7 +5,7 @@ import type { AccountJson, AccountsContext, AuthorizeRequest, MetadataRequest, S
 import type { SettingsStruct } from '@polkadot/ui-settings/types';
 
 import React, { useCallback, useEffect, useState } from 'react';
-import { Route, Switch } from 'react-router';
+import { Route, Switch, useHistory } from 'react-router';
 
 import { PHISHING_PAGE_REDIRECT } from '@polkadot/extension-base/defaults';
 import { canDerive } from '@polkadot/extension-base/utils';
@@ -77,16 +77,24 @@ export default function Popup (): React.ReactElement {
   const [signRequests, setSignRequests] = useState<null | SigningRequest[]>(null);
   const [isWelcomeDone, setWelcomeDone] = useState(false);
   const [settingsCtx, setSettingsCtx] = useState<SettingsStruct>(startSettings);
+  const history = useHistory();
 
   const _onAction = useCallback(
     (to?: string): void => {
       setWelcomeDone(window.localStorage.getItem('welcome_read') === 'ok');
 
-      if (to) {
-        window.location.hash = to;
+      if (!to) {
+        return;
       }
+
+      to === '..'
+        // if we can't go gack from there, go to the home
+        ? history.length === 1
+          ? history.push('/')
+          : history.goBack()
+        : window.location.hash = to;
     },
-    []
+    [history]
   );
 
   useEffect((): void => {

packages/extension-ui/src/partials/Header.tsx

@@ -5,10 +5,11 @@ import type { ThemeProps } from '../types';
 
 import { faArrowLeft, faCog, faPlusCircle, faSearch } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import styled from 'styled-components';
 
 import logo from '../assets/pjs.svg';
+import { ActionContext } from '../components';
 import InputFilter from '../components/InputFilter';
 import Link from '../components/Link';
 import useOutsideClick from '../hooks/useOutsideClick';
@@ -43,6 +44,7 @@ function Header ({ children, className = '', onFilter, showAdd, showBackArrow, s
   const setMenuRef = useRef(null);
   const isConnected = useMemo(() => connectedTabsUrl.length >= 1
     , [connectedTabsUrl]);
+  const onAction = useContext(ActionContext);
 
   useEffect(() => {
     if (!showConnectedAccounts) {
@@ -91,21 +93,21 @@ function Header ({ children, className = '', onFilter, showAdd, showBackArrow, s
     [_onChangeFilter, isSearchOpen]
   );
 
+  const _onBackArrowClick = useCallback(
+    () => onAction('..')
+    , [onAction]);
+
   return (
     <div className={`${className} ${smallMargin ? 'smallMargin' : ''}`}>
       <div className='container'>
         <div className='branding'>
           {showBackArrow
             ? (
-              <Link
-                className='backlink'
-                to='/'
-              >
-                <FontAwesomeIcon
-                  className='arrowLeftIcon'
-                  icon={faArrowLeft}
-                />
-              </Link>
+              <FontAwesomeIcon
+                className='arrowLeftIcon'
+                icon={faArrowLeft}
+                onClick={_onBackArrowClick}
+              />
             )
             : (
               <img
@@ -300,17 +302,7 @@ export default React.memo(styled(Header)(({ theme }: Props) => `
   .arrowLeftIcon {
     color: ${theme.labelColor};
     margin-right: 1rem;
-  }
-
-  .backlink {
-    color: ${theme.labelColor};
-    min-height: 52px;
-    text-decoration: underline;
-    width: min-content;
-
-    &:visited {
-      color: ${theme.labelColor};
-    }
+    cursor: pointer;
   }
 
   &.smallMargin {