Extend getThemeForScope function to accept layer

Author: csillag

src/app/components/ThemeByScope/index.tsx

@@ -4,13 +4,15 @@ import { ThemeProvider } from '@mui/material/styles'
 import { getThemeForScope } from '../../../styles/theme'
 import CssBaseline from '@mui/material/CssBaseline'
 import { fixedNetwork } from '../../utils/route-utils'
+import { Layer } from '../../../oasis-nexus/api'
 
-export const ThemeByScope: FC<{ network: Network; isRootTheme: boolean; children: React.ReactNode }> = ({
-  network,
-  isRootTheme,
-  children,
-}) => (
-  <ThemeProvider theme={getThemeForScope(network)}>
+export const ThemeByScope: FC<{
+  network: Network
+  layer?: Layer
+  isRootTheme: boolean
+  children: React.ReactNode
+}> = ({ network, layer, isRootTheme, children }) => (
+  <ThemeProvider theme={getThemeForScope(network, layer)}>
     {isRootTheme && <CssBaseline />}
     {children}
   </ThemeProvider>

src/app/pages/RoutingErrorPage/index.tsx

@@ -10,7 +10,7 @@ import { Network } from '../../../types/network'
 export const RoutingErrorPage: FC = () => {
   const scope = useScopeParam()
   return (
-    <ThemeByScope isRootTheme={true} network={scope?.network ?? Network.mainnet}>
+    <ThemeByScope isRootTheme={true} network={scope?.network ?? Network.mainnet} layer={scope?.layer}>
       <PageLayout>
         <Divider variant="layout" />
         <ErrorDisplay error={useRouteError()} />

src/routes.tsx

@@ -59,11 +59,14 @@ import { ConsensusAccountTransactionsCard } from './app/pages/ConsensusAccountDe
 import { FC, useEffect } from 'react'
 import { AnalyticsConsentProvider } from './app/components/AnalyticsConsent'
 
-const ScopeSpecificPart = () => (
-  <ThemeByScope isRootTheme={true} network={useRequiredScopeParam().network}>
-    <Outlet />
-  </ThemeByScope>
-)
+const ScopeSpecificPart = () => {
+  const { network, layer } = useRequiredScopeParam()
+  return (
+    <ThemeByScope isRootTheme={true} network={network} layer={layer}>
+      <Outlet />
+    </ThemeByScope>
+  )
+}
 
 /**
  * In case of being restricted to a specific layer or layers, jump to a dashboard

src/styles/theme/index.ts

@@ -2,14 +2,15 @@ import { Network } from '../../types/network'
 import { defaultTheme } from './defaultTheme'
 import { testnetTheme } from './testnet/theme'
 import type { Theme } from '@mui/material/styles/createTheme'
+import { Layer } from '../../oasis-nexus/api'
 
 export { defaultTheme } from './defaultTheme'
 export { testnetTheme } from './testnet/theme'
 
 export const tooltipDelay = 500
 export const typingDelay = 1000
 
-export const getThemeForScope = (network: Network): Theme => {
+export const getThemeForScope = (network: Network, layer?: Layer): Theme => {
   switch (network) {
     case Network.mainnet:
       return defaultTheme