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

  1. Dependencies Upgrade
  2. 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
    • Before

      <aside className="sidebar sidebar-default"></aside>

      After

      <aside className="sidebar sidebar-base"></aside>
    • Only when "left-bordered" class is used at that time "sidebar-default" class will not be used.
    • 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: &#x27;[data-toggle=&#x22;main-sidebar&#x22;]&#x27;,
          choices: [
          &#x22;sidebar-default navs-rounded&#x22;,
          &#x22;sidebar-default navs-rounded-all&#x22;,
          &#x22;sidebar-default navs-pill&#x22;,
          &#x22;sidebar-default navs-pill-all&#x22;,
          &#x22;left-bordered&#x22;,
          &#x22;sidebar-default navs-full-width&#x22;,
          ],
          value: &#x22;left-bordered&#x22;,
      }
    • "sidebar-default" provide the background color to the selected option is the sidebar