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": "streamit-react-frontend",
        "setting": {
            "app_name": {
                "value": "Streamit"
            },
            "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": "streamit-react-frontend",
        "setting": {
            "app_name": {
                "value": "Streamit"
            },
            "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