openreplay/frontend/app/initialize.tsx
Shekar Siri 80462e4534
change(ui): projects settings (#2924)
* change(ui): projects revamtp (wip)

* change(ui): projects revamtp (wip)

* change(ui): projects revamp - project form

* change(ui): projects revamp - capture rate tab

* change(ui): projects revamp - gdpr

* change(ui): projects revamp - reset state

* change(ui): projects revamp - progress avatar of samplerate, scroll etc.,

* change(ui): projects revamp - sync projects in list

* change(ui): projects revamp - project menu improvements
2025-01-08 11:50:22 +01:00

95 lines
2.7 KiB
TypeScript

import './styles/index.css';
import './styles/global.css';
import React from 'react';
import { createRoot } from 'react-dom/client';
import './init';
import Router from './Router';
import { StoreProvider, RootStore } from './mstore';
import { HTML5Backend } from 'react-dnd-html5-backend';
import { DndProvider } from 'react-dnd';
import { ConfigProvider, App, theme, ThemeConfig } from 'antd';
import colors from 'App/theme/colors';
import { BrowserRouter } from 'react-router-dom';
import { Notification, MountPoint } from 'UI';
import {
QueryClient,
QueryClientProvider
} from '@tanstack/react-query';
// @ts-ignore
window.getCommitHash = () => console.log(window.env.COMMIT_HASH);
const queryClient = new QueryClient();
const customTheme: ThemeConfig = {
// algorithm: theme.compactAlgorithm,
components: {
Layout: {
headerBg: colors['gray-lightest'],
siderBg: colors['gray-lightest']
},
Segmented: {
itemSelectedBg: '#FFFFFF',
itemSelectedColor: colors['main']
},
Menu: {
colorPrimary: colors.teal,
colorBgContainer: colors['gray-lightest'],
colorFillTertiary: colors['gray-lightest'],
colorBgLayout: colors['gray-lightest'],
subMenuItemBg: colors['gray-lightest'],
itemHoverBg: colors['active-blue'],
itemHoverColor: colors['teal'],
itemActiveBg: colors['active-blue'],
itemSelectedBg: colors['active-blue'],
itemSelectedColor: colors['teal'],
itemMarginBlock: 0,
// itemPaddingInline: 50,
// iconMarginInlineEnd: 14,
collapsedWidth: 180
},
Button: {
colorPrimary: colors.teal
},
},
token: {
colorPrimary: colors.teal,
colorPrimaryActive: '#394EFF',
colorBgLayout: colors['gray-lightest'],
colorBgContainer: colors['white'],
colorLink: colors['teal'],
colorLinkHover: colors['teal-dark'],
borderRadius: 4,
fontSize: 14,
fontFamily: '\'Roboto\', \'ArialMT\', \'Arial\'',
fontWeightStrong: 400,
}
};
document.addEventListener('DOMContentLoaded', () => {
const container = document.getElementById('app');
// @ts-ignore
const root = createRoot(container);
// const theme = window.localStorage.getItem('theme');
root.render(
<QueryClientProvider client={queryClient}>
<ConfigProvider theme={customTheme}>
<App>
<StoreProvider store={new RootStore()}>
<DndProvider backend={HTML5Backend}>
<BrowserRouter>
<Notification />
<Router />
</BrowserRouter>
</DndProvider>
<MountPoint />
</StoreProvider>
</App>
</ConfigProvider>
</QueryClientProvider>
);
});