Upgrade Guide

Version 5.1.0 to Version 5.2.0 [Dashboard]

  • Updated Bootstrap to latest version 5.3.2.
  • Removed the scss file and also the folder src/assets/scss/dark/_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/_variables.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

    <div>
    <input
    type="radio"
    value="theme-color-blue"
    className="btn-check"
    name="theme_color"
    id="theme-color-1"
    onClick={() =>
    colorChange("theme-color-blue", {
        "--primary": "#2185F4",
        "--secondary": "#B1BBC6",
    })
    }
    defaultChecked={colorValue.value === "theme-color-blue"}
    />
    <label
    className={`btn btn-border d-block bg-transparent`}
    htmlFor="theme-color-1"
    data-bs-toggle="tooltip"
    data-bs-placement="top"
    data-bs-original-title="Theme-1"
    >
    <svg
    className="customizer-btn"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    width="26"
    height="26"
    >
    {" "}
    <circle cx="12" cy="12" r="10" fill="#2185F4"></circle>{" "}
    <path d="M2,12 a1,1 1 1,0 20,0" fill="#B1BBC6"></path>
    </svg>
    </label>
    </div>

    After

    <div>
     <input
     type="radio"
     value="color-1"
     className="btn-check"
     name="theme_color"
     id="color-1"
     onClick={() => colorChange("color-1")}
     defaultChecked={colorValue.value === "color-1"}
     />
     <label
     className={`btn btn-border d-block bg-transparent`}
     htmlFor="color-1"
     data-bs-toggle="tooltip"
     data-bs-placement="top"
     data-bs-original-title="Theme-1"
     >
     <svg
     className="customizer-btn"
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
     width="26"
     height="26"
     >
     {" "}
     <circle cx="12" cy="12" r="10" fill="#2185F4"></circle>{" "}
     <path d="M2,12 a1,1 1 1,0 20,0" fill="#B1BBC6"></path>
     </svg>
     </label>
     </div>
  • Updated the src/store/setting/state.ts file

    Before

    export const initialState: SettingState = {
                "saveLocal": "sessionStorage",
                "storeKey": "socialvsetting-react",
                "setting": {
                    "app_name": {
                        "value": "Socialv"
                    },
                    "theme_scheme_direction": {
                        "value": "ltr"
                    },
                    "theme_scheme": {
                        "value": "light"
                    },
                    "theme_color": {
                        "colors": {
                            "--primary": "#7016d0",
                            "--secondary": "#aca4bc",
                            "--tertiray": "#3FF0B9",
                            "--success": "#1AA053",
                            "--danger": "#C03221",
                            "--warning": "#F16A1B",
                        },
                        "value": "theme-color-default"
                    },
                    "theme_font_size": {
                        "value": "theme-fs-sm"
                    },
                    "page_layout": {
                        "value": "container"
                    },
                    "sidebar_color": {
                        "value": "sidebar-white"
                    },
                    "sidebar_type": {
                        "value": []
                    },
                    "sidebar_menu_style": {
                        "value": "sidebar-default navs-rounded-all"
                    },
                }
            };

    After

    export const initialState: SettingState = {
                "saveLocal": "sessionStorage",
                "storeKey": "socialvsetting-react",
                "setting": {
                    "app_name": {
                        "value": "Socialv"
                    },
                    "theme_scheme_direction": {
                        "value": "ltr"
                    },
                    "theme_scheme": {
                        "value": "light"
                    },
                    "theme_color": {
                        "colors": {},
                        "value": "default"
                    },
                    "theme_font_size": {
                        "value": "theme-fs-sm"
                    },
                    "page_layout": {
                        "value": "container"
                    },
                    "sidebar_color": {
                        "value": "sidebar-white"
                    },
                    "sidebar_type": {
                        "value": []
                    },
                    "sidebar_menu_style": {
                        "value": "sidebar-default navs-rounded-all"
                    },
                }
            };
  • 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_direction: (state, action) => {
                if (typeof action.payload !== typeof undefined) {
                    state.setting.theme_scheme_direction.value = action.payload;
                }
                updateHtmlAttr({ prop: 'dir', value: state.setting.theme_scheme_direction.value });
                updateStorage(state.saveLocal, state.storeKey, createSettingObj(state));
            },
            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));
            },
  • Updated the src/utilities/setting.js file

    Before

    export const updateDomValueBySetting = (setting, Choices) => {
                                    updateHtmlAttr({ prop: 'dir', value: setting.theme_scheme_direction.value });
                                    updateThemeScheme(setting.theme_scheme.value, Choices, setting.theme_color);
                                    updateHtmlClass(Choices.FSChoice, setting.theme_font_size.value);
                                    updateColorRootVar(setting.theme_scheme.value, setting.theme_color, Choices.ColorChoice);
                                    updateTitle(setting.app_name.value);
            };

    After

    export const updateDomValueBySetting = (setting, Choices) => {
                updateHtmlAttr({ prop: "dir", value: setting.theme_scheme_direction.value });
                updateHtmlAttr({
                    prop: "data-bs-theme-color",
                    value: setting.theme_color.value,
                });
                updateHtmlAttr({ prop: "data-bs-theme", value: setting.theme_scheme.value });
                updateThemeScheme(setting.theme_scheme.value, Choices, setting.theme_color);
                updateHtmlClass(Choices.FSChoice, setting.theme_font_size.value);
                updateTitle(setting.app_name.value);
            };
  • Updated the src/utilities/colors.js file
Previous