yujunjun/datahub
2
0
Fork 0
mirror of https://github.com/datahub-project/datahub.git synced 2025-12-05 07:04:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(react): fix theming test in react and simplifying api (#2215)

Browse Source
This commit is contained in:
Gabe Lyons 2021-03-11 10:06:48 -08:00 committed by GitHub
parent 1f1518ce10
commit 53cc7aebab
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 43 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
datahub-web-react/craco.config.js
View File

@ -3,12 +3,20 @@ const CracoAntDesignPlugin = require('craco-antd');
const themeConfig = require(`./src/conf/theme/${process.env.REACT_APP_THEME_CONFIG}`);
function addLessPrefixToKeys(styles) {
const output = {};
Object.keys(styles).forEach((key) => {
output[`@${key}`] = styles[key];
});
return output;
}
module.exports = {
plugins: [
{
plugin: CracoAntDesignPlugin,
options: {
customizeTheme: themeConfig.styles,
customizeTheme: addLessPrefixToKeys(themeConfig.styles),
},
},
],

18
datahub-web-react/src/App.tsx
View File

@ -47,7 +47,7 @@ const client = new ApolloClient({
});
const App: React.VFC = () => {
const [dynamicThemeConfig, setDynamicThemeConfig] = useState<Theme | null>(null);
const [dynamicThemeConfig, setDynamicThemeConfig] = useState<Theme>(defaultThemeConfig);
useEffect(() => {
import(`./conf/theme/${process.env.REACT_APP_THEME_CONFIG}`).then((theme) => {
@ -65,22 +65,8 @@ const App: React.VFC = () => {
return register;
}, []);
const theme: Theme = useMemo(() => {
const overridesWithoutPrefix: { [key: string]: any } = {};
const themeConfig = dynamicThemeConfig || defaultThemeConfig;
Object.assign(overridesWithoutPrefix, themeConfig.styles);
Object.keys(overridesWithoutPrefix).forEach((key) => {
overridesWithoutPrefix[key.substring(1)] = overridesWithoutPrefix[key];
delete overridesWithoutPrefix[key];
});
return {
...themeConfig,
styles: overridesWithoutPrefix as Theme['styles'],
};
}, [dynamicThemeConfig]);
return (
<ThemeProvider theme={theme}>
<ThemeProvider theme={dynamicThemeConfig}>
<Router>
<EntityRegistryContext.Provider value={entityRegistry}>
{/* Temporary: For local testing during development. */}

32
datahub-web-react/src/conf/theme/theme_dark.config.json
View File

@ -1,21 +1,21 @@
{
"styles": {
"@border-radius-base": "4px",
"@layout-header-background": "#333E4C",
"@layout-header-color": "white",
"@layout-body-background": "#333E4C",
"@component-background": "#333E4C",
"@body-background": "#333E4C",
"@border-color-base": "white",
"@text-color": "fade(white, 85%)",
"@text-color-secondary": "fade(white, 45%)",
"@heading-color": "fade(white, 85%)",
"@background-color-light": "#4b5b71",
"@divider-color": "fade(white, 6%)",
"@disabled-color": "fade(white, 25%)",
"@steps-nav-arrow-color": "fade(white, 25%)",
"@homepage-background-upper-fade": "#FFFFFF",
"@homepage-background-lower-fade": "#333E4C"
"border-radius-base": "4px",
"layout-header-background": "#333E4C",
"layout-header-color": "white",
"layout-body-background": "#333E4C",
"component-background": "#333E4C",
"body-background": "#333E4C",
"border-color-base": "white",
"text-color": "fade(white, 85%)",
"text-color-secondary": "fade(white, 45%)",
"heading-color": "fade(white, 85%)",
"background-color-light": "#4b5b71",
"divider-color": "fade(white, 6%)",
"disabled-color": "fade(white, 25%)",
"steps-nav-arrow-color": "fade(white, 25%)",
"homepage-background-upper-fade": "#FFFFFF",
"homepage-background-lower-fade": "#333E4C"
},
"assets": {
"logoUrl": "/assets/logo.png"

32
datahub-web-react/src/conf/theme/theme_light.config.json
View File

@ -1,21 +1,21 @@
{
"styles": {
"@border-radius-base": "8px",
"@layout-header-background": "#333E4C",
"@layout-header-color": "white",
"@layout-body-background": "white",
"@component-background": "white",
"@body-background": "white",
"@border-color-base": "#333E4C",
"@text-color": "fade(black, 85%)",
"@text-color-secondary": "fade(black, 45%)",
"@heading-color": "fade(black, 85%)",
"@background-color-light": "hsv(0, 0, 98%)",
"@divider-color": "fade(black, 6%)",
"@disabled-color": "fade(black, 25%)",
"@steps-nav-arrow-color": "fade(black, 25%)",
"@homepage-background-upper-fade": "#132935",
"@homepage-background-lower-fade": "#FFFFFF"
"border-radius-base": "8px",
"layout-header-background": "#333E4C",
"layout-header-color": "white",
"layout-body-background": "white",
"component-background": "white",
"body-background": "white",
"border-color-base": "#333E4C",
"text-color": "fade(black, 85%)",
"text-color-secondary": "fade(black, 45%)",
"heading-color": "fade(black, 85%)",
"background-color-light": "hsv(0, 0, 98%)",
"divider-color": "fade(black, 6%)",
"disabled-color": "fade(black, 25%)",
"steps-nav-arrow-color": "fade(black, 25%)",
"homepage-background-upper-fade": "#132935",
"homepage-background-lower-fade": "#FFFFFF"
},
"assets": {
"logoUrl": "/assets/logo.png"