blue border on navlink removed

dashboard/package-lock.json

@@ -10,6 +10,7 @@
 			"license": "ISC",
 			"dependencies": {
 				"@chakra-ui/react": "^1.7.3",
+				"@emotion/core": "^11.0.0",
 				"@emotion/react": "^11.7.1",
 				"@emotion/styled": "^11.6.0",
 				"@types/react": "^17.0.38",
@@ -17,6 +18,7 @@
 				"@types/react-router-dom": "^5.3.2",
 				"dayjs": "^1.10.7",
 				"esbuild": "^0.14.9",
+				"focus-visible": "^5.2.0",
 				"framer-motion": "^5.5.5",
 				"graphql": "^16.2.0",
 				"lodash": "^4.17.21",
@@ -978,6 +980,11 @@
 				"stylis": "4.0.13"
 			}
 		},
+		"node_modules/@emotion/core": {
+			"version": "11.0.0",
+			"resolved": "https://registry.npmjs.org/@emotion/core/-/core-11.0.0.tgz",
+			"integrity": "sha512-w4sE3AmHmyG6RDKf6mIbtHpgJUSJ2uGvPQb8VXFL7hFjMPibE8IiehG8cMX3Ztm4svfCQV6KqusQbeIOkurBcA=="
+		},
 		"node_modules/@emotion/hash": {
 			"version": "0.8.0",
 			"resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
@@ -1667,6 +1674,11 @@
 				"node": ">=10"
 			}
 		},
+		"node_modules/focus-visible": {
+			"version": "5.2.0",
+			"resolved": "https://registry.npmjs.org/focus-visible/-/focus-visible-5.2.0.tgz",
+			"integrity": "sha512-Rwix9pBtC1Nuy5wysTmKy+UjbDJpIfg8eHjw0rjZ1mX4GNLz1Bmd16uDpI3Gk1i70Fgcs8Csg2lPm8HULFg9DQ=="
+		},
 		"node_modules/framer-motion": {
 			"version": "5.5.5",
 			"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-5.5.5.tgz",
@@ -2517,8 +2529,7 @@
 		"@chakra-ui/css-reset": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/@chakra-ui/css-reset/-/css-reset-1.1.1.tgz",
-			"integrity": "sha512-+KNNHL4OWqeKia5SL858K3Qbd8WxMij9mWIilBzLD4j2KFrl/+aWFw8syMKth3NmgIibrjsljo+PU3fy2o50dg==",
+			"integrity": "sha512-+KNNHL4OWqeKia5SL858K3Qbd8WxMij9mWIilBzLD4j2KFrl/+aWFw8syMKth3NmgIibrjsljo+PU3fy2o50dg=="
-			"requires": {}
 		},
 		"@chakra-ui/descendant": {
 			"version": "2.1.1",
@@ -3038,6 +3049,11 @@
 				"stylis": "4.0.13"
 			}
 		},
+		"@emotion/core": {
+			"version": "11.0.0",
+			"resolved": "https://registry.npmjs.org/@emotion/core/-/core-11.0.0.tgz",
+			"integrity": "sha512-w4sE3AmHmyG6RDKf6mIbtHpgJUSJ2uGvPQb8VXFL7hFjMPibE8IiehG8cMX3Ztm4svfCQV6KqusQbeIOkurBcA=="
+		},
 		"@emotion/hash": {
 			"version": "0.8.0",
 			"resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
@@ -3117,8 +3133,7 @@
 		"@graphql-typed-document-node/core": {
 			"version": "3.1.1",
 			"resolved": "https://registry.npmjs.org/@graphql-typed-document-node/core/-/core-3.1.1.tgz",
-			"integrity": "sha512-NQ17ii0rK1b34VZonlmT2QMJFI70m0TRwbknO/ihlbatXyaktDhN/98vBiUU6kNBPljqGqyIrl2T4nY2RpFANg==",
+			"integrity": "sha512-NQ17ii0rK1b34VZonlmT2QMJFI70m0TRwbknO/ihlbatXyaktDhN/98vBiUU6kNBPljqGqyIrl2T4nY2RpFANg=="
-			"requires": {}
 		},
 		"@popperjs/core": {
 			"version": "2.11.0",
@@ -3540,6 +3555,11 @@
 				"tslib": "^2.0.3"
 			}
 		},
