yujunjun/datahub
2
0
Fork 0
mirror of https://github.com/datahub-project/datahub.git synced 2025-12-05 23:23:42 +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}`); 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 = { module.exports = {
plugins: [ plugins: [
{ {
plugin: CracoAntDesignPlugin, plugin: CracoAntDesignPlugin,
options: { 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 App: React.VFC = () => {
const [dynamicThemeConfig, setDynamicThemeConfig] = useState<Theme | null>(null); const [dynamicThemeConfig, setDynamicThemeConfig] = useState<Theme>(defaultThemeConfig);
useEffect(() => { useEffect(() => {
import(`./conf/theme/${process.env.REACT_APP_THEME_CONFIG}`).then((theme) => { import(`./conf/theme/${process.env.REACT_APP_THEME_CONFIG}`).then((theme) => {
@ -65,22 +65,8 @@ const App: React.VFC = () => {
return register; 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 ( return (
<ThemeProvider theme={theme}> <ThemeProvider theme={dynamicThemeConfig}>
<Router> <Router>
<EntityRegistryContext.Provider value={entityRegistry}> <EntityRegistryContext.Provider value={entityRegistry}>
{/* Temporary: For local testing during development. */} {/* Temporary: For local testing during development. */}

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

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

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

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