Upgrade Guide

Version 1.0.1 to Version 2.0.0

• 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": "quisetting-react",
      "setting": {
          "app_name": {
              "value": "Qompac UI"
          },
          "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": "quisetting-react",
      "setting": {
          "app_name": {
              "value": "Qompac UI"
          },
          "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