Skip to content

Commit

Permalink
♻️ Rewrite chakraUI to use baseprovider #1444
Browse files Browse the repository at this point in the history
  • Loading branch information
@millianapia
millianapia committed Jan 12, 2023
1 parent fb80c29 commit 293a03a
Showing 1 changed file with 16 additions and 4 deletions.
20 changes: 16 additions & 4 deletions web/pages/_app.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import type { AppProps } from 'next/app'
import type { NextPage } from 'next'
import type { ReactNode } from 'react'
import { ChakraProvider } from '@chakra-ui/react'
import { ChakraBaseProvider } from '@chakra-ui/react'
import Head from 'next/head'
import { useRouter } from 'next/router'
import { GlobalStyle } from '../styles/globalStyles'
Expand All @@ -18,6 +18,7 @@ import { enableDynatrace, disableDynatrace } from '../pageComponents/Dynatrace'
import { SWRConfig } from 'swr'
import { SkipNavLink as NewSkipNavLink, SkipNavContent } from '@chakra-ui/skip-nav'
import { Flags } from '../common/helpers/datasetHelpers'
import styled from 'styled-components'

// import archivedStyles from '@equinor/energyvision-legacy-css'
// import { AppInsightsContext, AppInsightsErrorBoundary } from '@microsoft/applicationinsights-react-js'
Expand Down Expand Up @@ -104,11 +105,22 @@ function MyApp({ Component, pageProps }: CustomAppProps): JSX.Element {

useConsentState('statistics', enableStatisticsCookies, disableStatisticsCookies)

const StyledSkipLink = styled(NewSkipNavLink)`

This comment has been minimized.

Sign in to view

Copy link
@SvSven

SvSven Jan 18, 2023

Contributor

Should move this outside of the app component, using styled() inside another component produces a warning:

The component _app__StyledSkipLink with the id of "_app__StyledSkipLink-sc-abe7e5a1-0" has been created dynamically.
You may see this warning because you've called styled inside another component.
To resolve this only create new StyledComponents outside of any render method and function component.

This comment has been minimized.

Sign in to view

Copy link
@millianapia

millianapia Jan 18, 2023

Author Contributor

moved it there temporary to test styling, accidentally made it permanent when i forgot to move it. It is now moved out of the function
&:focus {
background: white;
padding: var(--space-medium);
border: 1px solid black;
position: sticky;
border-radius: 7px;
margin: var(--space-medium);
top: 10%;
}
`
return (
<SWRConfig>
<ChakraProvider>
<ChakraBaseProvider>
<ErrorBoundary FallbackComponent={ErrorFallback} onError={HandleBoundaryError}>
{Flags.IS_DEV && <NewSkipNavLink style={{ top: '10%' }}>Skip to Content</NewSkipNavLink>}
{Flags.IS_DEV && <StyledSkipLink>Skip to Content</StyledSkipLink>}
<>
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
Expand All @@ -123,7 +135,7 @@ function MyApp({ Component, pageProps }: CustomAppProps): JSX.Element {
)}
</>
</ErrorBoundary>
</ChakraProvider>
</ChakraBaseProvider>
</SWRConfig>
)
}
Expand Down

0 comments on commit 293a03a

Please sign in to comment.