Upgrade Guide
Version 4.0.0 to Version 4.1.0
-
Updated Bootstrap to latest version 5.3.2
-
Removed the scss file and also the folder src/assets/scss/custom/variables/_dark.scss
-
Removed the files and folder in the customizer folder and added two new files
- src/assets/scss/customizer/root.scss
- src/assets/scss/customizer/_variable.scss
-
Remove the dark.scss in app.js
import "./assets/scss/dark.scss";
Updated the Color Customizer in src/components/setting/sections/color-customizer.js file
Before
<Collapse in={open}>
<div>
<div className="form-group d-flex justify-content-between align-items-center">
<label htmlFor="custom-primary-color">Primary</label>
<input name="theme_color" data-extra="primary" onInput={(e) => colorChange('custom-color', {"--primary": e.target.value}, true)} type="color" id="custom-primary-color" value={colorValue.colors['--primary']} />
</div>
<div className="form-group d-flex d-flex justify-content-between align-items-center">
<label htmlFor="custom-info-color">Secondary</label>
<input name="theme_color" data-extra="info" onInput={(e) => colorChange('custom-color', {"--info": e.target.value}, true)} type="color" id="custom-info-color" value={colorValue.colors['--info']} />
</div>
</div>
</Collapse>
After
<Collapse in={open}>
<div>
<div className="form-group d-flex justify-content-between align-items-center">
<label htmlFor="custom-primary-color">Primary</label>
<input
name="theme_color"
data-extra="primary"
onInput={(e) =>
colorChange(
"custom",
{ "--primary": e.target.value },
true
)
}
type="color"
id="custom-primary-color"
value={
colorValue.colors["--primary"]
? colorValue.colors["--primary"]
: "#3a57e8"
}
/>
</div>
<div className="form-group d-flex d-flex justify-content-between align-items-center">
<label htmlFor="custom-secondary-color">Secondary</label>
<input
name="theme_color"
data-extra="secondary"
onInput={(e) =>
colorChange(
"custom",
{ "--secondary": e.target.value },
true
)
}
type="color"
id="custom-secondary-color"
value={
colorValue.colors["--secondary"]
? colorValue.colors["--secondary"]
: "#8a92a6"
}
/>
</div>
<div className="form-group d-flex d-flex justify-content-between align-items-center">
<label htmlFor="custom-success-color">Success</label>
<input
name="theme_color"
data-extra="success"
onInput={(e) =>
colorChange(
"custom",
{ "--success": e.target.value },
true
)
}
type="color"
id="custom-success-color"
value={
colorValue.colors["--success"]
? colorValue.colors["--success"]
: "#1aa053"
}
/>
</div>
<div className="form-group d-flex d-flex justify-content-between align-items-center">
<label htmlFor="custom-danger-color">Danger</label>
<input
name="theme_color"
data-extra="danger"
onInput={(e) =>
colorChange(
"custom",
{ "--danger": e.target.value },
true
)
}
type="color"
id="custom-danger-color"
value={
colorValue.colors["--danger"]
? colorValue.colors["--danger"]
: "#c03221"
}
/>
</div>
<div className="form-group d-flex d-flex justify-content-between align-items-center">
<label htmlFor="custom-warning-color">Warning</label>
<input
name="theme_color"
data-extra="warning"
onInput={(e) =>
colorChange(
"custom",
{ "--warning": e.target.value },
true
)
}
type="color"
id="custom-warning-color"
value={
colorValue.colors["--warning"]
? colorValue.colors["--warning"]
: "#f16a1b"
}
/>
</div>
<div className="form-group d-flex d-flex justify-content-between align-items-center">
<label htmlFor="custom-info-color">Info</label>
<input
name="theme_color"
data-extra="info"
onInput={(e) =>
colorChange(
"custom",
{ "--info": e.target.value },
true
)
}
type="color"
id="custom-info-color"
value={
colorValue.colors["--info"]
? colorValue.colors["--info"]
: "#08B1BA"
}
/>
</div>
</div>
</Collapse>
Updated the src/store/setting/state.ts file
Before
export const initialState: SettingState = {
"theme_color": {
"colors": {
"--primary": "#3a57e8",
"--info": "#08B1BA"
},
"value": "theme-color-default"
},
}
// Default Setting State
export const defaultState: SettingDefaultState = {
theme_scheme: {
target: "body",
choices: ["light", "dark", "auto"],
type: "layout_design",
value: "light",
},
theme_color: {
target: "body",
choices: [
"theme-color-blue",
"theme-color-gray",
"theme-color-red",
"theme-color-yellow",
"theme-color-pink",
"theme-color-default",
],
type: "default",
colors: {
"--primary": "#3a57e8",
"--info": "#08B1BA",
},
value: "theme-color-default",
},
}
After
export const initialState: SettingState = {
"theme_color": {
"colors": {},
"value": "theme-color-default"
},
}
// Default Setting State
export const defaultState: SettingDefaultState = {
theme_scheme: {
target: "html",
choices: ["light", "dark", "auto"],
type: "layout_design",
value: "light",
},
theme_color: {
target: "html",
choices: [
"default",
"color-1",
"color-2",
"color-3",
"color-4",
"color-5",
],
type: "default",
colors: {},
value: "default",
},
}
Updated the src/store/setting/reducers.js file
Before
theme_scheme: (state, action) => {
if(typeof action.payload !== typeof undefined) {
state.setting.theme_scheme.value = action.payload
}
updateThemeScheme(state.setting.theme_scheme.value, Choices, state.setting.theme_color)
updateStorage(state.saveLocal, state.storeKey, createSettingObj(state))
},
theme_color: (state, action) => {
if(typeof action.payload !== typeof undefined) {
_.forEach(action.payload.colors, (value, key) => {
state.setting.theme_color.colors[key] = value
})
state.setting.theme_color.value = action.payload.value
}
updateColorRootVar(state.setting.theme_scheme.value, state.setting.theme_color, Choices.ColorChoice)
updateStorage(state.saveLocal, state.storeKey, createSettingObj(state))
},
After
theme_scheme: (state, action) => {
if (typeof action.payload !== typeof undefined) {
state.setting.theme_scheme.value = action.payload;
}
updateHtmlAttr({
prop: "data-bs-theme",
value: state.setting.theme_scheme.value,
});
updateThemeScheme(
state.setting.theme_scheme.value,
Choices,
state.setting.theme_color
);
updateStorage(state.saveLocal, state.storeKey, createSettingObj(state));
},
theme_color: (state, action) => {
if (typeof action.payload !== typeof undefined) {
_.forEach(action.payload.colors, (value, key) => {
state.setting.theme_color.colors[key] = value;
});
state.setting.theme_color.value = action.payload.value;
}
updateHtmlAttr({
prop: "data-bs-theme-color",
value: state.setting.theme_color.value,
});
updateColorRootVar(
state.setting.theme_scheme.value,
state.setting.theme_color,
Choices.ColorChoice
);
updateStorage(state.saveLocal, state.storeKey, createSettingObj(state));
},
Updated the src/utilities/setting.js file
Before
export const updateDomValueBySetting = (setting, Choices) => {
updateThemeScheme(setting.theme_scheme.value, Choices, setting.theme_color)
updateThemeScheme(setting.theme_scheme.value, Choices, setting.theme_color)
}
export const updateDomValueBySetting = (setting, Choices) => {
updateHtmlAttr({ prop: "data-bs-theme-color", value: setting.theme_color.value,});
updateHtmlAttr({ prop: "data-bs-theme", value: setting.theme_scheme.value });
}
Updated the src/utilities/colors.js file
Version 2.2.0 to Version 3.0.0
- Dependencies Upgrade
- Major Bug fixing
Update Data Table
Before
<Table responsive striped className="mb-0" role="grid">
<thead>
<tr>
<th>Companies</th>
<th>Members</th>
<th>Budget</th>
<th>Status</th>
</tr>
</thead>
<tbody>
{
table.map((item, index) => {
return (
#60;tr key={index}>
<td>
<div className="d-flex align-items-center">
<img className="rounded img-fluid avatar-40 me-3 bg-soft-primary"
src={item.image} alt="profile" loading="lazy" />
<h6>{item.name}</h6>
</div>
</td>
<td>
<div className="iq-media-group iq-media-group-1">
{
item.member.map((item1, index1) => {
return (
<Link key={index1} to="#" className="iq-media-1">
<div className="icon iq-icon-box-3 rounded-pill">{item1.text}</div>
</Link>
)
})
}
</div>
</td>
<td>{item.value}</td>
<td>
<div className="d-flex align-items-center mb-2">
<h6>{item.percent}%</h6>
</div>
</td>
</tr>
)
})
}
</tbody>
</Table>
After
<table
className={"table " + className}
width="100%"
ref={tableRef}
iscolumnfilter={iscolumnfilter}
islanguagefilter={islanguagefilter}
>
</table>
After
const router = createBrowserRouter([
{
path: "/",
element: <Index />,
},
...IndexRouters,
],{ basename: process.env.PUBLIC_URL })
ReactDOM.createRoot(document.getElementById('root')).render(
<StrictMode>
<Provider store={store}>
<RouterProvider router={router}>
<App />
</RouterProvider>
</Provider>
</StrictMode>
)
Updated React Router Version 6.4.3
Update index.js src/index.js
Before
ReactDOM.render(
<React.StrictMode>
<BrowserRouter basename={process.env.PUBLIC_URL}>
<App />
</BrowserRouter>
</React.StrictMode>,
document.getElementById('root')
);
After
const router = createBrowserRouter([
{
path: "/",
element: <Index />,
},
...IndexRouters,
],{ basename: process.env.PUBLIC_URL })
ReactDOM.createRoot(document.getElementById('root')).render(
<StrictMode>
<Provider store={store}>
<RouterProvider router={router}>
<App />
</RouterProvider>
</Provider>
</StrictMode>
)
Updated routing in layout
-
Updated src\layouts\dashboard\boxed-fancy.js file
-
Updated src\layouts\dashboard\boxed.js file
-
Updated src\layouts\dashboard\default.js file
-
Updated src\layouts\dashboard\dual-compact.js file
-
Updated src\layouts\dashboard\dual-horizontal.js file
-
Updated src\layouts\dashboard\horizontal.js file
-
Updated src\layouts\dashboard\simple.js file
-
Updated src\views\modules\appointment\layouts\appointment.js file
-
Updated src\views\modules\e-commerce\layouts\e-commerce.js file
-
Updated src\views\modules\file-manager\layouts\file-manager.js file
-
Updated src\views\modules\mail\layouts\mail.js file
-
Updated src\views\modules\plugins\layouts\plugins.js file
-
Updated src\views\modules\social\layouts\social.js file
-
Updated src\views\modules\auth\layouts\auth.js file
Before
<Switch>
<Routes>
<Route path='/' exact element={<Index/>}/>
<Route path='/dashboard' exact element={<Dashboard />}/>
</Routes>
</Switch>
After
export const DefaultRouter = [
{
path: '/',
element: <Index />,
children: [
{
path: 'dashboard',
element: <Dashboard />
},
}
]
Version 2.1.1 to Version 2.2.0
-
Updated bootstrap to latest version 5.2.3
-
-
Updated src/assets/scss/hope-ui-design-system/layout-style/menu_style/_default_sidebar.scss file
-
Updated src/assets/scss/dark/layout-style/menu_style/_default_style.scss file
-
Updated src/assets/scss/dark/layout-style/menu_style/_default-sidebar.scss file
-
Updated src/assets/scss/hope-ui-design-system/layout-style/menu_style/_default_sidebar_responsive.scss file
-
Updated src/assets/scss/customizer/components/dropdown/_dropdown.scss file
-
Replace src/assets/scss/bootstrap folder
-
-
We have added new Variable in the dark mode src/assets/scss/dark/_dark.scss
New Variable Add
$menu-color:#d7dbdf;
-
We have added new classes in the header
-
"header-hover-menu left-border" which are used by-default
Before
<nav className="nav navbar navbar-expand-xl navbar-light iq-navbar">
After
<nav className="nav navbar navbar-expand-xl navbar-light iq-navbar header-hover-menu left-border">
-
-
We have upgrade old dropdown menu variable src/assets/scss/hope-ui-design-system/_variable.scss
-
"Dropdown Variable"
Before
$dropdown-padding-x: 0 !default;
$dropdown-box-shadow: 0 0.625rem 1.875rem rgba($black, .1) !default;
After
$dropdown-padding-x: .5rem !default
$dropdown-box-shadow: 0 10px 15px -3px rgba($black, 10%), 0 4px 6px -2px rgba($black, 5%)
-
Upgrade Guide
Version 1.1.3 to Version 2.0.0
-
Updated bootstrap to latest version 5.2.0
-
Removed all the mixin base scss of the sidebar and converted that into a simple way.
-
In src\assets\scss\hope-ui-design-system\layout-style\ file path has all the new sidebar scss.
-
In src\assets\scss\dark\layout-style\ file path all the dark mode new sidebar scss is given.
-
In src\assets\scss\rtl\components\menu-style\ file path all the RTL mode new sidebar scss is given.
-
Updated src\assets\scss\hope-ui-design-system\layout-style\folder.
-
-
Removed all the mixin base sidebar scss code which is given bellow :
-
In src\assets\scss\hope-ui-design-system\components\menu-style folder has been removedwhere all the sidebar style was given
-
In src\assets\scss\hope-ui-design-system\helper\mixins\ siderbar mixin has been removed
-
_sidebar-nav-item-varient.scss (deleted)
-
_sidebar-varients.scss (deleted)
-
-
In src\assets\scss\dark\components\menu-style\ folder has been deleted.
-
-
We have added new classes in the sidebar which are
-
"sidebar sidebar-base" which are used by-default
-
Only when "left-bordered" class is used at that time "sidebar-default" class will not be used.
-
"sidebar-default" provide the background color to the selected option is the sidebar
Before
<aside className="sidebar sidebar-default"></aside>
After
<aside className="sidebar sidebar-base"></aside>
Before
sidebar_menu_style: { target: '[data-toggle="main-sidebar"]', choices: [ "navs-rounded", "navs-rounded-all", "navs-pill", "navs-pill-all", "left-bordered", "navs-full-width", ], value: "left-bordered", }
After
sidebar_menu_style: { target: '[data-toggle="main-sidebar"]', choices: [ "sidebar-default navs-rounded", "sidebar-default navs-rounded-all", "sidebar-default navs-pill", "sidebar-default navs-pill-all", "left-bordered", "sidebar-default navs-full-width", ], value: "left-bordered", }
-