Web: Client: JavascriptSDK: hint images for options in dark mode were corrected

packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/Manager.js

@@ -59,12 +59,12 @@ import ColumnsUrl from "PUBLIC_DIR/images/sdk-presets_columns.react.svg?url";
 import ActionButtonUrl from "PUBLIC_DIR/images/sdk-presets_action-button.react.svg?url";
 import SearchUrl from "PUBLIC_DIR/images/sdk-presets_search.react.svg?url";
 import HeaderUrl from "PUBLIC_DIR/images/sdk-presets_header.react.svg?url";
-import LeftMenuDarkUrl from "PUBLIC_DIR/images/sdk-presets_left-menu_dark.react.svg?url";
-import TitleDarkUrl from "PUBLIC_DIR/images/sdk-presets_title_dark.react.svg?url";
-import ColumnsDarkUrl from "PUBLIC_DIR/images/sdk-presets_columns_dark.react.svg?url";
-import ActionButtonDarkUrl from "PUBLIC_DIR/images/sdk-presets_action-button_dark.react.svg?url";
-import SearchDarkUrl from "PUBLIC_DIR/images/sdk-presets_search_dark.react.svg?url";
-import HeaderDarkUrl from "PUBLIC_DIR/images/sdk-presets_header_dark.react.svg?url";
+import LeftMenuDarkUrl from "PUBLIC_DIR/images/sdk-presets_left-menu_dark.png?url";
+import TitleDarkUrl from "PUBLIC_DIR/images/sdk-presets_title_dark.png?url";
+import ColumnsDarkUrl from "PUBLIC_DIR/images/sdk-presets_columns_dark.png?url";
+import ActionButtonDarkUrl from "PUBLIC_DIR/images/sdk-presets_action-button_dark.png?url";
+import SearchDarkUrl from "PUBLIC_DIR/images/sdk-presets_search_dark.png?url";
+import HeaderDarkUrl from "PUBLIC_DIR/images/sdk-presets_header_dark.png?url";
 
 const showPreviewThreshold = 720;
 
@@ -851,7 +851,7 @@ const Manager = (props) => {
                     <TooltipContent
                       title={t("Menu")}
                       description={t("MenuDescription")}
-                      img={LeftMenuUrl}
+                      img={theme.isBase ? LeftMenuUrl : LeftMenuDarkUrl}
                     />
                   }
                 />
@@ -872,7 +872,7 @@ const Manager = (props) => {
                     <TooltipContent
                       title={t("Common:Title")}
                       description={t("ManagerTitleDescription")}
-                      img={TitleUrl}
+                      img={theme.isBase ? TitleUrl : TitleDarkUrl}
                     />
                   }
                 />
@@ -892,7 +892,7 @@ const Manager = (props) => {
                     <TooltipContent
                       title={t("SettingUpColumns")}
                       description={t("SettingUpColumnsDescription")}
-                      img={ColumnsUrl}
+                      img={theme.isBase ? ColumnsUrl : ColumnsDarkUrl}
                     />
                   }
                 />
@@ -912,7 +912,7 @@ const Manager = (props) => {
                     <TooltipContent
                       title={t("ActionButton")}
                       description={t("ActionButtonDescription")}
-                      img={ActionButtonUrl}
+                      img={theme.isBase ? ActionButtonUrl : ActionButtonDarkUrl}
                     />
                   }
                 />
@@ -932,7 +932,7 @@ const Manager = (props) => {
                     <TooltipContent
                       title={t("SearchBlock")}
                       description={t("ManagerSearchBlockDescription")}
-                      img={SearchUrl}
+                      img={theme.isBase ? SearchUrl : SearchDarkUrl}
                     />
                   }
                 />
@@ -953,7 +953,7 @@ const Manager = (props) => {
                     <TooltipContent
                       title={t("Header")}
                       description={t("HeaderDescription")}
-                      img={HeaderUrl}
+                      img={theme.isBase ? HeaderUrl : HeaderDarkUrl}
                     />
                   }
                 />

packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/SimpleRoom.js

@@ -59,8 +59,8 @@ import { RoomsType } from "@docspace/shared/enums";
 import TitleUrl from "PUBLIC_DIR/images/sdk-presets_title.react.svg?url";
 import SearchUrl from "PUBLIC_DIR/images/sdk-presets_search.react.svg?url";
 
-import TitleDarkUrl from "PUBLIC_DIR/images/sdk-presets_title_dark.react.svg?url";
-import SearchDarkUrl from "PUBLIC_DIR/images/sdk-presets_search_dark.react.svg?url";
+import TitleDarkUrl from "PUBLIC_DIR/images/sdk-presets_title_dark.png?url";
+import SearchDarkUrl from "PUBLIC_DIR/images/sdk-presets_search_dark.png?url";
 
 const showPreviewThreshold = 720;
 

packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/TooltipContent.js

@@ -55,6 +55,10 @@ const HeaderContainer = styled.header`
 
 const ImgWrapper = styled.div`
   margin-top: 16px;
+
+  img {
+    width: 100%;
+  }
 `;
 
 export const TooltipContent = ({ title, description, img }) => {