devstack/authorizer
4
0
Fork 0
Code Pull Requests Actions Activity

blue border on navlink removed

Browse Source
This commit is contained in:
akash.dutta 2022-05-07 22:34:26 +05:30
parent d9b49ca932
commit d5ad4a6e55
5 changed files with 43 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
dashboard/package-lock.json generated
View File

@ -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==",
"requires": {}
"integrity": "sha512-+KNNHL4OWqeKia5SL858K3Qbd8WxMij9mWIilBzLD4j2KFrl/+aWFw8syMKth3NmgIibrjsljo+PU3fy2o50dg=="
},
"@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==",
"requires": {}
"integrity": "sha512-NQ17ii0rK1b34VZonlmT2QMJFI70m0TRwbknO/ihlbatXyaktDhN/98vBiUU6kNBPljqGqyIrl2T4nY2RpFANg=="
},
"@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==",
"requires": {}
"integrity": "sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ=="
},
"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==",
"requires": {}
"integrity": "sha512-gN3vgMISAgacF7sqsLPByqoePooY3n2emTH59Ur5d/M8eg4WTWu1xp8i8DHjohftIyEx0S08RiYxbffr4j8Peg=="
},
"use-sidecar": {
"version": "1.0.5",

2
dashboard/package.json
View File

@ -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",

8
dashboard/src/App.tsx
View File

@ -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,8 +42,8 @@ const theme = extendTheme({
export default function App() {
return (
<Fragment>
<ChakraProvider theme={theme}>
<Provider value={queryClient}>
<ChakraProvider theme={theme}>
<Provider value={queryClient}>
<BrowserRouter basename="/dashboard">
<AuthContextProvider>
<AppRoutes />

13
dashboard/src/components/Menu.tsx
View File

@ -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

1
dashboard/src/index.tsx
View File

@ -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'));