updated code based on latest suggestions

Author: CsB-Polymesh

src/layouts/SecondaryKeys/components/NoSecondaryKeysView/index.tsx

@@ -7,6 +7,7 @@ import {
   StyledInfo,
   StyledLink,
   StyledLinkGroup,
+  StyledNavLink,
 } from './styles';
 
 export const NoSecondaryKeysView = () => (
@@ -16,11 +17,15 @@ export const NoSecondaryKeysView = () => (
     </StyledIcon>
     <StyledTitle>No secondary keys attached</StyledTitle>
     <StyledInfo>
-      No secondary keys are currently associated with this identity. Add
-      secondary keys and set their permissions from the Authorizations page.
+      No secondary keys are currently associated with this identity.
+      <br />
+      First, add a secondary key from the Authorizations page. Then return here
+      to set its permissions.
     </StyledInfo>
     <StyledLinkGroup>
-      <StyledLink href={PATHS.AUTHORIZATIONS}>Go to Authorizations</StyledLink>
+      <StyledNavLink to={PATHS.AUTHORIZATIONS}>
+        Go to Authorizations
+      </StyledNavLink>
       <StyledLink
         href="https://developers.polymesh.network/identity/advanced/secondary-keys/"
         target="_blank"

src/layouts/SecondaryKeys/components/NoSecondaryKeysView/styles.ts

@@ -1,3 +1,4 @@
+import { NavLink } from 'react-router-dom';
 import styled from 'styled-components';
 
 export const StyledContainer = styled.section`
@@ -70,3 +71,19 @@ export const StyledLinkGroup = styled.div`
   width: 100%;
   align-items: center;
 `;
+
+export const StyledNavLink = styled(NavLink)`
+  font-size: 16px;
+  line-height: 150%;
+  color: ${({ theme }) => theme.colors.textPink};
+  text-decoration: underline;
+  text-align: center;
+
+  &:hover {
+    opacity: 0.8;
+  }
+
+  @media screen and (max-width: 767px) {
+    font-size: 15px;
+  }
+`;