Web:Client:Add className, id for Appearance.

packages/client/src/pages/PortalSettings/categories/common/appearance.js

@@ -107,6 +107,7 @@ const Appearance = (props) => {
   const array_items = useMemo(
     () => [
       {
+        id: "light-theme",
         key: "0",
         title: t("Profile:LightTheme"),
         content: (
@@ -120,6 +121,7 @@ const Appearance = (props) => {
         ),
       },
       {
+        id: "dark-theme",
         key: "1",
         title: t("Profile:DarkTheme"),
         content: (
@@ -733,7 +735,7 @@ const Appearance = (props) => {
 
         <div className="buttons-container">
           <Button
-            className="button"
+            className="save button"
             label={t("Common:SaveButton")}
             onClick={onSave}
             primary
@@ -742,7 +744,7 @@ const Appearance = (props) => {
           />
 
           <Button
-            className="button"
+            className="edit-current-theme button"
             label={t("Settings:EditCurrentTheme")}
             onClick={onClickEdit}
             size="small"
@@ -750,7 +752,7 @@ const Appearance = (props) => {
           />
           {isShowDeleteButton && (
             <Button
-              className="button"
+              className="delete-theme button"
               label={t("Settings:DeleteTheme")}
               onClick={onOpenDialogDelete}
               size="small"

packages/client/src/pages/PortalSettings/categories/common/sub-components/colorSchemeDialog.js

@@ -123,6 +123,7 @@ const ColorSchemeDialog = (props) => {
         {showSaveButtonDialog && (
           <>
             <Button
+              className="save"
               label={t("Common:SaveButton")}
               size="normal"
               primary
@@ -130,6 +131,7 @@ const ColorSchemeDialog = (props) => {
               onClick={onSaveColorSchemeDialog}
             />
             <Button
+              className="cancel-button"
               label={t("Common:CancelButton")}
               size="normal"
               scale

packages/client/src/pages/PortalSettings/categories/common/sub-components/hexColorPicker.js

@@ -119,7 +119,7 @@ const HexColorPickerComponent = (props) => {
           />
           <Button
             label={t("Common:CancelButton")}
-            className="button"
+            className="cancel-button button"
             size="small"
             scale={true}
             onClick={onCloseHexColorPicker}

packages/client/src/pages/PortalSettings/categories/common/sub-components/modalDialogDelete.js

@@ -33,14 +33,14 @@ const ModalDialogDelete = (props) => {
       <ModalDialog.Body>{t("Settings:DeleteThemeNotice")}</ModalDialog.Body>
       <ModalDialog.Footer>
         <Button
-          className="button-modal"
+          className="delete button-modal"
           label={t("Common:Delete")}
           onClick={onClickDelete}
           primary
           size="normal"
         />
         <Button
-          className="button-modal"
+          className="cancel-button button-modal"
           label={t("Common:CancelButton")}
           size="normal"
           onClick={onClose}