Web:Client:Fix.

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

@@ -69,7 +69,7 @@ const StyledComponent = styled.div`
   }
 
   .show-custom-functional {
-    display: none;
+    visibility: hidden;
   }
 `;
 

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

@@ -314,7 +314,7 @@ const IconBox = styled.div`
 
   svg {
     path {
-      fill: ${(props) => (props.themePreview === "Light" ? "#FFF" : "#292929")};
+      fill: ${(props) => props.colorCheckImg};
     }
   }
 `;

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

@@ -18,6 +18,7 @@ const Preview = (props) => {
     withBorder,
     withTileActions,
     floatingButtonClass,
+    colorCheckImg,
   } = props;
 
   const [colorPreview, setColorPreview] = useState(previewAccent);
@@ -414,6 +415,7 @@ const Preview = (props) => {
               colorPreview={colorPreview}
               themePreview={themePreview}
               selectThemeId={selectThemeId}
+              colorCheckImg={colorCheckImg}
             >
               <ButtonPlusIcon />
             </IconBox>

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

@@ -38,8 +38,6 @@ const Appearance = (props) => {
     t,
   } = props;
 
-  const [previewTheme, setPreviewTheme] = useState("Light theme");
-
   const [showColorSchemeDialog, setShowColorSchemeDialog] = useState(false);
 
   const [headerColorSchemeDialog, setHeaderColorSchemeDialog] = useState(
@@ -107,9 +105,9 @@ const Appearance = (props) => {
         title: t("Profile:LightTheme"),
         content: (
           <Preview
-            previewTheme={previewTheme}
             previewAccent={previewAccent}
             selectThemeId={selectThemeId}
+            colorCheckImg={colorCheckImg}
             themePreview="Light"
           />
         ),
@@ -119,25 +117,25 @@ const Appearance = (props) => {
         title: t("Profile:DarkTheme"),
         content: (
           <Preview
-            previewTheme={previewTheme}
             previewAccent={previewAccent}
             selectThemeId={selectThemeId}
+            colorCheckImg={colorCheckImg}
             themePreview="Dark"
           />
         ),
       },
     ],
-    [previewAccent, previewTheme, selectThemeId, tReady]
+    [previewAccent, selectThemeId, colorCheckImg, tReady]
   );
 
   useEffect(() => {
-    if (appearanceTheme.length === 11) {
+    if (appearanceTheme.length === 9) {
       setAbilityAddTheme(false);
     } else {
       setAbilityAddTheme(true);
     }
 
-    if (appearanceTheme.length === 8) {
+    if (appearanceTheme.length === 6) {
       setIsShowDeleteButton(false);
     } else {
       setIsShowDeleteButton(true);
@@ -250,10 +248,6 @@ const Appearance = (props) => {
     [selectThemeId, checkImg]
   );
 
-  const onChangePreviewTheme = (e) => {
-    setPreviewTheme(e.title);
-  };
-
   const onSave = useCallback(async () => {
     setIsDisabledSaveButton(true);
 
@@ -429,7 +423,7 @@ const Appearance = (props) => {
   const onSaveNewThemes = useCallback(
     async (theme) => {
       try {
-        await sendAppearanceTheme({ themes: [theme] });
+        await sendAppearanceTheme({ theme: theme });
         await getAppearanceTheme();
 
         toastr.success(t("Settings:SuccessfullySaveSettingsMessage"));
@@ -443,7 +437,7 @@ const Appearance = (props) => {
   const onSaveChangedThemes = useCallback(
     async (editTheme) => {
       try {
-        await sendAppearanceTheme({ themes: [editTheme] });
+        await sendAppearanceTheme({ theme: editTheme });
         await getAppearanceTheme();
         setPreviewAccent(editTheme.main.accent);
 
@@ -664,7 +658,7 @@ const Appearance = (props) => {
           onSaveColorSchemeDialog={onSaveColorSchemeDialog}
         />
         <div className="header preview-header">{t("Common:Preview")}</div>
-        <TabContainer elements={array_items} onSelect={onChangePreviewTheme} />
+        <TabContainer elements={array_items} />
 
         <div className="buttons-container">
           <Button