Web:Client:Added a change in the color of the checkmark when choosing a theme and when hovering over a theme.

packages/client/src/pages/PortalSettings/categories/common/Appearance/StyledApperance.js

@@ -28,7 +28,6 @@ const StyledComponent = styled.div`
     padding: 12px 0 24px 0;
     display: flex;
   }
-
   .box {
     width: 46px;
     height: 46px;
@@ -42,10 +41,6 @@ const StyledComponent = styled.div`
       url("/static/images/plus.theme.svg") no-repeat center;
   }
 
-  .check-img {
-    padding: 18px 0 0 15px;
-  }
-
   .add-theme {
     background: #d0d5da;
     padding-top: 16px;
@@ -60,6 +55,35 @@ const StyledComponent = styled.div`
   .button:not(:last-child) {
     margin-right: 8px;
   }
+
+  .check-img {
+    padding: 18px 0 0 15px;
+    svg path {
+      fill: ${(props) => props.colorCheckImg};
+    }
+  }
 `;
 
-export { StyledComponent };
+const StyledTheme = styled.div`
+  width: 46px;
+  height: 46px;
+  margin-right: 12px;
+  border-radius: 8px;
+  cursor: pointer;
+
+  .check-hover {
+    visibility: hidden;
+  }
+
+  &:hover {
+    .check-hover {
+      padding: 18px 0 0 15px;
+      visibility: visible;
+      opacity: 0.5;
+      svg path {
+        fill: ${(props) => props.colorCheckImgHover};
+      }
+    }
+  }
+`;
+export { StyledComponent, StyledTheme };

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

@@ -19,8 +19,8 @@ import { isMobileOnly } from "react-device-detect";
 
 import Loader from "./sub-components/loaderAppearance";
 
-import { StyledComponent } from "./Appearance/StyledApperance.js";
+import { StyledComponent, StyledTheme } from "./Appearance/StyledApperance.js";
-
+import { ReactSVG } from "react-svg";
 import BreakpointWarning from "../../../../components/BreakpointWarning/index";
 import ModalDialogDelete from "./sub-components/modalDialogDelete";
 import hexToRgba from "hex-to-rgba";
@@ -76,6 +76,14 @@ const Appearance = (props) => {
   const [previewAccent, setPreviewAccent] = useState(
     currentColorScheme.main.accent
   );
+
+  const [colorCheckImg, setColorCheckImg] = useState(
+    currentColorScheme.text.accent
+  );
+  const [colorCheckImgHover, setColorCheckImgHover] = useState(
+    currentColorScheme.text.accent
+  );
+
   const [selectThemeId, setSelectThemeId] = useState(selectedThemeId);
 
   const [isDisabledSaveButton, setIsDisabledSaveButton] = useState(true);
@@ -89,7 +97,7 @@ const Appearance = (props) => {
   const [visibleDialog, setVisibleDialog] = useState(false);
 
   const checkImg = (
-    <img className="check-img" src="/static/images/check.white.svg" />
+    <ReactSVG className="check-img" src="static/images/check.white.svg" />
   );
 
   const array_items = useMemo(
@@ -140,10 +148,27 @@ const Appearance = (props) => {
     onCheckView();
     window.addEventListener("resize", onCheckView);
 
+    const standard = document.querySelector(".standard");
+    const custom = document.querySelector(".custom");
+
+    standard.addEventListener("mouseover", (e) => {
+      onColorCheckImgHover(e.target.id);
+    });
+
+    custom.addEventListener("mouseover", (e) => {
+      onColorCheckImgHover(e.target.id);
+    });
+
     return () => window.removeEventListener("resize", onCheckView);
   }, []);
 
   useEffect(() => {
+    const colorCheckImg = appearanceTheme.find(
+      (theme) => theme.id == selectThemeId
+    ).text.accent;
+
+    setColorCheckImg(colorCheckImg);
+
     if (appearanceTheme.find((theme) => theme.id == selectThemeId).name) {
       setIsDisabledEditButton(true);
       setIsDisabledDeleteButton(true);
@@ -193,6 +218,18 @@ const Appearance = (props) => {
     previewAccent,
   ]);
 
+  const onColorCheckImgHover = useCallback(
+    (id) => {
+      if (!id) return;
+
+      const colorCheckImg = appearanceTheme.find((theme) => theme.id == id).text
+        .accent;
+
+      setColorCheckImgHover(colorCheckImg);
+    },
+    [appearanceTheme]
+  );
+
   const onCheckView = () => {
     if (isMobileOnly || window.innerWidth < 600) {
       setViewMobile(true);
@@ -248,18 +285,6 @@ const Appearance = (props) => {
     }
   };
 
-  const onCheckStandardThemeRender = (item) => {
-    if (
-      !item.name ||
-      (theme.isBase && item.name === "grey") ||
-      (!theme.isBase && item.name === "black")
-    ) {
-      return false;
-    }
-
-    return true;
-  };
-
   const onClickDeleteModal = useCallback(async () => {
     try {
       await deleteAppearanceTheme(selectThemeId);
@@ -544,29 +569,31 @@ const Appearance = (props) => {
         onClickDelete={onClickDeleteModal}
       />
 
-      <StyledComponent>
+      <StyledComponent colorCheckImg={colorCheckImg}>
         <div className="header">{t("Common:Color")}</div>
 
         <div className="theme-standard">
           <div className="theme-name">{t("Common:Standard")}</div>
 
-          <div className="theme-container">
+          <div className="theme-container standard">
             {appearanceTheme.map((item, index) => {
-              {
+              if (!item.name) return;
-                return (
+              return (
-                  onCheckStandardThemeRender(item) && (
+                <StyledTheme
-                    <div
+                  key={index}
-                      key={index}
+                  id={item.id}
-                      id={item.id}
+                  colorCheckImgHover={colorCheckImgHover}
-                      style={{ background: item.main.accent }}
+                  style={{ background: item.main.accent }}
-                      className="box"
+                  onClick={() => onColorSelection(item)}
-                      onClick={() => onColorSelection(item)}
+                >
-                    >
+                  {onShowCheck(item.id)}
-                      {onShowCheck(item.id)}
+
-                    </div>
+                  <ReactSVG
-                  )
+                    className="check-hover"
-                );
+                    src="static/images/check.white.svg"
-              }
+                  />
+                </StyledTheme>
+              );
             })}
           </div>
         </div>
@@ -575,20 +602,26 @@ const Appearance = (props) => {
           <div className="theme-name">Custom</div>
 
           <div className="theme-container">
-            {appearanceTheme.map((item, index) => {
+            <div className="custom">
-              if (item.name) return;
+              {appearanceTheme.map((item, index) => {
-              return (
+                if (item.name) return;
-                <div
+                return (
-                  key={index}
+                  <StyledTheme
-                  id={item.id}
+                    key={index}
-                  style={{ background: item.main.accent }}
+                    id={item.id}
-                  className="box"
+                    style={{ background: item.main.accent }}
-                  onClick={() => onColorSelection(item)}
+                    colorCheckImgHover={colorCheckImgHover}
-                >
+                    onClick={() => onColorSelection(item)}
-                  {onShowCheck(item.id)}
+                  >
-                </div>
+                    {onShowCheck(item.id)}
-              );
+                    <ReactSVG
-            })}
+                      className="check-hover"
+                      src="static/images/check.white.svg"
+                    />
+                  </StyledTheme>
+                );
+              })}
+            </div>
 
             <div
               data-for="theme-add"