Remove light theme

centrifuge · Aug 26, 2024 · 4eeceed · 4eeceed
1 parent 59ee626
commit 4eeceed
Show file tree

Hide file tree

Showing 10 changed files with 14 additions and 204 deletions.
diff --git a/centrifuge-app/src/components/DebugFlags/config.ts b/centrifuge-app/src/components/DebugFlags/config.ts
@@ -38,7 +38,6 @@ export type Key =
   | 'persistDebugFlags'
   | 'showUnusedFlags'
   | 'allowInvestBelowMin'
-  | 'alternativeTheme'
   | 'editPoolConfig'
   | 'editPoolVisibility'
   | 'showAdvancedAccounts'
@@ -59,11 +58,6 @@ export const flagsConfig = {
     default: false,
     type: 'checkbox',
   },
-  alternativeTheme: {
-    alwaysShow: true,
-    default: false,
-    type: 'checkbox',
-  },
   convertAddress: {
     Component: ConvertAddressDialogWithButton,
     alwaysShow: true,

diff --git a/centrifuge-app/src/components/Menu/IssuerMenu.tsx b/centrifuge-app/src/components/Menu/IssuerMenu.tsx
@@ -71,13 +71,13 @@ export function IssuerMenu({ defaultOpen = false, children }: IssuerMenuProps) {
         id={`${id}-menu`}
         aria-labelledby={`${id}-button`}
         aria-expanded={!!open}
-        position={['absolute', 'absolute', 'absolute', 'static']}
+        position={['absolute', 'absolute', 'absolute', 'relative', 'static']}
         top={['auto', 'auto', 0, 'auto']}
         bottom={[offset, offset, 'auto']}
         left={[1, 1, offset, offset, 'auto']}
         width={[fullWidth, fullWidth, 200, '100%']}
         mt={[0, 0, 0, 1]}
-        zIndex={10}
+        zIndex={20}
       >
         {isLarge ? (
           <Stack as="ul" gap={1}>

diff --git a/centrifuge-app/src/components/Root.tsx b/centrifuge-app/src/components/Root.tsx
@@ -145,6 +145,7 @@ const router = createHashRouter([
       { path: '/nav-management/:pid', element: <NavManagementPage />, handle: { component: NavManagementPage } },
       { path: '*', element: <NotFoundPage />, handle: { component: NotFoundPage } },
     ],
+    errorElement: <NotFoundPage />,
   },
 ])
 
@@ -169,23 +170,14 @@ export function prefetchRoute(to: string | NavLinkProps['to']) {
 
 export function Root() {
   const [debugState, setDebugState] = React.useState(initialFlagsState)
-  const isThemeToggled = debugState.alternativeTheme
 
   return (
     <>
       <HelmetProvider>
         <Head />
       </HelmetProvider>
       <QueryClientProvider client={queryClient}>
-        <FabricProvider
-          theme={
-            !isThemeToggled
-              ? config.themes[config.defaultTheme]
-              : config.defaultTheme === 'dark'
-              ? config.themes.light
-              : config.themes.dark
-          }
-        >
+        <FabricProvider theme={config.themes.light}>
           <GlobalStyle />
           <FabricGlobalStyle />
           <CentrifugeProvider config={centConfig}>

diff --git a/centrifuge-app/src/config.ts b/centrifuge-app/src/config.ts
@@ -1,6 +1,6 @@
 import { TransactionOptions } from '@centrifuge/centrifuge-js'
 import { EvmChains } from '@centrifuge/centrifuge-react'
-import { altairDark, centrifugeLight } from '@centrifuge/fabric'
+import { centrifugeLight } from '@centrifuge/fabric'
 import arbitrumLogo from '@centrifuge/fabric/assets/logos/arbitrum.svg'
 import assetHubLogo from '@centrifuge/fabric/assets/logos/assethub.svg'
 import baseLogo from '@centrifuge/fabric/assets/logos/base.svg'
@@ -42,35 +42,12 @@ const lightTheme: DefaultTheme = {
     },
   },
 }
-const darkTheme: DefaultTheme = {
-  ...altairDark,
-  sizes: {
-    ...altairDark.sizes,
-    mainContent: 1800,
-  },
-  colors: {
-    ...altairDark.colors,
-    placeholderBackground: altairDark.colors.backgroundSecondary,
-  },
-  typography: {
-    ...altairDark.typography,
-    headingLarge: {
-      fontSize: [24, 24, 36],
-      lineHeight: 1.25,
-      fontWeight: 600,
-      color: 'textPrimary',
-    },
-  },
-}
 
 type EnvironmentConfig = {
   name: string
   logo: React.ComponentType<any>[]
   network: 'altair' | 'centrifuge'
-  themes: {
-    light: DefaultTheme
-    dark: DefaultTheme
-  }
+  themes: { light: DefaultTheme }
   defaultTheme: 'light' | 'dark'
   baseCurrency: 'USD'
   assetClasses: Record<'Public credit' | 'Private credit', string[]>
@@ -86,10 +63,7 @@ const ALTAIR: EnvironmentConfig = {
   name: 'Pools on Altair',
   logo: [LogoAltair, LogoAltairText],
   network: 'altair',
-  themes: {
-    light: lightTheme,
-    dark: darkTheme,
-  },
+  themes: { light: lightTheme },
   defaultTheme: 'dark',
   baseCurrency: 'USD',
   assetClasses: { 'Private credit': ['Art NFTs'], 'Public credit': [] },
@@ -102,7 +76,6 @@ const CENTRIFUGE: EnvironmentConfig = {
   network: 'centrifuge',
   themes: {
     light: lightTheme,
-    dark: darkTheme,
   },
   defaultTheme: 'light',
   baseCurrency: 'USD',

diff --git a/fabric/src/theme/altairLight.ts b/fabric/src/theme/altairLight.ts
@@ -1,15 +1,15 @@
 import { baseTheme } from './tokens/baseTheme'
 import { brandAltair } from './tokens/brandAltair'
 import { blueScale, grayScale, yellowScale } from './tokens/colors'
-import { modeLight } from './tokens/modeLight'
+import { colorTheme } from './tokens/theme'
 import { FabricTheme } from './types'
 
 export const altairLight: FabricTheme = {
   ...baseTheme,
   scheme: 'light',
   colors: {
     ...brandAltair,
-    ...modeLight.colors,
+    ...colorTheme.colors,
     primarySelectedBackground: blueScale[500],
     secondarySelectedBackground: blueScale[50],
     focus: blueScale[500],

diff --git a/fabric/src/theme/centrifugeDark.ts b/fabric/src/theme/centrifugeDark.ts
diff --git a/fabric/src/theme/centrifugeLight.ts b/fabric/src/theme/centrifugeLight.ts
@@ -1,15 +1,15 @@
 import { baseTheme } from './tokens/baseTheme'
 import { brandCentrifuge } from './tokens/brandCentrifuge'
 import { blueScale, grayScale, yellowScale } from './tokens/colors'
-import { modeLight } from './tokens/modeLight'
+import { colorTheme } from './tokens/theme'
 import { FabricTheme } from './types'
 
 export const centrifugeLight: FabricTheme = {
   ...baseTheme,
   scheme: 'light',
   colors: {
     ...brandCentrifuge,
-    ...modeLight.colors,
+    ...colorTheme.colors,
     primarySelectedBackground: blueScale[500],
     secondarySelectedBackground: blueScale[50],
     focus: blueScale[500],

diff --git a/fabric/src/theme/index.ts b/fabric/src/theme/index.ts
@@ -1,5 +1,4 @@
 export * from './altairDark'
 export * from './altairLight'
-export * from './centrifugeDark'
 export * from './centrifugeLight'
 export * from './types'
diff --git a/fabric/src/theme/tokens/modeDark.ts b/fabric/src/theme/tokens/modeDark.ts
diff --git a/fabric/src/theme/tokens/modeLight.ts → fabric/src/theme/tokens/theme.ts b/fabric/src/theme/tokens/modeLight.ts → fabric/src/theme/tokens/theme.ts
@@ -17,7 +17,7 @@ const statusPromoteBg = '#f8107114'
 const black = '#252B34'
 const gold = '#FFC500'
 
-const lightColors = {
+const colors = {
   textPrimary: grayScale[900],
   textSecondary: grayScale[800],
   textDisabled: grayScale[500],
@@ -120,6 +120,6 @@ const lightColors = {
   shadowButtonInverted: '#E0E7FF',
 }
 
-export const modeLight = {
-  colors: lightColors,
+export const colorTheme = {
+  colors,
 }