FAQ
For example, I want to remove the theme setting button from the default layout. First of all, I need to go to the libs/components/src/lib/AppLayout/DefaultLayout/index.js file, and to remove the customizer button, I need to remove <AppThemeSetting/> Tag.
In case you are using another layout go to the libs/components/src/lib/AppLayout/{Layout}/index.js and remove the <AppThemeSetting/> Tag.
There are a few simple steps to move apps into a separate project.
- 1.Copy the Mail folder into your project from the apps
- 2.Add the Mail app's route into your project and link it to your navigation(You can update the base path 'apps/mail' to as your project need.)
- 3.Copy AppsContainer from the core components
- 4.Copy the MailApp action and reducer file from the redux and link it to your app redux.
- 5.In case you want to use a fake API and database, please copy the DB file and mock API into your project(In case you want to integrate it with your API Please link your API to mail)
- 6.Please make sure you initialize APIs in your demo version.
If you are using the CRA version then go to libs/modules/src/lib/auth/Signin/SigninFirebase.js and remove the initialValues and follow a similar way for other types of authentication.
libs/modules/src/lib/auth/Signin/SigninFirebase.js
initialValues={{// remove this attribute of Formik
email: '[email protected]',
password: '[email protected][email protected]',
}}
If you want to assign the dynamic URL then you need to get your URL in the apps/source/src/core/AppRoutes/index.js file and assign it to the path: '/',.
const anonymousStructure = {
routes: errorPagesConfigs.concat([
{
path: '/',
element: <Navigate to={initialUrl} />,
},
{
path: '*',
element: <Navigate to="/error-pages/error-404" />,
},
]),
};
To change the logo you need to go to the file libs/components/src/lib/AppLayout/components/AppLogo/index.js. You can modify this file according to your requirement.
import React from 'react';
import { Box } from '@mui/material';
import { useThemeContext } from '@crema/context/ThemeContextProvider';
import { alpha } from '@mui/material/styles';
import { ReactComponent as Logo } from '../../../../assets/icon/logo.svg';
import { ReactComponent as LogoText } from '../../../../assets/icon/logo_text.svg';
const AppLogo = () => {
const { theme } = useThemeContext();
return (
<Box
sx={{
height: { xs: 56, sm: 70 },
padding: 2.5,
display: 'flex',
flexDirection: 'row',
cursor: 'pointer',
alignItems: 'center',
justifyContent: 'center',
'& svg': {
height: { xs: 40, sm: 45 },
},
}}
className="app-logo"
>
<Logo fill={theme.palette.primary.main} />
<Box
sx={{
mt: 1,
display: { xs: 'none', md: 'block' },
'& svg': {
height: { xs: 25, sm: 30 },
},
}}
>
<LogoText fill={alpha(theme.palette.text.primary, 0.8)} />
</Box>
</Box>
);
};
export default AppLogo;
To change the Crema Current font you need to follow the following steps.
1. Go to the file apps/source/src/index.html and Replace the current Poppins font with your current font <link href="https://fonts.googleapis.com/css2?family=Poppins:[email protected];200;300;400;500;600&display=swap"rel="stylesheet">
2. Go to the file libs/constants/src/defaultConfig.js
and replace the font family the in the Typography
export const defaultTheme = {
theme: {
...
typography: {
fontFamily: ['Poppins', 'sans-serif'].join(','),
},
...
};
3. Go to the file libs/constants/src/AppEnums.js
update the Font weight according to your project.
export enum Fonts {
LIGHT = "300",
REGULAR = "400",
MEDIUM = "500",
SEMI_BOLD = "600",
BOLD = "700",
}
4. Go to the file apps/source/src/assets/styles/base.css
and replace the current font family 'Poppins' with your current font in this file
Please let us know if you missed anything in the docs. We will add that asap.
Last modified 15d ago