+		"focus-visible": {
+			"version": "5.2.0",
+			"resolved": "https://registry.npmjs.org/focus-visible/-/focus-visible-5.2.0.tgz",
+			"integrity": "sha512-Rwix9pBtC1Nuy5wysTmKy+UjbDJpIfg8eHjw0rjZ1mX4GNLz1Bmd16uDpI3Gk1i70Fgcs8Csg2lPm8HULFg9DQ=="
+		},
 		"framer-motion": {
 			"version": "5.5.5",
 			"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-5.5.5.tgz",
@@ -3823,8 +3843,7 @@
 		"react-icons": {
 			"version": "4.3.1",
 			"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.3.1.tgz",
-			"integrity": "sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==",
+			"integrity": "sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ=="
-			"requires": {}
 		},
 		"react-is": {
 			"version": "16.13.1",
@@ -4010,8 +4029,7 @@
 		"use-callback-ref": {
 			"version": "1.2.5",
 			"resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.2.5.tgz",
-			"integrity": "sha512-gN3vgMISAgacF7sqsLPByqoePooY3n2emTH59Ur5d/M8eg4WTWu1xp8i8DHjohftIyEx0S08RiYxbffr4j8Peg==",
+			"integrity": "sha512-gN3vgMISAgacF7sqsLPByqoePooY3n2emTH59Ur5d/M8eg4WTWu1xp8i8DHjohftIyEx0S08RiYxbffr4j8Peg=="
-			"requires": {}
 		},
 		"use-sidecar": {
 			"version": "1.0.5",

dashboard/package.json

@@ -12,6 +12,7 @@
 	"license": "ISC",
 	"dependencies": {
 		"@chakra-ui/react": "^1.7.3",
+		"@emotion/core": "^11.0.0",
 		"@emotion/react": "^11.7.1",
 		"@emotion/styled": "^11.6.0",
 		"@types/react": "^17.0.38",
@@ -19,6 +20,7 @@
 		"@types/react-router-dom": "^5.3.2",
 		"dayjs": "^1.10.7",
 		"esbuild": "^0.14.9",
+		"focus-visible": "^5.2.0",
 		"framer-motion": "^5.5.5",
 		"graphql": "^16.2.0",
 		"lodash": "^4.17.21",

dashboard/src/App.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Fragment } from "react"
+import { Global, css } from '@emotion/core'
 import { ChakraProvider, extendTheme } from '@chakra-ui/react';
 import { BrowserRouter } from 'react-router-dom';
 import { createClient, Provider } from 'urql';
@@ -19,12 +20,15 @@ const queryClient = createClient({
 	requestPolicy: 'network-only',
 });
 
+
+
 const theme = extendTheme({
 	styles: {
 		global: {
 			'html, body, #root': {
 				fontFamily: 'Avenir, Helvetica, Arial, sans-serif',
 				height: '100%',
+				outline: "none"
 			},
 		},
 	},
@@ -38,10 +42,10 @@ const theme = extendTheme({
 export default function App() {
 	return (
 		<Fragment>
-		<ChakraProvider theme={theme}>
+		   <ChakraProvider theme={theme}>
-			<Provider value={queryClient}>
+			  <Provider value={queryClient}>
 				<BrowserRouter basename="/dashboard">
-					<AuthContextProvider>
+					<AuthContextProvider>	
 						<AppRoutes />
 					</AuthContextProvider>
 				</BrowserRouter>

dashboard/src/components/Menu.tsx

@@ -140,7 +140,7 @@ export const Sidebar = ({ onClose, ...rest }: SidebarProps) => {
       {...rest}
     >
       <Flex h="20" alignItems="center" mx="18" justifyContent="space-between">
-        <Link to="/">
+        <NavLink to="/">
           <Flex alignItems="center">
             <Image
               src="https://authorizer.dev/images/logo.png"
@@ -151,7 +151,7 @@ export const Sidebar = ({ onClose, ...rest }: SidebarProps) => {
               AUTHORIZER
             </Text>
           </Flex>
-        </Link>
+        </NavLink>
         <CloseButton display={{ base: "flex", md: "none" }} onClick={onClose} />
       </Flex>
 
@@ -159,12 +159,13 @@ export const Sidebar = ({ onClose, ...rest }: SidebarProps) => {
         <AccordionItem textAlign="center" border="none" w="100%">
           {LinkItems.map((link) =>
             link?.subRoutes ? (
-              <Link key={link.name} to={link.route}>
+              <NavLink key={link.name} to={link.route}>
                 <AccordionButton>
                   <Text fontSize="md">
                     <NavItem
                       icon={link.icon}
                       color={pathname === link.route ? "blue.500" : ""}
+                      style={{outline: "unset"}}
                       height={12}
                       ml={-1}
                       mb={isNotSmallerScreen ? -1 : -4}
@@ -197,9 +198,9 @@ export const Sidebar = ({ onClose, ...rest }: SidebarProps) => {
                     </NavLink>
                   ))}
                 </AccordionPanel>
-              </Link>
+              </NavLink>
             ) : (
-              <Link key={link.name} to={link.route}>
+              <NavLink key={link.name} to={link.route}>
                 {" "}
                 <Text fontSize="md" w="100%" mt={-2}>
                   <NavItem
@@ -211,7 +212,7 @@ export const Sidebar = ({ onClose, ...rest }: SidebarProps) => {
                     {link.name}
                   </NavItem>{" "}
                 </Text>
-              </Link>
+              </NavLink>
             )
           )}
           <Link

dashboard/src/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
+import 'focus-visible/dist/focus-visible';
 
 ReactDOM.render(<App />, document.getElementById('root'));